Merge branch 'main' into dev

Author: estruyf

components/Docs/NavGroup.tsx

@@ -4,6 +4,7 @@ import { PageFrontMatter } from '../../models';
 import { Link } from '../Link/Link';
 import { ParentLink } from '../Link/ParentLink';
 import { useRouter } from 'next/router';
+import { getHeadingLink } from '../../utils/getHeadingLink';
 
 export interface INavGroupProps {
   items: PageFrontMatter[];
@@ -33,7 +34,7 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
             <li key={index}>
               <Link
                 title={link}
-                link={`/docs/${item.slug !== "index" ? item.slug : ''}#${link.toLowerCase().replace(/\s/g, '-')}`}
+                link={`/docs/${item.slug !== "index" ? item.slug : ''}#${getHeadingLink(link)}`}
               />
             </li>
           );

utils/getHeadingLink.ts

@@ -0,0 +1,6 @@
+export const getHeadingLink = (value: string) => {
+  return value
+    .toLowerCase()
+    .replace(/\s/g, "-")
+    .replace(/[^a-zA-Z0-9.-]/g, "");
+};

utils/markdownToHtml.ts

@@ -8,6 +8,7 @@ import { visit } from "unist-util-visit";
 import * as shiki from "shiki";
 import fs from "fs";
 import path from "path";
+import { getHeadingLink } from "./getHeadingLink";
 
 class ShikiFm {
   public static highlighter: shiki.Highlighter | undefined = undefined;
@@ -110,8 +111,7 @@ const remarkFm = ({
       let lastChild = node.children[node.children.length - 1];
       if (lastChild && lastChild.type === "text") {
         let string = lastChild.value.replace(/ +$/, "");
-        let hId = string.toLowerCase().replace(/\s/g, "-");
-        hId = hId.replace(/[^a-zA-Z0-9.]/g, "");
+        let hId = getHeadingLink(string);
 
         if (!node.data) {
           node.data = {};