Fix inline markup leaking into docs heading anchors#18197
Draft
pauldambra wants to merge 3 commits into
Draft
Conversation
Headings that embed inline markup (e.g. an icon <span> before the text) had that markup leak into their generated anchor ID, producing broken section links. Adds a local remark plugin that assigns a clean anchor ID to every heading before gatsby-remark-autolink-headers runs, stripping inline markup so it never reaches the URL. A shared helper centralizes the slug logic and is reused by the sidebar table of contents and the Algolia search index so all three agree (and trims a leading space that previously slugged to a leading hyphen). Generated-By: PostHog Code Task-Id: 43f6aaf6-0c09-48da-8061-ebb543dc7318
Contributor
Deploy preview
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
Contributor
Bundle reportTotal JS (gzip)6.29 MiB (-0.0 KiB / -0.0%) Eager graph (static-import closure per entrypoint)
Largest modules in the
|
| Module | Size |
|---|---|
css ./node_modules/.pnpm/css-loader@5.2.7_webpack@5.101.3/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.5.6_webpack@5.101.3/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./src/styles/global.css |
707.7 KiB |
./src/components/Stickers/Stickers.tsx |
696.4 KiB |
./.cache/caches/gatsby-plugin-mdx/mdx-scopes-dir/31a094f140f119e73085d847ae81b99b.js + 2 modules |
585.5 KiB |
./node_modules/.pnpm/@radix-ui+react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js |
481.4 KiB |
./node_modules/.pnpm/@codemirror+view@6.38.2/node_modules/@codemirror/view/dist/index.js |
458.1 KiB |
./node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.js + 29 modules |
395.1 KiB |
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.cjs.js |
364.8 KiB |
./node_modules/.pnpm/@posthog+icons@0.36.6_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
354.8 KiB |
./src/hooks/useCustomers.tsx + 54 modules |
353.9 KiB |
./node_modules/.pnpm/react-markdown@8.0.7_@types+react@16.14.66_react@18.3.1/node_modules/react-markdown/lib/react-markdown.js + 88 modules |
351.4 KiB |
./node_modules/.pnpm/cloudinary-core@2.14.0_lodash@4.17.21/node_modules/cloudinary-core/cloudinary-core.js |
281.9 KiB |
./src/components/ProductComparisonTable/index.tsx + 116 modules |
267.6 KiB |
./node_modules/.pnpm/@codesandbox+sandpack-react@2.20.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@codesandbox/sandpack-react/dist/index.mjs |
266.6 KiB |
./node_modules/.pnpm/d3@7.9.0/node_modules/d3/src/index.js + 208 modules |
247.4 KiB |
./src/components/Pricing/PricingSlider/Slider.tsx + 87 modules |
239.9 KiB |
Eager-graph budgets are report-only until a baseline is established. Sizes are gzip of public/**/*.js; eager size is webpack module source bytes.
CodeQL flagged the tag-stripping regex as incomplete multi-character sanitization. Drop any leftover angle brackets after removing balanced tag pairs so no partial tag can survive. Output for real headings is unchanged (the icon spans are fully removed either way); this only hardens the helper against malformed/unmatched markup. Generated-By: PostHog Code Task-Id: 43f6aaf6-0c09-48da-8061-ebb543dc7318
CodeQL's "incomplete multi-character sanitization" query flags the tag-strip regex on its shape, so the earlier bracket-removal follow-up didn't clear it. Apply the removal repeatedly until the string stops changing — the remediation CodeQL documents for this query. Output for real headings is unchanged. Generated-By: PostHog Code Task-Id: 43f6aaf6-0c09-48da-8061-ebb543dc7318
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Fixes docs section links where inline heading markup leaked into the anchor. Headings like the ones on PostHog AI example prompts put an icon
<span>before the text, andgatsby-remark-autolink-headersslugged the whole thing — so## <span>…<IconToggle /></span> Feature flagsbecame an ID like#span-classnameinline-block…-feature-flagsinstead of#feature-flags.plugins/gatsby-remark-heading-slug) that assigns a clean anchor ID to every heading before autolink-headers runs (which, withicon: false, only patches the ID and won't overwrite an existing one).gatsby/utils/headingSlug.jsand reuses it for the sidebar table of contents (formatToc) and the Algolia search index, so the element ID, ToC links, and search fragments all agree. Also trims a leading space that previously slugged to a leading hyphen.Why: section links on affected docs pages were broken because the heading markup was leaking into the URL fragment. Reported via a docs support ticket.
Checklist
vercel.jsonCreated with PostHog from a Slack thread