From ac3ba6de4602d737ce82a4eecc4c38241047b35e Mon Sep 17 00:00:00 2001
From: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Date: Fri, 3 Jan 2025 07:24:47 -0600
Subject: [PATCH 1/2] propose heading indentation within metabar toc

---
 .../Containers/MetaBar/index.stories.tsx          | 15 +++++++++++++++
 apps/site/components/Containers/MetaBar/index.tsx |  9 +++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/site/components/Containers/MetaBar/index.stories.tsx b/apps/site/components/Containers/MetaBar/index.stories.tsx
index 9d31de185720c..adc1cb49d6c6a 100644
--- a/apps/site/components/Containers/MetaBar/index.stories.tsx
+++ b/apps/site/components/Containers/MetaBar/index.stories.tsx
@@ -78,6 +78,21 @@ export const Default: Story = {
           depth: 3,
           data: { id: 'contact_and_future_updates' },
         },
+        {
+          value: 'Email',
+          depth: 4,
+          data: { id: 'email' },
+        },
+        {
+          value: 'Slack',
+          depth: 4,
+          data: { id: 'slack' },
+        },
+        {
+          value: '#node-website',
+          depth: 5, // h5s do not get shown
+          data: { id: 'node-website' },
+        },
       ],
     },
   },
diff --git a/apps/site/components/Containers/MetaBar/index.tsx b/apps/site/components/Containers/MetaBar/index.tsx
index febcc88bf3e60..e1b06d74f7104 100644
--- a/apps/site/components/Containers/MetaBar/index.tsx
+++ b/apps/site/components/Containers/MetaBar/index.tsx
@@ -44,8 +44,13 @@ const MetaBar: FC<MetaBarProps> = ({ items, headings }) => {
             <dd>
               <ol>
                 {heading.map(head => (
-                  <li key={head.value}>
-                    <Link href={`#${head?.data?.id}`}>{head.value}</Link>
+                  <li
+                    key={head.value}
+                    className={
+                      head.depth === 3 ? 'pl-2' : head.depth === 4 ? 'pl-4' : ''
+                    }
+                  >
+                    <Link href={`#${head?.data?.id}`}> {head.value}</Link>
                   </li>
                 ))}
               </ol>

From 7a0f54228a9dbddaa363571a08d54b527d860aa3 Mon Sep 17 00:00:00 2001
From: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Date: Fri, 3 Jan 2025 07:46:40 -0600
Subject: [PATCH 2/2] adds test for heading visibility

---
 .../MetaBar/__tests__/index.test.mjs          | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 apps/site/components/Containers/MetaBar/__tests__/index.test.mjs

diff --git a/apps/site/components/Containers/MetaBar/__tests__/index.test.mjs b/apps/site/components/Containers/MetaBar/__tests__/index.test.mjs
new file mode 100644
index 0000000000000..ae7bb85bf8dc9
--- /dev/null
+++ b/apps/site/components/Containers/MetaBar/__tests__/index.test.mjs
@@ -0,0 +1,60 @@
+import { render } from '@testing-library/react';
+
+import MetaBar from '..';
+
+describe('MetaBar', () => {
+  it('does not render h5s in the table of contents', () => {
+    const { queryByText, getByText } = render(
+      <MetaBar
+        items={{}}
+        headings={{
+          items: [
+            {
+              value: 'Heading Level 1',
+              depth: 1,
+              data: { id: 'heading-1' },
+            },
+            {
+              value: 'Heading Level 2',
+              depth: 2,
+              data: { id: 'heading-2' },
+            },
+            {
+              value: 'Heading Level 3',
+              depth: 3,
+              data: { id: 'heading-3' },
+            },
+            {
+              value: 'Heading Level 4',
+              depth: 4,
+              data: { id: 'heading-4' },
+            },
+            {
+              value: 'Heading Level 5',
+              depth: 5,
+              data: { id: 'heading-5' },
+            },
+            {
+              value: 'Heading Level 6',
+              depth: 6,
+              data: { id: 'heading-6' },
+            },
+          ],
+        }}
+      />
+    );
+
+    const h1Element = queryByText('Heading Level 1');
+    expect(h1Element).not.toBeInTheDocument();
+
+    getByText('Heading Level 2');
+    getByText('Heading Level 3');
+    getByText('Heading Level 4');
+
+    const h5Element = queryByText('Heading Level 5');
+    expect(h5Element).not.toBeInTheDocument();
+
+    const h6Element = queryByText('Heading Level 6');
+    expect(h6Element).not.toBeInTheDocument();
+  });
+});