details: unique anchors shouldn't change with content order
See original GitHub issueFollow-up to https://github.com/iterative/dvc.org/issues/3314
Per https://github.com/iterative/dvc.org/pull/3329#issuecomment-1077311398, the way unique anchors are generated for <details>
blocks (based on the first child’s content + an incremental index if needed) can be problematic. Eg. a block is no 1 in the page, someone links to it, and later the content get’s rearranged such that the block is now no 2. The link is now incorrect (goes to a previous block, not the one we want).
Maybe we should require an id
or some other prop that’s supposed to be unique and use it in the anchor somehow. This way they’re predictable and stable.
Additionally, should we use a title
prop for the anchor base instead of the first child’s text?
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8 (8 by maintainers)
Top Results From Across the Web
CMS Basics: Using Link Anchors - University of Houston
Enter the ID (name) you want for the Anchor. Anchor IDs should not contain spaces, and should be unique within the page. You...
Read more >How to Optimize Your Anchor Text Strategy For SEO - Neil Patel
Anchor text makes a great addition to your SEO efforts. Here's how to optimize hyperlinks for a better SERP ranking.
Read more ><a>: The Anchor element - HTML: HyperText Markup Language
The HTML element (or anchor element), with its href attribute, ... If the Content-Disposition header has different information from the ...
Read more >Should I make HTML Anchors with 'name' or 'id'?
Use id or name ? Authors should consider the following issues when deciding whether to use id or name for an anchor name:...
Read more >What Is Anchor Text? Everything You Need to Know ... - Ahrefs
Exact Match: the anchor text is the exact keyword or phrase for which we want to rank. Ahrefs' Backlink Checker is one of...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
#3352 was for the approach mentioned but was closed in favor of #3329. The considerations were mentioned before the merge. We made the assumption such changes within a page will be rare and also we can try to make the titles unique on their own.
Yes, sure it will be consistent with other blocks as well. I will be submitting a pr on this.
Yes. It should be working just fine.
PS: if we are still thinking, we should be using
id
for making the link unique then we should proceed with the idea early because we also wouldn’t want the current links with numbering also expire don’t work.I like that the build would fail when it found duplicate anchors. Although… we don’t do that for regular titles (headers) so maybe it’s overkill. The optional
position
prop also seems unnecessary (we can just always append aftertitle
).Using
code
orid
as the unique field can work. I personally thinkid
is better since it’s already required to be unique I think (in HTML rules).Another (maybe easier) solution is to add an optional
anchor
orslug
prop where you just specify the exact anchor override directly instead of having to generate it based on 2 fields (as suggested in https://github.com/iterative/dvc.org/pull/3352#pullrequestreview-907683757 and https://github.com/iterative/dvc.org/pull/3389#issuecomment-1083158254).Whatever you decide. Thanks