Update function and fix ids

responsible-ai-collaborative · Nov 8, 2024 · cd9e8bc · cd9e8bc
1 parent ff7ef77
commit cd9e8bc
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 10 deletions.
diff --git a/site/gatsby-site/package-lock.json b/site/gatsby-site/package-lock.json
diff --git a/site/gatsby-site/package.json b/site/gatsby-site/package.json
@@ -101,6 +101,7 @@
     "react-zoom-pan-pinch": "^2.6.1",
     "realm-web": "^1.3.0",
     "rehype-raw": "^7.0.0",
+    "rehype-slug": "^6.0.0",
     "rehype-truncate": "^1.2.2",
     "remark": "^13.0.0",
     "remark-gfm": "^3.0.1",

diff --git a/site/gatsby-site/src/components/doc/PrismicDocPost.js b/site/gatsby-site/src/components/doc/PrismicDocPost.js
@@ -13,6 +13,7 @@ import { Heading1, Heading2 } from 'components/CustomHeaders';
 import { RichText } from 'prismic-reactjs';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
 
 const PrismicDocPost = ({ doc, location }) => {
   let headers = [];
@@ -67,7 +68,11 @@ const PrismicDocPost = ({ doc, location }) => {
               {(() => {
                 const rawMarkdown = RichText.asText(content.markdown.richText);
 
-                return <ReactMarkdown remarkPlugins={[remarkGfm]}>{rawMarkdown}</ReactMarkdown>;
+                return (
+                  <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSlug]}>
+                    {rawMarkdown}
+                  </ReactMarkdown>
+                );
               })()}
             </div>
           )}

diff --git a/site/gatsby-site/src/utils/extractHeaders.js b/site/gatsby-site/src/utils/extractHeaders.js
@@ -45,21 +45,26 @@ export const extractHeadersFromMarkdown = (markdown) => {
   if (!markdown) {
     return [];
   }
+
   const headers = [];
 
   const lines = markdown.split('\n');
 
   lines.forEach((line) => {
-    if (line.startsWith('# ')) {
-      headers.push({
-        id: slugify(line.replace('# ', ''), { lower: true }),
-        title: line.replace('# ', ''),
-      });
-    }
-    if (line.startsWith('## ')) {
+    const match = line.match(/^(#{1,2})\s+(.*)/); // Match `#` or `##` headers
+
+    if (match) {
+      const level = match[1].length; // 1 for `#`, 2 for `##`
+
+      const title = match[2];
+
       headers.push({
-        id: slugify(line.replace('## ', ''), { lower: true }),
-        title: line.replace('## ', ''),
+        id: slugify(title, {
+          lower: true,
+          remove: /["'`?!]/g, // Removes quotes and similar characters
+        }),
+        title,
+        level,
       });
     }
   });