Swap to use IdAttributePlugin instead of markdown-it-anchor
This commit is contained in:
Zach Leatherman
parent
49610beab3
commit
1c3c777a1e
@ -32,6 +32,8 @@
|
||||
<style>{% getBundle "css" %}</style>
|
||||
{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
|
||||
{#- <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
|
||||
|
||||
{%- js %}{% include "public/js/heading-anchors.js" %}{% endjs %}
|
||||
</head>
|
||||
<body>
|
||||
<a href="#skip" class="visually-hidden">Skip to main content</a>
|
||||
@ -51,7 +53,9 @@
|
||||
</header>
|
||||
|
||||
<main id="skip">
|
||||
{{ content | safe }}
|
||||
<heading-anchors>
|
||||
{{ content | safe }}
|
||||
</heading-anchors>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -59,5 +63,6 @@
|
||||
</footer>
|
||||
|
||||
<!-- This page `{{ page.url | htmlBaseUrl }}` was built on {% currentBuildDate %} -->
|
||||
<script type="module" src="{% getBundleFileUrl "js" %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
import markdownItAnchor from "markdown-it-anchor";
|
||||
|
||||
import { InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy";
|
||||
import { IdAttributePlugin, InputPathToUrlTransformPlugin, HtmlBasePlugin } from "@11ty/eleventy";
|
||||
import { feedPlugin } from "@11ty/eleventy-plugin-rss";
|
||||
import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
|
||||
import pluginNavigation from "@11ty/eleventy-navigation";
|
||||
@ -28,8 +26,8 @@ export default async function(eleventyConfig) {
|
||||
// Per-page bundles, see https://github.com/11ty/eleventy-plugin-bundle
|
||||
// Adds the {% css %} paired shortcode
|
||||
eleventyConfig.addBundle("css");
|
||||
// Do you want a {% js %} bundle shortcode too?
|
||||
// eleventyConfig.addBundle("js");
|
||||
// Adds the {% js %} paired shortcode
|
||||
eleventyConfig.addBundle("js");
|
||||
|
||||
// Official plugins
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
|
||||
@ -84,20 +82,27 @@ export default async function(eleventyConfig) {
|
||||
// Filters
|
||||
eleventyConfig.addPlugin(pluginFilters);
|
||||
|
||||
// Customize Markdown library settings:
|
||||
eleventyConfig.amendLibrary("md", mdLib => {
|
||||
mdLib.use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "header-anchor",
|
||||
symbol: "#",
|
||||
ariaHidden: false,
|
||||
}),
|
||||
level: [1,2,3,4],
|
||||
slugify: eleventyConfig.getFilter("slugify")
|
||||
});
|
||||
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",
|
||||
});
|
||||
|
||||
// Customize Markdown library settings:
|
||||
// eleventyConfig.amendLibrary("md", mdLib => {
|
||||
// mdLib.use(markdownItAnchor, {
|
||||
// permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
// placement: "after",
|
||||
// class: "header-anchor",
|
||||
// symbol: "#",
|
||||
// ariaHidden: false,
|
||||
// }),
|
||||
// level: [1,2,3,4],
|
||||
// slugify: eleventyConfig.getFilter("slugify")
|
||||
// });
|
||||
// });
|
||||
|
||||
eleventyConfig.addShortcode("currentBuildDate", () => {
|
||||
return (new Date()).toISOString();
|
||||
});
|
||||
|
||||
@ -35,14 +35,13 @@
|
||||
},
|
||||
"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "3.0.0-alpha.16",
|
||||
"@11ty/eleventy": "3.0.0-alpha.17",
|
||||
"@11ty/eleventy-img": "5.0.0-beta.5",
|
||||
"@11ty/eleventy-navigation": "^0.3.5",
|
||||
"@11ty/eleventy-plugin-rss": "2.0.0-beta.8",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"luxon": "^3.4.4",
|
||||
"markdown-it-anchor": "^8.6.7",
|
||||
"zod": "^3.23.8",
|
||||
"zod-validation-error": "^3.3.0"
|
||||
}
|
||||
|
||||
@ -257,25 +257,25 @@ header {
|
||||
}
|
||||
|
||||
/* Direct Links / Markdown Headers */
|
||||
.header-anchor {
|
||||
.heading-anchor {
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
font-size: 1em;
|
||||
margin-left: .1em;
|
||||
}
|
||||
a[href].header-anchor,
|
||||
a[href].header-anchor:visited {
|
||||
a[href].heading-anchor,
|
||||
a[href].heading-anchor:visited {
|
||||
color: transparent;
|
||||
}
|
||||
a[href].header-anchor:focus,
|
||||
a[href].header-anchor:hover {
|
||||
a[href].heading-anchor:focus,
|
||||
a[href].heading-anchor:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href].header-anchor:focus,
|
||||
:hover > a[href].header-anchor {
|
||||
a[href].heading-anchor:focus,
|
||||
:hover > a[href].heading-anchor {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
h2 + .header-anchor {
|
||||
h2 + .heading-anchor {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
37
public/js/heading-anchors.js
Normal file
37
public/js/heading-anchors.js
Normal file
@ -0,0 +1,37 @@
|
||||
// Thank you to https://github.com/daviddarnes/heading-anchors
|
||||
|
||||
class HeadingAnchors extends HTMLElement {
|
||||
static register(tagName) {
|
||||
if ("customElements" in window) {
|
||||
customElements.define(tagName || "heading-anchors", HeadingAnchors);
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.headings.forEach((heading) => {
|
||||
if(!heading.querySelector("a.direct-link") || heading.hasAttribute("data-heading-anchors-optout")) {
|
||||
heading.append(this.anchor(heading));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
anchor(heading) {
|
||||
// TODO this would be good use case for shadow dom
|
||||
let anchor = document.createElement("a");
|
||||
anchor.setAttribute("data-pagefind-ignore", "");
|
||||
anchor.href = `#${heading.id}`;
|
||||
anchor.classList.add("heading-anchor");
|
||||
anchor.innerHTML = `<span class="visually-hidden">Jump to heading</span><span aria-hidden="true">#</span>`;
|
||||
return anchor;
|
||||
}
|
||||
|
||||
get headings() {
|
||||
return this.querySelectorAll(this.selector.split(",").map(entry => `${entry.trim()}[id]`));
|
||||
}
|
||||
|
||||
get selector() {
|
||||
return this.getAttribute("selector") || "h1,h2,h3,h4"
|
||||
}
|
||||
}
|
||||
|
||||
HeadingAnchors.register();
|
||||
Loading…
Reference in New Issue
Block a user