feat(docs): add anchor links on description terms #8413

KartikSoneji · 2023-03-14T05:54:11Z

Summary

Fixes: #8394

Problem

There is no easy way to link to an element of a description list

Solution

Automatically add <a> tags with href pointing to the <dt>'s id

Screenshots

(on hover)

Before

After

github-actions · 2023-03-14T06:17:42Z

This pull request has merge conflicts that must be resolved before it can be merged.

dipikabh · 2023-06-15T13:52:44Z

How about:

We drop the underline (we don't want to give the impression that clicking will take reader to another page)
The "#" or 🔗 icon can always be present next to the dt id (not just on hover)

Update: reverting these suggestions because the PR is inline with the current design on the website

KartikSoneji · 2023-06-15T14:21:07Z

Hmm. I replicated the behaviour of the headings to remain consistent with the design language.

dipikabh · 2023-06-15T14:57:51Z

I replicated the behaviour of the headings

Yup, I noticed that and came back here to take back my comment/suggestion 🙂

KartikSoneji · 2023-06-16T18:07:56Z

@dipikabh while I have your attention, can you please go through KartikSoneji:feature/add-css-animations?
I added some animations to the # and a simple fade to the underline since they look a bit jarring at the moment.

SphinxKnight · 2023-07-17T10:35:18Z

cc @mdn/mdn-community-engagement since this one is aging.

KartikSoneji · 2023-09-20T19:05:07Z

Hi, just a gentle reminder about this :)

caugner · 2023-10-11T08:52:01Z

Thank you @KartikSoneji, and sorry for the long review time! 🙏

OnkarRuikar · 2023-10-13T04:55:19Z

Now there is no way to recognize actual links:
https://developer.mozilla.org/en-US/docs/Web/CSS/border#values
vs old implementation:
https://web.archive.org/web/20231011150428/https://developer.mozilla.org/en-US/docs/Web/CSS/border#values

For <line-style> and <color> list items now there is no indication that these are hyper links.

caugner · 2023-10-13T06:21:50Z

@OnkarRuikar Good catch, can you open an issue for that?

OnkarRuikar · 2023-10-13T06:38:46Z

@OnkarRuikar Good catch, can you open an issue for that?

Done #9810

#8413 introduced a regression, making it hard to identify description terms (`<dt>`) that link to another page. This restores the style of those links, excluding anchor links, and also makes the hashtag of the anchor links interactive. Co-authored-by: Onkar Ruikar <[email protected]>

wbamberg · 2023-10-13T15:38:45Z

markdown/m2h/handlers/dl.ts

+    if (firstDtChild) {
+      dtChildren.unshift(
+        h(node, "a", { "data-link-to-id": "true" }, [firstDtChild])
+      );


I don't think it is ideal that this modifies the Markdown engine. It would be better if the Markdown just produced a clean <dl>, and this extra feature were implemented on top of the HTML output.

(basically, when we are talking about "MDN markdown", the fewer additions to GFM we have to talk about, the better.)

I don't think it is ideal that this modifies the Markdown engine. It would be better if the Markdown just produced a clean <dl>, and this extra feature were implemented on top of the HTML output.

I don't disagree. @wbamberg Do you mind opening an issue for this?

Fair point, I'll look into it.

Thank you @KartikSoneji . I didn't say, but should have, that this is a really nice feature, and thank you for adding it :).

Thanks!
Not sure if you remember but you reviewed it the first time around too: #3428

github-actions bot added macros tracking issues related to kumascript macros markdown markdown related issues and pull requests labels Mar 14, 2023

KartikSoneji force-pushed the feature/hyperlink-dt-table-entries branch 3 times, most recently from a605a6a to 1e9cf4a Compare March 14, 2023 06:17

github-actions bot added dependencies Pull requests that update a dependency file merge conflicts 🚧 Please rebase onto or merge the latest main. labels Mar 14, 2023

KartikSoneji force-pushed the feature/hyperlink-dt-table-entries branch from 1e9cf4a to 28a7286 Compare March 14, 2023 06:19

github-actions bot removed merge conflicts 🚧 Please rebase onto or merge the latest main. dependencies Pull requests that update a dependency file labels Mar 14, 2023

KartikSoneji force-pushed the feature/hyperlink-dt-table-entries branch 2 times, most recently from c61ef3c to 22310b3 Compare March 21, 2023 17:32

KartikSoneji added 3 commits March 21, 2023 23:03

feat: generate clickable links in <dt>

3dd0b26

feat: add # symbol on hover

7444c19

test(m2h): update test output

5212f24

KartikSoneji force-pushed the feature/hyperlink-dt-table-entries branch 2 times, most recently from 0f99668 to 5212f24 Compare March 21, 2023 17:36

fix: remove old attr- styles

d6535b2

caugner changed the title ~~feat: Generate Clickable Links for Description Lists~~ feat(docs): generate Clickable Links for Description Lists Jul 18, 2023

Merge branch 'main' into feature/hyperlink-dt-table-entries

ba62975

caugner changed the title ~~feat(docs): generate Clickable Links for Description Lists~~ enhance(docs): generate clickable links for description lists Jul 19, 2023

Merge branch 'main' into feature/hyperlink-dt-table-entries

9402df5

caugner self-requested a review September 25, 2023 15:41

caugner self-assigned this Sep 25, 2023

caugner approved these changes Oct 11, 2023

View reviewed changes

caugner changed the title ~~enhance(docs): generate clickable links for description lists~~ feat(docs): add anchor links on description terms Oct 11, 2023

caugner merged commit ff73a32 into mdn:main Oct 11, 2023

github-actions bot mentioned this pull request Oct 11, 2023

chore(main): release 2.32.0 #9724

Merged

OnkarRuikar mentioned this pull request Oct 13, 2023

Unable to recognize definition term hyperlinks in definition lists #9810

Closed

caugner mentioned this pull request Oct 13, 2023

fix(docs): restore behavior of description term links #9811

Merged

wbamberg reviewed Oct 13, 2023

View reviewed changes

wbamberg mentioned this pull request Oct 13, 2023

Adding anchor links to <dt> should not modify Markdown engine #9817

Closed

3 tasks

KartikSoneji deleted the feature/hyperlink-dt-table-entries branch October 13, 2023 18:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(docs): add anchor links on description terms #8413

feat(docs): add anchor links on description terms #8413

KartikSoneji commented Mar 14, 2023

github-actions bot commented Mar 14, 2023

dipikabh commented Jun 15, 2023 •

edited

Loading

KartikSoneji commented Jun 15, 2023 •

edited

Loading

dipikabh commented Jun 15, 2023

KartikSoneji commented Jun 16, 2023

SphinxKnight commented Jul 17, 2023

KartikSoneji commented Sep 20, 2023

caugner commented Oct 11, 2023

OnkarRuikar commented Oct 13, 2023

caugner commented Oct 13, 2023

OnkarRuikar commented Oct 13, 2023

wbamberg Oct 13, 2023 •

edited

Loading

caugner Oct 13, 2023

KartikSoneji Oct 13, 2023

wbamberg Oct 13, 2023

KartikSoneji Oct 13, 2023

feat(docs): add anchor links on description terms #8413

feat(docs): add anchor links on description terms #8413

Conversation

KartikSoneji commented Mar 14, 2023

Summary

Problem

Solution

Screenshots

Before

After

github-actions bot commented Mar 14, 2023

dipikabh commented Jun 15, 2023 • edited Loading

KartikSoneji commented Jun 15, 2023 • edited Loading

dipikabh commented Jun 15, 2023

KartikSoneji commented Jun 16, 2023

SphinxKnight commented Jul 17, 2023

KartikSoneji commented Sep 20, 2023

caugner commented Oct 11, 2023

OnkarRuikar commented Oct 13, 2023

caugner commented Oct 13, 2023

OnkarRuikar commented Oct 13, 2023

wbamberg Oct 13, 2023 • edited Loading

Choose a reason for hiding this comment

caugner Oct 13, 2023

Choose a reason for hiding this comment

KartikSoneji Oct 13, 2023

Choose a reason for hiding this comment

wbamberg Oct 13, 2023

Choose a reason for hiding this comment

KartikSoneji Oct 13, 2023

Choose a reason for hiding this comment

dipikabh commented Jun 15, 2023 •

edited

Loading

KartikSoneji commented Jun 15, 2023 •

edited

Loading

wbamberg Oct 13, 2023 •

edited

Loading