cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix issue with anchor links reflowing

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
eleventy.config.js
View File

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

10
public/js/heading-anchors.js
View File

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