9.2.21-alpha.17 add @daviddarnes/heading-anchors (#41)

* add @daviddarnes/heading-anchors

At least until #40 finds
resolution, building on the work in #39
adding https://github.com/daviddarnes/heading-anchors per rec in
11ty/eleventy#3363

Used `position="beforeend"` and styled with a slight adjustment to
https://github.com/daviddarnes/heading-anchors/blob/main/demo-styling.html#L11-L25

adding `vertical-align: bottom;` to `a[href^="#"]` and constraining styles to
`heading-anchors` element.

* move heading-anchors code to base.njk instead of post.njk

  - add hover + focus styles for anchor links
  - delete deprecated css

_includes/layouts/base.njk

@@ -23,7 +23,33 @@
 		#}
 
 		{#- Add an arbitrary string to the bundle #}
-		{%- css %}* { box-sizing: border-box; }{% endcss %}
+		{%- css %}
+* { box-sizing: border-box; }
+
+heading-anchors a[href^="#"] {
+	color: transparent;
+	display: inline-block;
+	margin-inline-start: 0.375ch;
+	max-inline-size: 1ch;
+	overflow-x: hidden;
+	pointer-events: none;
+	text-decoration: none;
+	vertical-align: bottom;
+	white-space: nowrap;
+}
+
+heading-anchors a[href^="#"]::before {
+	content: "#";
+	color: var(--text-color-link);
+	pointer-events: auto;
+}
+
+heading-anchors a[href^="#"]:focus::before,
+heading-anchors a[href^="#"]:hover::before {
+	color: var(--text-color-link-highlight);
+	text-decoration: underline;
+}
+			{% endcss %}
 		{#- Add the contents of a file to the bundle #}
 		{%- css %}{% include "public/css/index.css" %}{% endcss %}
 
@@ -60,7 +86,9 @@
 			</header>
 
 			<main id="skip">
-				{{ content | safe }}
+				<heading-anchors position="beforeend">
+					{{ content | safe }}
+				</heading-anchors>
 			</main>
 
 			<footer>
@@ -158,6 +186,8 @@ activateColorScheme();
 			{% endjs %}
 			{% endif %}
 
+			<script type="module" src="/js/heading-anchors.js"></script>
+
 			{#
 				getBundleFileUrl Writes the bundle content to a content-hashed file location in your 
 				output directory and returns the URL to the file for use.

eleventy.config.js

@@ -15,6 +15,8 @@ export default async function(eleventyConfig) {
 	eleventyConfig.addPassthroughCopy({
 		"./public/": "/",
 		"./node_modules/prismjs/themes/prism-okaidia.css": "/css/prism-okaidia.css",
+		"./node_modules/@daviddarnes/heading-anchors/heading-anchors.js":
+			"/js/heading-anchors.js",
 	});
 
 	// Run Eleventy when these files change:

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "eleventeen",
-	"version": "9.2.20-alpha.17",
+	"version": "9.2.21-alpha.17",
 	"description": "Starter repository for a website built with Eleventy + eleventeen",
 	"type": "module",
 	"scripts": {
@@ -45,6 +45,7 @@
 		"@11ty/eleventy-plugin-bundle": "^2.0.2",
 		"@11ty/eleventy-plugin-rss": "^2.0.2",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+		"@daviddarnes/heading-anchors": "^2.0.0",
 		"@famebot/chromagen": "^1.0.1",
 		"luxon": "^3.4.4"
 	}

public/css/index.css

@@ -435,31 +435,3 @@ header {
 .post-metadata time {
 	margin-inline-end: 1em;
 }
-
-/* Direct Links / Markdown Headers
-.header-anchor {
-	text-decoration: none;
-	font-style: normal;
-	font-size: 1em;
-	margin-inline-start: 0.1em;
-}
-
-a.header-anchor,
-a.header-anchor:visited {
-	color: transparent;
-}
-
-a.header-anchor:focus,
-a.header-anchor:hover {
-	text-decoration: underline;
-}
-
-a.header-anchor:focus,
-:hover > a.header-anchor {
-	color: var(--text-color-link-highlight);
-}
-
-h2 + .header-anchor {
-	font-size: 1.5em;
-}
-*/