release: 3.1.0

Co-authored-by: Jimmy Cai <github@jimmycai.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -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

.github/workflows/hugo-artifact.yml

@@ -39,4 +39,6 @@ jobs:
                   # Artifact name
                   name: resources
                   # A file, directory or wildcard pattern that describes what to upload
-                  path: exampleSite/resources
+                  path: |
+                    exampleSite/resources
+                    !exampleSite/resources/_gen/images

README.md

@@ -9,9 +9,9 @@
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a2d2807a-a905-4bcb-97da-8da8d847da3d/deploy-status)](https://app.netlify.com/sites/hugo-theme-stack/deploys)
 
-## Documentation & more information
+## Documentation
 
-[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/v/zh-cn/)
+[Documentation](https://docs.stack.jimmycai.com/) | [中文文档](https://docs.stack.jimmycai.com/zh/)
 
 ## Introduction
 
@@ -27,21 +27,17 @@ 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
 
-It's necessary to use **Hugo ≥ 0.78.0**.
-
-Use Hugo Extended version (recommended) if you want to:
-
-* Use the latest feature/fix from `master` branch
-* Edit SCSS files
-  
-**Compiled CSS are updated once per release.**
+It's necessary to use **Hugo Extended ≥ 0.87.0**.
 
 ## Installation
 
-Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.toml`.
+Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.yaml`.
+
+*Note: Remove `config.toml` if there is one in the site folder.*
 
 Check [documentation](https://docs.stack.jimmycai.com/) for more details.
 
@@ -63,13 +59,22 @@ Your support is greatly appreciated :)
 
 ## Thanks to
 
-  - [Vibrant-Colors/node-vibrant](https://github.com/Vibrant-Colors/node-vibrant)
-  - [Normalize.css](https://necolas.github.io/normalize.css/)
-  - [Tabler icons](https://tablericons.com/)
-  - [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6)
-  - [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers)
-  - [PhotoSwipe](https://photoswipe.com/)
-  - [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element)
-  - [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo)
-  - [lepture/yue.css](https://github.com/lepture/yue.css)
-  - Markdown gallery syntax from [Typlog](https://typlog.com/)
+| Project | Description | Licence |
+| ------- | ----------- | ------- |
+| [PhotoSwipe](https://photoswipe.com/) | For the lightbox effect | [MIT](https://github.com/dimsemenov/PhotoSwipe/blob/master/LICENSE) |
+| [Normalize.css](https://github.com/necolas/normalize.css) | - | [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md) |
+| [Node Vibrant](https://github.com/Vibrant-Colors/node-vibrant) | To extract the color from images | [MIT](https://github.com/Vibrant-Colors/node-vibrant/blob/master/LICENSE.md)
+| [Tabler icons](https://github.com/tabler/tabler-icons) | Default menu icons | [MIT](https://github.com/tabler/tabler-icons/blob/master/LICENSE) |
+| [jonsuh/hamburgers](https://github.com/jonsuh/hamburgers) | Hamburger icon of menu | [MIT](https://github.com/jonsuh/hamburgers/blob/master/LICENSE) |
+| [lepture/yue.css](https://github.com/lepture/yue.css) | Part of it is used for styling article content | MIT |
+| [Typlog](https://typlog.com/) | Where the markdown gallery syntax is borrowed from | The author gave me the permission | 
+| [Pure CSS implementation of Google Photos / 500px image layout](https://github.com/xieranmaya/blog/issues/6) | Used for image gallery | - |
+
+### References
+
+Some references that I took while building this theme:
+
+| Project | Licence|
+| ------- | ------|
+| [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element) | [MIT](https://github.com/artchen/hexo-theme-element/blob/master/LICENSE) |
+| [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) | [MIT](https://github.com/MunifTanjim/minimo/blob/master/LICENSE) |

archetypes/categories.md

@@ -0,0 +1,7 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+image: 
+style:
+    background: "#2a9d8f"
+    color: "#fff"
+---

archetypes/default.md

@@ -1,2 +1,11 @@
-+++
-+++
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: 
+date: {{ .Date }}
+image: 
+math: 
+license: 
+hidden: false
+comments: true
+draft: true
+---

archetypes/tags.md

@@ -0,0 +1,5 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+description: 
+image: 
+---

assets/icons/date.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
+  <circle cx="18" cy="18" r="4" />
+  <path d="M15 3v4" />
+  <path d="M7 3v4" />
+  <path d="M3 11h16" />
+  <path d="M18 16.496v1.504l1 1" />
+</svg>

assets/scss/breakpoints.scss

@@ -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;
+        }
+    }
+}

assets/scss/grid.scss

@@ -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;
+        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;
+    }
+}

assets/scss/partials/article.scss

@@ -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;
     }
 }
@@ -95,7 +95,9 @@
     display: flex;
     align-items: center;
     color: var(--card-text-color-tertiary);
+    gap: 15px;
     margin-top: 10px;
+    flex-wrap: wrap;
 
     svg {
         vertical-align: middle;
@@ -108,6 +110,11 @@
     time {
         font-size: 1.4rem;
     }
+
+    & > div {
+        display: inline-flex;
+        align-items: center;
+    }
 }
 
 .article-category,
@@ -135,10 +142,10 @@
     border-radius: var(--card-border-radius);
     box-shadow: var(--shadow-l1);
     background-color: var(--card-background);
-    --image-size: 60px;
+    --image-size: 50px;
 
-    @media (max-width: $on-tablet) {
-        --image-size: 50px;
+    @include respond(md) {
+        --image-size: 60px;
     }
 
     & + .pagination {
@@ -165,10 +172,10 @@
 
         .article-title {
             margin: 0;
-            font-size: 1.8rem;
+            font-size: 1.6rem;
 
-            @media (max-width: $on-tablet) {
-                font-size: 1.6rem;
+            @include respond(md) {
+                font-size: 1.8rem;
             }
         }
 
@@ -242,20 +249,20 @@
             flex-direction: column;
             justify-content: flex-end;
             z-index: 2;
-            padding: 20px;
+            padding: 15px;
 
-            @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;
             }
         }
     }

assets/scss/partials/base.scss

@@ -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;
+}
+/**/

assets/scss/partials/layout/article.scss

@@ -1,45 +1,9 @@
-@import "variables.scss";
-
-.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;
-        }
-    }
+    &.hide-sidebar-sm .left-sidebar {
+        display: none;
 
-    &:not(.keep-sidebar) .left-sidebar {
-        @media (max-width: $on-tablet) {
-            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;
         }
     }
 
@@ -106,6 +70,12 @@
                 flex-wrap: wrap;
                 text-transform: unset;
             }
+
+            .article-copyright, .article-lastmod {
+                a {
+                    color: var(--body-text-color);
+                }
+            }
         }
     }
 }
@@ -113,12 +83,9 @@
 #article-toolbar {
     display: flex;
     align-items: center;
+    margin: 20px 0;
 
-    @media (max-width: $on-tablet) {
-        margin: 20px 0;
-    }
-
-    @media (min-width: $on-tablet) {
+    @include respond(md) {
         display: none;
     }
 
@@ -149,6 +116,123 @@
 
         span {
             font-weight: 500;
+            white-space: nowrap;
+        }
+    }
+}
+
+.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);
+    overflow: hidden;
+
+    #TableOfContents {
+        overflow-x: auto;
+        max-height: 75vh;
+
+        ol,
+        ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        ol {
+            list-style-type: none;
+            counter-reset: item;
+
+            li:before {
+                counter-increment: item;
+                content: counters(item, ".") ". ";
+                font-weight: bold;
+                margin-right: 5px;
+            }
+        }
+
+        & > ul {
+            padding: 0 1em;
+        }
+
+        li {
+            margin: 15px 20px;
+            padding: 5px;
+
+            & > ol,
+            & > ul {
+                margin-top: 10px;
+                padding-left: 10px;
+                margin-bottom: -5px;
+
+                & > li:last-child {
+                    margin-bottom: 0;
+                }
+            }
         }
     }
 }
@@ -189,11 +273,11 @@
 .article-content {
     font-family: var(--article-font-family);
     font-size: var(--article-font-size);
+    padding: 0 var(--card-padding);
     line-height: var(--article-line-height);
 
     & > p {
         margin: 1.5em 0;
-        padding: 0 var(--card-padding);
     }
 
     h1,
@@ -202,12 +286,12 @@
     h4,
     h5,
     h6 {
-        padding: 0 calc(var(--card-padding) - var(--heading-border-size));
+        margin-left: calc((var(--card-padding)) * -1);
+        padding-left: calc(var(--card-padding) - var(--heading-border-size));
         border-left: var(--heading-border-size) solid var(--accent-color);
     }
 
     figure {
-        margin: 0 auto;
         text-align: center;
 
         figcaption {
@@ -218,17 +302,12 @@
 
     blockquote {
         position: relative;
-        margin: 10px 0;
+        margin: 1.5em 0;
         border-left: var(--blockquote-border-size) solid var(--card-separator-color);
         padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
     }
 
-    & > ul,
-    & > ol {
-        margin: 1em var(--card-padding);
-    }
-
     hr {
         width: 100px;
         margin: 40px auto;
@@ -251,7 +330,7 @@
         display: flex;
         flex-direction: row;
         justify-content: center;
-        margin: 20px 0;
+        margin: 1.5em 0;
 
         figure {
             margin: 0;
@@ -281,9 +360,7 @@
     }
 
     table {
-        margin: 0 var(--card-padding);
         width: 100%;
-        max-width: calc(100% - var(--card-padding) * 2);
         border-collapse: collapse;
         border-spacing: 0;
         margin-bottom: 1.5em;
@@ -308,4 +385,60 @@
     .twitter-tweet {
         color: var(--card-text-color-main);
     }
+
+    .video-wrapper {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+        overflow: hidden;
+
+        & > iframe,
+        & > video {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            border: 0;
+        }
+    }
+
+    /// Negative margins
+    blockquote,
+    figure,
+    .gallery,
+    pre,
+    .video-wrapper,
+    .s_video_simple {
+        margin-left: calc((var(--card-padding)) * -1);
+        margin-right: calc((var(--card-padding)) * -1);
+        width: calc(100% + var(--card-padding) * 2);
+    }
+
+    .highlight {
+        position: relative;
+
+        &:hover {
+            .copyCodeButton {
+                opacity: 1;
+            }
+        }
+    }
+
+    .copyCodeButton {
+        position: absolute;
+        top: calc(var(--card-padding));
+        right: 0;
+        background: var(--card-background);
+        border: none;
+        box-shadow: var(--shadow-l2);
+        border-radius: var(--tag-border-radius);
+        padding: 8px 16px;
+        color: var(--card-text-color-main);
+        cursor: pointer;
+        font-size: 14px;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
 }

assets/scss/partials/menu.scss

@@ -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,67 +127,59 @@
     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;
+    background-color: var(--card-background);
+    padding: 15px 0;
+    box-shadow: var(--shadow-l1);
+    display: none;
+
+    margin: 0 -15px;
+
+    &.show {
+        display: block;
     }
 
-    @media (max-width: $on-phone) {
-        background-color: var(--card-background);
-        margin-top: 0;
-        padding: 15px 0;
-        box-shadow: var(--shadow-l1);
-        display: none;
-
-        &.show {
-            display: block;
-        }
-    }
-
-    @media (min-width: $on-phone + 1) {
+    @include respond(md) {
         align-items: flex-end;
+        display: flex;
+        background-color: transparent;
+        padding: 0;
+        box-shadow: none;
+        margin: 0;
+        margin-top: var(--sidebar-element-separation);
+    }
+
+    @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;
-            }
+            width: 20px;
+            height: 20px;
         }
 
         a {
@@ -194,10 +187,6 @@
             display: inline-flex;
             align-items: center;
             color: var(--body-text-color);
-
-            @media (max-width: $on-desktop-large) {
-                font-size: 1.4rem;
-            }
         }
 
         span {

assets/scss/partials/sidebar.scss

@@ -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;
+    --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;
+        font-size: 1.6rem;
 
-        @media (max-width: $on-desktop-large) {
-            font-size: 1.6rem;
+        @include respond(2xl) {
+            font-size: 1.8rem;
         }
     }
 }

assets/scss/variables.scss

@@ -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;
+    --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;
+    --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);
 

assets/ts/colorScheme.ts

@@ -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);
@@ -22,7 +22,7 @@ class StackColorScheme {
         localStorage.setItem(this.localStorageKey, this.currentScheme);
     }
 
-    private bindClick(toggleEl) {
+    private bindClick(toggleEl: HTMLElement) {
         toggleEl.addEventListener('click', (e) => {
             if (this.isDark()) {
                 /// Disable dark mode
@@ -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 {
@@ -85,4 +85,4 @@ class StackColorScheme {
     }
 }
 
-export default StackColorScheme;
+export default StackColorScheme;

assets/ts/main.ts

@@ -54,6 +54,38 @@ let Stack = {
             observer.observe(articleTile)
         }
 
+
+        /**
+         * Add copy button to code block
+        */
+        const codeBlocks = document.querySelectorAll('.article-content .highlight');
+        const copyText = `Copy`,
+            copiedText = `Copied!`;
+        codeBlocks.forEach(codeBlock => {
+            const copyButton = document.createElement('button');
+            copyButton.innerHTML = copyText;
+            copyButton.classList.add('copyCodeButton');
+            codeBlock.appendChild(copyButton);
+
+            const pre = codeBlock.getElementsByTagName('pre');
+            const code = pre[0].textContent;
+
+            copyButton.addEventListener('click', () => {
+                navigator.clipboard.writeText(code)
+                    .then(() => {
+                        copyButton.textContent = copiedText;
+
+                        setTimeout(() => {
+                            copyButton.textContent = copyText;
+                        }, 1000);
+                    })
+                    .catch(err => {
+                        alert(err)
+                        console.log('Something went wrong', err);
+                    });
+            });
+        });
+
         new StackColorScheme(document.getElementById('dark-mode-toggle'));
     }
 }

data/external.yaml

@@ -23,16 +23,16 @@ PhotoSwipe:
       type: style
 
 KaTeX:
-    - src: https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css
-      integrity: sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X
+    - src: https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css
+      integrity: sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn
       type: style
 
-    - src: https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js
-      integrity: sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4
+    - src: https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js
+      integrity: sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8
       type: script
       defer: true
 
-    - src: https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js
-      integrity: sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa
+    - src: https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js
+      integrity: sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl
       type: script
       defer: true

exampleSite/config.yaml

@@ -11,7 +11,7 @@ disqusShortname: hugo-theme-stack
 googleAnalytics:
 
 # Theme i18n support
-# Available values: en, fr, id, ja, ko, pt-br, zh-cn
+# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de, nl, it
 DefaultContentLanguage: en
 
 permalinks:
@@ -37,11 +37,14 @@ params:
         emoji: 🍥
         subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         avatar:
+            enabled: true
             local: true
             src: img/avatar.png
 
     article:
         math: false
+        toc: true
+        readingTime: true
         license:
             enabled: true
             default: Licensed under CC BY-NC-SA 4.0
@@ -49,11 +52,58 @@ params:
     comments:
         enabled: true
         provider: disqus
+
         utterances:
             repo:
             issueTerm: pathname
             label:
 
+        remark42:
+            host:
+            site:
+            locale:
+
+        vssue:
+            platform:
+            owner:
+            repo:
+            clientId:
+            clientSecret:
+            autoCreateIssue: false
+
+        # 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
+
+        twikoo:
+            envId:
+            region:
+            path:
+            lang:
+
+        giscus:
+            repo:
+            repoID:
+            category:
+            categoryID:
+            mapping:
+            lightTheme:
+            darkTheme:
+            reactionsEnabled: 1
+            emitMetadata: 0
+
     widgets:
         enabled:
             - search
@@ -93,6 +143,9 @@ params:
         content:
             enabled: true
 
+### Custom menu
+### See https://docs.stack.jimmycai.com/configuration/custom-menu
+### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
 menu:
     main:
         - identifier: home
@@ -100,24 +153,9 @@ menu:
           url: /
           weight: -100
           pre: home
-
-        - identifier: about
-          name: About
-          url: about
-          weight: -90
-          pre: user
-
-        - identifier: archives
-          name: Archives
-          url: archives
-          weight: -70
-          pre: archives
-
-        - identifier: search
-          name: Search
-          url: search
-          weight: -60
-          pre: search
+          params:
+              ### For demonstration purpose, the home link will be open in a new tab
+              newTab: true
 
 related:
     includeNewer: true
@@ -131,5 +169,9 @@ related:
           weight: 200
 
 markup:
+    tableOfContents:
+        endLevel: 4
+        ordered: true
+        startLevel: 2
     highlight:
         noClasses: false

exampleSite/content/categories/Test/_index.md

@@ -1,9 +1,9 @@
 ---
 title: "Test"
-description: "This is a example category"
+description: "This is an example category"
 slug: "test"
 image: "hutomo-abrianto-l2jk-uxb1BY-unsplash.jpg"
 style:
     background: "#2a9d8f"
     color: "#fff"
----
+---

exampleSite/content/page/about.md

@@ -1,12 +1,18 @@
-+++
-title = "About"
-description = "Hugo, the world's fastest framework for building websites"
-date = "2019-02-28"
-aliases = ["about-us", "about-hugo", "contact"]
-author = "Hugo Authors"
-license = "CC BY-NC-ND"
-lastmod = "2020-10-09"
-+++
+---
+title: About
+description: Hugo, the world's fastest framework for building websites
+date: '2019-02-28'
+aliases:
+  - about-us
+  - about-hugo
+  - contact
+license: CC BY-NC-ND
+lastmod: '2020-10-09'
+menu:
+    main: 
+        weight: -90
+        pre: user
+---
 
 Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
 

exampleSite/content/page/archives.md

@@ -3,4 +3,8 @@ title: "Archives"
 date: 2019-05-28
 layout: "archives"
 slug: "archives"
+menu:
+    main:
+        weight: -70
+        pre: archives
 ---

exampleSite/content/page/search.md

@@ -5,4 +5,8 @@ layout: "search"
 outputs:
     - html
     - json
+menu:
+    main:
+        weight: -60
+        pre: search
 ---

exampleSite/plugins/netlify-plugin-hugo-cache-resources/README.md

@@ -1,27 +0,0 @@
-> Original Repo: https://github.com/cdeleeuwe/netlify-plugin-hugo-cache-resources
-> 
-# Netlify Build Plugin: Persist Hugo resources Between Builds
-
-Persist [Hugo](https://gohugo.io/) resources folder between Netlify builds for huge build speed improvements! ⚡️
-
-This plugin caches the `resources` folder after build. If you are processing many images, this would improve build duration significantly.
-
-Note: Restoring cache only comes from the production branch. So once cache is saved on the production branch, the next preview build would use the cache. For example, when pushing to the same preview build, the latest preview build will not get the cache from the previous preview build, but will get it from master.
-
-## Usage
-
-To install, add the following lines to your `netlify.toml` file:
-
-```toml
-[build]
-  publish = "public"
-
-[[plugins]]
-  package = "netlify-plugin-hugo-cache-resources"
-
-	[plugins.inputs]
-	# If it should show more verbose logs (optional, default = true)
-	debug = true
-```
-
-Note: The `[[plugins]]` line is required for each plugin, even if you have other plugins in your `netlify.toml` file already.

exampleSite/plugins/netlify-plugin-hugo-cache-resources/index.js

@@ -1,39 +0,0 @@
-const getResourcesDir = () => {
-  return 'exampleSite/resources';
-}
-
-const printList = (items) => {
-  console.log('---');
-  items.forEach((item, index) => {
-    console.log(`${index + 1}. ${item}`);
-  });
-}
-
-module.exports = {
-
-  async onPreBuild({ utils, inputs }) {
-    const path = getResourcesDir();
-    const success = await utils.cache.restore(path);
-
-    if (success) {
-      const cachedFiles = await utils.cache.list(path);
-      console.log(`Restored cached resources folder. Total files: ${cachedFiles.length}`);
-      if (inputs.debug) printList(cachedFiles);
-    } else {
-      console.log(`No cache found for resources folder`);
-    }
-  },
-
-  async onPostBuild({ utils, inputs }) {
-    const path = getResourcesDir();
-    const success = await utils.cache.save(path);
-
-    if (success) {
-      const cachedFiles = await utils.cache.list(path);
-      console.log(`Saved resources folder to cache. Total files: ${cachedFiles.length}`);
-      if (inputs.debug) printList(cachedFiles);
-    } else {
-      console.log(`No resources folder cached`);
-    }
-  }
-};

exampleSite/plugins/netlify-plugin-hugo-cache-resources/manifest.yml

@@ -1,5 +0,0 @@
-name: netlify-plugin-hugo-cache
-inputs:
-  - name: debug
-    description: Show more verbose logs
-    default: true

i18n/de.yaml

@@ -0,0 +1,53 @@
+toggleMenu:
+    other: Menü umschalten
+
+darkMode:
+    other: Dunkler Modus
+
+list:
+    page:
+        one: "{{ .Count }} Seite"
+        other: "{{ .Count }} Seiten"
+
+    section:
+        other: Abschnitt
+
+    subsection:
+        one: Unterabschnitt
+        other: Unterabschnitte
+
+article:
+    relatedContents:
+        other: Verwandte Inhalte
+    lastUpdatedOn:
+        other: Zuletzt aktualisiert am
+
+notFound:
+    title:
+        other: Seite nicht gefunden
+    subtitle:
+        other: Diese Seite existiert nicht.
+
+widget:
+    archives:
+        title:
+            other: Archiv
+        more:
+            other: Weitere
+    tagCloud:
+        title:
+            other: Schlagwörter
+
+search:
+    title:
+        other: Suche
+    placeholder:
+        other: Etwas tippen...
+    resultTitle:
+        other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
+
+footer:
+    builtWith:
+        other: Erstellt mit {{ .Generator }}
+    designedBy:
+        other: Theme {{ .Theme }} gestaltet von {{ .DesignedBy }}

i18n/en.yaml

@@ -17,11 +17,23 @@ list:
         other: Subsections
 
 article:
+    back:
+        other: Back
+
+    tableOfContents:
+        other: Table of contents
+
     relatedContents:
         other: Related contents
+
     lastUpdatedOn:
         other: Last updated on
 
+    readingTime:
+        one: "{{ .Count }} min read"
+        ### Seems that there's no need to add 's' even if it's plural in English
+        other: "{{ .Count }} min read"
+
 notFound:
     title:
         other: Not Found
@@ -32,8 +44,10 @@ widget:
     archives:
         title:
             other: Archives
+
         more:
             other: More
+
     tagCloud:
         title:
             other: Tags
@@ -41,13 +55,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 }}

i18n/es.yaml

@@ -0,0 +1,53 @@
+toggleMenu:
+    other: Toggle Menu
+
+darkMode:
+    other: Modo oscuro
+
+list:
+    page:
+        one: "{{ .Count }} página"
+        other: "{{ .Count }} páginas"
+
+    section:
+        other: Sección
+
+    subsection:
+        one: Subsección
+        other: Subsecciones
+
+article:
+    relatedContents:
+        other: Contenidos relacionados
+    lastUpdatedOn:
+        other: Última vez actualizado
+
+notFound:
+    title:
+        other: No Encontrado
+    subtitle:
+        other: Esta página no existe
+
+widget:
+    archives:
+        title:
+            other: Archivo
+        more:
+            other: Más
+    tagCloud:
+        title:
+            other: Etiquetas
+
+search:
+    title:
+        other: Búsqueda
+    placeholder:
+        other: Teclea algo...
+    resultTitle:
+        other: "#PAGES_COUNT páginas en (#TIME_SECONDS segundos)"
+
+footer:
+    builtWith:
+        other: Creado con {{ .Generator }}
+    designedBy:
+        other: Tema {{ .Theme }} diseñado por {{ .DesignedBy }}

i18n/fr.yaml

@@ -1,9 +1,31 @@
 toggleMenu:
     other: Afficher le menu
 
+darkMode:
+    other: Mode sombre
+
+list:
+    page:
+        one: "{{ .Count }} page"
+        other: "{{ .Count }} pages"
+
+    section:
+        other: Section
+
+    subsection:
+        one: Sous-section
+        other: Sous-sections
+
 article:
+    back:
+        other: Retour
+
+    tableOfContents:
+        other: Table des matières
+
     relatedContents:
         other: Contenus liés
+
     lastUpdatedOn:
         other: Dernière mise à jour le
 
@@ -17,8 +39,10 @@ widget:
     archives:
         title:
             other: Archives
+
         more:
             other: Autres
+
     tagCloud:
         title:
             other: Mots clés
@@ -26,13 +50,16 @@ widget:
 search:
     title:
         other: Rechercher
+
     placeholder:
         other: Cherchez un article, une publication, etc.
+
     resultTitle:
         other: "#PAGES_COUNT pages (#TIME_SECONDS secondes)"
 
 footer:
     builtWith:
         other: Généré avec {{ .Generator }}
+
     designedBy:
         other: Thème {{ .Theme }} conçu par {{ .DesignedBy }}

i18n/id.yaml

@@ -1,24 +1,52 @@
 toggleMenu:
     other: Tampilkan Menu
 
+darkMode:
+    other: Mode Gelap
+
+list:
+    page:
+        one: "{{ .Count }} halaman"
+        other: "{{ .Count }} halaman"
+
+    section:
+        other: Bagian
+
+    subsection:
+        one: Subbagian
+        other: Subbagian
+
 article:
+    back:
+        other: Kembali
+
+    tableOfContents:
+        other: Daftar Isi
+
     relatedContents:
         other: Konten terkait
+
     lastUpdatedOn:
         other: Terakhir diperbarui pada
 
+    readingTime:
+        one: "Waktu Membaca: {{ .Count }} menit"
+        other: "Waktu Membaca: {{ .Count }} menit"
+
 notFound:
     title:
-        other: Not Found
+        other: Tidak ditemukan
     subtitle:
-        other: Halaman ini tidak ada.
+        other: Halaman yang Anda akses tidak ditemukan.
 
 widget:
     archives:
         title:
             other: Arsip
+
         more:
             other: Lebih
+
     tagCloud:
         title:
             other: Tag
@@ -26,13 +54,16 @@ widget:
 search:
     title:
         other: Cari
+
     placeholder:
         other: Ketik sesuatu...
+
     resultTitle:
         other: "#PAGES_COUNT halaman (#TIME_SECONDS detik)"
 
 footer:
     builtWith:
         other: Dibangun dengan {{ .Generator }}
+
     designedBy:
         other: Tema {{ .Theme }} dirancang oleh {{ .DesignedBy }}

i18n/it.yaml

@@ -0,0 +1,69 @@
+toggleMenu:
+    other: Toggle Menu
+
+darkMode:
+    other: Dark Mode
+
+list:
+    page:
+        one: "{{ .Count }} pagina"
+        other: "{{ .Count }} pagine"
+
+    section:
+        other: Sezione
+
+    subsection:
+        one: Sottosezione
+        other: Sottosezioni
+
+article:
+    back:
+        other: Indietro
+
+    tableOfContents:
+        other: Indice
+
+    relatedContents:
+        other: Contenuti correlati
+
+    lastUpdatedOn:
+        other: Aggiornato il
+
+    readingTime:
+        one: "{{ .Count }} min per leggere"
+        other: "{{ .Count }} min per leggere"
+
+notFound:
+    title:
+        other: Non trovato
+    subtitle:
+        other: Questa pagina non esiste.
+
+widget:
+    archives:
+        title:
+            other: Archivi
+
+        more:
+            other: Di più
+
+    tagCloud:
+        title:
+            other: Tags
+
+search:
+    title:
+        other: Cerca
+
+    placeholder:
+        other: Scrivi qualcosa...
+
+    resultTitle:
+        other: "#PAGES_COUNT pagine (#TIME_SECONDS secondi)"
+
+footer:
+    builtWith:
+        other: Realizzato con {{ .Generator }}
+
+    designedBy:
+        other: Tema {{ .Theme }} realizzato da {{ .DesignedBy }}

i18n/ja.yaml

@@ -5,11 +5,21 @@ darkMode:
     other: ダークモード
 
 article:
+    back:
+        other: 前のページ
+
+    tableOfContents:
+        other: 目次
+
     relatedContents:
         other: 関連するコンテンツ
+
     lastUpdatedOn:
         other: 最終更新
 
+    readingTime:
+        other: "読了時間: {{ .Count }}分"
+
 notFound:
     title:
         other: 404 Not Found
@@ -20,16 +30,20 @@ widget:
     archives:
         title:
             other: アーカイブ
+
         more:
             other: さらに見る
+
     tagCloud:
         title:
             other: タグ
 
 search:
     title:
-        other: サーチ
+        other: 検索
+
     placeholder:
         other: 入力...
+
     resultTitle:
         other: "#PAGES_COUNT 件 （#TIME_SECONDS 秒）"

i18n/nl.yaml

@@ -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 }}

i18n/pl.yaml

@@ -0,0 +1,65 @@
+toggleMenu:
+    other: Przełącz Menu
+
+darkMode:
+    other: Tryb ciemny
+
+list:
+    page:
+        one: "{{ .Count }} strona"
+        other: "{{ .Count }} stron"
+
+    section:
+        other: Sekcja
+
+    subsection:
+        one: Podsekcja
+        other: Podsekcje
+
+article:
+    back:
+        other: Wróć
+
+    tableOfContents:
+        other: Spis treści
+
+    relatedContents:
+        other: Powiązane artykuły
+
+    lastUpdatedOn:
+        other: Ostatnio zaktualizowany
+
+notFound:
+    title:
+        other: Nie znaleziono
+    subtitle:
+        other: Ta strona nie istnieje
+
+widget:
+    archives:
+        title:
+            other: Archiwum
+
+        more:
+            other: Więcej
+
+    tagCloud:
+        title:
+            other: Tagi
+
+search:
+    title:
+        other: Szukaj
+
+    placeholder:
+        other: Wpisz coś...
+
+    resultTitle:
+        other: "#PAGES_COUNT stron (#TIME_SECONDS sekund)"
+
+footer:
+    builtWith:
+        other: Zbudowano z {{ .Generator }}
+
+    designedBy:
+        other: Motyw {{ .Theme }} zaprojektowany przez {{ .DesignedBy }}

i18n/ru.yaml

@@ -21,10 +21,16 @@ list:
         other: Подразделы
 
 article:
+    back:
+        other: Назад
     relatedContents:
         other: Также рекомендуем
     lastUpdatedOn:
         other: Обновлено
+    tableOfContents: 
+        other: Содержание
+    readingTime: 
+        other: "Время чтения: {{ .Count }} мин."
 
 notFound:
     title:

i18n/zh-CN.yaml

@@ -5,11 +5,21 @@ darkMode:
     other: 暗色模式
 
 article:
+    back:
+        other: 返回
+
+    tableOfContents:
+        other: 目录
+
     relatedContents:
         other: 相关文章
+
     lastUpdatedOn:
         other: 最后更新于
 
+    readingTime:
+        other: "阅读时长: {{ .Count }} 分钟"
+
 notFound:
     title:
         other: 404 错误
@@ -20,8 +30,10 @@ widget:
     archives:
         title:
             other: 归档
+
         more:
             other: 更多
+
     tagCloud:
         title:
             other: 标签云
@@ -29,7 +41,9 @@ widget:
 search:
     title:
         other: 搜索
+
     placeholder:
         other: 输入关键词...
+
     resultTitle:
         other: "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"

layouts/_default/_markup/render-image.html

@@ -1,5 +1,5 @@
 {{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
-{{- if $image -}}
+{{- if and $image (ne (path.Ext .Destination) ".svg") -}}
 	{{- $alt := .PlainText | safeHTML -}}
 	<figure style="flex-grow: {{ div (mul $image.Width 100) $image.Height }}; flex-basis: {{ div (mul $image.Width 240) $image.Height }}px">
 		<a href="{{ $image.RelPermalink }}" data-size="{{ $image.Width }}x{{ $image.Height }}">
@@ -26,5 +26,5 @@
 		{{ end }}
 	</figure>
 {{- else -}}
-	<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
+	<img src="{{ .Destination | relURL | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
 {{- end -}}

layouts/_default/baseof.html

@@ -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}}">
-            {{ partial "sidebar/left.html" . }}
+        <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>

layouts/_default/single.html

@@ -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 }}
@@ -9,4 +24,34 @@
     {{ partialCached "footer/footer" . }}
 
     {{ 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 }}

layouts/partials/article/components/details.html

@@ -21,12 +21,25 @@
     </h3>
     {{ end }}
 
-    {{- if not .Date.IsZero -}}
+    {{ if or (not .Date.IsZero) (.Site.Params.article.readingTime) }}
     <footer class="article-time">
-        {{ partial "helper/icon" "clock" }}
-        <time class="article-time--published">
-            {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
-        </time>
+        {{ if not .Date.IsZero }}
+            <div>
+                {{ partial "helper/icon" "date" }}
+                <time class="article-time--published">
+                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+                </time>
+            </div>
+        {{ end }}
+
+        {{ if .Site.Params.article.readingTime }}
+            <div>
+                {{ partial "helper/icon" "clock" }}
+                <time class="article-time--reading">
+                    {{ T "article.readingTime" .ReadingTime }}
+                </time>
+            </div>
+        {{ end }}
     </footer>
-    {{- end -}}
+    {{ end }}
 </div>

layouts/partials/article/components/footer.html

@@ -4,16 +4,16 @@
     {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
     <section class="article-copyright">
         {{ partial "helper/icon" "copyright" }}
-        <span>{{ default .Site.Params.article.license.default .Params.license }}</span>
+        <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
     </section>
     {{ end }}
 
     {{- if ne .Lastmod .Date -}}
-    <section class="article-time">
+    <section class="article-lastmod">
         {{ partial "helper/icon" "clock" }}
-        <span class="article-time--modified">
+        <span>
             {{ T "article.lastUpdatedOn" }} {{ .Lastmod.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
         </span>
     </section>
     {{- end -}}
-</footer>
+</footer>

layouts/partials/comments/provider/giscus.html

@@ -0,0 +1,49 @@
+{{- with .Site.Params.comments.giscus -}}
+<script
+    src="https://giscus.app/client.js"
+    data-repo="{{- .repo -}}"
+    data-repo-id="{{- .repoID -}}"
+    data-category="{{- .category -}}"
+    data-category-id="{{- .categoryID -}}"
+    data-mapping="{{- default `title` .mapping -}}"
+    data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
+    data-emit-metadata="{{- default 0 .emitMetadata -}}"
+    data-theme="{{- default `light` .lightTheme -}}"
+    crossorigin="anonymous"
+    async
+></script>
+<script>
+    function setGiscusTheme(theme) {
+        let giscus = document.querySelector('iframe.giscus-frame');
+        if (giscus) {
+            giscus.contentWindow.postMessage(
+                { 
+                    giscus: {
+                        setConfig: { 
+                            theme: theme 
+                        }
+                    }
+                },
+                "https://giscus.app"
+            );
+        };
+    };
+
+    (function(){
+        addEventListener('message', (e) => {
+            if (event.origin !== 'https://giscus.app') return;
+            handler()
+        });
+        window.addEventListener('onColorSchemeChange', handler);
+
+        function handler() {
+            if (document.documentElement.dataset.scheme === "light") {
+                setGiscusTheme('{{- default "light" .lightTheme -}}');
+            } else {
+                setGiscusTheme('{{- default "dark_dimmed" .darkTheme -}}');
+            };
+        };
+    }());
+</script>
+{{- end -}}
+

layouts/partials/comments/provider/remark42.html

@@ -0,0 +1,29 @@
+{{- with .Site.Params.comments.remark42 -}}
+<div id="remark42"></div>
+<script>
+    var remark_config = {
+        host: "{{ .host }}",
+        site_id: '{{ .site }}',
+        components: ['embed'],
+        url: "{{ $.Permalink }}",
+        max_shown_comments: {{ default 15 .max_shown_comments }},
+        theme: document.documentElement.dataset.scheme,
+        page_title: '{{ $.Title }}',
+        locale: '{{ default "en" .locale }}',
+        show_email_subscription: {{ default true .show_email_subscription }}
+    };
+
+    (function (c) {
+        for (var i = 0; i < c.length; i++) {
+            var d = document, s = d.createElement('script');
+            s.src = remark_config.host + '/web/' + c[i] + '.js';
+            s.defer = true;
+            (d.head || d.body).appendChild(s);
+        }
+    })(remark_config.components || ['embed']);
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        window.REMARK42.changeTheme(e.detail);
+    })
+</script>
+{{- end -}}

layouts/partials/comments/provider/twikoo.html

@@ -0,0 +1,49 @@
+<script src="//cdn.jsdelivr.net/npm/twikoo@1.4.3/dist/twikoo.all.min.js"></script>
+<div id="tcomment"></div>
+<style>
+    .twikoo {
+        background-color: var(--card-background);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--shadow-l1);
+        padding: var(--card-padding);
+    }
+    :root[data-scheme="dark"] {
+        --twikoo-body-text-color-main: rgba(255, 255, 255, 0.9);
+        --twikoo-body-text-color: rgba(255, 255, 255, 0.7);
+    }
+    .twikoo .el-input-group__prepend,
+    .twikoo .tk-action-icon,
+    .twikoo .tk-time,
+    .twikoo .tk-comments-count {
+        color: var(--twikoo-body-text-color);
+    }
+    .twikoo .el-input__inner,
+    .twikoo .el-textarea__inner,
+    .twikoo .tk-preview-container,
+    .twikoo .tk-content,
+    .twikoo .tk-nick,
+    .twikoo .tk-send {
+        color: var(--twikoo-body-text-color-main);
+    }
+    .twikoo .el-button{
+        color: var(--twikoo-body-text-color)!important;
+    }
+</style>
+
+{{- with .Site.Params.comments.twikoo -}}
+<script>
+    twikoo.init({
+        envId: '{{- .envId -}}',
+        el: '#tcomment',
+        {{- with .region -}}
+        region: '{{- . -}}',
+        {{- end -}}
+        {{- with .path -}}
+        path: '{{- . -}}',
+        {{- end -}}
+        {{- with .lang -}}
+        lang: '{{- . -}}',
+        {{- end -}}
+    })
+</script>
+{{- end -}}

layouts/partials/comments/provider/utterances.html

@@ -31,10 +31,10 @@
 
     addEventListener('message', event => {
         if (event.origin !== 'https://utteranc.es') return;
-        setUtterancesTheme(document.body.dataset.scheme)
+        setUtterancesTheme(document.documentElement.dataset.scheme)
     });
 
     window.addEventListener('onColorSchemeChange', (e) => {
         setUtterancesTheme(e.detail)
     })
-</script>
+</script>

layouts/partials/comments/provider/vssue.html

@@ -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: {
+                        autoCreateIssue: {{ default false .autoCreateIssue }},
+                        owner: "{{ .owner }}",
+                        repo: "{{ .repo }}",
+                        clientId: "{{ .clientId }}",
+                        clientSecret: "{{ .clientSecret }}",
+                    },
+                },
+            }),
+    });
+</script>
+{{- end -}}

layouts/partials/comments/provider/waline.html

@@ -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 -}}

layouts/partials/footer/footer.html

@@ -1,4 +1,4 @@
-{{- $ThemeVersion := "2.1.0" -}}
+{{- $ThemeVersion := "3.1.0" -}}
 <footer class="site-footer">
     <section class="copyright">
         &copy; 
@@ -20,4 +20,4 @@
         {{ T "footer.builtWith" (dict "Generator" $Generator) | safeHTML }} <br />
         {{ T "footer.designedBy" (dict "Theme" $Theme "DesignedBy" $DesignedBy) | safeHTML }}
     </section>
-</footer>
+</footer>

layouts/partials/head/colorScheme.html

@@ -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>
+</script>

layouts/partials/head/head.html

@@ -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" . -}}

layouts/partials/head/opengraph/provider/twitter.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 -}}

layouts/partials/helper/image.html

@@ -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)) }}
@@ -16,10 +16,14 @@
         {{ if $pageResourceImage }}
             <!-- If image is found under page bundle -->
             {{ $result = merge $result (dict "permalink" $pageResourceImage.RelPermalink) }}
-            {{ $result = merge $result (dict "resource" $pageResourceImage) }}
+
+            <!-- Disable SVG image processing, not supported by Hugo -->
+            {{ if ne (path.Ext $imageValue) ".svg" }}
+                {{ $result = merge $result (dict "resource" $pageResourceImage) }}
+            {{ end }}
         {{ else }}
             <!-- Can not find the image under page bundle. Could be a relative linked image -->
-            {{ $result = merge $result (dict "permalink" $imageValue) }}
+            {{ $result = merge $result (dict "permalink" (relURL $imageValue)) }}
         {{ end }}
 
     {{ end }}
@@ -47,11 +51,11 @@
 
         {{ else }}
             <!-- External image -->
-            {{ $result = merge $result (dict "permalink" $defaultImageSetting.src) }}
+            {{ $result = merge $result (dict "permalink" (relURL $defaultImageSetting.src)) }}
         {{ end }}
         
     {{ end }}
 
 {{ end }}
 
-{{ return $result }}
+{{ return $result }}

layouts/partials/sidebar/left.html

@@ -7,6 +7,7 @@
 
     <header class="site-info">
         {{ with .Site.Params.sidebar.avatar }}
+            {{ if (default true .enabled) }}
             <figure class="site-avatar">
                 {{ if not .local }}
                     <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
@@ -26,6 +27,7 @@
                     <span class="emoji">{{ . }}</span>
                 {{ end }}
             </figure>
+            {{ end }}
         {{ end }}
         <h1 class="site-name"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
         <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
@@ -37,7 +39,7 @@
         {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
 
         <li {{ if $active }} class='current' {{ end }}>
-            <a href='{{ .URL | relURL }}'>
+            <a href='{{ .URL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
                 {{ if .Pre }}
                     {{ partial "helper/icon" .Pre }}
                 {{ end }}

layouts/post/single.html

@@ -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 }}

layouts/shortcodes/bilibili.html

@@ -12,13 +12,12 @@
     <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
 {{ end }}
 
-<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
+<div class="video-wrapper">
     <iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
             scrolling="no"
             frameborder="no"
             framespacing="0"
             allowfullscreen="true"
-            style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"
     >
     </iframe>
 </div>

layouts/shortcodes/tencent.html

@@ -0,0 +1,10 @@
+{{ $vid := .Get 0 }}
+<div class="video-wrapper">
+    <iframe src="http://v.qq.com/txp/iframe/player.html?vid={{ $vid }}&auto=0" 
+            scrolling="no" 
+            frameborder="no"
+            framespacing="0" 
+            allowfullscreen="true"
+    >
+    </iframe>
+</div>

layouts/shortcodes/video.html

@@ -0,0 +1,13 @@
+<div class="video-wrapper">
+    <video
+    controls
+    {{ with .Get "poster" }}poster="{{- . -}}"{{ end }}
+    {{ with .Get "src" }}src="{{- . -}}"{{ end }}
+    {{ with .Get "autoplay" }}autoplay{{ end }}
+    >
+        <p>
+            Your browser doesn't support HTML5 video. Here is a
+            <a href="{{ with .Get "src" }}{{- . -}}{{ end }}">link to the video</a> instead.
+        </p>
+    </video>
+</div>

layouts/shortcodes/youtube.html

@@ -2,8 +2,12 @@
 {{- if not $pc.Disable -}}
 {{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
 {{- $id := .Get "id" | default (.Get 0) -}}
-{{- $class := .Get "class" | default (.Get 1) }}
-<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
-  <iframe loading="lazy" src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="YouTube Video"></iframe>
+<div class="video-wrapper">
+    <iframe loading="lazy" 
+            src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" 
+            allowfullscreen 
+            title="YouTube Video"
+    >
+    </iframe>
 </div>
 {{ end -}}

netlify.toml

@@ -2,7 +2,7 @@
     publish = "exampleSite/public"
 
 [build.environment]
-    HUGO_VERSION = "0.79.0"
+    HUGO_VERSION = "0.87.0"
     HUGO_THEME = "repo"
 
 [context.production]
@@ -17,4 +17,10 @@
     command = "cd exampleSite && hugo --gc --themesDir ../.. -b ${DEPLOY_PRIME_URL}"
 
 [[plugins]]
-    package = "/exampleSite/plugins/netlify-plugin-hugo-cache-resources"
+    package = "netlify-plugin-hugo-cache-resources"
+
+        [plugins.inputs]
+            # If it should show more verbose logs (optional, default = true)
+            debug = true
+            # Relative path to source directory in case you use Hugo's "--s" option
+            srcdir = "exampleSite"

resources/_gen/assets/scss/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.json

@@ -1 +0,0 @@
-{"Target":"scss/style.min.css","MediaType":"text/css","Data":{}}

theme.toml

@@ -5,23 +5,23 @@ name = "Stack"
 license = "GPL-3.0-only"
 licenselink = "https://github.com/CaiJimmy/hugo-theme-stack/blob/master/LICENSE"
 description = "Card-style Hugo theme designed for bloggers"
-homepage = "https://theme-stack.jimmycai.com"
-tags = [
-    "blog", 
-    "responsive", 
-    "clean", 
-    "light", 
-    "dark", 
-    "personal"
-]
+homepage = "https://github.com/CaiJimmy/hugo-theme-stack"
+demosite = "https://theme-stack.jimmycai.com"
+
+tags = ["blog", "responsive", "clean", "light", "dark", "personal"]
+
 features = [
     "disqus",
     "photoswipe",
     "opengraph",
-    "widgets"
+    "widgets",
+    "darkmode",
+    "table of contents",
+    "search",
 ]
+
 min_version = "0.78.0"
 
 [author]
-  name = "Jimmy Cai"
-  homepage = "https://jimmycai.com"
+name = "Jimmy Cai"
+homepage = "https://jimmycai.com"