Create Jekyll hook to add header anchors based on the header IDs

Impement add-anchor-to-header-from-header-id.rb using regexps, like the
"official hooks" do:
- https://github.com/jekyll/jekyll-mentions
- https://github.com/jekyll/jemoji

3 files changed, 27 insertions, 0 deletions

diff --git a/_plugins/add-anchor-to-header-from-header-id.rb b/_plugins/add-anchor-to-header-from-header-id.rb
new file mode 100644
index 0000000..8c100b0
--- /dev/null
+++ b/_plugins/add-anchor-to-header-from-header-id.rb
@@ -0,0 +1,9 @@
+Jekyll::Hooks.register :documents, :post_render do |doc|
+  if doc.output_ext == ".html"
+    doc.output =
+      doc.output.gsub(
+        /<h([1-6])(.*?)id="([\w-]+)"(.*?)>(.*?)<\/h[1-6]>/,
+        '<a class="header-anchor" id="\3-header-anchor" href="#\3"><h\1\2id="\3"\4>\5<img class="simple-icon" src="/images/link.svg" aria-hidden="true" /></h\1></a>'
+      )
+  end
+end
diff --git a/images/link.svg b/images/link.svg
new file mode 100644
index 0000000..eab23a3
--- /dev/null
+++ b/images/link.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="160" height="160" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd"
+        d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z" />
+</svg>
diff --git a/styles.css b/styles.css
index 7a4d05f..687fa72 100644
--- a/styles.css
+++ b/styles.css
@@ -80,3 +80,16 @@ section.post-footer, div.footnotes {
   height: 22px;
   vertical-align: middle;
 }
+
+a.header-anchor {
+  color: black;
+  text-decoration: none;
+}
+
+a.header-anchor img {
+  visibility: hidden;
+}
+
+a.header-anchor:hover img {
+  visibility: visible;
+}