feat: change TOC plugin to tocbot (#774)

cotes2020 · Mar 15, 2023 · 02b7bd5 · 02b7bd5
1 parent 474b4ba
commit 02b7bd5
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 71 deletions.
diff --git a/_config.yml b/_config.yml
@@ -82,7 +82,7 @@ img_cdn: "https://chirpy-img.netlify.app"
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"
 
-# boolean type, the global switch for ToC in posts.
+# boolean type, the global switch for TOC in posts.
 toc: true
 
 comments:

diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml
@@ -22,9 +22,9 @@ bootstrap:
   css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
   js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
 
-bootstrap-toc:
-  css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
-  js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
+toc:
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js
 
 fontawesome:
   css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css

diff --git a/_data/assets/self_host.yml b/_data/assets/self_host.yml
@@ -11,9 +11,9 @@ bootstrap:
   css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css
   js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js
 
-bootstrap-toc:
-  css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css
-  js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
+toc:
+  css: /assets/lib/tocbot-4.20.1/tocbot.min.css
+  js: /assets/lib/tocbot-4.20.1/tocbot.min.js
 
 fontawesome:
   css: /assets/lib/fontawesome-free-6.2.1/css/all.min.css

diff --git a/_includes/head.html b/_includes/head.html
@@ -97,7 +97,7 @@
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
   {% if site.toc and page.toc %}
-    <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}

diff --git a/_includes/toc.html b/_includes/toc.html
@@ -6,11 +6,11 @@
 {% endif %}
 
 {% if enable_toc %}
-<!-- BS-toc.js will be loaded at medium priority -->
-<script src="{{ site.data.assets[origin].bootstrap-toc.js | relative_url }}"></script>
+  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
+    <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
+    <nav id="toc"></nav>
+  </div>
 
-<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[site.lang].panel.toc -}}</div>
-  <nav id="toc" data-toggle="toc"></nav>
-</div>
+  <!-- toc.js will be loaded at medium priority -->
+  <script src="{{ site.data.assets[origin].toc.js | relative_url }}"></script>
 {% endif %}
diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js
@@ -0,0 +1,11 @@
+export function toc() {
+  // see: https://github.com/tscanlin/tocbot#usage
+  tocbot.init({
+    tocSelector: '#toc',
+    contentSelector: '.post-content',
+    ignoreSelector: '[data-toc-skip]',
+    headingSelector: 'h2, h3',
+    orderedList: false,
+    scrollSmooth: false
+  });
+}
diff --git a/_javascript/modules/plugins.js b/_javascript/modules/plugins.js
@@ -4,3 +4,4 @@ export { imgExtra } from './components/img-extra';
 export { initLocaleDatetime } from './components/locale-datetime';
 export { initPageviews } from './components/pageviews';
 export { smoothScroll } from './components/smooth-scroll';
+export { toc } from './components/toc';
diff --git a/_javascript/post.js b/_javascript/post.js
@@ -4,7 +4,8 @@ import {
   initLocaleDatetime,
   initClipboard,
   smoothScroll,
-  initPageviews
+  initPageviews,
+  toc
 } from './modules/plugins';
 
 basic();
@@ -13,5 +14,6 @@ initTopbar();
 imgExtra();
 initLocaleDatetime();
 initClipboard();
-smoothScroll();
+toc();
+smoothScroll(); // must be called after toc is created
 initPageviews();
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -18,7 +18,7 @@
 
   {% include head.html %}
 
-  <body data-spy="scroll" data-target="#toc" data-topbar-visible="true">
+  <body data-topbar-visible="true">
 
     {% include sidebar.html %}
 

diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
@@ -27,13 +27,12 @@
   --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
   --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
-  --shimmer-bg:
-    linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(58, 55, 55, 0.4) 50%,
-      rgba(255, 255, 255, 0) 100%
-    );
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(58, 55, 55, 0.4) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@@ -117,16 +116,6 @@
     border-color: var(--main-border-color);
   }
 
-  /* posts' toc, override BS */
-  nav[data-toggle="toc"] .nav-link.active,
-  nav[data-toggle="toc"] .nav-link.active:focus,
-  nav[data-toggle="toc"] .nav-link.active:hover,
-  nav[data-toggle="toc"] .nav > li > a:focus,
-  nav[data-toggle="toc"] .nav > li > a:hover {
-    color: var(--toc-highlight) !important;
-    border-left-color: var(--toc-highlight) !important;
-  }
-
   /* categories */
   .categories.card,
   .list-group-item {
@@ -151,20 +140,20 @@
   }
 
   #archives li:nth-child(odd) {
-    background-image:
-      linear-gradient(
-        to left,
-        rgb(26, 26, 30),
-        rgb(39, 39, 45),
-        rgb(39, 39, 45),
-        rgb(39, 39, 45),
-        rgb(26, 26, 30)
-      );
+    background-image: linear-gradient(
+      to left,
+      rgb(26, 26, 30),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(39, 39, 45),
+      rgb(26, 26, 30)
+    );
   }
 
   color-scheme: dark;
 
-  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
+  /* stylelint-disable-next-line selector-id-pattern */
+  #disqus_thread {
     color-scheme: none;
   }
 } /* dark-scheme */
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
@@ -24,14 +24,17 @@
   --btn-box-shadow: #eaeaea;
   --checkbox-color: #c5c5c5;
   --checkbox-checked-color: #07a8f7;
-  --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
-  --shimmer-bg:
-    linear-gradient(
-      90deg,
-      rgba(250, 250, 250, 0) 0%,
-      rgba(232, 230, 230, 1) 50%,
-      rgba(250, 250, 250, 0) 100%
-    );
+  --img-bg: radial-gradient(
+    circle,
+    rgb(255, 255, 255) 0%,
+    rgb(249, 249, 249) 100%
+  );
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgba(250, 250, 250, 0) 0%,
+    rgba(232, 230, 230, 1) 50%,
+    rgba(250, 250, 250, 0) 100%
+  );
 
   /* Sidebar */
   --sidebar-bg: #eeeeee;
@@ -59,6 +62,7 @@
   --pin-color: #999fa4;
 
   /* Posts */
+  --toc-highlight: #563d7c;
   --btn-share-hover-color: var(--link-color);
   --card-border-color: #f1f1f1;
   --card-box-shadow: rgba(234, 234, 234, 0.76);
@@ -85,7 +89,7 @@
   --prompt-danger-bg: rgb(248, 215, 218, 0.56);
   --prompt-danger-icon-color: #df3c30;
 
-  [class^="prompt-"] {
+  [class^='prompt-'] {
     --link-underline-color: rgb(219, 216, 216);
   }
 

diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
@@ -17,7 +17,7 @@
 }
 
 @mixin dot($pl: 0.25rem, $pr: 0.25rem) {
-  content: "\2022";
+  content: '\2022';
   padding-left: $pl;
   padding-right: $pr;
 }
@@ -91,6 +91,7 @@ h1 + .post-meta {
     vertical-align: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
 
     .share-icons {
@@ -115,7 +116,7 @@ h1 + .post-meta {
         &:hover {
           text-decoration: none;
 
-          >i {
+          > i {
             @extend %btn-share-hovor;
           }
         }
@@ -250,24 +251,58 @@ h1 + .post-meta {
   transition: top 0.2s ease-in-out;
   -webkit-animation: fade-up 0.8s;
   animation: fade-up 0.8s;
-}
 
-#toc {
-  ul.nav.navbar-nav {
-    margin: 0.5rem 0;
-    padding: 0;
+  ul {
+    list-style: none;
+    font-size: 0.85rem;
+    line-height: 1.25;
+    padding-left: 0;
 
     li {
-      padding-top: 2px;
-      padding-bottom: 2px;
+      &:not(:last-child) {
+        margin: 0.4rem 0;
+      }
+
+      a {
+        padding: 0.2rem 0 0.2rem 1.25rem;
+      }
     }
-  }
-}
 
-nav[data-toggle="toc"] {
-  .nav {
-    .nav > li > a.active {
-      font-weight: 600 !important;
+    /* Overwrite TOC plugin style */
+
+    .toc-link {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &:hover {
+        color: var(--toc-highlight);
+        text-decoration: none;
+      }
+
+      &::before {
+        display: none;
+      }
+    }
+
+    .is-active-link {
+      color: var(--toc-highlight) !important;
+      font-weight: 600;
+
+      &::before {
+        display: inline-block;
+        width: 1px;
+        left: -1px;
+        height: 1.25rem;
+        background-color: var(--toc-highlight) !important;
+      }
+    }
+
+    ul {
+      a {
+        padding-left: 2rem;
+      }
     }
   }
 }
@@ -324,7 +359,8 @@ nav[data-toggle="toc"] {
     margin-bottom: 2rem;
   }
 
-  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
+  /* stylelint-disable-next-line selector-id-pattern */
+  #disqus_thread {
     min-height: 8.5rem;
   }
 }
@@ -337,7 +373,7 @@ nav[data-toggle="toc"] {
   @include label(inherit, 400, inherit);
 
   &::after {
-    content: ":";
+    content: ':';
   }
 }
 

diff --git a/assets/lib b/assets/lib