some more arguably unnecessary refactoring

lib/config/constants.ts

@@ -1,5 +1,2 @@
 /** Path to directory with .mdx files, relative to project root. */
 export const POSTS_DIR = "notes" as const;
-
-/** Maximum width of content wrapper (e.g. for images) in pixels. */
-export const MAX_WIDTH = 896 as const;

lib/config/menu.ts

@@ -1,8 +1,12 @@
-import { CodeIcon, HomeIcon, MailIcon, PencilLineIcon } from "lucide-react";
-import MenuItem from "@/components/layout/menu-item";
-import { ComponentPropsWithoutRef } from "react";
+import { CodeIcon, HomeIcon, MailIcon, PencilLineIcon, type LucideIcon } from "lucide-react";
 
-export const menuItems: Array<ComponentPropsWithoutRef<typeof MenuItem>> = [
+export type MenuItemConfig = {
+  text?: string;
+  href?: `/${string}`;
+  icon?: LucideIcon;
+};
+
+export const menuItems: MenuItemConfig[] = [
   {
     text: "Home",
     href: "/",

lib/env.ts

@@ -130,7 +130,7 @@ export const env = createEnv({
 
     /**
      * Optional. Consistent timezone for the site. Doesn't really matter what it is, as long as it's the same everywhere
-     * to avoid hydration complaints.
+     * to avoid hydration complaints. Defaults to `America/New_York`.
      *
      * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
      */

lib/fonts.ts

@@ -0,0 +1,44 @@
+// a weird system but makes it impossible to accidentally end up with multiple imports of the same font. see:
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#reusing-fonts
+
+import {
+  Geist as GeistSansLoader,
+  Geist_Mono as GeistMonoLoader,
+  Comic_Neue as ComicNeueLoader,
+} from "next/font/google";
+
+export const GeistSans = GeistSansLoader({
+  subsets: ["latin"],
+  display: "swap",
+  fallback: [
+    // https://github.com/system-fonts/modern-font-stacks#system-ui
+    "system-ui",
+    "sans-serif",
+  ],
+  preload: true,
+});
+
+export const GeistMono = GeistMonoLoader({
+  subsets: ["latin"],
+  display: "swap",
+  fallback: [
+    // https://github.com/primer/css/blob/4113637b3bb60cad1e2dca82e70d92ad05694399/src/support/variables/typography.scss#L37
+    "ui-monospace",
+    "SFMono-Regular",
+    "'SF Mono'",
+    "Menlo",
+    "Consolas",
+    "'Liberation Mono'",
+    "monospace",
+  ],
+  preload: true,
+});
+
+export const ComicNeue = ComicNeueLoader({
+  weight: ["400", "700"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["'Comic Sans MS'", "'Comic Sans'"],
+  preload: false,
+});

lib/posts.ts

@@ -4,9 +4,18 @@ import path from "path";
 import fs from "fs/promises";
 import glob from "fast-glob";
 import { unified } from "unified";
-import { remarkHtml, remarkParse, remarkSmartypants, remarkFrontmatter } from "@/lib/remark";
+import {
+  remarkParse,
+  remarkSmartypants,
+  remarkFrontmatter,
+  remarkRehype,
+  remarkMdx,
+  remarkStripMdxImportsExports,
+} from "@/lib/remark";
 import { decode } from "html-entities";
 import { POSTS_DIR } from "@/lib/config/constants";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
 
 export type FrontMatter = {
   slug: string;
@@ -58,12 +67,12 @@ export const getFrontMatter: {
         const htmlTitle = await unified()
           .use(remarkParse)
           .use(remarkSmartypants)
-          .use(remarkHtml, {
-            sanitize: {
-              // allow *very* limited markdown to be used in post titles
-              tagNames: ["code", "em", "strong"],
-            },
+          .use(remarkRehype)
+          .use(rehypeSanitize, {
+            // allow *very* limited markdown to be used in post titles
+            tagNames: ["code", "em", "strong"],
           })
+          .use(rehypeStringify)
           .process(frontmatter.title)
           .then((result) => result.toString().trim());
 
@@ -108,35 +117,37 @@ export const getContent = cache(async (slug: string): Promise<string | undefined
   try {
     const content = await unified()
       .use(remarkParse)
+      .use(remarkMdx)
+      .use(remarkStripMdxImportsExports)
       .use(remarkFrontmatter)
       .use(remarkSmartypants)
-      .use(remarkHtml, {
-        sanitize: {
-          tagNames: [
-            "p",
-            "a",
-            "em",
-            "strong",
-            "code",
-            "pre",
-            "blockquote",
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6",
-            "ul",
-            "ol",
-            "li",
-            "hr",
-          ],
-        },
+      .use(remarkRehype)
+      .use(rehypeSanitize, {
+        tagNames: [
+          "p",
+          "a",
+          "em",
+          "strong",
+          "code",
+          "pre",
+          "blockquote",
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "ul",
+          "ol",
+          "li",
+          "hr",
+        ],
       })
+      .use(rehypeStringify)
       .process(await fs.readFile(path.join(process.cwd(), `${POSTS_DIR}/${slug}/index.mdx`)));
 
     // convert the parsed content to a string with "safe" HTML
-    return content.toString().replaceAll("<p></p>\n", "").replaceAll("<p>{/* prettier-ignore */}</p>\n", "").trim();
+    return content.toString().replaceAll("/* prettier-ignore */", "").replaceAll("<p></p>", "").trim();
   } catch (error) {
     console.error(`Failed to load/parse content for post with slug "${slug}":`, error);
     return undefined;

lib/rehype.ts

@@ -1,6 +1,7 @@
-export { default as rehypeAutolinkHeadings } from "rehype-autolink-headings";
 export { default as rehypeMdxCodeProps } from "rehype-mdx-code-props";
 export { default as rehypeMdxImportMedia } from "rehype-mdx-import-media";
+export { default as rehypeSanitize } from "rehype-sanitize";
 export { default as rehypeSlug } from "rehype-slug";
+export { default as rehypeStringify } from "rehype-stringify";
 export { default as rehypeUnwrapImages } from "rehype-unwrap-images";
 export { default as rehypeWrapper } from "rehype-wrapper";

lib/remark.ts

@@ -1,6 +1,8 @@
 export { default as remarkFrontmatter } from "remark-frontmatter";
 export { default as remarkGfm } from "remark-gfm";
-export { default as remarkHtml } from "remark-html";
+export { default as remarkMdx } from "remark-mdx";
 export { default as remarkMdxFrontmatter } from "remark-mdx-frontmatter";
 export { default as remarkParse } from "remark-parse";
+export { default as remarkRehype } from "remark-rehype";
 export { default as remarkSmartypants } from "remark-smartypants";
+export { default as remarkStripMdxImportsExports } from "remark-strip-mdx-imports-exports";