release: v2.4.0

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
2021-06-21 18:50:24 +02:00 · 2021-06-21 18:44:54 +02:00 · 2021-06-20 15:49:35 +02:00 · 2021-06-20 12:53:10 +02:00 · 2021-06-19 20:48:40 +02:00 · 2021-06-14 21:05:27 +02:00
29 changed files with 554 additions and 274 deletions
@@ -7,32 +7,39 @@ assignees: ''

 ---

-**Describe the bug**
+<!-- 
+    Before creating this bug report, make sure you have read the theme documentation: https://docs.stack.jimmycai.com/
+-->
+
+## Describe the bug
 A clear and concise description of what the bug is.

-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
+## Expected behavior
 A clear and concise description of what you expected to happen.

-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+## To Reproduce
+Indicate the steps to reproduce this bug, if applicable.
+
+## Screenshots
+Add screenshots to help explain your problem.
+
+## Environment
+
+- **Hugo version** [e.g: 0.80.0]: 
+- **Hugo extended?**: Yes / No
+
+## Additional context
+Add any other context about the problem here.
+
+If it's a UI issue, fill the following information:

-**Desktop (please complete the following information):**
 - OS: [e.g. iOS]
 - Browser [e.g. chrome, safari]
 - Version [e.g. 22]

-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+## Content of config.yaml
+```yaml
+### Paste the content of the config file here
+```

-**Additional context**
-Add any other context about the problem here.
+## Link to the demo site and/or source repository
@@ -27,6 +27,7 @@ Stack is a simple card-style Hugo theme designed for bloggers, some of its featu
 - No CSS framework, keep it simple and minimal
 - Properly cropped thumbnails
 - Subsection support
+- Table of contents

 ## Requirements

@@ -1,4 +1,17 @@
-$on-phone: 812px;
-$on-tablet: 1024px;
-$on-desktop: 1519px;
-$on-desktop-large: 1920px;
+$breakpoints: (
+    sm: 640px,
+    md: 768px,
+    lg: 1024px,
+    xl: 1280px,
+    2xl: 1536px,
+);
+
+@mixin respond($breakpoint) {
+    @if not map-has-key($breakpoints, $breakpoint) {
+        @warn "'#{$breakpoint}' is not a valid breakpoint";
+    } @else {
+        @media (min-width: map-get($breakpoints, $breakpoint)) {
+            @content;
+        }
+    }
+}
@@ -2,67 +2,52 @@
    margin-left: auto;
    margin-right: auto;

+    .left-sidebar {
+        max-width: var(--left-sidebar-max-width);
+    }
+
+    .right-sidebar {
+        max-width: var(--right-sidebar-max-width);
+
+        /// Display right sidebar when min-width: lg
+        @include respond(lg) {
+            display: block;
+        }
+    }
+
    &.extended {
-        @media (min-width: $on-phone) {
-            max-width: 800px;
-
-            .left-sidebar {
-                width: 25%;
-            }
+        @include respond(md) {
+            max-width: 1024px;
+            --left-sidebar-max-width: 25%;
+            --right-sidebar-max-width: 30%;
        }

-        @media (min-width: $on-tablet) {
-            max-width: 972px;
-
-            .right-sidebar {
-                width: 25%;
-            }
+        @include respond(lg) {
+            max-width: 1280px;
+            --left-sidebar-max-width: 20%;
+            --right-sidebar-max-width: 30%;
        }

-        @media (min-width: $on-desktop) {
-            max-width: 1200px;
-
-            .left-sidebar {
-                width: 20%;
-            }
-
-            .right-sidebar {
-                width: 25%;
-            }
-        }
-
-        @media (min-width: $on-desktop-large) {
+        @include respond(xl) {
            max-width: 1536px;
-
-            .left-sidebar {
-                width: 15%;
-            }
+            --left-sidebar-max-width: 15%;
+            --right-sidebar-max-width: 25%;
        }
    }

    &.compact {
-        @media (min-width: $on-phone) {
-            max-width: 800px;
-
-            .left-sidebar {
-                width: 25%;
-            }
+        @include respond(md) {
+            --left-sidebar-max-width: 25%;
+            max-width: 768px;
        }

-        @media (min-width: $on-tablet) {
-            max-width: 972px;
+        @include respond(lg) {
+            max-width: 1024px;
+            --left-sidebar-max-width: 20%;
        }

-        @media (min-width: $on-desktop) {
-            max-width: 1050px;
-
-            .left-sidebar {
-                width: 20%;
-            }
-        }
-
-        @media (min-width: $on-desktop-large) {
-            max-width: 1300px;
+        @include respond(xl) {
+            max-width: 1280px;
        }
    }
 }
@@ -76,8 +61,9 @@
    }

    &.on-phone--column {
-        @media (max-width: $on-phone) {
        flex-direction: column;
+        @include respond(md) {
+            flex-direction: unset;
        }
    }

@@ -106,7 +92,6 @@

 main.main {
    min-width: 0;
-    padding: 0 15px;
    max-width: 100%;
    flex-grow: 1;
    padding-top: var(--main-top-padding);
@@ -114,4 +99,11 @@ main.main {

 .main-container {
    min-height: 100vh;
+    align-items: flex-start;
+    padding: 0 15px;
+    column-gap: var(--section-separation);
+
+    @include respond(md) {
+        padding: 0 20px;
+    }
 }
@@ -24,14 +24,14 @@
        .article-image {
            img {
                width: 100%;
-                height: 200px;
+                height: 150px;
                object-fit: cover;

-                @media (max-width: $on-tablet) {
-                    height: 150px;
+                @include respond(md) {
+                    height: 200px;
                }

-                @media (min-width: $on-desktop-large) {
+                @include respond(xl) {
                    height: 250px;
                }
            }
@@ -62,7 +62,7 @@
    color: var(--card-text-color-main);
    font-size: 2.2rem;

-    @media (min-width: $on-desktop-large) {
+    @include respond(xl) {
        font-size: 2.4rem;
    }

@@ -86,7 +86,7 @@
    line-height: 1.5;

    font-size: 1.75rem;
-    @media (min-width: $on-desktop-large) {
+    @include respond(xl) {
        font-size: 2rem;
    }
 }
@@ -135,10 +135,10 @@
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    background-color: var(--card-background);
-    --image-size: 60px;
-
-    @media (max-width: $on-tablet) {
    --image-size: 50px;
+
+    @include respond(md) {
+        --image-size: 60px;
    }

    & + .pagination {
@@ -165,10 +165,10 @@

        .article-title {
            margin: 0;
-            font-size: 1.8rem;
-
-            @media (max-width: $on-tablet) {
            font-size: 1.6rem;
+
+            @include respond(md) {
+                font-size: 1.8rem;
            }
        }

@@ -242,20 +242,20 @@
            flex-direction: column;
            justify-content: flex-end;
            z-index: 2;
-            padding: 20px;
-
-            @media (max-width: $on-phone) {
            padding: 15px;
+
+            @include respond(sm) {
+                padding: 20px;
            }
        }

        .article-title {
-            font-size: 2.2rem;
+            font-size: 2rem;
            font-weight: 500;
            color: var(--card-text-color-main);

-            @media (max-width: $on-phone) {
-                font-size: 2rem;
+            @include respond(sm) {
+                font-size: 2.2rem;
            }
        }
    }
@@ -1,6 +1,7 @@
 html {
    font-size: 62.5%;
    overflow-y: scroll;
+    scroll-behavior: smooth;
 }

 * {
@@ -15,3 +16,24 @@ body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 }
+
+/* scrollbar styles for Firefox */
+* {
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+/**/
+
+/* scrollbar styles for Chromium */
+::-webkit-scrollbar {
+    height: auto;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+/**/
@@ -1,43 +1,9 @@
-.keep-sidebar {
-    @media (min-width: $on-phone) and (max-width: $on-tablet) {
-        --main-top-padding: 50px;
-    }
-}
-
 .article-page {
-    &.with-toolbar {
-        @media (max-width: $on-tablet) {
-            --main-top-padding: 0;
-        }
-    }
-
-    &:not(.keep-sidebar) .left-sidebar {
-        @media (max-width: $on-tablet) {
+    &.hide-sidebar-sm .left-sidebar {
        display: none;
-        }
-    }

-    .article-sidebar {
-        position: sticky;
-        top: 50px;
-        flex-shrink: 0;
-
-        @media (max-width: $on-tablet) {
-            display: none;
-        }
-
-        @media (min-width: $on-tablet) {
-            padding-left: 15px;
-            margin-left: 1%;
-        }
-
-        @media (min-width: $on-tablet) {
-            width: 25%;
-            margin-right: 1%;
-        }
-
-        @media (min-width: $on-desktop) {
-            width: 30%;
+        @include respond(md) {
+            display: inherit;
        }
    }

@@ -111,12 +77,9 @@
 #article-toolbar {
    display: flex;
    align-items: center;
-
-    @media (max-width: $on-tablet) {
    margin: 20px 0;
-    }

-    @media (min-width: $on-tablet) {
+    @include respond(md) {
        display: none;
    }

@@ -151,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);
 }
@@ -106,9 +106,10 @@
    z-index: 2;
    cursor: pointer;

-    @media (min-width: $on-phone + 1) {
+    @include respond(md) {
        display: none;
    }
+
    outline: none;

    &.is-active {
@@ -126,17 +127,11 @@
    list-style: none;
    display: flex;
    flex-direction: column;
-    margin-top: var(--sidebar-element-separation);
    margin-bottom: 0;
    overflow-y: auto;
    flex-grow: 1;
-    font-size: 1.5rem;
+    font-size: 1.4rem;

-    @media (min-width: $on-desktop-large) {
-        margin-top: 30px;
-    }
-
-    @media (max-width: $on-phone) {
    background-color: var(--card-background);
    margin-top: 0;
    padding: 15px 0;
@@ -146,58 +141,51 @@
    &.show {
        display: block;
    }
+
+    @include respond(md) {
+        align-items: flex-end;
+        display: flex;
+        background-color: transparent;
+        padding: 0;
+        box-shadow: none;
+        margin-top: var(--sidebar-element-separation);
    }

-    @media (min-width: $on-phone + 1) {
-        align-items: flex-end;
+    @include respond(xl) {
+        margin-top: 30px;
    }

    li {
        position: relative;
        vertical-align: middle;
-        padding: 10px 0;
+        padding: 10px 30px;

        &:not(:last-of-type) {
            margin-bottom: 15px;

-            @media (min-width: $on-desktop-large) {
+            @include respond(xl) {
                margin-bottom: 20px;
            }
        }

-        @media (max-width: $on-phone) {
-            padding: 10px 30px;
-        }
-
-        @media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
+        @include respond(md) {
+            width: 100%;
            padding: 10px 0;
        }

-        @media (min-width: $on-phone + 1) {
-            width: 100%;
-        }
-
        svg {
-            width: 25px;
-            height: 25px;
            stroke-width: 1.33;
            margin-right: 40px;

-            @media (max-width: $on-desktop-large) {
            width: 20px;
            height: 20px;
        }
-        }

        a {
            height: 100%;
            display: inline-flex;
            align-items: center;
            color: var(--body-text-color);
-
-            @media (max-width: $on-desktop-large) {
-                font-size: 1.4rem;
-            }
        }

        span {
@@ -1,7 +1,6 @@
 .sidebar {
-    padding: 0 15px;
    &.sticky {
-        @media (min-width: ($on-phone + 1)) {
+        @include respond(md) {
            position: sticky;
        }
    }
@@ -11,45 +10,41 @@
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
+    align-self: stretch;

-    --sidebar-avatar-size: 150px;
-    --sidebar-element-separation: 25px;
+    width: 100%;
+    padding: 30px 0 15px 0;
+    max-width: none;

-    @media (max-width: $on-desktop-large) {
    --sidebar-avatar-size: 120px;
    --sidebar-element-separation: 20px;
+
+    @include respond(md) {
+        width: auto;
+        padding-top: var(--main-top-padding);
+        padding-bottom: var(--main-top-padding);
+        max-height: 100vh;
    }

-    @media (max-width: $on-phone) {
-        width: 100%;
-        padding: 30px 0;
-        max-width: none;
+    @include respond(2xl) {
+        --sidebar-avatar-size: 140px;
+        --sidebar-element-separation: 25px;
    }

    &.sticky {
        top: 0;
    }
-
-    @media (min-width: $on-phone + 1) {
-        margin-right: 1%;
-        padding: var(--main-top-padding) 15px;
-        max-height: 100vh;
-    }
 }

 .right-sidebar {
    flex-shrink: 0;
+    display: none;

    &.sticky {
        top: 0;
    }

-    @media (max-width: $on-desktop - 1) {
-        display: none;
-    }
-
-    @media (min-width: $on-tablet) {
-        margin-left: 1%;
+    @include respond(lg) {
        padding-top: var(--main-top-padding);
    }
 }
@@ -58,8 +53,10 @@
    z-index: 1;
    transition: box-shadow 0.5s ease;

-    @media (max-width: $on-phone) {
-        padding: 15px 30px;
+    padding: 15px;
+
+    @include respond(md) {
+        padding: 0;
    }

    .site-avatar {
@@ -79,9 +76,9 @@

        .emoji {
            position: absolute;
-            width: 50px;
-            height: 50px;
-            line-height: 50px;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
            border-radius: 100%;
            bottom: 0;
            right: 0;
@@ -90,20 +87,20 @@
            background-color: var(--card-background);
            box-shadow: var(--shadow-l2);

-            @media (max-width: $on-desktop-large) {
-                width: 40px;
-                height: 40px;
-                line-height: 40px;
+            @include respond(2xl) {
+                width: 50px;
+                height: 50px;
+                line-height: 50px;
            }
        }
    }

    .site-name {
        color: var(--accent-color);
-        font-size: 2.4rem;
        margin: 0;
+        font-size: 1.8rem;

-        @media (max-width: $on-desktop-large) {
+        @include respond(2xl) {
            font-size: 2rem;
        }
    }
@@ -112,10 +109,10 @@
        color: var(--body-text-color);
        font-weight: normal;
        margin: 10px 0;
-        font-size: 1.8rem;
-
-        @media (max-width: $on-desktop-large) {
        font-size: 1.6rem;
+
+        @include respond(2xl) {
+            font-size: 1.8rem;
        }
    }
 }
@@ -17,11 +17,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Global style
 */
 :root {
-    @media (min-width: $on-phone + 1) {
+    @include respond(md) {
        --main-top-padding: 35px;
    }

-    @media (min-width: $on-desktop-large) {
+    @include respond(xl) {
        --main-top-padding: 50px;
    }

@@ -36,12 +36,17 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;

    --section-separation: 40px;

-    [data-scheme="dark"] {
+    --scrollbar-thumb: hsl(0, 0%, 85%);
+    --scrollbar-track: var(--body-background);
+
+    &[data-scheme="dark"] {
        --body-background: #303030;
        --accent-color: #ecf0f1;
        --accent-color-darker: #bdc3c7;
        --accent-color-text: #000;
        --body-text-color: rgba(255, 255, 255, 0.7);
+        --scrollbar-thumb: #424242;
+        --scrollbar-track: var(--body-background);
    }
 }

@@ -70,20 +75,23 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;

    --card-border-radius: 10px;

-    --card-padding: 30px;
-    @media (max-width: $on-desktop-large) {
+    --card-padding: 20px;
+
+    @include respond(md) {
        --card-padding: 25px;
    }
-    @media (max-width: $on-tablet) {
-        --card-padding: 20px;
+
+    @include respond(xl) {
+        --card-padding: 30px;
    }

-    --small-card-padding: 25px;
-    @media (max-width: $on-tablet) {
    --small-card-padding: 25px 20px;
+
+    @include respond(md) {
+        --small-card-padding: 25px;
    }

-    [data-scheme="dark"] {
+    &[data-scheme="dark"] {
        --card-background: #424242;
        --card-background-selected: rgba(255, 255, 255, 0.16);
        --card-text-color-main: rgba(255, 255, 255, 0.9);
@@ -98,10 +106,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
    --article-font-family: var(--base-font-family);
-    --article-font-size: 1.7rem;
-    @media (max-width: $on-tablet) {
    --article-font-size: 1.6rem;
+
+    @include respond(md) {
+        --article-font-size: 1.7rem;
    }
+
    --article-line-height: 1.85;
 }

@@ -127,7 +137,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
    --table-border-color: #dadada;
    --tr-even-background-color: #efefee;

-    [data-scheme="dark"] {
+    &[data-scheme="dark"] {
        --code-background-color: #272822;
        --code-text-color: rgba(255, 255, 255, 0.9);

@@ -9,7 +9,7 @@ class StackColorScheme {
        this.bindMatchMedia();
        this.currentScheme = this.getSavedScheme();

-        this.dispatchEvent(document.body.dataset.scheme as colorScheme);
+        this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);

        if (toggleEl)
            this.bindClick(toggleEl);
@@ -56,13 +56,13 @@ class StackColorScheme {

    private setBodyClass() {
        if (this.isDark()) {
-            document.body.dataset.scheme = 'dark';
+            document.documentElement.dataset.scheme = 'dark';
        }
        else {
-            document.body.dataset.scheme = 'light';
+            document.documentElement.dataset.scheme = 'light';
        }

-        this.dispatchEvent(document.body.dataset.scheme as colorScheme);
+        this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
    }

    private getSavedScheme(): colorScheme {
@@ -11,7 +11,7 @@ disqusShortname: hugo-theme-stack
 googleAnalytics:

 # Theme i18n support
-# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de
+# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de, nl
 DefaultContentLanguage: en

 permalinks:
@@ -42,6 +42,7 @@ params:

    article:
        math: false
+        toc: true
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0
@@ -60,6 +61,29 @@ params:
            site:
            locale:

+        vssue:
+            platform:
+            owner:
+            repo:
+            clientId:
+            clientSecret:
+
+        # Waline client configuration see: https://waline.js.org/en/reference/client.html
+        waline:
+            serverURL:
+            lang:
+            visitor:
+            avatar:
+            emoji:
+                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
+            requiredMeta:
+                - name
+                - email
+                - url
+            placeholder:
+            locale:
+                admin: Admin
+
    widgets:
        enabled:
            - search
@@ -122,5 +146,9 @@ related:
          weight: 200

 markup:
+    tableOfContents:
+        endLevel: 4
+        ordered: true
+        startLevel: 2
    highlight:
        noClasses: false
@@ -1,6 +1,6 @@
 ---
 title: "Test"
-description: "This is a example category"
+description: "This is an example category"
 slug: "test"
 image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
 style:
@@ -17,8 +17,15 @@ list:
        other: Subsections

 article:
+    back:
+        other: Back
+
+    tableOfContents:
+        other: Table of contents
+
    relatedContents:
        other: Related contents
+
    lastUpdatedOn:
        other: Last updated on

@@ -32,8 +39,10 @@ widget:
    archives:
        title:
            other: Archives
+
        more:
            other: More
+
    tagCloud:
        title:
            other: Tags
@@ -41,13 +50,16 @@ widget:
 search:
    title:
        other: Search
+
    placeholder:
        other: Type something...
+
    resultTitle:
        other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"

 footer:
    builtWith:
        other: Built with {{ .Generator }}
+
    designedBy:
        other: Theme {{ .Theme }} designed by {{ .DesignedBy }}
@@ -28,7 +28,7 @@ widget:

 search:
    title:
-        other: サーチ
+        other: 検索
    placeholder:
        other: 入力...
    resultTitle:
@@ -0,0 +1,53 @@
+toggleMenu:
+    other: Open Menu
+
+darkMode:
+    other: Donkere modus
+
+list:
+    page:
+        one: "{{ .Count }} pagina"
+        other: "{{ .Count }} pagina's"
+
+    section:
+        other: Sectie
+
+    subsection:
+        one: Subsectie
+        other: Subsecties
+
+article:
+    relatedContents:
+        other: Gerelateerde inhoud
+    lastUpdatedOn:
+        other: Laatst bijgewerkt op
+
+notFound:
+    title:
+        other: Niet gevonden
+    subtitle:
+        other: Deze pagina bestaat niet.
+
+widget:
+    archives:
+        title:
+            other: Archief
+        more:
+            other: Meer
+    tagCloud:
+        title:
+            other: Tags
+
+search:
+    title:
+        other: Zoeken
+    placeholder:
+        other: Typ iets
+    resultTitle:
+        other: "#PAGES_COUNT pagina's (#TIME_SECONDS seconden)"
+
+footer:
+    builtWith:
+        other: Gemaakt met {{ .Generator }}
+    designedBy:
+        other: Theme {{ .Theme }} ontworpen door {{ .DesignedBy }}
@@ -6,8 +6,10 @@
    </head>
    <body class="{{ block `body-class` . }}{{ end }}">
        {{- partial "head/colorScheme" . -}}
-        <div class="container main-container flex on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
+        <div class="container main-container flex {{ block `container-class` . }}on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}{{ end }}">
+            {{- block "left-sidebar" . -}}
                {{ partial "sidebar/left.html" . }}
+            {{- end -}}
            <main class="main full-width">
                {{- block "main" . }}{{- end }}
            </main>
@@ -1,7 +1,22 @@
-{{ define "body-class" }}article-page keep-sidebar{{ end }}
+{{ define "body-class" }}
+    {{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
+    {{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
+    article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }}
+{{ end }}
+
+{{ define "container-class" }}
+    {{ if (.Scratch.Get "hasTOC") }}
+        extended
+    {{ else }}
+        on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
+    {{ end }}
+{{ end }}
+
 {{ define "main" }}
    {{ partial "article/article.html" . }}

+    {{ partial "article/components/related-contents" . }}
+     
    {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}} 
        {{ partial "comments/include" . }}
    {{ end }}
@@ -10,3 +25,33 @@

    {{ partialCached "article/components/photoswipe" . }}
 {{ end }}
+
+{{ define "left-sidebar" }}
+    {{ if (.Scratch.Get "hasTOC") }}
+        <div id="article-toolbar">
+            <a href="{{ .Site.BaseURL }}" class="back-home">
+                {{ (resources.Get "icons/back.svg").Content | safeHTML }}
+                <span>{{ T "article.back" }}</span>
+            </a>
+        </div>
+    {{ else }}
+        {{ partial "sidebar/left.html" . }}
+    {{ end }}
+{{ end }}
+
+{{ define "right-sidebar" }}
+    {{ if (.Scratch.Get "hasTOC") }}
+        <aside class="sidebar right-sidebar sticky">
+            <section class="widget archives">
+                <div class="widget-icon">
+                    {{ partial "helper/icon" "hash" }}
+                </div>
+                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
+                
+                <div class="widget--toc">
+                    {{ .TableOfContents }}
+                </div>
+            </section>
+        </aside>
+    {{ end }}
+{{ end }}
@@ -7,7 +7,7 @@
        components: ['embed'],
        url: "{{ $.Permalink }}",
        max_shown_comments: {{ default 15 .max_shown_comments }},
-        theme: document.body.dataset.scheme,
+        theme: document.documentElement.dataset.scheme,
        page_title: '{{ $.Title }}',
        locale: '{{ default "en" .locale }}',
        show_email_subscription: {{ default true .show_email_subscription }}
@@ -31,7 +31,7 @@

    addEventListener('message', event => {
        if (event.origin !== 'https://utteranc.es') return;
-        setUtterancesTheme(document.body.dataset.scheme)
+        setUtterancesTheme(document.documentElement.dataset.scheme)
    });

    window.addEventListener('onColorSchemeChange', (e) => {
@@ -0,0 +1,27 @@
+{{- with .Site.Params.comments.vssue -}}
+<link rel="stylesheet" href="https://unpkg.com/vssue/dist/vssue.min.css" />
+
+<div id="vssue"></div>
+
+<script src="https://unpkg.com/vue/dist/vue.runtime.min.js"></script>
+<script src="https://unpkg.com/vssue/dist/vssue.{{ .platform }}.min.js"></script>
+
+<script>
+    new Vue({
+        el: "#vssue",
+        render: (h) =>
+            h("Vssue", {
+                props: {
+                    title: "{{ $.Title }}",
+                    options: {
+                        proxy: (url) => "https://cors-anywhere.azm.workers.dev/" + url,
+                        owner: "{{ .owner }}",
+                        repo: "{{ .repo }}",
+                        clientId: "{{ .clientId }}",
+                        clientSecret: "{{ .clientSecret }}",
+                    },
+                },
+            }),
+    });
+</script>
+{{- end -}}
@@ -0,0 +1,32 @@
+<script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
+<div id="waline" class="waline-container"></div>
+<style>
+    .waline-container {
+        background-color: var(--card-background);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--shadow-l1);
+        padding: var(--card-padding);
+    }
+    .waline-container .vcount {
+        color: var(--card-text-color-main);
+    }
+</style>
+
+{{- with .Site.Params.comments.waline -}}
+{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
+{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}
+
+{{- range $key, $val := . -}}
+    {{- if $val -}}  
+        {{- $replaceKey := index $replaceKeys $key -}}
+        {{- $k := default $key $replaceKey -}}
+
+        {{- $config = merge $config (dict $k $val) -}}
+    {{- end -}}
+{{- end -}}
+
+<script>
+    /// Waline client configuration see: https://waline.js.org/en/reference/client.html
+    new Waline({{ $config | jsonify | safeJS }});
+</script>
+{{- end -}}
@@ -1,4 +1,4 @@
-{{- $ThemeVersion := "2.3.0" -}}
+{{- $ThemeVersion := "2.4.0" -}}
 <footer class="site-footer">
    <section class="copyright">
        &copy; 
@@ -31,9 +31,9 @@
             * 1. If dark mode is set already (in local storage)
             * 2. Auto mode & prefere color scheme is dark
             */
-            document.body.dataset.scheme = 'dark';
+            document.documentElement.dataset.scheme = 'dark';
        } else {
-            document.body.dataset.scheme = 'light';
+            document.documentElement.dataset.scheme = 'light';
        }
    })();
 </script>
@@ -21,5 +21,5 @@
    <link rel="shortcut icon" href="{{ . }}" />
 {{ end }}

-{{- template "_internal/google_analytics_async.html" . -}}
+{{- template "_internal/google_analytics.html" . -}}
 {{- partial "head/custom.html" . -}}
@@ -1,5 +1,6 @@
 {{- with .Site.Params.opengraph.twitter.site -}}
-    <meta name="twitter:site" content="{{ . }}">
+    <meta name="twitter:site" content="@{{ . }}">
+    <meta name="twitter:creator" content="@{{ . }}">
 {{- end -}}

 {{- $title := partialCached "data/title" . .RelPermalink -}}
@@ -8,7 +8,7 @@
    {{ $url := urls.Parse $imageValue }}

    {{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
-        <!-- Is a external image -->
+        <!-- Is an external image -->
        {{ $result = merge $result (dict "permalink" $imageValue) }}
    {{ else }}
        {{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageValue | safeURL)) }}
@@ -1,21 +0,0 @@
-{{ define "container-class" }}article-page with-toolbar{{ end }}
-{{ define "main" }}
-    <div id="article-toolbar">
-        <a href="{{ .Site.BaseURL }}" class="back-home">
-            {{ (resources.Get "icons/back.svg").Content | safeHTML }}
-            <span>Back</span>
-        </a>
-    </div>
-
-    {{ partial "article/article.html" . }}
-
-    {{ partial "article/components/related-contents" . }}
-
-    {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}}
-        {{ partial "comments/include" . }}
-    {{ end }}
-
-    {{ partialCached "footer/footer" . }}
-
-    {{- partialCached "article/components/photoswipe.html" . -}}
-{{ end }}
Author	SHA1	Message	Date
Jimmy	70615246c5	release: v2.4.0	2021-06-21 18:50:24 +02:00
Jimmy CaiandGitHub	41fa65cbf5	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	2021-06-21 18:44:54 +02:00
k GitHub Jimmy Cai	dda55f87e2	feat: change the page vertical scrollbar styles (#227 ) * fix: take out [data-scheme="dark"] from :root Taking out the [data-scheme="dark"] from :root allows us to fix the precedence of CSS when the [data-scheme="dark"] is placed in the <html> tag. This is needed in order to make the dark styles accesible from the <html> elment, this will allow us to change the vertical scrollbar styles following the dark and light schemes. * change document.body.dataset.scheme to document.documentElement.dataset.scheme When the dark mode is on or when the light mode is on, the [data-scheme="light"] or [data-scheme="dark"], respectively, will be placed in the <html> tag. Allowing us to access the dark and light color schemes from the <html> to change the vertical scrollbar styles according to the current color scheme. * feat: change the page vertical scrollbar styles This change will make the vertical scrollbar styles to follow the dark and light color scheme modes. Also, this change will make the vertical scrollbar to look consistent in both, Chromium and Firefox. * make the scrollbar-track background-color transparent The body has this transition: 'transition: background-color 0.3s ease 0s'. Making the scrollbar-track background-color transparent allow us to appreciate that transition in the scrollbar-track when switching the background-color. * Move [data-scheme=dark] back to :root block * fix(comment/waline): detect dark mode from html tag * feat: apply custom scrollbar style to all elements Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>	2021-06-20 15:49:35 +02:00
Jimmy CaiandGitHub	495a3b0289	refactor: rewrite grid system & style changes (#231 ) * refactor(WIP): add new SCSS mixin `respond` Theme's stylesheet mixes the use of max-width and min-width for responsive design, and it's horrible. * refactor: update variable.scss to use @mixin respond * refactor(grid): adjust sidebar max-width * refactor(partials/article.scss): use `@include respond` * refactor(layout/article.scss): delete unused SCSS and migrate to `@include respond` * Adjust left sidebar max-width on xl screen * fix: right sidebar not sticky * refactor(breakpoint): simplify `@mixin respond` * refactor(breakpoints): improve warning message * fix(breakpoint): return only the requested breakpoint * fix: add missing padding to .article-details	2021-06-20 12:53:10 +02:00
kandGitHub	028ae12ea5	fix: set the scrollbar-track background to transparent (#228 ) The body has this transition: 'transition: background-color 0.3s ease 0s'. Setting the scrollbar-track's background-color of the horizontal scrollbar of the Archives page to transparent will make us to appreciate that transition when switching the background-color.	2021-06-19 20:48:40 +02:00
暁学生 GitHub zhixuan Jimmy Cai	ed4a1bc56e	feat(comment): add Waline (#200 ) * feat(comment): add Waline * fix: waline client config * fix: waline client config * #200#issuecomment-860025299 * Update config.yaml * Update Waline section of config.yaml * Remove double quote escape Co-authored-by: zhixuan <jinzhixuan666@gmail.com> Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>	2021-06-14 21:05:27 +02:00
k GitHub Miguel Angel Jimmy Cai Jimmy Cai	58e8fadafe	feat: change horizontal scrollbar styles (#211 ) * feat: change horizontal scrollbar styles Change the horizontal scrollbar styles in Archives page following the dark and light themes styles. This horizontal scrollbar is at the top of the Archives page. When I visit this page, the scrollbar stole my attention. Unfortunately, it's the client (our browser) who decides its styles; this change is introduced to avoid that situation. Co-authored-by: Miguel Angel <man98@me.com> * remove scrollbar height and border-radius In order to match the theme presentation (https://i.imgur.com/cCiHOGS.jpg), the previous defined `height: 7px` and `border-radius: 10px` for the scrollbar have been deleted. * fix: set the horizontal scrollbar's height and width to `auto` In Firefox the horizontal scrollbar looks very small. With a width set to `auto`, it looks bigger and better. In Chromium, without an automatic height, the new color changes do not appear. Now the horizontal scrollbar looks consistent in both chromium and firefox. * style: format list.scss Co-authored-by: Miguel Angel <man98@me.com> Co-authored-by: Jimmy Cai <github@jimmycai.com> Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>	2021-06-12 11:32:54 +02:00
zhixuanandGitHub	2c0bf8c940	feat: Add support for Google Analytics v4 (#214 )	2021-06-12 09:51:31 +02:00
Masakazu ArakiandGitHub	159cc30570	fix(i18n): Japanese translating (#212 ) "サーチ" is not good translate for this situation.	2021-06-12 09:28:43 +02:00
kandGitHub	45b16a0bb4	fix(typo): change 'a ex.' for 'an ex.' (#213 ) In order to fix this kind of typo, the (not sophisticated) Regular Expression: `[a-zA-Z] [aA] [aeiouAEIOU]` was ran. That Regular Expression matches some good written sentences like `a User`, therefore, those has been omitted.	2021-06-12 09:24:59 +02:00
慕枫Go GitHub Jimmy Cai	325303a7f8	feat: add Vssue comment (#197 ) * 添加Vssue评论插件 * 修复默认代理过期问题 * style(comment/vssue): format html Co-authored-by: Jimmy Cai <github@jimmycai.com>	2021-04-26 18:27:44 +02:00
zhixuanandGitHub	7dab67b358	refactor(opengraph/twitter): add @ before username (#186 ) https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html	2021-04-07 10:31:25 +02:00
miclnlandGitHub	80bd7689a2	fix(i18n): Dutch minor change (#185 )	2021-04-05 10:25:11 +02:00
Jimmy CaiandGitHub	2bd9bc4f7d	chore(github): update bug report template	2021-04-04 12:38:28 +02:00
miclnlandGitHub	b10d028ca9	feat(i18n): add Dutch (#180 )	2021-04-03 20:59:46 +02:00