Add anchors for headings in documentation (#2852)

Author: kiendang

_sass/components/heading-anchor.scss

@@ -0,0 +1,12 @@
+// HEADING ANCHOR
+//------------------------------------------------
+//------------------------------------------------
+
+.heading-anchor {
+    visibility: hidden;
+    padding-left: 0.5em;
+
+    &:hover {
+        text-decoration: none;
+    }
+}

_sass/layout/documentation.scss

@@ -66,6 +66,34 @@
   .tag-inline {
     float: none;
   }
+
+  h1,
+  h3,
+  h4,
+  h5,
+  h6 {
+    .heading-anchor {
+      color: $base-font-color;
+    }
+
+    &:hover {
+      .heading-anchor {
+        visibility: visible;
+      }
+    }
+  }
+
+  h2 {
+    .heading-anchor {
+      color: $brand-tertiary;
+    }
+
+    &:hover {
+      .heading-anchor {
+        visibility: visible;
+      }
+    }
+  }
 }
 
 a.new-version-notice {

resources/css/style.scss

@@ -74,3 +74,4 @@
 @import 'components/search';
 @import 'components/dropdown';
 @import 'components/wip-notice';
+@import 'components/heading-anchor.scss';

resources/js/functions.js

@@ -662,3 +662,15 @@ $(document).ready(function () {
     $('#contributors').html(contributorsHtml);
   });
 });
+
+$(document).ready(function() {
+  const icon = '<i class="fa fa-link fa-2xs" aria-hidden="true"></i>'
+  const anchor = '<a class="heading-anchor" aria-hidden="true"></a>'
+
+  $('.content-primary.documentation').find('h1, h2, h3, h4, h5, h6').each(function() {
+    const id = $(this).attr('id');
+    if (id) {
+      $(this).append($(anchor).attr('href', '#' + id).html(icon));
+    }
+  });
+});