Add pencil icon (with edit link) to headers

docs/_layouts/default.html

@@ -105,7 +105,7 @@
     {% unless page.toc == false %}
     <!-- Sticky TOC column -->
     <div class="toc-col">
-        {% include toc.html %}
+        <div id="toc"></div>
     </div>
     {% endunless %}
     <!-- /.toc-container-wrapper -->

docs/_layouts/page.html

@@ -30,7 +30,7 @@ layout: default
 
 {% endif %}
 
-<div class="post-content">
+<div class="post-content" data-github-edit-url="https://github.com/{{site.github_editme_path}}{{editmepath}}">
 
    {% if page.summary %}
     <div class="summary">{{page.summary}}</div>
@@ -51,19 +51,6 @@ layout: default
         {% endif %}
     </div>
 
-    {% if site.github_editme_path %}
-        {% unless page.editmepath == false %}
-        <script>
-            $(document).ready ( function(){
-                $('div.post-content').find('h2').after(
-                '  <a target="_blank" href="https://github.com/{{site.github_editme_path}}{{editmepath}}" class="btn btn-default btn-xs githubEditButton" role="button"><i class="fa fa-github fa-lg"></i></a>'
-            );
-            });
-        </script>
-        {% endunless %}
-    {% endif %}
-
-
 {% include disqus.html %}
 
 </div>

docs/css/customstyles.css

@@ -1330,3 +1330,7 @@ h4.panel-title {
 .post-content h2 {
     display: inline-block;
 }
+
+a.edit-header {
+    font-size: 15px;
+}

docs/js/customscripts.js

@@ -1,68 +1,93 @@
-
-$('#mysidebar').height($(".nav").height());
+$('#mysidebar').height($('.nav').height());
 
 // Detect small devices and move the TOC in line
-function moveToc(){
-    if(window.innerWidth < 1350){
-        $( "#toc" ).detach().appendTo("#inline-toc").removeClass("affix");
+function moveToc() {
+    if (window.innerWidth < 1350) {
+        $('#toc').detach().appendTo('#inline-toc').removeClass('affix');
     } else {
-        $( "#toc" ).detach().appendTo(".toc-col").addClass("affix");
+        $('#toc').detach().appendTo('.toc-col').addClass('affix');
     }
 }
 
-$( document ).ready(function() {
+$(document).ready(function () {
+    $('#toc').toc({
+        minimumHeaders: 0,
+        listType: 'ul',
+        showSpeed: 0,
+        headers: 'h2,h3,h4',
+    });
 
     //this script says, if the height of the viewport is greater than 800px, then insert affix class, which makes the nav bar float in a fixed
     // position as your scroll. if you have a lot of nav items, this height may not work for you.
     var h = $(window).height();
     //console.log (h);
     if (h > 600) {
-        $( "#mysidebar" ).attr("class", "nav affix");
+        $('#mysidebar').attr('class', 'nav affix');
     }
     // activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
     $('[data-toggle="tooltip"]').tooltip({
-        placement : 'top'
+        placement: 'top',
     });
 
     /**
      * AnchorJS
      */
     anchors.add('h2,h3,h4,h5');
+
+    // Add an "Edit on GitHub" button to each header (except h1)
+    let url = $('div.post-content').attr('data-github-edit-url');
+
+    $('div.post-content')
+        .find(':header:not(h1)')
+        .append(
+            '  <a class="edit-header" target="_blank" href=' +
+                url +
+                ' role="button">✏️️</a>'
+        );
+
     // Check if TOC needs to be moved on page load
     moveToc();
-
 });
 
 // needed for nav tabs on pages. See Formatting > Nav tabs for more details.
 // script from http://stackoverflow.com/questions/10523433/how-do-i-keep-the-current-tab-active-with-twitter-bootstrap-after-a-page-reload
-$(function() {
+$(function () {
     var json, tabsState;
-    $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
-        var href, json, parentId, tabsState;
+    $('a[data-toggle="pill"], a[data-toggle="tab"]').on(
+        'shown.bs.tab',
+        function (e) {
+            var href, json, parentId, tabsState;
 
-        tabsState = localStorage.getItem("tabs-state");
-        json = JSON.parse(tabsState || "{}");
-        parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
-        href = $(e.target).attr('href');
-        json[parentId] = href;
+            tabsState = localStorage.getItem('tabs-state');
+            json = JSON.parse(tabsState || '{}');
+            parentId = $(e.target)
+                .parents('ul.nav.nav-pills, ul.nav.nav-tabs')
+                .attr('id');
+            href = $(e.target).attr('href');
+            json[parentId] = href;
 
-        return localStorage.setItem("tabs-state", JSON.stringify(json));
+            return localStorage.setItem('tabs-state', JSON.stringify(json));
+        }
+    );
+
+    tabsState = localStorage.getItem('tabs-state');
+    json = JSON.parse(tabsState || '{}');
+
+    $.each(json, function (containerId, href) {
+        return $('#' + containerId + ' a[href=' + href + ']').tab('show');
     });
 
-    tabsState = localStorage.getItem("tabs-state");
-    json = JSON.parse(tabsState || "{}");
-
-    $.each(json, function(containerId, href) {
-        return $("#" + containerId + " a[href=" + href + "]").tab('show');
-    });
-
-    $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
+    $('ul.nav.nav-pills, ul.nav.nav-tabs').each(function () {
         var $this = $(this);
-        if (!json[$this.attr("id")]) {
-            return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
+        if (!json[$this.attr('id')]) {
+            return $this
+                .find('a[data-toggle=tab]:first, a[data-toggle=pill]:first')
+                .tab('show');
         }
     });
 });
 
 // Check if TOC needs to be moved on window resizing
-$(window).resize(function () {moveToc();});
+$(window).resize(function () {
+    moveToc();
+});