Fix issue with anchor links reflowing

This commit is contained in:
Zach Leatherman 2024-08-09 16:38:07 -05:00
parent b5a00fd776
commit c87bda3621
2 changed files with 6 additions and 7 deletions

View File

@ -85,8 +85,7 @@ export default async function(eleventyConfig) {
eleventyConfig.addPlugin(IdAttributePlugin, {
// by default we use Eleventys built-in `slugify` filter:
// slugify: eleventyConfig.getFilter("slugify"),
// default:
// selector: "h1,h2,h3,h4,h5,h6",
// selector: "h1,h2,h3,h4,h5,h6", // default
});
eleventyConfig.addShortcode("currentBuildDate", () => {

View File

@ -20,17 +20,18 @@ class HeadingAnchors extends HTMLElement {
}
/* For headings that already have links */
:is(h1, h2, h3, h4, h5, h6):has(a[href]:not(.heading-anchor)):is(:hover, :focus-within) .heading-anchor:after {
content: "#";
content: "#" / "";
opacity: 1;
}
.heading-anchor:focus:after,
.heading-anchor:hover:after {
content: "#";
content: "#" / "";
opacity: 1;
}
.heading-anchor:after {
content: "#";
content: "#" / "";
margin-left: .25em;
color: #aaa;
opacity: 0;
}`;
constructor() {
@ -70,7 +71,6 @@ class HeadingAnchors extends HTMLElement {
getAnchorElement(heading) {
let anchor = document.createElement("a");
anchor.setAttribute("data-pagefind-ignore", "");
anchor.href = `#${heading.id}`;
anchor.classList.add("heading-anchor");
return anchor;