Merge pull request #1994 from tawandamoyo/fix/1990-blog-contents-to-i…

…nternal-links Fix: Make Table of Contents scroll to relevant section of Blog posts
PolicyEngine · Sep 2, 2024 · 7166ed4 · 7166ed4
2 parents 34705ca + 5fb410a
commit 7166ed4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 37 deletions.
diff --git a/src/layout/MarkdownFormatter.jsx b/src/layout/MarkdownFormatter.jsx
@@ -2,7 +2,7 @@ import Markdown from "react-markdown";
 import { TwitterTweetEmbed } from "react-twitter-embed";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import style from "../style";
 import useDisplayCategory from "../hooks/useDisplayCategory";
 import Plot from "react-plotly.js";
@@ -336,14 +336,15 @@ export function MarkdownFormatter({ markdown, backgroundColor, dict }) {
             </a>
           );
         },
-        h1: ({ children }) => {
-          const headerText = children[0];
+        h1: ({ children: headerText }) => {
+          const slug = headerText
+            .toLowerCase()
+            .replace(/[/,]/g, "")
+            .replace(/\s+/g, "-");
+
           return (
-            <h1
-              id={headerText.split(" ").join("-").replace(/,/g, "")}
-              style={{ marginBottom: 20 }}
-            >
-              {children}
+            <h1 id={slug} style={{ marginBottom: 20 }}>
+              {headerText}
             </h1>
           );
         },
@@ -369,39 +370,38 @@ export function MarkdownFormatter({ markdown, backgroundColor, dict }) {
             return <section>{children}</section>;
           }
         },
-        h2: ({ children }) => {
-          let headerText = children[0];
+        h2: ({ children: headerText }) => {
           if (!headerText.split) {
             headerText = "";
           }
           // Remove slashes and commas, and replace spaces with dashes to create a
           // unique ID for each header.
           const slug = headerText
-            .split(" ")
-            .join("-")
-            .replace("/", "")
-            .replace(/,/g, "");
+            .toLowerCase()
+            .replace(/[/,]/g, "")
+            .replace(/\s+/g, "-");
+
           return (
             <h2 id={slug} style={{ marginBottom: 20 }}>
-              {children}
+              {headerText}
             </h2>
           );
         },
-        h3: ({ children }) => {
-          const headerText = children[0];
-          return (
-            <h3 id={headerText.split(" ").join("-").replace(/,/g, "")}>
-              {children}
-            </h3>
-          );
+        h3: ({ children: headerText }) => {
+          const slug = headerText
+            .toLowerCase()
+            .replace(/[/,]/g, "")
+            .replace(/\s+/g, "-");
+
+          return <h3 id={slug}>{headerText}</h3>;
         },
-        h4: ({ children }) => {
-          const headerText = children[0];
-          return (
-            <h4 id={headerText.split(" ").join("-").replace(/,/g, "")}>
-              {children}
-            </h4>
-          );
+        h4: ({ children: headerText }) => {
+          const slug = headerText
+            .toLowerCase()
+            .replace(/[/,]/g, "")
+            .replace(/\s+/g, "-");
+
+          return <h4 id={slug}>{headerText}</h4>;
         },
         table: ({ children }) => (
           <table

diff --git a/src/pages/BlogPage.jsx b/src/pages/BlogPage.jsx
@@ -697,21 +697,15 @@ function LeftContents(props) {
     return text;
   });
   const headerSlugs = headers.map((header) =>
-    header
-      .split(" ")
-      .slice(1)
-      .join(" ")
-      .split(" ")
-      .join("-")
-      .replace("\\", "")
-      .replace(/,/g, ""),
+    header.replace(/[#,/]/g, "").trim().replace(/\s+/g, "-").toLowerCase(),
   );
 
   let contents = [];
   for (let i = 0; i < headers.length; i++) {
     const headerLevel = headerLevels[i];
     const headerText = headerTexts[i];
     const headerSlug = headerSlugs[i];
+
     contents.push(
       <div
         style={{ display: "flex", alignItems: "center", marginBottom: 5 }}