From 519a08ea6e0ad9cb84c01f18172ce6eac3645435 Mon Sep 17 00:00:00 2001
From: Ricky de Laveaga <git@rdela.com>
Date: Thu, 25 Jul 2024 12:41:01 -0700
Subject: [PATCH] add @daviddarnes/heading-anchors (#41)

* add @daviddarnes/heading-anchors

At least until [#40](https://github.com/rdela/eleventeen/pull/40) finds
resolution, building on the work in
[#39](https://github.com/rdela/eleventeen/pull/39), adding
[daviddarnes/heading-anchors](https://github.com/daviddarnes/heading-anchors)
per rec in [11ty/eleventy #3363](https://github.com/11ty/eleventy/issues/3363)

Used `position="beforeend"` and styled with a slight adjustment to
[demo-styling], adding `vertical-align: bottom;` to `a[href^="#"]` and
constraining styles to `heading-anchors` element.

[demo-styling]: https://github.com/daviddarnes/heading-anchors/blob/main/demo-styling.html#L11-L25

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

  - add hover + focus styles for anchor links
  - delete deprecated css
  - 9.2.21-alpha.17
---
 _includes/layouts/base.njk | 34 ++++++++++++++++++++++++++++++++--
 eleventy.config.js         |  2 ++
 package.json               |  3 ++-
 public/css/index.css       | 28 ----------------------------
 4 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index fb6bbe5..d37a1ce 100644
--- a/_includes/layouts/base.njk
+++ b/_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.
diff --git a/eleventy.config.js b/eleventy.config.js
index 8ced8b4..b1f7944 100644
--- a/eleventy.config.js
+++ b/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:
diff --git a/package.json b/package.json
index faf46b2..a2a3bcb 100644
--- a/package.json
+++ b/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"
 	}
diff --git a/public/css/index.css b/public/css/index.css
index 1eea865..f83f9d3 100644
--- a/public/css/index.css
+++ b/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;
-}
-*/