Merge branch 'staging' into feature/new-translation-process

responsible-ai-collaborative · Nov 8, 2024 · faae3f6 · faae3f6
2 parents 171f19d + 08e836a
commit faae3f6
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 3 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 = [];
@@ -62,12 +63,16 @@ const PrismicDocPost = ({ doc, location }) => {
       </div>
       {doc.data.content.map((content, index) => (
         <>
-          {content.markdown && (
+          {content.markdown?.richText.length > 0 && (
             <div className="prose">
               {(() => {
                 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
@@ -9,7 +9,12 @@ export const extractHeaders = (content) => {
   if (content.length > 0) {
     content.forEach((block) => {
       richText = block.text.richText;
-      headers.push(...extractHeadersFromRichText(richText));
+      if (richText && richText.length > 0) {
+        headers.push(...extractHeadersFromRichText(richText));
+      }
+      if (block?.markdown && block.markdown.richText.length > 0) {
+        headers.push(...extractHeadersFromMarkdown(block.markdown.richText[0]?.text));
+      }
     });
   } else {
     richText = content.richText;
@@ -34,3 +39,35 @@ const extractHeadersFromRichText = (richText) => {
 
   return headers;
 };
+
+// Extract headers from markdown and return an array of headers with id and title
+export const extractHeadersFromMarkdown = (markdown) => {
+  if (!markdown) {
+    return [];
+  }
+
+  const headers = [];
+
+  const lines = markdown.split('\n');
+
+  lines.forEach((line) => {
+    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(title, {
+          lower: true,
+          remove: /["'`?!]/g, // Removes quotes and similar characters
+        }),
+        title,
+        level,
+      });
+    }
+  });
+
+  return headers;
+};