fix(content-blog): resolve anchor links in truncated blog previews - #12364
Open
devteamaegis wants to merge 1 commit into
Open
fix(content-blog): resolve anchor links in truncated blog previews#12364devteamaegis wants to merge 1 commit into
devteamaegis wants to merge 1 commit into
Conversation
In blog paginated list views (/blog, tags, authors), a post preview is rendered under the list page URL rather than the post permalink. An in-page anchor link written above the truncate marker, e.g. `[jump](#section)`, was left relative and therefore resolved against the list page (/blog#section) instead of the post, leading nowhere. The blog markdown loader already truncates the preview in its `?truncated=true` branch, which is the only place that knows it is producing a list-view preview. There we now rebase bare `#anchor` link targets to the current post permalink, using the source->permalink map already maintained for link resolution. Other relative links are left untouched, as they are handled later in the MDX pipeline. The full post page (compiled without the query) is unaffected. Adds unit tests for the new `resolveTruncatedAnchorLinks` helper. Closes facebook#9731
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
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.
Pre-flight checklist
Motivation
Closes #9731 (see also #10287).
In blog paginated list views (
/blog, tags pages, author pages), a post preview is rendered under the list page URL, not the post permalink. An in-page anchor link written above the truncate marker, e.g.was left relative and therefore resolved against the list page —
/blog#details— instead of the post, so clicking it in a preview leads nowhere. On the full post page the same link works, because it resolves against the post URL.onBrokenAnchorsalso reports these as broken.The fix
The blog markdown loader already truncates the preview inside its
?truncated=truebranch — the one place in the pipeline that knows it is producing a list-view preview (the full post page is a separate compilation with no query). There we now rebase bare#anchorlink targets to the current post permalink, using thesource -> permalinkmap the plugin already maintains for Markdown link resolution.Only bare
#anchortargets are rewritten. Other relative links (./x,../x,x.md) are intentionally left untouched — they are handled later in the MDX pipeline (resolveMarkdownLinks/transformLinks) — and absolute/external links are ignored. The full post page is not affected, so same-page anchors there remain native<a href="#…">links.Changed files (all in
docusaurus-plugin-content-blog):blogUtils.ts— newresolveTruncatedAnchorLinks(content, permalink)helper.markdownLoader.ts— call it in thetruncatedbranch, resolving the current post permalink fromthis.resourcePath.index.ts/types.ts— passsiteDirand thesourceToPermalinkmap to the loader.Test Plan
Unit tests (
blogUtils.test.ts,describe('resolveTruncatedAnchorLinks')): 5 cases covering bare anchors, a following title,<…>-wrapped targets, multiple anchors, and that non-anchor/absolute/external links are left untouched.yarn test blogUtils(vitest) is green; ESLint and the formatter pass.End-to-end on a fresh
classicsite with a post containing[the details section](#details)above the truncate marker and a## Detailsheading below:/blog<a href="#details">(→/blog#details, broken)<a href="/blog/…/post#details"><a href="#details">(broken)<a href="/blog/…/post#details"><a href="#details"><a href="#details">(unchanged)onBrokenAnchorsbuild report/blog→#detailsbrokenTest links
Deploy preview: https://deploy-preview-12364--docusaurus-2.netlify.app/
Related issues/PRs
Closes #9731. Related: #10287.