Merge pull request #191 from phil-opp/hugo-toc

Display a Table of Contents on large displays

layouts/partials/head.html

@@ -30,6 +30,8 @@
 
   <!-- JS -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/2.0.0/anchor.min.js"></script>
+  <script src="js/toc.min.js"></script>
+  <script src="js/main.js"></script>
   {{ partial "analytics.html" . }}
 
   <!-- redirect from phil-opp.github.io/blog_os -->

static/css/main.css

@@ -114,3 +114,53 @@ sup, sub {
 a.anchorjs-link:hover {
     text-decoration: none;
 }
+
+aside#toc {
+  display: none;
+}
+
+@media (min-width: 80rem) {
+  aside#toc {
+    display: block;
+    width: 12rem;
+    position: fixed;
+    top: 4rem;
+    margin-left: -15rem;
+    font-size: 90%;
+    line-height: 1.2;
+    opacity: .2;
+    transition: opacity .5s;
+  }
+
+  aside#toc:hover {
+    opacity: 1;
+  }
+
+  aside#toc h2 {
+    font-size: 110%;
+    margin-bottom: .2rem;
+  }
+
+  aside#toc ol {
+    margin: 0 0 .2rem 0;
+    padding: 0 0 0 1rem;
+    list-style:none;
+  }
+
+  aside#toc ol li:before {
+    content: "";
+    border-color: transparent #008eef;
+    border-style: solid;
+    border-width: 0.35em 0 0.35em 0.45em;
+    display: block;
+    height: 0;
+    width: 0;
+    left: -1em;
+    top: 0.9em;
+    position: relative;
+  }
+
+  aside#toc.coarse li ol {
+    display: none;
+  }
+}

static/js/main.js

@@ -0,0 +1,40 @@
+window.onload = function() {
+  var container = document.querySelector('#toc');
+
+  if (container != null) {
+    var toc = initTOC({
+        selector: 'h2, h3',
+        scope: '.post',
+        overwrite: false,
+        prefix: 'toc'
+    });
+
+    var heading = document.createElement("H2");
+    var heading_text = document.createTextNode("Table of Contents");
+    heading.appendChild(heading_text);
+
+    container.appendChild(heading);
+    container.appendChild(toc);
+
+    resize_toc(container);
+  }
+}
+
+function resize_toc(container) {
+  var containerHeight = container.clientHeight;
+
+  var resize = function() {
+    if (containerHeight > document.documentElement.clientHeight - 100) {
+      container.classList.add('coarse');
+    } else {
+      container.classList.remove('coarse');
+    }
+  };
+  resize();
+
+  var resizeId;
+  window.onresize = function() {
+    clearTimeout(resizeId);
+    resizeId = setTimeout(resize, 300);
+  };
+}

static/js/toc.min.js

@@ -0,0 +1,9 @@
+/*!
+ * jQuery-TOC
+ * Table of Contents Generator Plugin for (non-)jQuery
+ *
+ * @author Dolphin Wood <dolphin.w.e@gmail.com>
+ * @version 0.0.5
+ * Copyright 2015. MIT licensed.
+ */
+!function(e){"use strict";var t=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e},n=function(e,t){var n=[],r=document.querySelectorAll(t);return Array.prototype.forEach.call(r,function(t){var r=t.querySelectorAll(e);n=n.concat(Array.prototype.slice.call(r))}),n},r=function(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1},o=function(e,t){for(;t--;)e=e.appendChild(document.createElement("ol")),t&&(e=e.appendChild(document.createElement("li")));return e},c=function(e,t){for(;t--;)e=e.parentElement;return e},i=function(e,t){return function(n,r,o){var c=n.textContent,i=t+"-"+o;r.textContent=c;var a=e?i:n.id||i;a=encodeURIComponent(a),n.id=a,r.href="#"+a}},a=function(e){var t=e.selector,a=e.scope,u=document.createElement("ol"),l=u,f=null,h=i(e.overwrite,e.prefix);return n(t,a).reduce(function(e,t,n){var i=r(t.tagName),a=i-e;a>0&&(l=o(f,a)),0>a&&(l=c(l,2*-a)),l=l||u;var p=document.createElement("li"),d=document.createElement("a");return h(t,d,n),l.appendChild(p).appendChild(d),f=p,i},r(t)),u},u=function(e){var n={selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"};e=t(n,e);var r=e.selector;if("string"!=typeof r)throw new TypeError("selector must be a string");if(!r.match(/^(?:h[1-6],?\s*)+$/g))throw new TypeError("selector must contains only h1-6");var o=location.hash;return o&&setTimeout(function(){location.hash="",location.hash=o},0),a(e)};"function"==typeof define&&define.amd?define(function(){return u}):e.initTOC=u}(window);