From 5d37a104c4a413df04e4b0fbcfe6cb026cd52136 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Fri, 16 May 2025 15:03:14 +0800
Subject: perf: replace tocbot with statically generated toc

Generate TOC with Hugo's built-in {{ .TableOfContents }} and add minimal script to implement collapsible list and active styles.

Encapsulate TOC as a component where all JavaSript and CSS is in one place with HTML.

Configure markup.


Former-commit-id: 4b4629edb733d5ebd6485755fd2f63b0457f62c8
---
 layouts/_default/single.html         |  14 ----
 layouts/partials/components/toc.html | 130 +++++++++++++++++++++++++++++++++++
 layouts/posts/single.html            |  16 +----
 3 files changed, 131 insertions(+), 29 deletions(-)
 create mode 100644 layouts/partials/components/toc.html

(limited to 'layouts')

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index bfe80ad5..d23ceed4 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,24 +7,10 @@
       <!-- Content -->
       <div id="post-content" class="post-content markdown-body"
           style="view-transition-name: post-content-{{ .File.UniqueID }}">
-        {{ if .Params.toc }}
-        <div id="toc-container"><div id="toc"></div></div>
-        {{ end }}
         {{ .Site.Params.postHeaderContent | safeHTML }}
         {{ .Content }}
       </div>
 
-      <script src="/js/tocbot.min.js"></script>
-      <script>
-      tocbot.init({
-        tocSelector: '#toc',
-        contentSelector: '#post-content',
-        headingSelector: 'h2, h3:not(blockquote > h3)',
-        hasInnerContainers: true,
-        scrollSmoothOffset: -30
-      });
-      </script>
-
     </article>
     {{ partial "footer.html" . }}
 {{ end }}
diff --git a/layouts/partials/components/toc.html b/layouts/partials/components/toc.html
new file mode 100644
index 00000000..660d4bb2
--- /dev/null
+++ b/layouts/partials/components/toc.html
@@ -0,0 +1,130 @@
+<div id="toc-container"><div id="toc">{{ .TableOfContents }}</div></div>
+<style>
+/* toc */
+#toc-container {
+    position: absolute;
+    bottom: 0;
+    right: calc(50% + var(--page-width) / 2);
+    left: auto;
+    height: 100%;
+    top: 12rem;
+}
+
+@media screen and (max-width: 1200px) {
+    #toc-container {
+        display: none
+    }
+}
+
+#toc {
+    /* position */
+    position: sticky;
+    top: 3rem;
+    /* styling */
+    font-size: 1rem;
+    padding: 0 2rem;
+}
+
+@media screen and (max-width: 1700px) {
+    #toc {
+        font-size: 0.9rem;
+    }
+}
+
+@media screen and (max-width: 1500px) {
+    #toc {
+        font-size: 0.825rem;
+    }
+}
+
+#toc ul, #toc ol {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 1rem;
+}
+
+#toc li {
+    list-style: none;
+}
+
+#toc li > a {
+    color: var(--secondary-text-color);
+    text-decoration: none;
+    transition: color .3s;
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+#toc li > a::before {
+    content: '';
+    display: inline-block;
+    width: 1rem;
+    height: .3rem;
+    background-color: var(--block-background-color);
+    border-radius: .2rem;
+    transition: background .3s;
+}
+
+#toc li a:hover,
+#toc li.active > a {
+    color: var(--text-color);
+}
+
+#toc li.active > a::before {
+    background-color: var(--secondary-text-color);
+}
+
+#toc ul {
+	overflow: hidden;
+	position: relative;
+}
+
+#toc .toc-list ul {
+    max-height: 25rem;
+	overflow-y: auto
+}
+
+#toc li:not(.active) ul {
+	max-height: 0
+}
+</style>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const toc = document.getElementById('toc');
+  if (!toc) return;
+
+  const headings = document.querySelectorAll('h2, h3');
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) return;
+
+      const id = entry.target.id;
+      const tocLink = toc.querySelector(`a[href="#${id}"]`);
+      if (!tocLink) return;
+
+      const listItem = tocLink.parentElement;
+      const isH2 = entry.target.tagName === 'H2';
+
+      // Clear all active states when a new H2 is encountered
+      if (isH2) {
+        toc.querySelectorAll('li.active').forEach(el => el.classList.remove('active'));
+      }
+
+      // Set current item as active
+      listItem.classList.add('active');
+
+      // If this is an H3, find and activate its parent H2
+      if (!isH2) {
+        const parentH2Item = listItem.closest('ul').previousElementSibling?.closest('li');
+        if (parentH2Item) parentH2Item.classList.add('active');
+      }
+    });
+  }, {
+    rootMargin: '0px 0px -50% 0px',
+    threshold: 0.5
+  });
+
+  headings.forEach(heading => observer.observe(heading));
+});
+</script>
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index bb0daca8..e6dc6006 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -37,9 +37,7 @@
       <!-- Post Content -->
       <div id="post-content" class="post-content markdown-body"
           style="view-transition-name: post-content-{{ .File.UniqueID }}">
-        {{ if .Params.toc }}
-        <div id="toc-container"><div id="toc"></div></div>
-        {{ end }}
+        {{ if .Params.toc }}{{ partial "components/toc" . }}{{ end }}
         {{ .Site.Params.postHeaderContent | safeHTML }}
         {{ .Content }}
         {{ if eq .Site.Language.Lang "zh" }}
@@ -82,17 +80,5 @@
             {{ else }}<li class="placeholder"></li>{{ end }}
         </ul>
       </nav>
-
-      <script src="/js/tocbot.min.js"></script>
-      <script>
-      tocbot.init({
-        tocSelector: '#toc',
-        contentSelector: '#post-content',
-        headingSelector: 'h2, h3:not(blockquote > h3)',
-        hasInnerContainers: true,
-        scrollSmoothOffset: -30
-      });
-      </script>
-
     </article>
 {{ end }}
-- 
cgit v1.2.3