switch back to lighter markdown-to-jsx on server-side

components/notes/List.tsx

@@ -12,7 +12,7 @@ const List = ({ notesByYear }) => {
       <section key={year} className={styles.section}>
         <h2 className={styles.year}>{year}</h2>
         <ul className={styles.list}>
-          {notes.map(({ slug, date, title, htmlTitle = "" }) => (
+          {notes.map(({ slug, date, htmlTitle }) => (
             <li key={slug} className={styles.row}>
               <span className={styles.date}>{format(new Date(date), "MMM d")}</span>
               <span>
@@ -23,7 +23,7 @@ const List = ({ notesByYear }) => {
                   }}
                   prefetch={false}
                 >
-                  <a dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
+                  <a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
                 </Link>
               </span>
             </li>

components/notes/Meta.tsx

@@ -7,7 +7,7 @@ import type { NoteMetaType } from "../../types";
 
 import styles from "./Meta.module.css";
 
-const Meta = ({ slug, date, title, htmlTitle = "", tags = [] }: NoteMetaType) => (
+const Meta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaType) => (
   <>
     <div className={styles.meta}>
       <div className={styles.date}>
@@ -57,7 +57,7 @@ const Meta = ({ slug, date, title, htmlTitle = "", tags = [] }: NoteMetaType) =>
 
     <h1 className={styles.title}>
       <Link href={`/notes/${slug}/`}>
-        <a dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
+        <a dangerouslySetInnerHTML={{ __html: htmlTitle }} />
       </Link>
     </h1>
   </>

lib/parse-notes.ts

@@ -1,7 +1,8 @@
 import fs from "fs";
 import path from "path";
+import { renderToStaticMarkup } from "react-dom/server";
 import matter from "gray-matter";
-import { marked } from "marked";
+import { compiler } from "markdown-to-jsx";
 import sanitizeHtml from "sanitize-html";
 import { bundleMDX } from "mdx-bundler";
 import readingTime from "reading-time";
@@ -32,19 +33,24 @@ export const getNoteData = (slug: string): { frontMatter: NoteMetaType; content:
   const { data, content } = matter(rawContent);
 
   // carefully allow VERY limited markdown in post titles...
-  const htmlTitle = sanitizeHtml(marked.parseInline(data.title), {
-    allowedTags: ["code", "pre", "em", "strong", "del"],
-  });
-  // ...and add it as a separate prop *only if it's present*
-  if (htmlTitle !== data.title) {
-    data.htmlTitle = htmlTitle;
-  }
+  const htmlTitle = sanitizeHtml(
+    renderToStaticMarkup(
+      compiler(data.title, {
+        forceInline: true,
+        disableParsingRawHTML: true,
+      })
+    ),
+    {
+      allowedTags: ["code", "pre", "em", "strong", "del"],
+    }
+  );
 
   // return both the parsed YAML front matter (with a few amendments) and the raw, unparsed markdown content
   return {
     frontMatter: {
-      ...(data as Omit<NoteMetaType, "slug" | "permalink" | "date" | "readingMins">),
+      ...(data as Omit<NoteMetaType, "slug" | "htmlTitle" | "permalink" | "date" | "readingMins">),
       slug,
+      htmlTitle,
       permalink: `${baseUrl}/notes/${slug}/`,
       date: new Date(data.date).toISOString(), // validate/normalize the date string provided from front matter
       readingMins: Math.ceil(readingTime(content).minutes),

package.json

@@ -43,7 +43,7 @@
     "html-escaper": "^3.0.3",
     "is-absolute-url": "^4.0.1",
     "is-email-like": "^2.0.0",
-    "marked": "^4.0.10",
+    "markdown-to-jsx": "^7.1.5",
     "mdx-bundler": "^8.0.1",
     "modern-normalize": "github:sindresorhus/modern-normalize#1fc6b5a86676b7ac8abc62d04d6080f92debc70f",
     "next": "v12.0.8",
@@ -77,7 +77,6 @@
     "@jakejarvis/eslint-config": "github:jakejarvis/eslint-config#main",
     "@svgr/webpack": "^6.2.0",
     "@types/html-escaper": "^3.0.0",
-    "@types/marked": "^4.0.1",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",

types/index.d.ts

@@ -1,6 +1,6 @@
 export type NoteMetaType = {
   title: string;
-  htmlTitle?: string;
+  htmlTitle: string;
   date: string;
   slug: string;
   permalink: string;

yarn.lock

@@ -1551,11 +1551,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/marked@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.1.tgz#d588a7bbc4d6551c5e75249bc106ffda96ae33c5"
-  integrity sha512-ZigEmCWdNUU7IjZEuQ/iaimYdDHWHfTe3kg8ORfKjyGYd9RWumPoOJRQXB0bO+XLkNwzCthW3wUIQtANaEZ1ag==
-
 "@types/mdast@^3.0.0", "@types/mdast@^3.0.3":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -4420,10 +4415,10 @@ markdown-table@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.2.tgz#9b59eb2c1b22fe71954a65ff512887065a7bb57c"
   integrity sha512-y8j3a5/DkJCmS5x4dMCQL+OR0+2EAq3DOtio1COSHsmW2BGXnNCK3v12hJt1LrUz5iZH5g0LmuYOjDdI+czghA==
 
-marked@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.10.tgz#423e295385cc0c3a70fa495e0df68b007b879423"
-  integrity sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==
+markdown-to-jsx@^7.1.5:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.5.tgz#caf72ad8a8c34a2bb692c4d17e44aabbe4eb19fd"
+  integrity sha512-YQEMMMCX3PYOWtUAQu8Fmz5/sH09s17eyQnDubwaAo8sWmnRTT1og96EFv1vL59l4nWfmtF3L91pqkuheVqRlA==
 
 mathml-tag-names@^2.1.3:
   version "2.1.3"