Skip to content

Commit

Permalink
Merge pull request #6409 from chrisrueger/docs-add-anchor-link-for-he…
Browse files Browse the repository at this point in the history
…adlines

Docs: add anchor links to all headlines
chrisrueger authored Dec 16, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 1c812c4 + 388159f commit ce60cc7
Showing 2 changed files with 40 additions and 1 deletion.
22 changes: 22 additions & 0 deletions docs/_includes/footer.htm
Original file line number Diff line number Diff line change
@@ -9,4 +9,26 @@
<li><a href="{{ "/" | prepend:site.baseurl }}">Home</a>
</ul>
</ul>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const headers = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id]');

headers.forEach(header => {
const iconLink = document.createElement('a');
iconLink.href = `#${header.id}`;
iconLink.innerHTML = '#';
iconLink.className = 'header-link';

// Wrap the icon inside a span to control visibility with CSS
const wrapper = document.createElement('span');
wrapper.className = 'header-link-wrapper';
wrapper.appendChild(iconLink);

// Append the wrapper to the header
header.appendChild(wrapper);
});
});
</script>

</footer>
19 changes: 18 additions & 1 deletion docs/css/style.scss
Original file line number Diff line number Diff line change
@@ -200,4 +200,21 @@ ul .side-nav-section{

pre.highlight {
overflow: auto;
}
}

.header-link-wrapper{
visibility: hidden;
margin-left: 2px;
padding-left: 2px;
}
/* Show the icon link on hover */
h1:hover .header-link-wrapper,
h2:hover .header-link-wrapper,
h3:hover .header-link-wrapper,
h4:hover .header-link-wrapper {
visibility: visible;
}
.header-link{
color:#ccc !important
}

0 comments on commit ce60cc7

Please sign in to comment.