import fs from "node:fs/promises"; import path from "node:path"; import glob from "fast-glob"; import { decode } from "html-entities"; import { unified } from "unified"; import { rehypeSanitize, rehypeStringify } from "@/lib/rehype"; import { remarkFrontmatter, remarkMdx, remarkParse, remarkRehype, remarkSmartypants, remarkStripMdxImportsExports, } from "@/lib/remark"; export type FrontMatter = { slug: string; permalink: string; date: string; title: string; htmlTitle?: string; description?: string; tags?: string[]; image?: string; noComments?: boolean; }; /** Path to directory with .mdx files, relative to project root. */ export const POSTS_DIR = "notes" as const; /** Use filesystem to get a simple list of all post slugs */ export const getSlugs = async (): Promise => { "use cache"; // list all .mdx files in POSTS_DIR const mdxFiles = await glob("*/index.mdx", { cwd: path.join(process.cwd(), POSTS_DIR), dot: false, }); // strip the .mdx extensions from filenames const slugs = mdxFiles.map((fileName) => fileName.replace(/\/index\.mdx$/, "")); return slugs; }; export const getFrontMatter: { /** * Parses and returns the front matter of ALL posts, sorted reverse chronologically */ (): Promise; /** * Parses and returns the front matter of a given slug, or undefined if the slug does not exist */ (slug: string): Promise; } = (async (slug?: string) => { "use cache"; 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(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()); // ...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), // 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: `${process.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 allPosts = await Promise.all(slugs.map(getFrontMatter)); // filter out any undefined entries from failed imports const posts = allPosts.filter((p): p is FrontMatter => !!p); // sort the results reverse chronologically and return return posts.sort( (post1, post2) => new Date(post2.date).getTime() - new Date(post1.date).getTime(), ); } throw new Error("getFrontMatter() called with invalid argument."); }) as typeof getFrontMatter; /** Returns the content of a post with very limited processing to include in RSS feeds */ export const getContent = async (slug: string): Promise => { "use cache"; try { const content = await unified() .use(remarkParse) .use(remarkMdx) .use(remarkStripMdxImportsExports) .use(remarkFrontmatter) .use(remarkSmartypants) .use(remarkRehype) .use(rehypeSanitize, { tagNames: [ "p", "a", "em", "strong", "code", "pre", "blockquote", "del", "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("/* prettier-ignore */", "") .replaceAll("

", "") .trim(); } catch (error) { console.error(`Failed to load/parse content for post with slug "${slug}":`, error); return undefined; } };