From 742baff2c9bd47e0762f5d65f5b47a4d28014175 Mon Sep 17 00:00:00 2001
From: Benjamin Rae <63359209+benjaminrae@users.noreply.github.com>
Date: Mon, 15 Jan 2024 05:47:47 +0100
Subject: [PATCH] feat: add heading links to PostDetails page (#232)

- implement easy links to headings (h2-h6) on post details
- the links are aria-hidden and only show on hover
---
 src/layouts/PostDetails.astro | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index c87219e..6ca8ea7 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -106,6 +106,22 @@ const layoutProps = {
 </style>
 
 <script is:inline>
+  /** Attaches links to headings in the document,
+   *  allowing sharing of sections easily */
+  function addHeadingLinks() {
+    let headings = Array.from(document.querySelectorAll("h2, h3, h4, h5, h6"));
+    for (let heading of headings) {
+      heading.classList.add("group")
+      let link = document.createElement("a");
+      link.innerText = "#";
+      link.className = "heading-link hidden group-hover:inline-block ml-2";
+      link.href = "#" + heading.id;
+      link.ariaHidden = true;
+      heading.appendChild(link);
+    }
+  }
+  addHeadingLinks();
+
   /** Attaches copy buttons to code blocks in the document,
    * allowing users to copy code easily. */
   function attachCopyButtons() {