add toc

README.md

@@ -11,6 +11,7 @@ A Clean and minimal Hugo theme porting from Minima on Hexo. [Click me](https://h
 - [x] KaTeX
 - [x] Google analytics
 - [x] Disqus/OvO comments
+- [x] Optional ToC 
 
 ## Usage
 
@@ -48,10 +49,12 @@ Follow [exampleSite/config.toml](https://github.com/Mivinci/hugo-theme-minima/bl
 | math        | bool   | True if the post needs to render math formulas         |
 | comment     | bool   | True if the post allows people to make comments        |
 | draft       | bool   | True if the post isn't already to production           |
+| toc         | bool   | True if the post needs a ToC                           |
 | categories  | array  | Array of categories the posts belongs to               |
-| series      | array  | Array of series the posts belongs to                   |
+| series      | array  | Array of series the post belongs to                    |
 | tags        | array  | Array of tags the posts is related to                  |
 
+
 ### Feedback
 
 Feedbacks are welcome [here](https://github.com/Mivinci/hugo-theme-minima/issues).

data/svg.toml

@@ -2,3 +2,4 @@ github = '<svg fill="#63636f" width="18" role="img" viewBox="0 0 24 24" xmlns="h
 linkedin = '<svg fill="#0073b1" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
 twitter = '<svg fill="#1da1f2" width="18" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'
 rss = '<svg fill="#63636f" t="1626591563876" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="18" height="16"><path d="M128 768a128 128 0 1 0 0 256 128 128 0 0 0 0-256zM0 368v176c265.104 0 480 214.912 480 480h176c0-362.32-293.696-656-656-656zM0 0v176c468.336 0 848 379.664 848 848h176C1024 458.464 565.536 0 0 0z" p-id="1985"></path></svg>'
+toc = '<svg fill="var(--ft)" width="22" height="22" t="1628036980313" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1020"><path d="M811.6 264.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 522.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36zM811.6 780.1H378.2c-19.8 0-36-16.2-36-36s16.2-36 36-36h433.5c19.8 0 36 16.2 36 36-0.1 19.8-16.3 36-36.1 36z" p-id="1021"></path><path d="M210.2 229m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1022"></path><path d="M210.2 487m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1023"></path><path d="M210.2 745m-37.9 0a37.9 37.9 0 1 0 75.8 0 37.9 37.9 0 1 0-75.8 0Z" p-id="1024"></path></svg>'

exampleSite/content/markdown-syntax.md

@@ -14,6 +14,7 @@ categories = [
 ]
 series = ["Themes Guide"]
 aliases = ["migrate-from-jekyl"]
+toc = true
 +++
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

exampleSite/content/placeholder-text.md

@@ -7,6 +7,7 @@ tags = [
     "markdown",
     "text",
 ]
+toc = true
 +++
 
 Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.

layouts/_default/single.html

@@ -1,4 +1,7 @@
 {{ define "main" }}
+{{ if .Params.toc }}
+{{ partial "toc.html" . }}
+{{ end }}
 <main>
 	<h1>{{ .Title }}</h1>
 	<div class="sm-1 mtb-1">
@@ -14,17 +17,16 @@
 		{{ .Content }}
 	</article>
 </main>
-	{{ if or .Params.math .Site.Params.math }}
+{{ if or .Params.math .Site.Params.math }}
-		{{ partial "math.html" . }}
+{{ partial "math.html" . }}
-	{{ end }}
-
-	{{ if and .Params.comment (eq .Site.Params.comment "disqus")}}
-		{{ partial "disqus.html" . }}
-	{{ end }}
-
-	{{ if and .Params.comment (eq .Site.Params.comment "ovo")}}
-		{{ partial "ovo.html" . }}
-	{{ end }}
-
 {{ end }}
 
+{{ if and .Params.comment (eq .Site.Params.comment "disqus")}}
+{{ partial "disqus.html" . }}
+{{ end }}
+
+{{ if and .Params.comment (eq .Site.Params.comment "ovo")}}
+{{ partial "ovo.html" . }}
+{{ end }}
+
+{{ end }}

layouts/partials/toc.html

@@ -0,0 +1,6 @@
+<details class="toc">
+  <summary class="btn">Table of Contents</summary>
+  <div>
+    {{ .TableOfContents }}
+  </div>
+</details>

static/css/main.css

@@ -70,7 +70,7 @@ a:not(.icon):focus {
   color: #fff;
 }
 
-.icon:hover {
+a.icon:hover {
   transform: translateY(-5px);
   transition: transform .3s ease-in-out;
 }
@@ -178,6 +178,16 @@ main {
   padding: 2px 8px;
 }
 
+details.toc ul {
+  list-style-type: none;
+  padding-inline-start: 1em;
+  margin: 0;
+}
+
+details.toc ul>li {
+  margin: 1em 0;
+}
+
 @keyframes showup {
   from {
     opacity: 0;

static/js/main.js

@@ -14,5 +14,8 @@ window.addEventListener('DOMContentLoaded', function () {
     classList.add(newTheme);
     localStorage.theme = newTheme;
     themeSwitcher.innerHTML = text;
-  })
+  });
+
+
+  
 });