diff --git a/www/src/components/AutoToc.tsx b/www/src/components/AutoToc.tsx index cb95c3919e..606856375e 100644 --- a/www/src/components/AutoToc.tsx +++ b/www/src/components/AutoToc.tsx @@ -68,15 +68,17 @@ function AutoToc({ className, tab = '', addAnchors = true }: IAutoToc) { }; observer.current = new IntersectionObserver(handleObserver, { rootMargin: '-50px 0px -80% 0px', threshold: 0.5 }); - const elements = document.querySelectorAll('main h2, main h3, main h4, main h5, main h6'); + const elements = document.querySelectorAll('main h1, main h2, main h3, main h4, main h5, main h6'); if (addAnchors) { - elements.forEach(el => { + elements.forEach((el, index) => { if (el.textContent) { el.classList.add('pgn-doc__heading'); const slug = slugify(el.textContent, { lower: true }); el.id = slug; - const anchor = createAnchor(slug); - el.appendChild(anchor); + if (el.children[index]?.tagName !== 'A') { + const anchor = createAnchor(slug); + el.appendChild(anchor); + } } }); } diff --git a/www/src/pages/foundations/brand-icons.mdx b/www/src/pages/foundations/brand-icons.mdx index aece5137cf..322c2fbc9d 100644 --- a/www/src/pages/foundations/brand-icons.mdx +++ b/www/src/pages/foundations/brand-icons.mdx @@ -9,7 +9,7 @@ import IconsTable from '../../components/IconsTable'; import PropsTable from '../../components/PropsTable'; import * as IconComponents from '~paragon-icons'; -## Brand Icons +# Brand Icons Displays a brand SVG icon from `@edx/paragon/icons`. See the Icon Component for more information. diff --git a/www/src/pages/foundations/icons.mdx b/www/src/pages/foundations/icons.mdx index a3ae4f3622..57f1c55671 100644 --- a/www/src/pages/foundations/icons.mdx +++ b/www/src/pages/foundations/icons.mdx @@ -10,7 +10,7 @@ import IconsTable from '../../components/IconsTable'; import PropsTable from '../../components/PropsTable'; import * as IconComponents from '~paragon-icons'; -## Icons +# Icons Displays an svg icon from `@edx/paragon/icons`. See the Icon Component for more information.