From 3ac503ca4956ac3dc4bb9c7a1dc2e802e4d0cdc6 Mon Sep 17 00:00:00 2001
From: Nerixyz <nerixdev@outlook.de>
Date: Sun, 8 Dec 2024 12:18:16 +0100
Subject: [PATCH] chore: add `#` to headings and link to them

---
 next.config.mjs    | 13 +++++++++++++
 package.json       |  1 +
 styles/globals.css | 25 +++++++++++++++++++++++++
 yarn.lock          | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+)

diff --git a/next.config.mjs b/next.config.mjs
index 7ecad03b..6b3c3d2a 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,5 @@
 import remarkHeadingId from "remark-custom-heading-id";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
 const { findAndReplace } = await import("mdast-util-find-and-replace");
 
@@ -42,6 +43,18 @@ const withMDX = (await import("@next/mdx")).default({
   extension: /\.mdx$/,
   options: {
     remarkPlugins: [githubIssueLinks, majorMinorColoring, remarkHeadingId],
+    rehypePlugins: [
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: "append",
+          content: {
+            type: "text",
+            value: "#",
+          },
+        },
+      ],
+    ],
   },
 });
 
diff --git a/package.json b/package.json
index cc9824bc..8afe3333 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-dom": "18.3.1",
     "react-elm-components": "^1.1.0",
     "react-responsive-carousel": "^3.2.23",
+    "rehype-autolink-headings": "^7.1.0",
     "remark-custom-heading-id": "^2.0.0",
     "remark-github": "^12.0.0",
     "tailwindcss": "^3.2.1"
diff --git a/styles/globals.css b/styles/globals.css
index 5f088f7d..d84e837e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -157,3 +157,28 @@ button {
 by {
   display: none;
 }
+
+:is(h1, h2, h3, h4, h5, h6)[id] {
+  & > a {
+    @apply opacity-0 ml-2 font-normal no-underline;
+    transition:
+      color 100ms,
+      opacity 125ms;
+  }
+
+  &:target {
+    @apply scroll-m-24;
+    & > a {
+      @apply text-cyan-500 opacity-100;
+    }
+  }
+
+  &:target > a,
+  > a:hover {
+    @apply text-cyan-500 opacity-100;
+  }
+
+  &:hover > a {
+    @apply opacity-100;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 0d88c662..2ab85453 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1501,6 +1501,7 @@ __metadata:
     react-dom: "npm:18.3.1"
     react-elm-components: "npm:^1.1.0"
     react-responsive-carousel: "npm:^3.2.23"
+    rehype-autolink-headings: "npm:^7.1.0"
     remark-custom-heading-id: "npm:^2.0.0"
     remark-github: "npm:^12.0.0"
     tailwindcss: "npm:^3.2.1"
@@ -2794,6 +2795,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-heading-rank@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-heading-rank@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/1879c84f629e73f1f13247ab349324355cd801363b44e3d46f763aa5c0ea3b42dcd47b46e5643a0502cf01a6b1fdb9208fd12852e44ca6c671b3e4bccf9369a1
+  languageName: node
+  linkType: hard
+
+"hast-util-is-element@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "hast-util-is-element@npm:3.0.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+  checksum: 10c0/f5361e4c9859c587ca8eb0d8343492f3077ccaa0f58a44cd09f35d5038f94d65152288dcd0c19336ef2c9491ec4d4e45fde2176b05293437021570aa0bc3613b
+  languageName: node
+  linkType: hard
+
 "hast-util-to-estree@npm:^3.0.0":
   version: 3.1.0
   resolution: "hast-util-to-estree@npm:3.1.0"
@@ -4830,6 +4849,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-autolink-headings@npm:^7.1.0":
+  version: 7.1.0
+  resolution: "rehype-autolink-headings@npm:7.1.0"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@ungap/structured-clone": "npm:^1.0.0"
+    hast-util-heading-rank: "npm:^3.0.0"
+    hast-util-is-element: "npm:^3.0.0"
+    unified: "npm:^11.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/3d6653047c83cf7f9455bc0f5483a40170aee211cc057b7541b491d31e54b08fda72ab5ec4caeacea63e8af130584f0e14d5c63f6ddb86b7f34584b9e3f92dcf
+  languageName: node
+  linkType: hard
+
 "remark-custom-heading-id@npm:^2.0.0":
   version: 2.0.0
   resolution: "remark-custom-heading-id@npm:2.0.0"