Add basic toc support

archetypes/posts.md

@@ -2,6 +2,7 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: true
+toc: false
 featuredImg: ""
 tags: 
   - tag

assets/scss/style.scss

@@ -587,6 +587,43 @@ hr.post-end {
   }
 }
 
+#toc {
+  position: fixed;
+  left: 50%;
+  top: 0;
+  display: none;
+}
+
+.toc-title {
+  margin-left: 1em;
+  margin-bottom: .5em;
+  font-size: .8em;
+  font-weight: bold;
+}
+
+#TableOfContents {
+  font-size: .8em;
+  @include dimmed;
+
+  ul {
+    padding-left: 1em;
+    margin: 0;
+  }
+
+  &>ul {
+    list-style-type: none;
+
+    ul ul {
+      font-size: .9em;
+    }
+  }
+
+  a:hover {
+    border-bottom: $theme 1px solid;
+  }
+}
+
+
 .post-nav {
   display: flex;
   justify-content: space-between;
@@ -662,6 +699,13 @@ hr.post-end {
   hr.post-end {
     width: 30%;
   }
+
+  #toc {
+    top: 13em;
+    display: block;
+    margin-left: 370px;
+    max-width: 220px;
+  }
 }
 
 @media (min-width: 1800px) {
@@ -695,6 +739,12 @@ hr.post-end {
   hr.post-end {
     width: 30%;
   }
+
+  #toc {
+    top: 15em;
+    margin-left: 490px;
+    max-width: 300px;
+  }
 }
 
 @media (max-width: 760px) {

exampleSite/content/posts/goisforlovers.md

@@ -8,6 +8,7 @@ tags = [
     "development",
 ]
 date = "2014-04-02"
+toc = true
 +++
 
 Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for

exampleSite/content/posts/hugoisforlovers.md

@@ -7,6 +7,7 @@ tags = [
     "development",
 ]
 date = "2014-04-02"
+toc = true
 +++
 
 ## Step 1. Install Hugo

exampleSite/content/posts/migrate-from-jekyll.md

@@ -1,6 +1,7 @@
 ---
 date: 2014-03-10
 title: Migrate to Hugo from Jekyll
+toc: true
 ---
 
 ## Move static content to `static`

layouts/posts/single.html

@@ -32,6 +32,12 @@
 				{{- end }}
 			</footer>
 		</article>
+		{{- if .Params.toc }}
+		<aside id="toc">
+			<div class="toc-title">Table of Contents</div>
+			{{ .TableOfContents }}
+		</aside>
+		{{- end }}
 		<div class="post-nav thin">
 			{{- with .NextInSection }}
 			<a class="next-post" href="{{ .Permalink }}">