Linkify headings, use scroll-behavior

- Uses the scroll-behavior property to achieve smooth scrolling with
less JS
- Solves anchor link bugs
- Linkifies headings in posts so they can be easily hyperlinked to directly

assets/js/index.js

@@ -1,52 +1,35 @@
 // Nav burger animation
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
   // Get all "navbar-burger" elements
-  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
+  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
   // Check if there are any navbar burgers
   if ($navbarBurgers.length > 0) {
     // Add a click event on each of them
     $navbarBurgers.forEach(function ($el) {
-      $el.addEventListener("click", function () {
+      $el.addEventListener('click', function () {
         // Get the target from the "data-target" attribute
-        var target = $el.dataset.target;
-        var $target = document.getElementById(target);
+        var target = $el.dataset.target
+        var $target = document.getElementById(target)
         // Toggle the class on both the "navbar-burger" and the "navbar-menu"
-        $el.classList.toggle("is-active");
-        $target.classList.toggle("is-active");
-      });
-    });
+        $el.classList.toggle('is-active')
+        $target.classList.toggle('is-active')
+      })
+    })
   }
-});
-
-// Bitty scrolling links script
-$("a[href^=\"#\"]").click(function(e) {
-    e.preventDefault();
-    //BUG fix: https://github.com/victoriadrake/hugo-theme-introduction/issues/108
-    //
-    //let's get the right attribute `id` of the heading
-    v = e.target.href.replace(/http.*#/, '')
-    id = decodeURI(v)
-
-    $("html, body").animate({
-        //scrollTop: $(document.getElementById(this.hash.substr(1))).offset().top
-        scrollTop: $(document.getElementById(id)).offset().top
-    }, 500);
-    $("#nav-menu").removeClass("is-active");
-    return true;
 })
 
 // Modal closer
-$(".card").click(function () {
-    $($(this).attr("data-target")).addClass("is-active");
-    $("html").addClass("modal-open");
-});
-$(".modal-close").click(function () {
-    $($(this).attr("data-target")).removeClass("is-active");
-    $("html").removeClass("modal-open");
-});
+$('.card').click(function () {
+  $($(this).attr('data-target')).addClass('is-active')
+  $('html').addClass('modal-open')
+})
+$('.modal-close').click(function () {
+  $($(this).attr('data-target')).removeClass('is-active')
+  $('html').removeClass('modal-open')
+})
 $(document).keypress(function (e) {
-    if(e.which == 0) {
-        $(".modal.is-active").removeClass("is-active");
-        $("html").removeClass("modal-open");
+  if (e.which === 0) {
+    $('.modal.is-active').removeClass('is-active')
+    $('html').removeClass('modal-open')
   }
-});
+})

assets/sass/_base.sass

@@ -1,6 +1,9 @@
 html, body
     background-color: $background
 
+html
+    scroll-behavior: smooth
+
 html.modal-open
     overflow: hidden
 
@@ -32,6 +35,8 @@ a
 
 h1, h2, .title, .subtitle
     color: $h-color
+    & a
+        color: $h-color
 
 .title
     font-weight: 400

exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content

@@ -7058,6 +7058,9 @@ readers do not read off random characters that represent icons */
 html, body {
   background-color: #ffffff; }
 
+html {
+  scroll-behavior: smooth; }
+
 html.modal-open {
   overflow: hidden; }
 
@@ -7089,6 +7092,8 @@ a {
 
 h1, h2, .title, .subtitle {
   color: #222222; }
+  h1 a, h2 a, .title a, .subtitle a {
+    color: #222222; }
 
 .title {
   font-weight: 400; }

exampleSite/resources/_gen/assets/sass/sass/style.sass_c66aa4270d2fff5f284b149c059dd5bc.json

@@ -0,0 +1 @@
+{"Target":"css/main.min.f91a9b569d2964898b50e2f66e41e1da8ca0794cfd6910f7d62ea94dbee45533.css","MediaType":"text/css","Data":{"Integrity":"sha256-+RqbVp0pZImLUOL2bkHh2oygeUz9aRD31i6pTb7kVTM="}}

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,2 @@
+
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="anchor-link"><a href="#{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</a></h{{ .Level }}>