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;