[#9] Add table of contents

assets/css/style.css

@@ -22,6 +22,10 @@
   src: url(../fonts/WorkSans-SemiBold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-SemiBold.woff) format("woff"), url(../fonts/WorkSans-SemiBold.ttf) format("truetype"), url(../fonts/WorkSans-SemiBold.svg) format("svg")
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   line-height: 1.5;
   font-family: var(--font-family), sans-serif;
@@ -606,6 +610,30 @@ textarea.form-control {
   top: 8px;
 }
 
+.content ol li,
+.content ol li ol {
+  list-style-type: disc;
+  margin-bottom: 0;
+}
+
+.content h3:before,
+.content h4:before,
+.content h5:before {
+  display: block;
+  content: "";
+  height: 75px;
+  margin: -75px 0 0;
+}
+
+.content .title-link {
+  opacity: 0;
+  transition: 0.7s;
+}
+
+.content .title-link.active {
+  opacity: 1;
+}
+
 .list-styled li {
   position: relative;
 }

assets/js/script.js

@@ -128,6 +128,18 @@
   })
 
 
+  // table of contents
+  $('h3, h4, h5', '.content').each(function () {
+    $(this).append('<a class="title-link" href="#' + $(this).attr('id') + '"> #</a>');
+
+    $(this).hover(function(){
+      $(this).find('a').addClass('active');
+    }, function(){
+      $(this).find('a').removeClass('active');
+    });
+  });
+
+
   // Download page to pdf format
   window.onload = function() {
       var generatePDF = document.getElementById('generatePDF');

layouts/partials/default.html

@@ -50,6 +50,14 @@
                     </tr>
                   </tbody>
                 </table>
+                {{ if .Params.toc }}
+                  <details>
+                    <summary>Table of Contents</summary>
+                    <aside>
+                      {{ .TableOfContents }}
+                    </aside>
+                  </details>
+                {{ end }}
               {{ end }}
               {{.Content}}
             </div>