From d48ce33884a9881243d75bc332455fe4f721e235 Mon Sep 17 00:00:00 2001
From: Peter Guy <peter.guy@sourcegraph.com>
Date: Wed, 2 Apr 2025 16:04:26 -0700
Subject: [PATCH 1/4] Add hover links to headings level 4 and 5

Add to heading levels 4 and 5 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.
---
 src/components/MdxComponents.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/MdxComponents.tsx b/src/components/MdxComponents.tsx
index 2350f93a7..99fa99956 100644
--- a/src/components/MdxComponents.tsx
+++ b/src/components/MdxComponents.tsx
@@ -53,6 +53,12 @@ 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} />;
+    },
     img: (props: any) => {
       return <img className="rounded-xl" {...props} />;
     },

From 0c2e8b56db85333f5fa06ea046a88aa1be8b45e5 Mon Sep 17 00:00:00 2001
From: Peter Guy <peter.guy@sourcegraph.com>
Date: Tue, 8 Apr 2025 14:44:16 -0700
Subject: [PATCH 2/4] Add headings to the component.

---
 src/components/mdx/Heading.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mdx/Heading.tsx b/src/components/mdx/Heading.tsx
index 10b41e022..54e85e5b7 100644
--- a/src/components/mdx/Heading.tsx
+++ b/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';
 	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>

From 7ab11ccbc2a670750562ee383674a8158ff38960 Mon Sep 17 00:00:00 2001
From: Peter Guy <peter.guy@sourcegraph.com>
Date: Tue, 8 Apr 2025 14:44:40 -0700
Subject: [PATCH 3/4] Add a heading 6 because I see it in tailwinds css and in
 the graphql page.

---
 src/components/MdxComponents.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/MdxComponents.tsx b/src/components/MdxComponents.tsx
index 99fa99956..a7cccaea8 100644
--- a/src/components/MdxComponents.tsx
+++ b/src/components/MdxComponents.tsx
@@ -59,6 +59,9 @@ const MdxComponents = (version?: string) => {
     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} />;
     },

From a81ffcbe21627bc89f4e2efb5cc698f78f6c97ae Mon Sep 17 00:00:00 2001
From: Peter Guy <peter.guy@sourcegraph.com>
Date: Tue, 8 Apr 2025 16:51:57 -0700
Subject: [PATCH 4/4] Add heading level 6 to component.

---
 src/components/mdx/Heading.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mdx/Heading.tsx b/src/components/mdx/Heading.tsx
index 54e85e5b7..86a420bcf 100644
--- a/src/components/mdx/Heading.tsx
+++ b/src/components/mdx/Heading.tsx
@@ -58,7 +58,7 @@ function Anchor({id, children}: {id: string; children: ReactNode}) {
 }
 
 interface HeadingProps {
-	level?: '2' | '3' | '4' | '5';
+	level?: '2' | '3' | '4' | '5' | '6';
 	id: string;
 	props: any;
 }