Add anchor links to headings

This commit adds GitHub-style anchor links¹ to heading elements. I also
added a '#' on hover.

¹ https://github.com/markedjs/marked/blob/10020d018d4448b1d2d4612baf650c4e3a5949bf/docs/USING_PRO.md#the-renderer--renderer

static-site/app/blog/parseMarkdown.ts

@@ -3,7 +3,32 @@ import sanitizeHtml, { Attributes, IOptions, Tag } from "sanitize-html";
 
 import { siteUrl } from "../../data/BaseConfig";
 
-export default async function parseMarkdown(mdString: string): Promise<string> {
+export default async function parseMarkdown({
+  mdString,
+  addHeadingAnchors = false,
+}: {
+  mdString: string
+
+  /** Should `<a>` tags be added to headings? */
+  addHeadingAnchors?: boolean
+}): Promise<string> {
+  if (addHeadingAnchors) {
+    marked.use({
+      renderer: {
+        heading({ tokens, depth }) {
+          const text = this.parser.parseInline(tokens);
+          const anchor = text.toLowerCase().replace(/[^\w]+/g, '-');
+          return `
+            <h${depth}>
+              <a name="${anchor}" class="anchor" href="#${anchor}">#</a>
+              ${text}
+            </h${depth}>
+          `;
+        }
+      }
+    });
+  }
+
   const rawDescription = await marked.parse(mdString);
 
   const sanitizerConfig: IOptions = {

static-site/app/blog/utils.ts

@@ -63,7 +63,10 @@ export function getBlogPosts(): BlogPost[] {
 
 export async function markdownToHtml(mdString:string): Promise<string> {
   try {
-    return await parseMarkdown(mdString)
+    return await parseMarkdown({
+      mdString,
+      addHeadingAnchors: true,
+    })
   }
   catch(error) {
     console.error(`Error parsing markdown: ${error}`);

static-site/app/styles/globals.css

@@ -139,3 +139,16 @@ p.wideParagraph {
   line-height: var(--tightLineHight);
   margin: 20px 0 0;
 }
+
+
+/* For blog posts */
+
+.anchor {
+  position: absolute;
+  left: -3px;
+  opacity: 0;
+}
+
+.anchor:hover {
+  opacity: 100;
+}