question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

details: unique anchors shouldn't change with content order

See original GitHub issue

Follow-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:closed
  • Created a year ago
  • Reactions:1
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
yathomasicommented, Mar 24, 2022

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.

#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.

Additionally, should we use a title prop for the anchor base instead of the first child’s text?

Yes, sure it will be consistent with other blocks as well. I will be submitting a pr on this.

Can you put emojis in title values though? 😅

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.

1reaction
jorgeorpinelcommented, Mar 31, 2022

The solution for this was kinda already submitted on https://github.com/iterative/dvc.org/pull/3352

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 after title).

Using code or id as the unique field can work. I personally think id 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 or slug 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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found