Remove Footnote entry from table of contents when footnotes present

Author: webstackdev

_TODO.md

@@ -103,6 +103,12 @@ Need a tooltip component for consistency. List to add tooltips to:
 - Bug reporter modal
 - Email templates
 
+## HubSpot Signup Issues
+
+- Add people who sign up for newsletter, download, or fill out contact form to Hubspot tracking. Need to configure it to remove them if they do the GDPR remove me. Also remove them from the newsletter.
+
+- If a reader has already given their email address - newsletter signup, contact form, download registration, then the download CTA on short form articles should go directly to the HTML version of the deep dive, and it should have a PDF download button. Think this workflow through - maybe a "Short / Deep-Dive" slider button on top and don't show the CTA + the PDF download button.
+
 ## Theming and improving Mermaid diagrams
 
 [rerender diagrams when I switched color-scheme](https://github.com/mermaid-js/mermaid/issues/1945)
@@ -122,18 +128,12 @@ https://mermaid.js.org/config/directives.html
 
 - Re-enable link validator in `astro.config.ts` when pdf / downloads sorted out
 
-- Add people who sign up for newsletter, download, or fill out contact form to Hubspot tracking. Need to configure it to remove them if they do the GDPR remove me. Also remove them from the newsletter.
-
 - Uppy, Tus server, whatever other server needed for file upload on Contact Form component
 
 - Use an in-project Image component to wrap Astro's Image and Picture. Show a magnifying glass with a "+" for the cursor on hover, and a modal to show a magnified view of images on click.
 
 - Add a copyright notice to content
 
-- We need to exclude "Footnotes" from the ToC list of links. Right now it shows at the bottom if there's a Footnotes H2 (footnotes in the article).
-
-- If a reader has already given their email address - newsletter signup, contact form, download registration, then the download CTA on short form articles should go directly to the HTML version of the deep dive, and it should have a PDF download button. Think this workflow through - maybe a "Short / Deep-Dive" slider button on top and don't show the CTA + the PDF download button.
-
 - The articles list page should show tags at top for quick navigation. Show the count of articles per tag unless they're all the same on the tag.
 
 - Update EXIF data on all AI generated JPGs

src/components/Toc/server/__fixtures__/headings.fixture.json

@@ -5,5 +5,6 @@
   { "slug": "section-one-details", "depth": 4, "text": "Deep Details" },
   { "slug": "section-two", "depth": 2, "text": "Section Two" },
   { "slug": "section-two-overview", "depth": 3, "text": "Overview" },
-  { "slug": "empty-heading", "depth": 2, "text": "" }
+  { "slug": "empty-heading", "depth": 2, "text": "" },
+  { "slug": "footnotes", "depth": 2, "text": "Footnotes" }
 ]

src/components/Toc/server/__tests__/index.spec.ts

@@ -32,4 +32,28 @@ describe('buildTocTree', () => {
 
     expect(tree).toEqual([])
   })
+
+  it('excludes Footnotes headings from the tree', () => {
+    const headings: MarkdownHeading[] = [
+      { slug: 'intro', depth: 2, text: 'Introduction' },
+      { slug: 'footnotes', depth: 2, text: 'Footnotes' },
+    ]
+
+    const tree = buildTocTree(headings)
+
+    expect(tree).toHaveLength(1)
+    expect(tree[0]?.slug).toBe('intro')
+  })
+
+  it('excludes Footnotes headings case-insensitively', () => {
+    const headings: MarkdownHeading[] = [
+      { slug: 'intro', depth: 2, text: 'Introduction' },
+      { slug: 'footnotes', depth: 2, text: '  FOOTNOTES  ' },
+    ]
+
+    const tree = buildTocTree(headings)
+
+    expect(tree).toHaveLength(1)
+    expect(tree[0]?.slug).toBe('intro')
+  })
 })

src/components/Toc/server/index.ts

@@ -7,6 +7,9 @@ export interface TocItem {
   children: TocItem[]
 }
 
+/** Heading texts excluded from the table of contents (case-insensitive) */
+const EXCLUDED_HEADINGS = new Set(['footnotes'])
+
 export const buildTocTree = (headings: MarkdownHeading[]): TocItem[] => {
   const tree: TocItem[] = []
   const stack: TocItem[] = []
@@ -16,6 +19,11 @@ export const buildTocTree = (headings: MarkdownHeading[]): TocItem[] => {
       return
     }
 
+    // Skip headings that should not appear in the ToC (e.g. "Footnotes")
+    if (EXCLUDED_HEADINGS.has(heading.text.trim().toLowerCase())) {
+      return
+    }
+
     const node: TocItem = {
       depth: heading.depth,
       slug: heading.slug,