Merge pull request #18 from Track3/feature-toc

Add support for Table of Contents

archetypes/posts.md

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

assets/js/main.js

@@ -65,12 +65,18 @@ const showContent = () => {
   document.getElementById('bg-img').classList.remove('show-bg-img');
 }
 
+// Toggle TOC
+//
+const toggleToc = () => {
+  document.getElementById('toc').classList.toggle('show-toc');
+}
+
 if (haveHeader == true) {
   document.getElementById('menu-btn').addEventListener('click', mobileMenuToggle);
-  
+
   window.addEventListener('scroll', throttle(() => {
     autoHideHeader();
-    
+
     if (mobileMenuVisible == true) {
       mobileMenuToggle();
     }

assets/scss/style.scss

@@ -145,6 +145,10 @@ table {
   height: 1em;
 }
 
+.desktop-only, .desktop-only-ib {
+  display: none;
+}
+
 // Accessibility
 //
 .screen-reader-text {
@@ -234,6 +238,7 @@ table {
   border: none;
   background: none;
   padding: 0;
+  margin-left: .4em;
   cursor: pointer;
 }
 
@@ -587,6 +592,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;
@@ -619,6 +661,9 @@ hr.post-end {
   text-align: center;
 }
 
+// Media Queries
+//
+
 @media (min-width: 800px) {
   .site-main {
     margin-top: 3em;
@@ -640,6 +685,15 @@ hr.post-end {
     margin-top: 8em;
   }
 
+  .desktop-only,
+  #toc.show-toc {
+    display: block;
+  }
+
+  .desktop-only-ib {
+    display: inline-block;
+  }
+
   figure.left {
     margin-left: -240px;
     p {
@@ -662,6 +716,12 @@ hr.post-end {
   hr.post-end {
     width: 30%;
   }
+
+  #toc {
+    top: 13em;
+    margin-left: 370px;
+    max-width: 220px;
+  }
 }
 
 @media (min-width: 1800px) {
@@ -695,6 +755,12 @@ hr.post-end {
   hr.post-end {
     width: 30%;
   }
+
+  #toc {
+    top: 15em;
+    margin-left: 490px;
+    max-width: 300px;
+  }
 }
 
 @media (max-width: 760px) {
@@ -704,8 +770,7 @@ hr.post-end {
     display: none;
   }
 
-  #menu-btn,
+  #menu-btn {
-  #search-btn {
     display: inline-block;
   }
 

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`

i18n/en.toml

@@ -17,6 +17,9 @@ other = "Archives"
 [wordCount]
 other = "{{ .WordCount }} Words"
 
+[tableOfContents]
+other = "Table of Contents"
+
 [newer]
 other = "Newer"
 

i18n/zh-hans.toml

@@ -17,6 +17,9 @@ other = "归档"
 [wordCount]
 other = "{{ .WordCount }} 字"
 
+[tableOfContents]
+other = "目录"
+
 [newer]
 other = "新"
 

layouts/partials/header.html

@@ -14,6 +14,9 @@
 				{{ with .Params.featuredImg -}}
 				<button class="hdr-btn" onclick="showFeaturedImg()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
 				{{- end }}
+				{{- with .Params.toc -}}
+				<button class="hdr-btn desktop-only-ib" onclick="toggleToc()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg></button>
+				{{- end }}
 				{{- with .Site.Params.social -}}
 				<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
 				{{- end -}}

layouts/posts/single.html

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

resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.content

@@ -4,4 +4,5 @@ let mobileMenu=document.getElementById('mobile-menu');let mobileMenuVisible=fals
 mobileMenuVisible=false;}}
 const showFeaturedImg=()=>{document.getElementById('bg-img').classList.add('show-bg-img');}
 const showContent=()=>{document.getElementById('bg-img').classList.remove('show-bg-img');}
+const toggleToc=()=>{document.getElementById('toc').classList.toggle('show-toc');}
 if(haveHeader==true){document.getElementById('menu-btn').addEventListener('click',mobileMenuToggle);window.addEventListener('scroll',throttle(()=>{autoHideHeader();if(mobileMenuVisible==true){mobileMenuToggle();}},250));}

resources/_gen/assets/js/js/main.js_d11fe7b62c27961c87ecd0f2490357b9.json

@@ -1 +1 @@
-{"Target":"js/main.min.00689ba18bbf9422fda222b02b555f01d54bfbb9b6d02f9bcffad67bdb2ff2cd.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-AGiboYu/lCL9oiKwK1VfAdVL+7m20C+bz/rWe9sv8s0="}}
+{"Target":"js/main.min.7fb60d49ca60edf9439e867daffe2481a9722cacdbe91e2a8b3c84c36d540bab.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-f7YNScpg7flDnoZ9r/4kgalyLKzb6R4qizyEw21UC6s="}}

resources/_gen/assets/scss/scss/style.scss_c16d144eee185fbddd582cd5e25a4fae.json

@@ -1 +1 @@
-{"Target":"css/style.min.857f4a4adceba73f2fc8a745f8ca8b08437800bdf1c3275e2c7360f4994644ba.css","MediaType":"text/css","Data":{"Integrity":"sha256-hX9KStzrpz8vyKdF+MqLCEN4AL3xwydeLHNg9JlGRLo="}}
+{"Target":"css/style.min.e8eb45143fbe384978af8c624bc9641cf39138512edefb3d2a494b743ed28a95.css","MediaType":"text/css","Data":{"Integrity":"sha256-6OtFFD++OEl4r4xiS8lkHPOROFEu3vs9KklLdD7SipU="}}