trying to fix the inline codeblock

Author: jderochervlk

src/common/Url.res

@@ -105,3 +105,13 @@ let getVersionString = url =>
 let normalizePath = string => {
   string->String.replaceRegExp(/\/$/, "")->String.toLocaleLowerCase
 }
+
+let normalizeAnchor = string => {
+  string
+  ->String.replaceRegExp(/<[^>]+>/g, "")
+  ->String.replaceRegExp(/([\r\n]+ +)+/g, "")
+  ->String.replaceAll(" ", "-")
+  ->String.replaceAll("_", "-")
+  ->String.replaceAllRegExp(/[^a-zA-Z0-9-]/g, "")
+  ->String.toLocaleLowerCase
+}

src/common/Url.resi

@@ -32,3 +32,5 @@ let getVersionFromStorage: storageKey => option<string>
 let getVersionString: t => string
 
 let normalizePath: string => string
+
+let normalizeAnchor: string => string

src/components/Markdown.res

@@ -1,7 +1,16 @@
 // This file was automatically converted to ReScript from 'Markdown.re'
 // Check the output and make sure to delete the original file
 
-external childrenToString: React.element => string = "%identity"
+// type el = {@as("type") _type?: string}
+
+// external elementObject: React.element => el = "%identity"
+
+let childrenToString = element => {
+  JSON.stringifyAny(ReactDOMServer.renderToStaticMarkup(element))
+  ->Option.getOr("")
+  ->String.replaceRegExp(/<[^>]+>/g, "")
+  ->String.replaceRegExp(/([\r\n]+ +)+/g, "")
+}
 
 module P = {
   @react.component
@@ -143,10 +152,7 @@ module H2 = {
     // TODO: RR7 - this can be improved, but I need to figure out what the other possible types are
     let title = {
       try {
-        childrenToString(children)
-        ->String.toLowerCase
-        ->String.replaceAll(" ", "-")
-        ->String.replaceAll(".", "")
+        childrenToString(children)->Url.normalizeAnchor
       } catch {
       | _ => ""
       }

src/layouts/SidebarLayout.res

@@ -24,14 +24,18 @@ module Toc = {
   let make = (~entries: array<TableOfContents.entry>) =>
     <ul className="mt-3 py-1 mb-4 border-l border-fire-10">
       {Array.map(entries, ({header, href}) => {
-        <li key=header className="pl-2 mt-2 first:mt-1">
+        <li key=header className="pl-2 mt-2 first:mt-1" dataTestId=header>
           <Link.String
             onClick={_evt => scrollToAnchor(href)}
-            to=href
+            to={"#" ++ href->Url.normalizeAnchor}
             className="font-normal block text-14 text-gray-40 leading-tight hover:text-gray-80"
             preventScrollReset=true
           >
-            {React.string(header)}
+            {React.string(
+              header
+              ->String.replaceRegExp(/<[^>]+>/g, "")
+              ->String.replaceRegExp(/([\r\n]+ +)+/g, ""),
+            )}
           </Link.String>
         </li>
       })->React.array}