[hooks/headeranchors] Added an awk script for generating the anchors for all headers

3 files changed, 20 insertions, 8 deletions

diff --git a/generate-hooks/create-header-anchors.awk b/generate-hooks/create-header-anchors.awk
new file mode 100644
index 0000000..5381e81
--- /dev/null
+++ b/generate-hooks/create-header-anchors.awk
@@ -0,0 +1,16 @@
+#
+# == About ==
+#
+# ssg generates an id for every heading. That's why after every heading there
+# can be a hyperlink to itself. However, because of the current styling, such a
+# hyperlink is required (except for h1).
+
+/[ \t]*<h[23456]/ {
+	id = substr($0, index($0, "id=\"") + 4)
+	id = substr(id, 0, index(id, "\"") - 1)
+	gsub(/$/, ORS "<a href=\"#" id "\"><img src=\"/img/link-tabler.svg\" alt=\"🔗\"></a>")
+}
+
+{
+	print
+}
diff --git a/src/darkmode.css b/src/darkmode.css
index ce57502..34de71c 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -20,7 +20,7 @@
 }
 
   /* This selects the link images, next to headings */
-h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .icon, .file-icon, .file-wrapper > summary {
+h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary {
   /* Refer to styles.css on why this is necessary */
   filter: none; 
 }
diff --git a/src/styles.css b/src/styles.css
index 7a1c084..f712377 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -168,22 +168,18 @@ h2, h3, h4, h5, h6 {
   line-height: 1.25em;
 }
 
-h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
+h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
   display: inline;
-}
-
-h1 + p a, h2 + p a, h3 + p a, h4 + p a, h5 + p a, h6 + p a {
   border: none !important;
 }
 
-  /* This selects the link images, next to headings */
-h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img {
+h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img {
   height: 1.3em;
   border: none;
   vertical-align: text-top;
 }
 
-h2 + p img, h3 + p img, h4 + p img, h5 + p img, h6 + p img, .icon, .file-icon, .file-wrapper > summary {
+h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary {
   /* Since link images are made for dark mode, and have white-ish foreground,
    * this filter makes them black (when in light mode)
    */