From 89fd3f894a97a43ef4050cb2301267131a45ff1e Mon Sep 17 00:00:00 2001
From: "Yuan (Bob) Gong" <gongyuan94@gmail.com>
Date: Mon, 5 Aug 2019 04:29:49 +0800
Subject: [PATCH] Add anchor links to markdown headings. (#1009)

* Add anchor links automatically.

* Improve anchor link UX

* improve corner-case layout stability

* improve a11y

* Change link icon to material icon
---
 layouts/partials/scripts.html | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 layouts/partials/scripts.html

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
new file mode 100644
index 0000000000..822cd61c7e
--- /dev/null
+++ b/layouts/partials/scripts.html
@@ -0,0 +1,27 @@
+<script>
+  // avoid polluting global namespace
+  (function() {
+    // append anchor links to headings in markdown.
+    var article = document.getElementsByTagName('main')[0];
+    var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    headings.forEach(function(heading) {
+      if (heading.id) {
+        var a = document.createElement('a');
+        // set visibility: hidden, not display: none to avoid layout change
+        a.style.visibility = 'hidden';
+        // [a11y] hide this from screen readers, etc..
+        a.setAttribute('aria-hidden', 'true');
+        // material insert_link icon in svg format
+        a.innerHTML = ' <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>';
+        a.href = '#'+heading.id;
+        heading.insertAdjacentElement('beforeend', a);
+        heading.addEventListener('mouseenter', function() {
+          a.style.visibility = 'initial';
+        });
+        heading.addEventListener('mouseleave', function() {
+          a.style.visibility = 'hidden';
+        });
+      }
+    });
+  })();
+</script>