simplify note parsing logic

components/mdxComponents.tsx

@@ -2,90 +2,106 @@ import Link from "next/link";
 import Image from "next/image";
 import TweetEmbed from "react-tweet-embed";
 import Gist from "react-gist";
-import getNodeText from "../lib/get-node-text";
 import Video from "./video/FullPageVideo";
 import CopyButton from "./clipboard/CopyButton";
+import getNodeText from "../lib/get-node-text";
 import { OctocatOcticon } from "./icons/octicons";
+
 import type { LinkProps } from "next/link";
 import type { ImageProps } from "next/image";
 import type { ReactPlayerProps } from "react-player";
 
 // The following components are all passed into <MDXProvider /> as replacement HTML tags or drop-in React components
 // available in .mdx files containing post content, since they're not directly aware of the components in this folder.
-const mdxComponents = {
-  a: ({
-    href,
-    target,
-    rel,
-    className,
-    children,
-  }: LinkProps & {
-    target?: string;
-    rel?: string;
-    className?: string;
-    children?: unknown;
-  }) => (
-    <Link href={href} passHref={true}>
-      <a className={className} target={target} rel={rel}>
-        {children}
-      </a>
-    </Link>
-  ),
-  img: (props: ImageProps) => {
+
+const CustomLink = ({
+  href,
+  target,
+  rel,
+  className,
+  children,
+}: LinkProps & {
+  target?: string;
+  rel?: string;
+  className?: string;
+  children?: unknown;
+}) => (
+  <Link href={href} passHref={true}>
+    <a className={className} target={target} rel={rel}>
+      {children}
+    </a>
+  </Link>
+);
+
+const CustomImg = (props: ImageProps) => {
+  return (
+    // height and width are part of the props, so they get automatically passed here with {...props}
+    <div className={props.className}>
+      {/* eslint-disable-next-line jsx-a11y/alt-text */}
+      <Image {...props} />
+    </div>
+  );
+};
+
+const CustomCode = (props: any) => {
+  if (props.className?.split(" ").includes("hljs")) {
     return (
-      // height and width are part of the props, so they get automatically passed here with {...props}
-      <div className={props.className}>
-        {/* eslint-disable-next-line jsx-a11y/alt-text */}
-        <Image {...props} />
+      <div>
+        <CopyButton content={getNodeText(props.children)} />
+        <code {...props}>{props.children}</code>
+        <style jsx>{`
+          div {
+            position: relative;
+            max-width: 100%;
+            overflow-x: scroll;
+            margin: 1em 0;
+          }
+        `}</style>
       </div>
     );
-  },
-  code: (props: any) => {
-    if (props.className?.split(" ").includes("hljs")) {
-      return (
-        <div>
-          <CopyButton content={getNodeText(props.children)} />
-          <code {...props}>{props.children}</code>
-          <style jsx>{`
-            div {
-              position: relative;
-              max-width: 100%;
-              overflow-x: scroll;
-              margin: 1em 0;
-            }
-          `}</style>
-        </div>
-      );
-    } else {
-      return <code {...props}>{props.children}</code>;
-    }
-  },
-  video: (props: ReactPlayerProps) => <Video {...props} />,
-  tweet: (props: { id: string }) => (
-    <TweetEmbed
-      id={props.id}
-      options={{
-        dnt: true,
-        align: "center",
-      }}
-    />
-  ),
-  gist: (props: { id: string; file?: string }) => <Gist {...props} />,
-  octocat: (props: { repo: string }) => (
-    <a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
-      <OctocatOcticon verticalAlign="text-top" fill="currentColor" />
-      <style jsx>{`
-        a {
-          margin: 0 0.3em;
-          color: var(--text);
-        }
+  } else {
+    return <code {...props}>{props.children}</code>;
+  }
+};
 
-        a:hover {
-          color: var(--link);
-        }
-      `}</style>
-    </a>
-  ),
+const CustomVideo = (props: ReactPlayerProps) => <Video {...props} />;
+
+const CustomTweet = (props: { id: string }) => (
+  <TweetEmbed
+    id={props.id}
+    options={{
+      dnt: true,
+      align: "center",
+    }}
+  />
+);
+
+const CustomGist = (props: { id: string; file?: string }) => <Gist {...props} />;
+
+const CustomGitHubLink = (props: { repo: string }) => (
+  <a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
+    <OctocatOcticon verticalAlign="text-top" fill="currentColor" />
+    <style jsx>{`
+      a {
+        margin: 0 0.3em;
+        color: var(--text);
+      }
+
+      a:hover {
+        color: var(--link);
+      }
+    `}</style>
+  </a>
+);
+
+const mdxComponents = {
+  a: CustomLink,
+  img: CustomImg,
+  code: CustomCode,
+  video: CustomVideo,
+  tweet: CustomTweet,
+  gist: CustomGist,
+  octocat: CustomGitHubLink,
 };
 
 export default mdxComponents;

components/notes/List.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { format, parseISO } from "date-fns";
+import groupBy from "lodash.groupby";
 
 import styles from "./List.module.scss";
 
@@ -9,15 +10,16 @@ type NoteProps = {
   slug: string;
 };
 
-const List = ({ notesByYear }) => {
+const List = ({ notes }) => {
+  const notesByYear = groupBy(notes, "year");
   const sections = [];
 
-  Object.entries(notesByYear).forEach(([year, notes]: [string, NoteProps[]]) => {
+  Object.entries(notesByYear).forEach(([year, yearNotes]: [string, NoteProps[]]) => {
     sections.push(
       <section key={year} className={styles.section}>
         <h2 className={styles.year}>{year}</h2>
         <ul className={styles.list}>
-          {notes.map((note) => (
+          {yearNotes.map((note) => (
             <li key={note.slug} className={styles.row}>
               <span className={styles.date}>{format(parseISO(note.date), "MMM d")}</span>
               <span>