a bunch of cleanup, mostly of my messy css hacks over the years

lib/helpers/posts.ts

@@ -1,4 +1,5 @@
 import { env } from "../../lib/env";
+import { cache } from "react";
 import path from "path";
 import fs from "fs/promises";
 import glob from "fast-glob";
@@ -20,7 +21,7 @@ export type FrontMatter = {
 };
 
 /** Use filesystem to get a simple list of all post slugs */
-export const getSlugs = async (): Promise<string[]> => {
+export const getSlugs = cache(async (): Promise<string[]> => {
   // list all .mdx files in POSTS_DIR
   const mdxFiles = await glob("*/index.mdx", {
     cwd: path.join(process.cwd(), POSTS_DIR),
@@ -31,7 +32,7 @@ export const getSlugs = async (): Promise<string[]> => {
   const slugs = mdxFiles.map((fileName) => fileName.replace(/\/index\.mdx$/, ""));
 
   return slugs;
-};
+});
 
 // overloaded to return either the front matter of a single post or ALL posts
 export const getFrontMatter: {
@@ -43,65 +44,67 @@ export const getFrontMatter: {
    * Parses and returns the front matter of a given slug, or undefined if the slug does not exist
    */
   (slug: string): Promise<FrontMatter | undefined>;
-} = async (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  slug?: any
-): // eslint-disable-next-line @typescript-eslint/no-explicit-any
-Promise<any> => {
-  if (typeof slug === "string") {
-    try {
-      const { frontmatter } = await import(`../../${POSTS_DIR}/${slug}/index.mdx`);
+} = cache(
+  async (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    slug?: any
+  ): // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Promise<any> => {
+    if (typeof slug === "string") {
+      try {
+        const { frontmatter } = await import(`../../${POSTS_DIR}/${slug}/index.mdx`);
 
-      // process markdown title to html...
-      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"],
-          },
-        })
-        .process(frontmatter.title)
-        .then((result) => result.toString().trim());
+        // process markdown title to html...
+        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"],
+            },
+          })
+          .process(frontmatter.title)
+          .then((result) => result.toString().trim());
 
-      // ...and then (sketchily) remove said html for a plaintext version:
-      // https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
-      const title = decode(htmlTitle.replace(/<[^>]*>/g, ""));
+        // ...and then (sketchily) remove said html for a plaintext version:
+        // https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
+        const title = decode(htmlTitle.replace(/<[^>]*>/g, ""));
 
-      return {
-        ...(frontmatter as Partial<FrontMatter>),
-        // plain title without html or markdown syntax:
-        title,
-        // stylized title with limited html tags:
-        htmlTitle,
-        slug,
-        // validate/normalize the date string provided from front matter
-        date: new Date(frontmatter.date).toISOString(),
-        permalink: `${env.NEXT_PUBLIC_BASE_URL}/${POSTS_DIR}/${slug}`,
-      } as FrontMatter;
-    } catch (error) {
-      console.error(`Failed to load front matter for post with slug "${slug}":`, error);
-      return undefined;
+        return {
+          ...(frontmatter as Partial<FrontMatter>),
+          // plain title without html or markdown syntax:
+          title,
+          // stylized title with limited html tags:
+          htmlTitle,
+          slug,
+          // validate/normalize the date string provided from front matter
+          date: new Date(frontmatter.date).toISOString(),
+          permalink: `${env.NEXT_PUBLIC_BASE_URL}/${POSTS_DIR}/${slug}`,
+        } as FrontMatter;
+      } catch (error) {
+        console.error(`Failed to load front matter for post with slug "${slug}":`, error);
+        return undefined;
+      }
     }
+
+    if (!slug) {
+      // concurrently fetch the front matter of each post
+      const slugs = await getSlugs();
+      const posts = await Promise.all(slugs.map(getFrontMatter));
+
+      // sort the results reverse chronologically and return
+      return posts.sort(
+        (post1, post2) => new Date(post2!.date).getTime() - new Date(post1!.date).getTime()
+      ) as FrontMatter[];
+    }
+
+    throw new Error("getFrontMatter() called with invalid argument.");
   }
-
-  if (!slug) {
-    // concurrently fetch the front matter of each post
-    const slugs = await getSlugs();
-    const posts = await Promise.all(slugs.map(getFrontMatter));
-
-    // sort the results reverse chronologically and return
-    return posts.sort(
-      (post1, post2) => new Date(post2!.date).getTime() - new Date(post1!.date).getTime()
-    ) as FrontMatter[];
-  }
-
-  throw new Error("getFrontMatter() called with invalid argument.");
-};
+);
 
 /** Returns the content of a post with very limited processing to include in RSS feeds */
-export const getContent = async (slug: string): Promise<string | undefined> => {
+export const getContent = cache(async (slug: string): Promise<string | undefined> => {
   try {
     // TODO: also remove MDX-related syntax (e.g. import/export statements)
     const content = await unified()
@@ -139,4 +142,4 @@ export const getContent = async (slug: string): Promise<string | undefined> => {
     console.error(`Failed to load/parse content for post with slug "${slug}":`, error);
     return undefined;
   }
-};
+});