Add JS to linkify in-page H1-H6 (#9751)

kubernetes · Aug 18, 2018 · f8e4d35 · f8e4d35
1 parent 00cb289
commit f8e4d35
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -48,5 +48,22 @@
     </div>
 		{{ partialCached "footer.html" . }}
 		{{ partialCached "footer-scripts.html" . }}
+    <script>
+      // This script turns in-page headers into clickable and shareable
+      (function addHeadingLinks(){
+        var article = document.getElementById('docsContent');
+        var headings = article.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        headings.forEach(function(heading){
+          if(heading.id){
+            var a = document.createElement('a');
+            a.text = heading.innerHTML;
+            a.href = '#'+heading.id;
+            a.classList.add('inpage_heading');
+            heading.innerHTML = '';
+            heading.appendChild(a);
+          }
+        });
+      })();
+    </script>
 	</body>
 </html>
diff --git a/static/css/custom-jekyll/tags.css b/static/css/custom-jekyll/tags.css
@@ -54,3 +54,14 @@
     visibility: visible;
     opacity: 1;
 }
+
+/* In-page section heading permalinks */
+a.inpage_heading {
+  color: #000;
+  text-decoration: none !important;
+}
+
+a.inpage_heading:hover {
+  text-decoration: underline !important;
+  opacity: .8;
+}