Add hover links to heading levels 4, 5, and 6 (#1064)

Add to heading levels 4, 5, and 6 the same hover-over links and
clickable-ness that heading levels 1-3 enjoy. This does not add them to
the in-page table of contents, but simply lets users easily copy deep
links straight to the sections.


https://github.com/user-attachments/assets/e03428c9-aba4-439d-904b-acce74225da0

Author: peterguy

src/components/MdxComponents.tsx

@@ -53,6 +53,15 @@ const MdxComponents = (version?: string) => {
     h3: (props: any) => {
       return <Heading level="3" id={props.id} props={props} />;
     },
+    h4: (props: any) => {
+      return <Heading level="4" id={props.id} props={props} />;
+    },
+    h5: (props: any) => {
+      return <Heading level="5" id={props.id} props={props} />;
+    },
+    h6: (props: any) => {
+      return <Heading level="6" id={props.id} props={props} />;
+    },
     img: (props: any) => {
       return <img className="rounded-xl" {...props} />;
     },

src/components/mdx/Heading.tsx

@@ -58,13 +58,13 @@ function Anchor({id, children}: {id: string; children: ReactNode}) {
 }
 
 interface HeadingProps {
-	level?: '2' | '3';
+	level?: '2' | '3' | '4' | '5' | '6';
 	id: string;
 	props: any;
 }
 
 export function Heading({level = '2', id, props}: HeadingProps) {
-	let Component = `h${level}` as 'h2' | 'h3';
+	let Component = `h${level}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 	return (
 		<Component {...props}>
 			<Anchor id={id}>{props.children}</Anchor>