feat: docs anchor links for headings (#214)

closes #136 

once merged, all docs headings will turn into a hyperlink with an anchor
/ ID. Simply click the heading you wish to get the URL for, and it will
populate in your navigation bar.

website/components/DocsHeading.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+function textToKebabCase(text: string): string {
+  // Convert to lowercase
+  let kebabCase = text.toLowerCase();
+
+  // Replace non-alphanumeric characters with hyphens
+  kebabCase = kebabCase.replace(/[^a-z0-9]+/g, "-");
+
+  // Remove leading and trailing hyphens
+  kebabCase = kebabCase.replace(/^-+|-+$/g, "");
+
+  return kebabCase;
+}
+
+const DocsHeading = ({
+  as,
+  children,
+  ...restProps
+}: {
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  children?: ReactNode;
+}) => {
+  const Tag = as;
+  const id = textToKebabCase(children?.toString() || "");
+  return (
+    <Tag {...restProps} style={{ position: "relative" }}>
+      <span
+        style={{ position: "absolute", top: -80 }}
+        id={id}
+        role="presentation"
+      ></span>
+      <a href={`#${id}`} style={{ textDecoration: "none", color: "inherit" }}>
+        {children}
+      </a>
+    </Tag>
+  );
+};
+
+export default DocsHeading;

website/mdx-components.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 
 import CodeBlock from "@/components/CodeBlock";
+import DocsHeading from "@/components/DocsHeading";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -39,6 +40,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         />
       );
     },
+    h1: (props) => <DocsHeading as="h1" {...props} />,
+    h2: (props) => <DocsHeading as="h2" {...props} />,
+    h3: (props) => <DocsHeading as="h3" {...props} />,
+    h4: (props) => <DocsHeading as="h4" {...props} />,
+    h5: (props) => <DocsHeading as="h5" {...props} />,
+    h6: (props) => <DocsHeading as="h6" {...props} />,
     // @ts-expect-error children will not be undefined
     pre: CodeBlock,
     Vimeo: ({ id }: { id: string }) => {