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

3 files changed, 6 insertions, 90 deletions

diff --git a/assets/css/components/_animation.scss b/assets/css/components/_animation.scss
index 039de17e..8431a997 100644
--- a/assets/css/components/_animation.scss
+++ b/assets/css/components/_animation.scss
@@ -1,3 +1,9 @@
+/* link scroll */
+
+html {
+  scroll-behavior: smooth;
+}
+
 /* page transition */
 
 @view-transition {
diff --git a/assets/css/components/_content.scss b/assets/css/components/_content.scss
deleted file mode 100644
index 6c5815cb..00000000
--- a/assets/css/components/_content.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-/* 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.is-active-li > a {
-    color: var(--text-color);
-}
-
-#toc li.is-active-li > a::before {
-    background-color: var(--secondary-text-color);
-}
-
-#toc .toc-list {
-	overflow: hidden;
-	position: relative;
-}
-
-#toc .toc-list .toc-list {
-    max-height: 25rem;
-	overflow-y: auto
-}
-
-#toc .toc-list.is-collapsed {
-	max-height: 0
-}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 3406cf86..a0d1b8b6 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -9,7 +9,6 @@
 @import "components/taxonomy";
 @import "components/postlist";
 @import "components/post";
-@import "components/content";
 @import "components/comment";
 @import "components/shortcodes";
 @import "components/card";