use hugo's toc

README.md

@@ -16,7 +16,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
 - [Favicons](#favicons)
 - [Shortcodes](#shortcodes)
 - [Syntax highlighting](#syntax-highlighting)
-- [Disable toc for a blog post](#disable-toc-for-a-blog-post)
+- [Enable Table of Contents for a Blog Post](#enable-table-of-contents-for-a-blog-post)
 - [Localization](#localization)
 - [Custom CSS and JS](#custom-css-and-js)
 - [Default to Dark Theme](#default-to-dark-theme)
@@ -82,14 +82,14 @@ By default, only a few languages are supported. If you want to add more, follow
 1. Download the JS file, then copy it to `static/js/prism.js`
 1. Download the CSS file, then copy it to `static/css/prism.css`
 
-## Disable toc for a blog post
+## Enable Table of Contents for a Blog Post
 
-Blog posts that have two or more subheadings (`<h2>`s) automatically get a table of contents. To disable this set `toc` to `false`. For example:
+Set `toc` to `true`. For example:
 
 ```
 ---
 title: "My page with a few headings"
-toc: false
+toc: true
 ---
 ```
 

assets/css/template-styles.css

@@ -431,8 +431,8 @@ caption {
     border: 1px solid;
     padding: 1.5rem;
 }
-.toc h2 {
-    font-size: 1rem;
+.toc nav {
+  margin-top: 1rem;
 }
 .toc ol {
     margin-left: 0.75rem;

assets/js/template-dom-scripts.js

@@ -53,7 +53,7 @@
 {{ if not .Site.Params.hideHeaderLinks }}
   /* Add "link here" links to <h2> headings */
   (function () {
-    var headings = document.querySelectorAll('main > h2');
+    var headings = document.querySelectorAll('h2, h3, h4, h5, h6');
 
     Array.prototype.forEach.call(headings, function (heading) {
       var id = heading.getAttribute('id');

exampleSite/content/post/creating-a-new-theme.md

@@ -2,6 +2,7 @@
 date: "2014-09-28"
 tags: ["hugo", "theme", "command-line"]
 title: "Creating a New Theme"
+toc: true
 ---
 
 

exampleSite/content/post/cupper-shortcodes/index.md

@@ -2,6 +2,7 @@
 title: "Cupper Shortcodes"
 date: 2019-02-12T23:39:06-06:00
 tags: [hugo, shortcodes]
+toc: true
 ---
 
 ## blockquote

exampleSite/content/post/cupper-typography.md

@@ -2,12 +2,12 @@
 title: "Cupper Typography"
 date: 2019-02-14T15:36:09-06:00
 tags: [hugo, markdown]
+toc: true
 ---
 
 ## Headings
 
 ```
-# Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4
@@ -15,7 +15,6 @@ tags: [hugo, markdown]
 ###### Heading 6
 ```
 
-# Heading 1
 ## Heading 2
 ### Heading 3
 #### Heading 4

exampleSite/content/post/goisforlovers.md

@@ -2,6 +2,7 @@
 date: "2014-04-02"
 tags: ["go", "templates", "hugo"]
 title: "(Hu)go Template Primer"
+toc: true
 ---
 
 Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for
@@ -235,7 +236,7 @@ Notice how once we have entered the loop the value of {{ . }} has changed. We
 have defined a variable outside of the loop so we have access to it from within
 the loop.
 
-# Hugo Parameters
+## Hugo Parameters
 
 Hugo provides the option of passing values to the template language
 through the site configuration (for sitewide values), or through the meta

exampleSite/content/post/hugoisforlovers.md

@@ -2,6 +2,7 @@
 date: "2014-04-02"
 tags: ["hugo", "git", "fun"]
 title: "Getting Started with Hugo"
+toc: true
 ---
 
 ## Step 1. Install Hugo

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

@@ -10,6 +10,7 @@ tags:
 - git
 - templates
 title: Migrate to Hugo from Jekyll
+toc: true
 ---
 
 ## Move static content to `static`

i18n/en.yaml

@@ -13,7 +13,7 @@
 - id: dark_theme
   translation: "dark theme:"
 - id: table_of_contents
-  translation: Table of contents
+  translation: Table of Contents
 - id: publish_date
   translation: "Publish date:"
 - id: last_updated

layouts/partials/toc.html

@@ -1,19 +1,6 @@
-{{ $headings := findRE "<h2.*?>(.|\n])+?</h2>" .Content }}
-{{ if ge (len $headings) 2 }}
+{{ if eq .Params.toc true }}
   <nav class="toc" aria-labelledby="toc-heading">
-    <h2 id="toc-heading">{{ T "table_of_contents" }}</h2>
-    <ol>
-      {{ range $headings }}
-        <li>
-          {{ $id := findRE "id=\".*\"" . }}
-          {{ $id = index $id 0 }}
-          {{ $id = strings.TrimPrefix "id=\"" $id }}
-          {{ $id = strings.TrimSuffix "\"" $id }}
-          <a href="#{{ $id }}">
-            {{ . | htmlUnescape | plainify }}
-          </a>
-        </li>
-      {{ end }}
-    </ol>
+    <strong id="toc-heading">{{ T "table_of_contents" }}</strong>
+    {{ .TableOfContents }}
   </nav>
 {{ end }}

layouts/post/single.html

@@ -36,9 +36,7 @@
       </div>
     {{ end }}
 
-    {{ if ne .Params.toc false }}
-      {{ partial "toc" . }}
-    {{ end }}
+    {{ partial "toc.html" . }}
 
     {{ .Content }}
   </main>