Fix html in header IDs

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "workbench.colorCustomizations": {
         "activityBar.background": "#88d7ea",
+        "activityBar.activeBorder": "#de41bf",
         "activityBar.foreground": "#15202b",
         "activityBar.inactiveForeground": "#15202b99",
         "activityBarBadge.background": "#de41bf",

src/utils/cleanHeaders.ts

@@ -0,0 +1,8 @@
+const cleanHeaders = (html: string): string => {
+    return html.replace(
+        /<h([0-9])>(.*?)(\{#.*?<\/?em>.*?})/g,
+        (_, level, title, tag) => `<h${level}>${title} ${tag.replace(/<\/?em>/g, '_')}`
+    );
+};
+
+export default cleanHeaders;

src/utils/nodes.ts

@@ -118,7 +118,7 @@ const getHomePage = (): SilverstripeDocument | null => {
   return __home;
 };
 
-const getCurrentVersion = (): string | null => __currentVersion;
+const getCurrentVersion = (): string => __currentVersion || '4';
 
 const setCurrentNode = (slug: string): void => {
   const currentNode = getNodes().find(n => n.slug === slug) || null;

src/utils/parseHTML.ts

@@ -8,6 +8,8 @@ import cleanCalloutTags from './cleanCalloutTags';
 import { ReactElement } from 'react';
 import rewriteTable from './rewriteTable';
 import rewriteHeader from './rewriteHeader';
+import cleanHeaders from './cleanHeaders';
+
 /**
  * Replace all the [CHILDREN] with proper React components.
  * @param html 
@@ -19,6 +21,7 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
     cleanHTML = cleanCalloutTags(cleanHTML);
     cleanHTML = cleanWhitespace(cleanHTML);
     cleanHTML = cleanApiTags(cleanHTML);
+    cleanHTML = cleanHeaders(cleanHTML);
     
     const parseOptions = {
         replace(domNode: DomElement): ReactElement | object | undefined | false {

src/utils/rewriteLink.ts

@@ -2,7 +2,7 @@ import { createElement, ReactElement } from 'react';
 import { domToReact, DomElement, HTMLReactParserOptions } from 'html-react-parser';
 import { Link } from 'gatsby';
 import rewriteAPILink from './rewriteAPILink';
-import { getCurrentNode } from '../utils/nodes';
+import { getCurrentNode, getCurrentVersion } from '../utils/nodes';
 import path from 'path';
 
 interface LinkAttributes {
@@ -21,6 +21,7 @@ const rewriteLink = (
     }
 
     const currentNode = getCurrentNode();
+    const version = getCurrentVersion();
 
     // api links
     if (href.match(/^api\:/)) {
@@ -42,10 +43,13 @@ const rewriteLink = (
     }
 
     // Relative to root
-    if (href.substring(0, 1) === '/') {
+    if (href.startsWith('/')) {
         return createElement(
             Link,
-            { to: href, className: 'gatsby-link' },
+            {
+                to: path.join('en', version, href),
+                className: 'gatsby-link'
+            },
             domToReact(children, parseOptions)
         )
     }