:WIP: [Feature] Table of contents

exampleSite/config.toml

@@ -26,6 +26,7 @@ pygmentsCodefencesGuessSyntax = true
   wordCount = true
   useHLJS = true
   socialShare = true
+  toc = true
   delayDisqus = true
   showRelatedPosts = true
 #  gcse = "012345678901234567890:abcdefghijk" # Get your code from google.com/cse. Make sure to go to "Look and Feel" and change Layout to "Full Width" and Theme to "Classic"

layouts/_default/single.html

@@ -2,6 +2,7 @@
 <div class="container" role="main">
   <div class="row">
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+      {{ partial "toc" . }}
       <article role="main" class="blog-post">
         {{ .Content }}
 
@@ -54,7 +55,7 @@ <h4 class="see-also">{{ i18n "seeAlso" }}</h4>
       {{ if (.Params.comments) | or (and (or (not (isset .Params "comments")) (eq .Params.comments nil)) (and .Site.Params.comments (ne .Type "page"))) }}
         {{ if .Site.DisqusShortname }}
           {{ if .Site.Params.delayDisqus }}
-          <div class="disqus-comments">                  
+          <div class="disqus-comments">
             <button id="show-comments" class="btn btn-default" type="button">{{ i18n "show" }} <span class="disqus-comment-count" data-disqus-url="{{ trim .Permalink "/" }}">{{ i18n "comments" }}</span></button>
             <div id="disqus_thread"></div>
 

layouts/partials/head.html

@@ -40,7 +40,7 @@
 {{- with .Site.Author.name }}
   <meta name="author" content="{{ . }}"/>
 {{- end }}
-{{- partial "seo/main.html" . }}  
+{{- partial "seo/main.html" . }}
 {{- with .Site.Params.favicon }}
   <link href='{{ . | absURL }}' rel='icon' type='image/x-icon'/>
 {{- end -}}
@@ -75,6 +75,9 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   {{- end -}}
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
+
+
   <link rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
 
   {{- if .Site.Params.staticman -}}
@@ -94,7 +97,7 @@
   <link rel="stylesheet" href="{{ "css/syntax.css" | absURL }}" />
   {{- end -}}
   <link rel="stylesheet" href="{{ "css/codeblock.css" | absURL }}" />
-  
+
   {{- if .Site.Params.staticman.recaptcha -}}
   <script src='https://www.google.com/recaptcha/api.js'></script>
   {{- end -}}

layouts/partials/toc.html

@@ -0,0 +1,17 @@
+{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) }}
+  {{ $toc := .TableOfContents }}
+  {{ $toc := (replace $toc "<ul>\n<li>\n<ul>" "<ul>") }}
+  {{ $toc := (replace $toc "<ul>\n<li>\n<ul>" "<ul>") }}
+  {{ $toc := (replace $toc "<ul>\n<li>\n<ul>" "<ul>") }}
+  {{ $toc := (replace $toc "</ul></li>\n</ul>" "</ul>") }}
+  {{ $toc := (replace $toc "</ul></li>\n</ul>" "</ul>") }}
+  {{ $toc := (replace $toc "</ul></li>\n</ul>" "</ul>") }}
+  <!-- count the number of remaining li tags -->
+  <!-- and only display ToC if more than 1, otherwise why bother -->
+
+    {{ if gt (len (split $toc "<li>")) 2 }}
+      <aside class="toc-article">
+        {{ safeHTML $toc }}
+      </aside>
+    {{ end }}
+{{- end }}

static/css/main.css

@@ -756,7 +756,7 @@ div.splitbox div.right {
     padding: 15px 25px;
   }
 }
-.disqus-comments button:hover, 
+.disqus-comments button:hover,
 .disqus-comments button:focus {
   color: #FFF;
   background: #0085a1;
@@ -804,3 +804,81 @@ h4.see-also {
  ul.share li:hover .fab {
   transform: scale(1.4)
 }
+
+/* --- TableOfContents --- */
+
+#TableOfContents {
+  position: fixed;
+  top: 100px;
+  right: 2em;
+  background: #f5f5f5;
+  padding: 0.5em;
+  margin: 2em 0 0 .5em;
+  line-height: 1em;
+  font-size: .8em;
+  float: right;
+  border: solid 1px lightgray;
+  border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+  #TableOfContents {
+    top: 0px;
+    position:inherit;
+  }
+}
+#TableOfContents ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 15px;
+}
+
+#TableOfContents > ul > li > ul, #TableOfContents > ul {
+  list-style: none;
+}
+
+#TableOfContents > ul > li > ul > li {
+  margin-bottom: 5px;
+}
+
+#TableOfContents a {
+  padding: 0px 5px;
+}
+
+#TableOfContents li.active {
+  font-weight: 500;
+}
+
+#TableOfContents > ul > li > ul > li > ul {
+    display: none;
+}
+
+#TableOfContents > ul > li > ul > li > a {
+	display: inline-block;
+	position: relative;
+	padding-bottom: 1px;
+}
+#TableOfContents > ul > li > ul > li > a:after {
+	content: '';
+	display: block;
+	margin: auto;
+	height: 2px;
+	width: 0px;
+	background: transparent;
+  transition: all 300ms ease 0s;
+}
+#TableOfContents > ul > li > ul > li > a:hover:after,
+#TableOfContents > ul > li > ul > li.active > a:after {
+	width: 100%;
+	background: #4285F4;
+}
+
+#TableOfContents a {
+  text-decoration: none;
+  color: #1a2027;
+  display: block;
+}
+
+#toc-nav {
+  margin-left: -42px; /* todo why? */
+}