Migrate to app router (#2254)

lib/helpers/build-feed.ts

@@ -2,84 +2,58 @@ import { Feed } from "feed";
 import { getAllPosts } from "./posts";
 import config from "../config";
 import { meJpg } from "../config/favicons";
-import type { GetServerSideProps } from "next";
+import { metadata } from "../../app/layout";
 
-export type GetServerSideFeedProps = GetServerSideProps<Record<string, never>>;
-
-export type BuildFeedOptions = {
-  format: "rss" | "atom" | "json";
-};
-
-// handles literally *everything* about building the server-side rss/atom feeds and writing the response.
-// all the page needs to do is `return buildFeed(context, "rss")` from getServerSideProps.
-export const buildFeed = async (
-  context: Parameters<GetServerSideFeedProps>[0],
-  options: BuildFeedOptions
-): Promise<ReturnType<GetServerSideFeedProps>> => {
-  const { res } = context;
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || `https://${config.siteDomain}`;
+export const buildFeed = async (options: { type: "rss" | "atom" | "json" }): Promise<string> => {
+  const baseUrl = metadata.metadataBase?.href || `https://${config.siteDomain}/`;
 
   // https://github.com/jpmonette/feed#example
   const feed = new Feed({
-    id: `${baseUrl}/`,
-    link: `${baseUrl}/`,
+    id: baseUrl,
+    link: baseUrl,
     title: config.siteName,
     description: config.longDescription,
     copyright: config.licenseUrl,
     updated: new Date(process.env.RELEASE_DATE || Date.now()),
-    image: `${baseUrl}${meJpg.src}`,
+    image: new URL(meJpg.src, baseUrl).href,
     feedLinks: {
-      rss: `${baseUrl}/feed.xml`,
-      atom: `${baseUrl}/feed.atom`,
+      rss: new URL("feed.xml", baseUrl).href,
+      atom: new URL("feed.atom", baseUrl).href,
     },
     author: {
       name: config.authorName,
-      link: `${baseUrl}/`,
+      link: baseUrl,
       email: config.authorEmail,
     },
   });
 
   // add posts separately using their frontmatter
-  const posts = await getAllPosts();
-  posts.forEach((post) => {
+  (await getAllPosts()).forEach((post) => {
     feed.addItem({
       guid: post.permalink,
       link: post.permalink,
       title: post.title,
       description: post.description,
-      image: post.image && `${baseUrl}${post.image}`,
+      image: post.image || undefined,
       author: [
         {
           name: config.authorName,
-          link: `${baseUrl}/`,
+          link: baseUrl,
         },
       ],
       date: new Date(post.date),
     });
   });
 
-  // cache on edge for 24 hours by default
-  res.setHeader("cache-control", `public, max-age=0, s-maxage=86400, stale-while-revalidate`);
-
-  // generates RSS by default
-  if (options.format === "rss") {
-    res.setHeader("content-type", "application/rss+xml; charset=utf-8");
-    res.write(feed.rss2());
-  } else if (options.format === "atom") {
-    res.setHeader("content-type", "application/atom+xml; charset=utf-8");
-    res.write(feed.atom1());
-  } else if (options.format === "json") {
+  if (options.type === "rss") {
+    return feed.rss2();
+  } else if (options.type === "atom") {
+    return feed.atom1();
+  } else if (options.type === "json") {
     // rare but including as an option because why not...
     // https://www.jsonfeed.org/
-    res.setHeader("content-type", "application/feed+json; charset=utf-8");
-    res.write(feed.json1());
+    return feed.json1();
   } else {
-    throw new TypeError(`Invalid feed type "${options.format}", must be "rss", "atom", or "json".`);
+    throw new TypeError(`Invalid feed type "${options.type}", must be "rss", "atom", or "json".`);
   }
-
-  res.end();
-
-  return {
-    props: {},
-  };
 };

lib/helpers/mdx-components.ts

@@ -6,7 +6,7 @@ export { default as Figure } from "../../components/Figure";
 
 // These (mostly very small) components are direct replacements for HTML tags generated by remark:
 export { default as a } from "../../components/Link";
-export { default as code } from "../../components/CodeHybrid";
+export { default as code } from "../../components/Code";
 export { default as blockquote } from "../../components/Blockquote";
 export { default as hr } from "../../components/HorizontalRule";
 export { H1 as h1, H2 as h2, H3 as h3, H4 as h4, H5 as h5, H6 as h6 } from "../../components/Heading";

lib/helpers/minifier.ts

@@ -1,25 +0,0 @@
-import { trimLines } from "trim-lines";
-import stripComments from "strip-comments";
-
-// do some _very_ rudimentary JS minifying.
-export const minifier = (source: string): string => {
-  // save the first line for later, it might be important?
-  const firstLine = source.split("\n")[0];
-
-  // remove JS comments
-  source = stripComments(source, {
-    block: false,
-    keepProtected: true,
-  });
-  // remove indentation
-  source = trimLines(source);
-  // remove newlines
-  source = source.replace(/\n/g, "");
-
-  // restore JSX flags if they were there at the beginning
-  if (firstLine.startsWith("/*@jsx")) {
-    source = `${firstLine}${source}`;
-  }
-
-  return source;
-};

lib/helpers/posts.ts

@@ -1,13 +1,12 @@
 import path from "path";
 import fs from "fs/promises";
-import { serialize } from "next-mdx-remote/serialize";
 import glob from "fast-glob";
 import pMap from "p-map";
 import pMemoize from "p-memoize";
 import matter from "gray-matter";
 import { formatDate } from "./format-date";
-import { minifier } from "./minifier";
-import type { PostFrontMatter, PostWithSource } from "../../types";
+import type { PostFrontMatter } from "../../types";
+import { metadata as defaultMetadata } from "../../app/layout";
 
 // path to directory with .mdx files, relative to project root
 export const POSTS_DIR = "notes";
@@ -60,49 +59,14 @@ export const getPostData = async (
       title,
       htmlTitle,
       slug,
-      permalink: `${process.env.NEXT_PUBLIC_BASE_URL || ""}/${POSTS_DIR}/${slug}/`,
       date: formatDate(data.date), // validate/normalize the date string provided from front matter
+      permalink: new URL(`/${POSTS_DIR}/${slug}/`, defaultMetadata.metadataBase || "").href,
+      image: data.image ? new URL(data.image, defaultMetadata.metadataBase || "").href : undefined,
     },
     markdown: content,
   };
 };
 
-// fully parses MDX into JS and returns *everything* about a post
-export const compilePost = async (slug: string): Promise<PostWithSource> => {
-  const { remarkGfm, remarkSmartypants, rehypeSlug, rehypeUnwrapImages, rehypePrism } = await import(
-    "./remark-rehype-plugins"
-  );
-
-  const { frontMatter, markdown } = await getPostData(slug);
-
-  const { compiledSource } = await serialize(markdown, {
-    parseFrontmatter: false,
-    mdxOptions: {
-      remarkPlugins: [
-        [remarkGfm, { singleTilde: false }],
-        [
-          remarkSmartypants,
-          {
-            quotes: true,
-            dashes: "oldschool",
-            backticks: false,
-            ellipses: false,
-          },
-        ],
-      ],
-      rehypePlugins: [rehypeSlug, rehypeUnwrapImages, [rehypePrism, { ignoreMissing: true }]],
-    },
-  });
-
-  return {
-    frontMatter,
-    source: {
-      // save some bytes
-      compiledSource: minifier(compiledSource),
-    },
-  };
-};
-
 export const getPostSlugs = pMemoize(async (): Promise<string[]> => {
   // list all .mdx files in POSTS_DIR
   const mdxFiles = await glob("*.mdx", {