From 4d303b984e1445a4b727c8cdf40dc237be0dc411 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 23 Jul 2024 08:57:21 -0700
Subject: [PATCH] Add a table of contents to the single template

Pages can show the table of contents by setting the renderTableOfContents parameter.
---
 assets/css/099_table_of_contents.css | 34 ++++++++++++++++++++++++++++
 i18n/en.yaml                         |  1 +
 layouts/_default/single.html         |  7 ++++++
 3 files changed, 42 insertions(+)
 create mode 100644 assets/css/099_table_of_contents.css

diff --git a/assets/css/099_table_of_contents.css b/assets/css/099_table_of_contents.css
new file mode 100644
index 0000000..6d72a7a
--- /dev/null
+++ b/assets/css/099_table_of_contents.css
@@ -0,0 +1,34 @@
+details:has(#TableOfContents) {
+  grid-column: main-start / main-end;
+
+  summary {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-m);
+
+    &::before {
+        content: "+ ";
+        font-weight: bold;
+    }
+
+    &::-webkit-details-marker {
+        display: none;
+    }
+  }
+
+  &[open] {
+    summary::before {
+      content: "- ";
+    }
+  }
+
+  #TableOfContents {
+    > ul {
+      padding-inline-start: 2ch; /*var(--space-m);*/
+      margin-block: 0;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+  }
+}
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 12ba225..6af7897 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1 +1,2 @@
 home: Home
+tableOfContents: Table of Contents
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 43da7e3..30e9716 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -3,6 +3,13 @@
     <header class="page-header">
       {{ partial "page_header.html" (dict "page" .) }}
     </header>
+
+    {{ if .Params.renderTableofContents | default false }}
+      <details>
+        <summary>{{ i18n "tableOfContents" }}</summary>
+        {{ .TableOfContents }}
+      </details>
+    {{ end }}
     <footer class="page-footer">
       {{ partial "page/footer.html" . }}
     </footer>