feat: Table of Contents (#232)

Currently, the new table of contents is disabled by default. I will change that after several versions.

-------------

* feat: Table of Content (WIP)

* fix: set scratch inside define block

* fix(toc): darkmode text color

* feat: unify page layout, and add config to disable toc

* feat: add scroll-behavior: smooth to html

* fix: use <ol> for TOC. And Disable TOC by default for now

* refactor: use css flexbox for article page with toc

enable toc for example site

* feat(i18n): add i18n entry for "Back" and "Table of Contents"

* style: remove unused `keep-sidebar` class

* doc: add table of contents as feature

assets/scss/partials/base.scss

@@ -1,6 +1,7 @@
 html {
     font-size: 62.5%;
     overflow-y: scroll;
+    scroll-behavior: smooth;
 }
 
 * {

assets/scss/partials/layout/article.scss

@@ -114,6 +114,114 @@
     }
 }
 
+.article-page.has-toc {
+    scroll-behavior: smooth;
+
+    .left-sidebar {
+        display: none;
+    }
+
+    .right-sidebar {
+        width: 100%;
+        padding: 0;
+        display: none;
+
+        @include respond(xl) {
+            display: block;
+            top: var(--main-top-padding);
+        }
+    }
+
+    #article-toolbar {
+        display: block;
+
+        @include respond(md) {
+            padding: 0;
+        }
+
+        @include respond(xl) {
+            margin-top: 0;
+            position: sticky;
+            top: var(--main-top-padding);
+            flex-shrink: 1;
+
+            a {
+                background: transparent;
+                box-shadow: none;
+                border: 1px solid var(--body-text-color);
+                width: 100%;
+                margin-right: 0;
+
+                svg {
+                    flex-shrink: 0;
+                }
+            }
+        }
+    }
+
+    .main-container {
+        align-items: start;
+        flex-direction: column;
+
+        @include respond(xl) {
+            flex-direction: row;
+        }
+    }
+
+    .main {
+        padding-top: 0;
+
+        @include respond(xl) {
+            padding-top: var(--main-top-padding);
+        }
+    }
+}
+
+.widget--toc {
+    background-color: var(--card-background);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--shadow-l1);
+    display: flex;
+    flex-direction: column;
+    color: var(--card-text-color-main);
+
+    #TableOfContents {
+        ol {
+            counter-reset: item;
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        & > li {
+            padding: 0;
+            margin: 0;
+        }
+
+        li {
+            margin: 15px 20px;
+            padding: 5px;
+
+            &::before {
+                counter-increment: item;
+                content: counters(item, ".") ". ";
+                font-weight: bold;
+                margin-right: 5px;
+            }
+
+            & > ol {
+                margin-top: 10px;
+                padding-left: 10px;
+                margin-bottom: -5px;
+
+                & > li:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
 .related-contents--wrapper {
     margin-bottom: var(--section-separation);
 }

assets/scss/partials/sidebar.scss

@@ -1,5 +1,4 @@
 .sidebar {
-    padding: 0 15px;
     &.sticky {
         @include respond(md) {
             position: sticky;
@@ -22,8 +21,8 @@
 
     @include respond(md) {
         width: auto;
-        margin-right: 1%;
-        padding: var(--main-top-padding) 15px;
+        padding-top: var(--main-top-padding);
+        padding-bottom: var(--main-top-padding);
         max-height: 100vh;
     }
 
@@ -46,7 +45,6 @@
     }
 
     @include respond(lg) {
-        margin-left: 1%;
         padding-top: var(--main-top-padding);
     }
 }
@@ -55,7 +53,7 @@
     z-index: 1;
     transition: box-shadow 0.5s ease;
 
-    padding: 15px 30px;
+    padding: 15px;
 
     @include respond(md) {
         padding: 0;