feat: apply scrollspy to table of contents

razonyang · Jul 30, 2022 · 8c4a5fb · 8c4a5fb
1 parent 3b9e8ad
commit 8c4a5fb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/assets/main/scss/post/_toc.scss b/assets/main/scss/post/_toc.scss
@@ -21,4 +21,10 @@
   li {
     margin-bottom: 0.25rem;
   }
+
+  a {
+    &.active {
+      color: var(--#{$prefix}primary);
+    }
+  }
 }
diff --git a/layouts/partials/docs/post.html b/layouts/partials/docs/post.html
@@ -7,7 +7,7 @@ <h1 class="card-title post-title my-2">{{ partial "helpers/title" . }}</h1>
     {{- partial "post/meta" . -}}
     {{- partial "post/featured-image" . -}}
     {{- partial "hooks/content-begin" . -}}
-    <div class="post-content mb-3">
+    <div class="post-content mb-3" data-bs-spy="scroll" data-bs-target="#TableOfContents" tabindex="0">
     {{- .Content -}}
     </div>
     {{- partial "post/reward" . -}}

diff --git a/layouts/partials/post.html b/layouts/partials/post.html
@@ -11,7 +11,7 @@ <h1 class="card-title post-title my-2">{{ partial "helpers/title" . }}</h1>
       {{- partial "post/toc" . -}}
     {{- end -}}
     {{- partial "post/share" . -}}
-    <div class="post-content mb-3">
+    <div class="post-content mb-3" data-bs-spy="scroll" data-bs-target="#TableOfContents" tabindex="0">
       {{- .Content -}}
     </div>
     {{- partial "post/reward" . -}}