docs: Add hover over links on headings

docs/config.json

@@ -9,6 +9,7 @@
     "description": "rclone - rsync for cloud storage: google drive, s3, swift, cloudfiles, dropbox, memstore...",
     "canonifyurls": true,
     "blackfriday": {
-        "smartDashes": false
+        "smartDashes": false,
+        "plainIDAnchors": true
     }
 }

docs/layouts/chrome/footer.html

@@ -1,5 +1,6 @@
 
     <script src="/js/jquery.js"></script>
     <script src="/js/bootstrap.js"></script>
+    <script src="/js/custom.js"></script>
 </body>
 </html>

docs/static/css/custom.css

@@ -24,3 +24,18 @@ thead td, th {
 tbody tr:nth-child(odd) {
    background-color:#d0d0ff
 }
+
+/* Hover over links on headers */
+.header-link {
+  position: absolute;
+  left: -0.5em;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out 0.1s;
+}
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+  opacity: 1;
+}

docs/static/js/custom.js

@@ -0,0 +1,14 @@
+// Site JS
+
+// Add hover links on headings
+$(function() {
+    return $("h2, h3, h4, h5, h6").each(function(i, el) {
+        var $el, icon, id;
+        $el = $(el);
+        id = $el.attr('id');
+        icon = '<i class="fa fa-link"></i>';
+        if (id) {
+            return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
+        }
+    });
+});