From c87bda3621ddb2772097793fc159df3d288215ef Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleat@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:38:07 -0500
Subject: [PATCH] Fix issue with anchor links reflowing
---
eleventy.config.js | 3 +--
public/js/heading-anchors.js | 10 +++++-----
2 files changed, 6 insertions(+), 7 deletions(-)
diff --git a/eleventy.config.js b/eleventy.config.js
index e56ad2d..350ac9a 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -85,8 +85,7 @@ export default async function(eleventyConfig) {
eleventyConfig.addPlugin(IdAttributePlugin, {
// by default we use Eleventy’s 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", () => {
diff --git a/public/js/heading-anchors.js b/public/js/heading-anchors.js
index 03134af..67debf6 100644
--- a/public/js/heading-anchors.js
+++ b/public/js/heading-anchors.js
@@ -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;