fix: link headers in table of contents to actual section (#43)

* link headers in table of contents to actual section * fix impl for getSlugFromText * inherit styling from parent * update search
fern-api · Aug 24, 2023 · 71b4061 · 71b4061
1 parent 1ad11b2
commit 71b4061
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/packages/ui/app/src/custom-docs-page/TableOfContents.tsx b/packages/ui/app/src/custom-docs-page/TableOfContents.tsx
@@ -2,6 +2,7 @@ import { Text } from "@blueprintjs/core";
 import classNames from "classnames";
 import { marked } from "marked";
 import { useMemo } from "react";
+import { getSlugFromText } from "../mdx/base-components";
 
 export declare namespace TableOfContents {
     export interface Props {
@@ -32,7 +33,12 @@ export const TableOfContents: React.FC<TableOfContents.Props> = ({ className, ma
                             style={{ marginLeft: 8 * (heading.depth - minDepth) }}
                             ellipsize
                         >
-                            {heading.text}
+                            <a
+                                href={`#${getSlugFromText(heading.text)}`}
+                                style={{ textDecoration: "none", color: "inherit" }}
+                            >
+                                {heading.text}
+                            </a>
                         </Text>
                     ))}
                 </div>

diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
@@ -107,7 +107,7 @@ const flatten = (
 export const H1: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h1
             id={slug}
@@ -126,7 +126,7 @@ export const H1: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H2: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h2
             id={slug}
@@ -145,7 +145,7 @@ export const H2: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H3: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h3
             id={slug}
@@ -164,7 +164,7 @@ export const H3: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H4: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h4
             id={slug}
@@ -183,7 +183,7 @@ export const H4: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H5: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h5
             id={slug}
@@ -202,7 +202,7 @@ export const H5: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ..
 export const H6: React.FC<HTMLAttributes<HTMLHeadingElement>> = ({ className, ...rest }) => {
     const children = React.Children.toArray(rest.children);
     const text = children.reduce(flatten, "");
-    const slug = text.toLowerCase().replace(/\W/g, "-");
+    const slug = getSlugFromText(text);
     return (
         <h6
             id={slug}
@@ -275,3 +275,7 @@ export const A: React.FC<HTMLAttributes<HTMLAnchorElement>> = ({ className, ...r
         />
     );
 };
+
+export function getSlugFromText(text: string): string {
+    return text.toLowerCase().replace(/\W/g, "-");
+}