feat: integrate a "table of content"

src/blog_assets/css/index.scss

@@ -55,6 +55,7 @@ body {
   font-family: var(--font-family);
   color: var(--text-color);
   background-color: var(--background-color);
+  scroll-behavior: smooth;
 }
 
 main {
@@ -68,11 +69,52 @@ main {
   width: 1200px;
 }
 
-.right-side {
+.left-side, .right-side {
   position: sticky;
   top: 1rem;
   align-self: flex-start;
   width: 320px;
+}
+.left-side {
+  padding-right: 60px;
+}
+
+.table-of-contents {
+  background: var(--color-gray-20);
+  border-radius: 5px;
+  padding: 15px 5px;
+}
+
+.table-of-contents ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    a {
+      font-weight: bold;
+      font-size: 0.8125rem;
+      margin: 5px;
+      color: var(--text-color);
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.table-of-contents > ul ul li {
+  a {
+    font-weight: normal;
+  }
+}
+
+.right-side {
   padding-left: 60px;
 }
 
@@ -285,12 +327,14 @@ figure figcaption {
 .post-tag a {
   color: var(--text-color);
   font-size: 0.8125rem; /* 13px /16 */
+  font-weight: 700;
   text-decoration: none;
 }
 
 /* Tags list */
 .post-metadata {
   display: flex;
+  flex-direction: column;
   gap: .5em;
   font-size: 0.8125rem; /* 13px /16 */
   color: var(--text-color-sub);
@@ -350,21 +394,6 @@ h1 + .post-metadata {
   }
 }
 
-/* Direct Links / Markdown Headers */
-.direct-link {
-  font-family: sans-serif;
-  text-decoration: none;
-  font-style: normal;
-  margin-left: .1em;
-}
-a[href].direct-link {
-  color: transparent;
-}
-a[href].direct-link:focus,
-:hover > a[href].direct-link {
-  color: var(--color-gray-50);
-}
-
 .main-footer {
   align-items: center;
   background: var(--color-green-1);
@@ -473,9 +502,15 @@ pre[class*="language-diff-"] {
     max-width: 100%;
   }
   .right-side {
+    position: relative;
     width: 100%;
-    padding-left: 0;
-    padding-top: 5rem;
+    padding: 5rem 0;
+  }
+  .left-side {
+    position: relative;
+    order: 2;
+    width: 100%;
+    padding-right: 0;
   }
   h1 + .post-metadata {
     flex-direction: column;