From cf9efbe10dbf83ecf0ed70744a31d4a661bbfafb Mon Sep 17 00:00:00 2001
From: Luc Perkins <lucperkins@gmail.com>
Date: Fri, 20 Mar 2020 05:15:03 -0700
Subject: [PATCH] Add anchor bookmarks (#154)

* Add header links

Signed-off-by: lucperkins <lucperkins@gmail.com>

* CSS partial housekeeping

Signed-off-by: lucperkins <lucperkins@gmail.com>

* Add scroll offset

Signed-off-by: lucperkins <lucperkins@gmail.com>
---
 assets/sass/style.sass              | 14 ++++++++++++++
 layouts/partials/content.html       |  2 +-
 layouts/partials/css.html           | 26 +++++++++++++-------------
 layouts/partials/headline-hash.html |  2 ++
 layouts/partials/javascript.html    | 13 ++++++++++++-
 5 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 layouts/partials/headline-hash.html

diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index 74e1386..b975dbd 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -285,3 +285,17 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white), "twitter-blue": ($tw
 
     & + li
       margin-top: 0.75rem
+
+.hashlink
+  @extend .icon
+  height: 1rem
+  width: 1rem
+  margin-left: 0.25rem
+
+.headline-hash
+  display: none
+
+@for $i from 1 through 6
+  h#{$i}
+    &:hover > .headline-hash
+      display: inline
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index d54a78b..600daed 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -1,5 +1,5 @@
 {{ $size        := .size | default "normal" }}
 {{ $constrained := .constrained | default false }}
 <div class="content is-{{ $size }} has-bottom-padding{{ if $constrained }} is-constrained{{ end }}">
-  {{ .content }}
+  {{ partial "headline-hash.html" .content }}
 </div>
\ No newline at end of file
diff --git a/layouts/partials/css.html b/layouts/partials/css.html
index 20d591f..9285bd4 100644
--- a/layouts/partials/css.html
+++ b/layouts/partials/css.html
@@ -1,15 +1,15 @@
-{{- $inServerMode := site.IsServer }}
-{{- $includePaths := (slice "node_modules") }}
-{{- $sass         := "sass/style.sass" }}
-{{- $cssOutput    := "css/style.css" }}
-{{- $devOpts      := (dict "targetPath" $cssOutput "includePaths" $includePaths "enableSourceMap" true) }}
-{{- $prodOpts     := (dict "targetPath" $cssOutput "includePaths" $includePaths "outputStyle" "compressed") }}
-{{- $cssOpts      := cond $inServerMode $devOpts $prodOpts }}
-{{- $css          := resources.Get $sass | resources.ExecuteAsTemplate $sass . | toCSS $cssOpts }}
-{{- if $inServerMode }}
+{{ $inServerMode := site.IsServer }}
+{{ $includePaths := (slice "node_modules") }}
+{{ $sass         := "sass/style.sass" }}
+{{ $cssOutput    := "css/style.css" }}
+{{ $devOpts      := (dict "targetPath" $cssOutput "includePaths" $includePaths "enableSourceMap" true) }}
+{{ $prodOpts     := (dict "targetPath" $cssOutput "includePaths" $includePaths "outputStyle" "compressed") }}
+{{ $cssOpts      := cond $inServerMode $devOpts $prodOpts }}
+{{ $css          := resources.Get $sass | resources.ExecuteAsTemplate $sass . | toCSS $cssOpts }}
+{{ if $inServerMode }}
 <link rel="stylesheet" href="{{ $css.RelPermalink }}">
-{{- else }}
-{{- $prodCss      := $css | fingerprint }}
+{{ else }}
+{{ $prodCss      := $css | fingerprint }}
 <link rel="stylesheet" href="{{ $prodCss.RelPermalink }}" integrity="{{ $prodCss.Data.Integrity }}">
-{{- end }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
\ No newline at end of file
+{{ end }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
diff --git a/layouts/partials/headline-hash.html b/layouts/partials/headline-hash.html
new file mode 100644
index 0000000..cad0639
--- /dev/null
+++ b/layouts/partials/headline-hash.html
@@ -0,0 +1,2 @@
+{{ . | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1} <a class="headline-hash" href="#${2}">
+  <span class="icon hashlink"><i class="fas fa-hashtag"></i></span></a>${3}` | safeHTML }}
\ No newline at end of file
diff --git a/layouts/partials/javascript.html b/layouts/partials/javascript.html
index bfdf213..ecdc7f4 100644
--- a/layouts/partials/javascript.html
+++ b/layouts/partials/javascript.html
@@ -9,4 +9,15 @@
     inputSelector: '#search-bar',
     debug: false
   });
-</script>
\ No newline at end of file
+</script>
+
+{{/* Anchor link scroll offset */}}
+<script>
+  const navbarHeight = document.getElementsByClassName('navbar')[0].offsetHeight;
+  const extraPadding = 15;
+  const navbarOffset = -1 * (navbarHeight + extraPadding);
+  var shiftWindow = function() { scrollBy(0, navbarOffset) };
+  window.addEventListener("hashchange", shiftWindow);
+  window.addEventListener("pageshow", shiftWindow);
+  function load() { if (window.location.hash) shiftWindow(); }
+</script>