Migrate to app router (#2254)

app/notes/page.tsx

@@ -0,0 +1,65 @@
+import Content from "../../components/Content";
+import Link from "../../components/Link";
+import Time from "../../components/Time";
+import { getAllPosts } from "../../lib/helpers/posts";
+import config from "../../lib/config";
+import { metadata as defaultMetadata } from "../layout";
+import type { ReactElement } from "react";
+import type { Metadata, Route } from "next";
+import type { PostsByYear } from "../../types";
+
+import styles from "./page.module.css";
+
+export const metadata: Metadata = {
+  title: "Notes",
+  description: `Recent posts by ${config.authorName}.`,
+  openGraph: {
+    ...defaultMetadata.openGraph,
+    title: "Notes",
+    url: "/notes",
+  },
+  alternates: {
+    ...defaultMetadata.alternates,
+    canonical: "/notes",
+  },
+};
+
+export default async function Page() {
+  // parse the year of each note and group them together
+  const notes = await getAllPosts();
+  const notesByYear: PostsByYear = {};
+
+  notes.forEach((note) => {
+    const year = new Date(note.date).getUTCFullYear();
+    (notesByYear[year] || (notesByYear[year] = [])).push(note);
+  });
+
+  const sections: ReactElement[] = [];
+
+  Object.entries(notesByYear).forEach(([year, posts]) => {
+    sections.push(
+      <section className={styles.section} key={year}>
+        <h2 className={styles.year}>{year}</h2>
+        <ul className={styles.list}>
+          {posts.map(({ slug, date, title, htmlTitle }) => (
+            <li className={styles.post} key={slug}>
+              <Time date={date} format="MMM D" className={styles.postDate} />
+              <span>
+                <Link href={`/notes/${slug}` as Route} dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
+              </span>
+            </li>
+          ))}
+        </ul>
+      </section>
+    );
+  });
+
+  // grouped posts enter this component ordered chronologically -- we want reverse chronological
+  const reversed = sections.reverse();
+
+  return (
+    <>
+      <Content>{reversed}</Content>
+    </>
+  );
+}