diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 19d4ec6..0c697d0 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -7,3 +7,29 @@ menuTrigger.onclick = function() {
menuTrigger.classList.toggle('is-active')
body.classList.toggle('lock-scroll')
}
+
+var content = document.querySelector('.content.anchor-link-enabled')
+if (content) {
+ addHeaderAnchors(content);
+}
+
+function addHeaderAnchors(content) {
+ var headers = content.querySelectorAll('h1, h2, h3, h4');
+ // SVG data from https://iconmonstr.com/link-1-svg/
+ var linkSvg = ' ';
+ var anchorForId = function (id) {
+ var anchor = document.createElement('a');
+ anchor.classList.add('header-anchor');
+ anchor.href = "#" + id;
+ anchor.innerHTML = linkSvg;
+ return anchor;
+ };
+
+ for (var h = 0; h < headers.length; h++) {
+ var header = headers[h];
+
+ if (typeof header.id !== "undefined" && header.id !== "") {
+ header.appendChild(anchorForId(header.id));
+ }
+ }
+}
diff --git a/assets/scss/components/_anchor.scss b/assets/scss/components/_anchor.scss
new file mode 100644
index 0000000..8b494e6
--- /dev/null
+++ b/assets/scss/components/_anchor.scss
@@ -0,0 +1,10 @@
+.content {
+ .header-anchor {
+ text-decoration: none;
+ fill: currentColor;
+ opacity: 0.6;
+ }
+ .header-anchor:hover {
+ opacity: 1;
+ }
+}
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 31373c2..ee54235 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -33,6 +33,7 @@
@import 'components/strip';
@import 'components/whitebox';
@import 'components/overview';
+@import 'components/anchor';
// Pages
@import 'pages/home';
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3c930e1..67d1129 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,7 +4,7 @@
{{ define "main" }}
{{.Title}}
-