feat: change TOC plugin to tocbot (#774)

_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 */

_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);
   }
 

_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;
+      }
 
-nav[data-toggle="toc"] {
-  .nav {
-    .nav > li > a.active {
-      font-weight: 600 !important;
+      a {
+        padding: 0.2rem 0 0.2rem 1.25rem;
+      }
+    }
+
+    /* 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: ':';
   }
 }