next-mdx-remote v4 (#737)

components/NoteMeta/NoteMeta.module.css

@@ -0,0 +1,78 @@
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.825em;
+  line-height: 2.3;
+  letter-spacing: 0.04em;
+  color: var(--medium);
+}
+
+.meta a {
+  color: inherit;
+  background: none;
+  padding-bottom: 0;
+}
+
+.meta > div {
+  display: inline-flex;
+  margin-right: 1.6em;
+  white-space: nowrap;
+}
+
+.meta > div:last-of-type {
+  /* fix potential layout shift when number of hits loads */
+  min-width: 7em;
+  margin-right: 0;
+}
+
+.icon {
+  margin-right: 0.6em;
+}
+
+.date a,
+.edit a {
+  display: inline-flex;
+}
+
+.tags {
+  white-space: normal;
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.tags .tag {
+  text-transform: lowercase;
+  white-space: nowrap;
+  margin-right: 0.75em;
+}
+
+.tags .tag::before {
+  content: "#"; /* cosmetically hashtagify tags */
+  padding-right: 0.125em;
+  color: var(--light);
+}
+
+.tags .tag:last-of-type {
+  margin-right: 0;
+}
+
+.title {
+  margin: 0.3em 0 0.5em -0.03em;
+  font-size: 2.1em;
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.title a {
+  background: none;
+  padding-bottom: 0;
+  color: inherit;
+}
+
+.title code {
+  font-size: 1em;
+  background: none !important;
+  border: 0 !important;
+  margin: 0 0.075em !important;
+  padding: 0 !important;
+}

components/NoteMeta/NoteMeta.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+import { format } from "date-fns";
+import HitCounter from "../HitCounter/HitCounter";
+import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
+import * as config from "../../lib/config";
+import type { NoteMetaType } from "../../types";
+
+import styles from "./NoteMeta.module.css";
+
+const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
+  <>
+    <div className={styles.meta}>
+      <div className={styles.date}>
+        <span>
+          <DateIcon className={`icon ${styles.icon}`} />
+        </span>
+        <span title={format(new Date(date), "PPppp")}>
+          <Link href={`/notes/${slug}/`}>
+            <a>{format(new Date(date), "MMMM d, yyyy")}</a>
+          </Link>
+        </span>
+      </div>
+
+      {tags.length > 0 && (
+        <div className={styles.tags}>
+          <span>
+            <TagIcon className={`icon ${styles.icon}`} />
+          </span>
+          {tags.map((tag) => (
+            <span key={tag} className={styles.tag}>
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div>
+        <span>
+          <EditIcon className={`icon ${styles.icon}`} />
+        </span>
+        <span>
+          <a
+            href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={`Edit "${title}" on GitHub`}
+          >
+            Improve This Post
+          </a>
+        </span>
+      </div>
+
+      <div>
+        <span>
+          <ViewsIcon className={`icon ${styles.icon}`} />
+        </span>
+        <HitCounter slug={`notes/${slug}`} />
+      </div>
+    </div>
+
+    <h1 className={styles.title}>
+      <Link href={`/notes/${slug}/`}>
+        <a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
+      </Link>
+    </h1>
+  </>
+);
+
+export default NoteMeta;