next-mdx-remote v4 (#737)

components/NotesList/NotesList.module.css

@@ -0,0 +1,49 @@
+.section {
+  margin: 2.4em 0;
+}
+
+.section:first-of-type {
+  margin-top: 0;
+}
+
+.section:last-of-type {
+  margin-bottom: 0;
+}
+
+.year {
+  font-size: 2.2em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  line-height: 1.75;
+  margin-bottom: 1em;
+}
+
+.row:last-of-type {
+  margin-bottom: 0;
+}
+
+.date {
+  width: 5.25em;
+  flex-shrink: 0;
+  color: var(--medium);
+}
+
+@media screen and (max-width: 768px) {
+  .section {
+    margin: 1.8em 0;
+  }
+
+  .year {
+    font-size: 2em;
+  }
+}

components/NotesList/NotesList.tsx

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import { format } from "date-fns";
+import type { NoteMetaType } from "../../types";
+
+import styles from "./NotesList.module.css";
+
+const NotesList = ({ notesByYear }) => {
+  const sections = [];
+
+  Object.entries(notesByYear).forEach(([year, notes]: [string, NoteMetaType[]]) => {
+    sections.push(
+      <section key={year} className={styles.section}>
+        <h2 className={styles.year}>{year}</h2>
+        <ul className={styles.list}>
+          {notes.map(({ slug, date, htmlTitle }) => (
+            <li key={slug} className={styles.row}>
+              <span className={styles.date}>{format(new Date(date), "MMM d")}</span>
+              <span>
+                <Link
+                  href={{
+                    pathname: "/notes/[slug]/",
+                    query: { slug: slug },
+                  }}
+                  prefetch={false}
+                >
+                  <a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
+                </Link>
+              </span>
+            </li>
+          ))}
+        </ul>
+      </section>
+    );
+  });
+
+  // grouped notes enter this component ordered chronologically -- we want reverse chronological
+  const reversed = sections.reverse();
+
+  return <>{reversed}</>;
+};
+
+export default NotesList;