From 0006a2ec6608ec924ad88e5b85d26ff2a51d6821 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Tue, 9 Sep 2025 20:27:37 +0530 Subject: [PATCH 01/11] add header links --- css/style.css | 19 +++++++++++++++++++ js/copycode.js | 10 ++++++++++ 2 files changed, 29 insertions(+) diff --git a/css/style.css b/css/style.css index f45f0a39d2..8e30a8c3f9 100644 --- a/css/style.css +++ b/css/style.css @@ -1135,6 +1135,25 @@ h2 a { font-size: 16px; } +/* h2 -> h3 header links */ +.heading-link::after { + content: '🔗'; + margin-left: 0.5em; + color: var(--card-fg); +} + +.heading-link { + text-decoration: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + padding: 0.25em; +} + +.heading-link:is(:hover, :focus, :focus-visible) { + opacity: 1; + outline: 1px solid var(--card-fg); +} + /* search-bar desktop re-sizing */ @media all and (min-width: 950px) { .algolia-autocomplete { diff --git a/js/copycode.js b/js/copycode.js index 2174710746..921258d337 100644 --- a/js/copycode.js +++ b/js/copycode.js @@ -1,4 +1,5 @@ const codeBlocks = document.querySelectorAll("pre:has(code)"); +const headings = document.querySelectorAll('h2[id],h3[id]'); codeBlocks.forEach((block) => { // Only add button if browser supports Clipboard API @@ -13,6 +14,15 @@ codeBlocks.forEach((block) => { }); }); +// add heading links +for (const heading of headings) { + const linkIcon = document.createElement('a'); + linkIcon.setAttribute('href', `#${heading.id}`); + linkIcon.classList.add('heading-link'); + linkIcon.setAttribute("aria-label", `Link to section ${heading.id}`); + heading.appendChild(linkIcon); +} + function createCopyButton() { const button = document.createElement("button"); setButtonAttributes(button, { From d6bbad94dfcc968b904631c29417217311597a60 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Tue, 9 Sep 2025 20:35:29 +0530 Subject: [PATCH 02/11] fix redeclaration --- js/copycode.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/copycode.js b/js/copycode.js index 921258d337..c078bc2274 100644 --- a/js/copycode.js +++ b/js/copycode.js @@ -1,5 +1,5 @@ const codeBlocks = document.querySelectorAll("pre:has(code)"); -const headings = document.querySelectorAll('h2[id],h3[id]'); +const headers = document.querySelectorAll('h2[id],h3[id]'); codeBlocks.forEach((block) => { // Only add button if browser supports Clipboard API @@ -15,7 +15,7 @@ codeBlocks.forEach((block) => { }); // add heading links -for (const heading of headings) { +for (const heading of headers) { const linkIcon = document.createElement('a'); linkIcon.setAttribute('href', `#${heading.id}`); linkIcon.classList.add('heading-link'); From 7a564ea03f9e288506a4b36a3df7b742e96349f1 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Tue, 9 Sep 2025 20:43:51 +0530 Subject: [PATCH 03/11] fix design --- css/style.css | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 8e30a8c3f9..f3c5180f47 100644 --- a/css/style.css +++ b/css/style.css @@ -1138,20 +1138,19 @@ h2 a { /* h2 -> h3 header links */ .heading-link::after { content: '🔗'; - margin-left: 0.5em; - color: var(--card-fg); } .heading-link { text-decoration: none; opacity: 0; transition: opacity 0.2s ease-in-out; - padding: 0.25em; } +h2:hover .heading-link, +h3:hover .heading-link, .heading-link:is(:hover, :focus, :focus-visible) { opacity: 1; - outline: 1px solid var(--card-fg); + outline: 2px solid var(--card-fg); } /* search-bar desktop re-sizing */ From 8fd9b24a8d8306acd592cf95bce10019c7675f72 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Tue, 9 Sep 2025 20:49:25 +0530 Subject: [PATCH 04/11] add margin and font size --- css/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css/style.css b/css/style.css index f3c5180f47..353ff66858 100644 --- a/css/style.css +++ b/css/style.css @@ -1141,6 +1141,8 @@ h2 a { } .heading-link { + margin-left: 0.3em; + font-size: 1rem; text-decoration: none; opacity: 0; transition: opacity 0.2s ease-in-out; From 9317fd88b3d85f737ec5b326551090fbfe5e546e Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Sun, 14 Sep 2025 08:26:03 +0530 Subject: [PATCH 05/11] change link content to hash Signed-off-by: Shubham Oulkar --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 353ff66858..4d03eb51f1 100644 --- a/css/style.css +++ b/css/style.css @@ -1137,7 +1137,7 @@ h2 a { /* h2 -> h3 header links */ .heading-link::after { - content: '🔗'; + content: '#'; } .heading-link { From 77deb088b5fea7e32a32c31dcea2b9f1cc060c57 Mon Sep 17 00:00:00 2001 From: Shubham Oulkar Date: Sun, 14 Sep 2025 08:39:48 +0530 Subject: [PATCH 06/11] remove outline and add color to hash Signed-off-by: Shubham Oulkar --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 4d03eb51f1..5f9a31a1c5 100644 --- a/css/style.css +++ b/css/style.css @@ -1138,6 +1138,7 @@ h2 a { /* h2 -> h3 header links */ .heading-link::after { content: '#'; + color: var(--card-fg); } .heading-link { @@ -1152,7 +1153,6 @@ h2:hover .heading-link, h3:hover .heading-link, .heading-link:is(:hover, :focus, :focus-visible) { opacity: 1; - outline: 2px solid var(--card-fg); } /* search-bar desktop re-sizing */ From 5ebee474b4ff92065a311dccd7597cec20111662 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Sat, 20 Sep 2025 18:20:48 +0530 Subject: [PATCH 07/11] correct aria-label value --- js/copycode.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/copycode.js b/js/copycode.js index c078bc2274..ff4577b877 100644 --- a/js/copycode.js +++ b/js/copycode.js @@ -19,7 +19,7 @@ for (const heading of headers) { const linkIcon = document.createElement('a'); linkIcon.setAttribute('href', `#${heading.id}`); linkIcon.classList.add('heading-link'); - linkIcon.setAttribute("aria-label", `Link to section ${heading.id}`); + linkIcon.setAttribute("aria-label", `to section ${heading.textContent.trim()}`); heading.appendChild(linkIcon); } @@ -67,3 +67,4 @@ function updateButtonState(button, statusClass, ariaLabel) { button.dataset.timerId = timer; } + From 7498eb3ab30db4b464bdb1e687833ba9b10cda10 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Wed, 24 Sep 2025 09:10:53 +0530 Subject: [PATCH 08/11] Scope header selection to main section Co-authored-by: Jon Church --- js/copycode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/copycode.js b/js/copycode.js index ff4577b877..01aac9d395 100644 --- a/js/copycode.js +++ b/js/copycode.js @@ -1,5 +1,5 @@ const codeBlocks = document.querySelectorAll("pre:has(code)"); -const headers = document.querySelectorAll('h2[id],h3[id]'); +const headers = document.querySelectorAll('main :is(h2,h3)[id]'); codeBlocks.forEach((block) => { // Only add button if browser supports Clipboard API From 3e31697997dbf042316c419562abcb4218a42297 Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Wed, 24 Sep 2025 09:25:16 +0530 Subject: [PATCH 09/11] add target highliting to header links Co-authored-by: Jon Church --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index 5aedfbf36e..bc176ecd6a 100644 --- a/css/style.css +++ b/css/style.css @@ -1132,6 +1132,7 @@ h2 a { h2:hover .heading-link, h3:hover .heading-link, +:target .heading-link, .heading-link:is(:hover, :focus, :focus-visible) { opacity: 1; } From 4e8a8591f4461b3a34828c4c3593827d721d5bdc Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Wed, 24 Sep 2025 09:30:07 +0530 Subject: [PATCH 10/11] inherit color and font size from parent headers --- css/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index bc176ecd6a..db920dae21 100644 --- a/css/style.css +++ b/css/style.css @@ -1119,13 +1119,13 @@ h2 a { /* h2 -> h3 header links */ .heading-link::after { content: '#'; - color: var(--card-fg); } .heading-link { margin-left: 0.3em; - font-size: 1rem; + font-size: inherit; text-decoration: none; + color: inherit; opacity: 0; transition: opacity 0.2s ease-in-out; } @@ -1757,3 +1757,4 @@ blockquote { border-bottom: 1px solid var(--border); } } + From 2d3f972e6eba3f020d5969ab42839b64079c588f Mon Sep 17 00:00:00 2001 From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Date: Wed, 24 Sep 2025 09:42:10 +0530 Subject: [PATCH 11/11] expand link clickable area Co-authored-by: Jon Church --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index db920dae21..fc175634f4 100644 --- a/css/style.css +++ b/css/style.css @@ -1122,7 +1122,7 @@ h2 a { } .heading-link { - margin-left: 0.3em; + padding-inline: 0.3em; font-size: inherit; text-decoration: none; color: inherit;