release: 1.0.5 version

fix: consistent style of taxonomy name

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://www.buymeacoffee.com/jimmycai']

README.md

@@ -35,7 +35,12 @@ The only JavaScript library being used is [node-vibrant](https://github.com/Vibr
 
 This theme uses SCSS and TypeScript. For that reason, it's necessary to use **Hugo ≥ 0.74.0**.
 
-**Note**: You'll need Hugo Extended version to edit SCSS files
+Use Hugo Extended version if you want to:
+
+* Use the latest feature/fix from `master` branch
+* Edit SCSS files
+  
+**Compiled CSS are updated once per release.**
 
 ## Installation
 
@@ -51,6 +56,14 @@ Please do not remove the "*Theme Stack designed by Jimmy*" text and link.
 
 If you want to port this theme to another blogging platform, please let me know🙏.
 
+## Sponsoring
+
+If you like this theme, consider supporting its development:
+
+<a href="https://www.buymeacoffee.com/jimmycai" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" height="60px" width="217px"></a>
+
+Your support is greatly appreciated :)
+
 ## Thanks to
 
   - [Vibrant-Colors/node-vibrant](https://github.com/Vibrant-Colors/node-vibrant)
@@ -62,4 +75,4 @@ If you want to port this theme to another blogging platform, please let me know
   - [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/)
+  - Markdown gallery syntax from [Typlog](https://typlog.com/)

assets/scss/grid.scss

@@ -0,0 +1,119 @@
+.container {
+    margin-left: auto;
+    margin-right: auto;
+
+    &.extended {
+        @media (min-width: $on-phone) {
+            max-width: 800px;
+
+            .left-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-tablet) {
+            max-width: 972px;
+
+            .right-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-desktop) {
+            max-width: 1200px;
+
+            .left-sidebar {
+                width: 20%;
+            }
+
+            .right-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-desktop-large) {
+            max-width: 1536px;
+
+            .left-sidebar {
+                width: 15%;
+            }
+        }
+    }
+
+    &.compact {
+        @media (min-width: $on-phone) {
+            max-width: 800px;
+
+            .left-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-tablet) {
+            max-width: 972px;
+        }
+
+        @media (min-width: $on-desktop) {
+            max-width: 1050px;
+
+            .left-sidebar {
+                width: 20%;
+            }
+        }
+
+        @media (min-width: $on-desktop-large) {
+            max-width: 1300px;
+        }
+    }
+}
+
+.flex {
+    display: flex;
+    flex-direction: row;
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.on-phone--column {
+        @media (max-width: $on-phone) {
+            flex-direction: column;
+        }
+    }
+
+    &.align-items--flex-start {
+        align-items: flex-start;
+    }
+
+    .grow {
+        flex-grow: 1;
+    }
+
+    .do-not-shrink {
+        flex-shrink: 0;
+    }
+
+    .do-not-overflow {
+        min-width: 0;
+        flex-shrink: 1;
+        max-width: 100%;
+    }
+
+    .full-width {
+        width: 100%;
+    }
+}
+
+main.main {
+    min-width: 0;
+    padding: 0 15px;
+    max-width: 100%;
+    flex-grow: 1;
+    padding-top: var(--main-top-padding);
+}
+
+.main-grid {
+    @media (max-width: $on-phone) {
+        flex-direction: column;
+    }
+}

assets/scss/partials/article.scss

@@ -11,8 +11,8 @@
         border-radius: var(--card-border-radius);
         overflow: hidden;
 
-        transition: box-shadow .3s ease;
+        transition: box-shadow 0.3s ease;
-        
+
         &:hover {
             box-shadow: var(--shadow-l2);
         }
@@ -53,7 +53,7 @@
     flex-direction: column;
     justify-content: center;
 
-    padding: var(--content-padding);
+    padding: var(--card-padding);
 }
 
 .article-category {
@@ -75,10 +75,14 @@
 }
 
 .article-title {
-    font-size: 2.4rem;
     font-weight: 600;
     margin: 10px 0;
     color: var(--card-text-color-main);
+    font-size: 2.2rem;
+
+    @media (min-width: $on-desktop-large) {
+        font-size: 2.4rem;
+    }
 
     a {
         color: var(--card-text-color-main);
@@ -88,14 +92,6 @@
         }
     }
 
-    @media (min-width: $on-desktop-large) {
-        font-size: 2.4rem;
-    }
-
-    @media (max-width: $on-desktop) {
-        font-size: 2rem;
-    }
-
     & + .article-subtitle {
         margin-top: 0;
     }
@@ -103,18 +99,14 @@
 
 .article-subtitle {
     font-weight: normal;
-    font-size: 1.8rem;
     color: var(--card-text-color-secondary);
     margin: 5px 0;
     line-height: 1.5;
 
+    font-size: 1.75rem;
     @media (min-width: $on-desktop-large) {
         font-size: 2rem;
     }
-
-    @media (max-width: $on-desktop) {
-        font-size: 1.6rem;
-    }
 }
 
 .article-time {
@@ -125,9 +117,10 @@
 
     svg {
         vertical-align: middle;
-        margin-right: 8px;
+        margin-right: 15px;
         width: 20px;
         height: 20px;
+        stroke-width: 1.33;
     }
 
     time {
@@ -159,24 +152,32 @@
     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;
+    }
 
     & + .pagination {
         margin-top: var(--section-separation);
     }
 
     article {
-        display: flex;
+        & > a {
-        align-items: center;
+            display: flex;
-        padding: var(--small-card-padding);
+            align-items: center;
+            padding: var(--small-card-padding);
+        }
 
         &:not(:last-of-type) {
-            border-bottom: 2px solid var(--card-separator-color);
+            border-bottom: 1.5px solid var(--card-separator-color);
         }
 
         .article-details {
             flex-grow: 1;
             padding: 0;
             padding-right: 15px;
+            min-height: var(--image-size);
         }
 
         .article-title {
@@ -190,10 +191,14 @@
 
         .article-image {
             img {
-                width: 60px;
+                width: var(--image-size);
-                height: 60px;
+                height: var(--image-size);
             }
         }
+
+        .article-time {
+            font-size: 1.4rem;
+        }
     }
 }
 

assets/scss/partials/layout/404.scss

@@ -2,5 +2,5 @@
     background-color: var(--card-background);
     box-shadow: var(--shadow-l1);
     border-radius: var(--card-border-radius);
-    padding: var(--content-padding);
+    padding: var(--card-padding);
 }

assets/scss/partials/layout/article.scss

@@ -43,7 +43,7 @@
         }
     }
 
-    article {
+    .main-article {
         background: var(--card-background);
         border-radius: var(--card-border-radius);
         box-shadow: var(--shadow-l1);
@@ -64,13 +64,13 @@
             }
 
             .article-details {
-                padding: var(--content-padding);
+                padding: var(--card-padding);
                 padding-bottom: 0;
             }
         }
 
         .article-content {
-            margin: var(--content-padding) 0;
+            margin: var(--card-padding) 0;
             color: var(--card-text-color-main);
 
             img {
@@ -80,11 +80,11 @@
         }
 
         .article-footer {
-            padding: var(--content-padding);
+            margin: var(--card-padding);
-            padding-top: 0;
+            margin-top: 0;
 
             section:not(:first-child) {
-                margin-top: var(--content-padding);
+                margin-top: var(--card-padding);
             }
 
             section {
@@ -104,6 +104,7 @@
 
             .article-tags {
                 flex-wrap: wrap;
+                text-transform: unset;
             }
         }
     }
@@ -192,7 +193,7 @@
 
     & > p {
         margin: 1.5em 0;
-        padding: 0 var(--content-padding);
+        padding: 0 var(--card-padding);
     }
 
     h1,
@@ -201,7 +202,7 @@
     h4,
     h5,
     h6 {
-        padding: 0 calc(var(--content-padding) - var(--heading-border-size));
+        padding: 0 calc(var(--card-padding) - var(--heading-border-size));
         border-left: var(--heading-border-size) solid var(--accent-color);
     }
 
@@ -219,13 +220,13 @@
         position: relative;
         margin: 10px 0;
         border-left: var(--blockquote-border-size) solid var(--card-separator-color);
-        padding: 15px calc(var(--content-padding) - var(--blockquote-border-size));
+        padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
         background-color: var(--blockquote-background-color);
     }
 
     & > ul,
     & > ol {
-        margin: 1em var(--content-padding);
+        margin: 1em var(--card-padding);
     }
 
     hr {
@@ -270,7 +271,7 @@
         font-family: var(--code-font-family);
         line-height: 1.428571429;
         word-break: break-all;
-        padding: var(--content-padding);
+        padding: var(--card-padding);
 
         code {
             color: unset;
@@ -281,9 +282,9 @@
     }
 
     table {
-        margin: 0 var(--content-padding);
+        margin: 0 var(--card-padding);
         width: 100%;
-        max-width: calc(100% - var(--content-padding) * 2);
+        max-width: calc(100% - var(--card-padding) * 2);
         border-collapse: collapse;
         border-spacing: 0;
         margin-bottom: 1.5em;

assets/scss/partials/menu.scss

@@ -126,7 +126,8 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    margin-top: 25px;
+    margin-top: var(--sidebar-element-separation);
+    margin-bottom: 0;
     overflow-y: auto;
 
     @media (min-width: $on-desktop-large) {
@@ -179,6 +180,11 @@
             height: 25px;
             stroke-width: 1.33;
             margin-right: 40px;
+
+            @media (max-width: $on-desktop-large) {
+                width: 20px;
+                height: 20px;
+            }
         }
 
         a {
@@ -188,7 +194,7 @@
             color: var(--body-text-color);
             font-size: 1.5rem;
 
-            @media (max-width: $on-desktop) {
+            @media (max-width: $on-desktop-large) {
                 font-size: 1.4rem;
             }
         }

assets/scss/partials/sidebar.scss

@@ -12,6 +12,14 @@
     flex-direction: column;
     flex-shrink: 0;
 
+    --sidebar-avatar-size: 150px;
+    --sidebar-element-separation: 25px;
+
+    @media (max-width: $on-desktop-large) {
+        --sidebar-avatar-size: 120px;
+        --sidebar-element-separation: 20px;
+    }
+
     @media (max-width: $on-phone) {
         width: 100%;
         padding: 30px 0;
@@ -23,19 +31,10 @@
     }
 
     @media (min-width: $on-phone + 1) {
-        width: 25%;
         margin-right: 1%;
         padding: var(--main-top-padding) 15px;
         max-height: 100vh;
     }
-
-    @media (min-width: $on-desktop) {
-        width: 20%;
-    }
-
-    @media (min-width: $on-desktop-large) {
-        width: 15%;
-    }
 }
 
 .right-sidebar {
@@ -50,19 +49,15 @@
     }
 
     @media (min-width: $on-tablet) {
-        width: 25%;
         margin-left: 1%;
-        padding-top: 50px;
+        padding-top: var(--main-top-padding);
-    }
-
-    @media (min-width: $on-desktop + 1) {
-        width: 25%;
     }
 }
 
 .site-info {
     z-index: 1;
     transition: box-shadow 0.5s ease;
+
     @media (max-width: $on-phone) {
         padding: 15px 30px;
     }
@@ -70,14 +65,10 @@
     .site-avatar {
         position: relative;
         margin: 0;
-        margin-bottom: 25px;
+        width: var(--sidebar-avatar-size);
-        width: 150px;
+        height: var(--sidebar-avatar-size);
-        height: 150px;
 
-        @media (max-width: $on-desktop-large) {
+        margin-bottom: var(--sidebar-element-separation);
-            height: 120px;
-            width: 120px;
-        }
 
         .site-logo {
             width: 100%;
@@ -131,16 +122,15 @@
 
 .sidebar {
     .widget {
-        &:not(:last-of-type) {
+        margin-bottom: var(--section-separation);
-            margin-bottom: var(--section-separation);
+
-            &:after {
+        &:not(:last-of-type):after {
-                content: "";
+            content: "";
-                width: 100px;
+            width: 100px;
-                height: 2px;
+            height: 2px;
-                background-color: var(--body-text-color);
+            background-color: var(--body-text-color);
-                display: block;
+            display: block;
-                margin-top: var(--section-separation);
+            margin-top: var(--section-separation);
-            }
         }
     }
 }

assets/scss/partials/widgets.scss

@@ -60,7 +60,6 @@
             }
 
             @media (max-width: $on-desktop-large) {
-                padding: 12px 20px;
                 font-size: 1.4rem;
             }
 

assets/scss/style.scss

@@ -8,6 +8,7 @@
 
 @import "breakpoints.scss";
 @import "variables.scss";
+@import "grid.scss";
 
 @import "external/normalize.scss";
 
@@ -39,98 +40,4 @@ a {
             box-shadow: 0px -10px 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
         }
     }
-}
+}
-
-.container {
-    margin-left: auto;
-    margin-right: auto;
-
-    &.extended {
-        @media (min-width: $on-phone) {
-            max-width: 800px;
-        }
-
-        @media (min-width: $on-tablet) {
-            max-width: 972px;
-        }
-
-        @media (min-width: $on-desktop) {
-            max-width: 1200px;
-        }
-
-        @media (min-width: $on-desktop-large) {
-            max-width: 1536px;
-        }
-    }
-}
-
-main.main {
-    min-width: 0;
-    padding: 0 15px;
-    max-width: 100%;
-    flex-grow: 1;
-    padding-top: var(--main-top-padding);
-}
-
-.main-grid {
-    @media (max-width: $on-phone) {
-        flex-direction: column;
-    }
-}
-
-.flex {
-    display: flex;
-    flex-direction: row;
-
-    &.column {
-        flex-direction: column;
-    }
-
-    &.on-phone--column {
-        @media (max-width: $on-phone) {
-            flex-direction: column;
-        }
-    }
-
-    &.align-items--flex-start {
-        align-items: flex-start;
-    }
-
-    .grow {
-        flex-grow: 1;
-    }
-
-    .do-not-shrink {
-        flex-shrink: 0;
-    }
-
-    .do-not-overflow {
-        min-width: 0;
-        flex-shrink: 1;
-        max-width: 100%;
-    }
-
-    .full-width {
-        width: 100%;
-    }
-}
-
-.alert {
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    z-index: 5;
-    background: var(--card-background);
-    max-width: 400px;
-    padding: 15px 20px;
-    border-radius: var(--card-border-radius);
-    line-height: 1.75;
-    color: var(--card-text-color-secondary);
-    box-shadow: var(--shadow-l2);
-
-    @media (max-width: $on-phone) {
-        max-width: 100vw;
-        width: calc(100% - 30px);
-        left: 15px;
-    }
-}

assets/scss/variables.scss

@@ -6,9 +6,14 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
     @media (min-width: $on-phone + 1) {
+        --main-top-padding: 35px;
+    }
+
+    @media (min-width: $on-desktop-large) {
         --main-top-padding: 50px;
     }
 
+
     --body-background: #f5f5fa;
 
     --accent-color: #34495e;
@@ -54,15 +59,18 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --card-border-radius: 10px;
 
-    --content-padding: 30px;
+    --card-padding: 30px;
     @media (max-width: $on-desktop-large) {
-        --content-padding: 25px;
+        --card-padding: 25px;
     }
     @media (max-width: $on-tablet) {
-        --content-padding: 20px;
+        --card-padding: 20px;
     }
 
     --small-card-padding: 25px;
+    @media (max-width: $on-tablet) {
+        --small-card-padding: 25px 20px;
+    }
 
     @media (prefers-color-scheme: dark) {
         --card-background: #424242;
@@ -129,4 +137,4 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --shadow-l3: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
     --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04),
         0px 0px 1px rgba(0, 0, 0, 0.04);
-}
+}

assets/ts/gallery.ts

@@ -236,10 +236,10 @@ function wrap(gallery: HTMLElement[]) {
  */
 function loadPhotoSwipe() {
     const tasks = [
-        loadScript("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"),
+        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"),
-        loadScript("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"),
+        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"),
-        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css"),
+        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"),
-        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css")
+        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css")
     ];
 
     return Promise.all(tasks);

assets/ts/main.ts

@@ -65,29 +65,6 @@ let Stack = {
 
             observer.observe(articleTile)
         }
-    },
-    alert: (content, time = 5000, animationSpeed = 500) => {
-        const alert = document.createElement('div');
-        alert.innerHTML = content;
-        alert.className = 'alert';
-        alert.style.visibility = 'hidden';
-        document.body.appendChild(alert);
-
-        alert.style.transform = `translateY(${alert.clientHeight + 50}px)`;
-        alert.style.transition = `transform ${animationSpeed / 1000}s ease`;
-
-        setTimeout(() => {
-            alert.style.removeProperty('visibility');
-            alert.style.transform = `translateY(0)`;
-        }, animationSpeed);
-
-        setTimeout(() => {
-            alert.style.transform = `translateY(${alert.clientHeight + 50}px)`;
-        }, animationSpeed + time);
-
-        setTimeout(() => {
-            alert.remove();
-        }, 2 * animationSpeed + time);
     }
 }
 

exampleSite/config.toml

@@ -13,21 +13,32 @@ DefaultContentLanguage = "en"                   # Theme i18n support
 [params]
     mainSections = ["post"]
     featuredImageField = "image"
+    rssFullContent = true
+    
     [params.dateFormat]
         published = "Jan 02, 2006"
         lastUpdated = "Jan 02, 2006 15:04 MST"
+        
     [params.sidebar]
         emoji = "🍥"
         avatar = "img/avatar.png"
         subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        
     [params.article]
+        math = false
         [params.article.license]
             enabled = true 
-            default = "Licenced under CC BY-NC-SA 4.0"
+            default = "Licensed under CC BY-NC-SA 4.0"
+            
     [params.comments]
         enabled = true
-        # Only Disqus is available so far
+        provider = "disqus"         # Available: disqus, utterances    
-        provider = "disqus"
+        [params.comments.utterances]
+            repo = ""
+            issueTerm = "pathname"
+            label = ""             # Optional
+            theme = "preferred-color-scheme"
+            
     [params.widgets]
         enabled = ['archives', 'tag-cloud']
         [params.widgets.archives]
@@ -36,19 +47,13 @@ DefaultContentLanguage = "en"                   # Theme i18n support
             path = "archives"       
         [params.widgets.tagCloud]
             limit = 10
+            
     [params.opengraph]
         [params.opengraph.twitter]
             site = ""
             card = "summary_large_image"
+            
     [params.defaultImage]
-        [params.defaultImage.article]
-            enabled = false
-            local = false
-            src = ""
-        [params.defaultImage.articleList]
-            enabled = false
-            local = true
-            src = ""
         [params.defaultImage.opengraph]
             enabled = false
             local = false
@@ -89,4 +94,4 @@ DefaultContentLanguage = "en"                   # Theme i18n support
 
 [markup]
     [markup.highlight]
-        noClasses = false
+        noClasses = false

exampleSite/content/page/about.md

@@ -5,6 +5,7 @@ date = "2019-02-28"
 aliases = ["about-us", "about-hugo", "contact"]
 author = "Hugo Authors"
 license = "CC BY-NC-ND"
+lastmod = "2020-10-09"
 +++
 
 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/post/chinese-test/index.md

@@ -1,11 +1,12 @@
 ---
-title: 中文文章内容测试
+title: Chinese Test
 description: 这是一个副标题
 date: 2020-09-09
 slug: test-chinese
 image: helena-hertz-wWZzXlDpMog-unsplash.jpg
 categories:
     - Test
+    - 测试
 ---
 
 ## 正文测试

exampleSite/content/post/placeholder-text/index.md

@@ -4,11 +4,13 @@ title = "Placeholder Text"
 date = "2019-03-09"
 description = "Lorem Ipsum Dolor Si Amet"
 categories = [
-    "Test"
+    "Test",
+    "Test with whitespaces"
 ]
 tags = [
     "markdown",
     "text",
+    "tag with whitespaces"
 ]
 image = "matt-le-SJSpo9hQf7s-unsplash.jpg"
 +++

i18n/en.toml

@@ -5,7 +5,7 @@
     other = "Related contents"
 
 [lastUpdatedOn]
-    other ="Last updated on {{ .Count }}"
+    other ="Last updated on"
 
 [widgetArchivesTitle]
     other = "Archives"

i18n/zh-CN.toml

@@ -5,7 +5,7 @@
     other = "相关文章"
 
 [lastUpdatedOn]
-    other ="最后更新于 {{ .Count }}"
+    other ="最后更新于"
 
 [widgetArchivesTitle]
     other = "归档"

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 <html lang="{{ .Site.LanguageCode }}">
     {{- partial "head/head.html" . -}}
     <body class="{{ block `body-class` . }}{{ end }}">
-        <div class="container extended flex on-phone--column align-items--flex-start {{ block `container-class` . }}{{end}}">
+        <div class="container flex on-phone--column align-items--flex-start {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
             {{ partial "sidebar/left.html" . }}
             <main class="main full-width">
                 {{- block "main" . }}{{- end }}

layouts/partials/article-list/compact.html

@@ -1,27 +1,27 @@
 <article>
-    <div class="article-details">
+    <a href="{{ .Permalink }}">
-        <h2 class="article-title">
+        <div class="article-details">
-            <a href="{{ .Permalink }}">
+            <h2 class="article-title">
                 {{- .Title -}}
-            </a>
+            </h2>
-        </h2>
+            <footer class="article-time">
-        <footer class="article-time">
+                <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-            <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
-                {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+                </time>
-            </time>
+            </footer>
-        </footer>
-    </div>
-
-    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
-    {{ if $image.exists }}
-        <div class="article-image">
-            {{ if $image.resource }}
-                {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
-                    height="{{ $thumbnail.Height }}" loading="lazy">
-            {{ else }}
-                <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
-            {{ end }}
         </div>
-    {{ end }}
+
+        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
+        {{ if $image.exists }}
+            <div class="article-image">
+                {{ if $image.resource }}
+                    {{- $thumbnail := $image.resource.Fill "120x120" -}}
+                    <img src="{{ $thumbnail.RelPermalink }}" width="{{ $thumbnail.Width }}"
+                        height="{{ $thumbnail.Height }}" loading="lazy">
+                {{ else }}
+                    <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />
+                {{ end }}
+            </div>
+        {{ end }}
+    </a>
 </article>

layouts/partials/article/article.html

@@ -4,4 +4,8 @@
     {{ partial "article/components/content" . }}
 
     {{ partial "article/components/footer" . }}
+
+    {{ if or .Params.math .Site.Params.article.math }}
+        {{ partialCached "article/components/math.html" . }}
+    {{ end }}
 </article>

layouts/partials/article/components/details.html

@@ -1,18 +1,21 @@
 {{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
 {{- $context := . -}}
-{{- $categories := .Params.categories -}}
 <div class="article-details">
-    {{ if $categories }}
+    {{ if .Params.categories }}
     <header class="article-category">
-        {{ range $category := $categories }}
+        {{ range (.GetTerms "categories") }}
-            {{ $term := $.Site.GetPage (printf "/categories/%s" $category) }}
             {{ if and $image.exists $image.resource }}
                 {{- $imageRaw := $image.resource | resources.Fingerprint "md5"  -}}
                 {{- $20x := $imageRaw.Fill "20x20 smart"  -}}
-                <a href="{{ $term.Permalink }}" class="color-tag"
+                <a href="{{ .Permalink }}" 
-                    data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">{{ $term.Title | humanize }}</a>
+                    class="color-tag"
+                    data-image="{{ $20x.RelPermalink }}" 
+                    data-key="{{ $context.Slug }}" 
+                    data-hash="{{ $imageRaw.Data.Integrity }}">
+                    {{ .LinkTitle }}
+                </a>
             {{ else }}
-                <a href="{{ $term.Permalink }}">{{ $term.Title | humanize }}</a>
+                <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
             {{ end }}
         {{ end }}
     </header>
@@ -32,7 +35,7 @@
 
     {{- if not .Date.IsZero -}}
     <footer class="article-time">
-        {{ (resources.Get "icons/clock.svg").Content | safeHTML }}
+        {{ partial "helper/icon" "clock" }}
         <time class="article-time--published">
             {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
         </time>

layouts/partials/article/components/footer.html

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

layouts/partials/article/components/math.html

@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
+    integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
+    crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
+    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
+    onload="renderMathInElement(document.querySelector(`.article-content`));"></script>

layouts/partials/article/components/tags.html

@@ -1,10 +1,7 @@
-{{- $tags := .Params.Tags -}}
+{{ if .Params.Tags }}
-{{ if $tags }}
     <section class="article-tags">
-        {{ range $tag := $tags }}
+        {{ range (.GetTerms "tags") }}
-            {{ with $.Site.GetPage (printf "/tags/%s" $tag) }}
+            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
-                <a href="{{ .Permalink }}">{{ .Title | humanize }}</a>
-            {{ end }}
         {{ end }}
     </section>
 {{ end }}

layouts/partials/comments/provider/disqus.html

@@ -7,6 +7,6 @@
         background-color: var(--card-background);
         border-radius: var(--card-border-radius);
         box-shadow: var(--shadow-l1);
-        padding: var(--content-padding);
+        padding: var(--card-padding);
     }
-</style>
+</style>

layouts/partials/comments/provider/utterances.html

@@ -0,0 +1,16 @@
+<script src="https://utteranc.es/client.js" 
+        repo="{{ .Site.Params.comments.utterances.repo }}"
+        issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
+        theme="{{ .Site.Params.comments.utterances.theme }}" 
+        {{ with .Site.Params.comments.utterances.label }}
+        label="{{ . }}"
+        {{ end }}
+        crossorigin="anonymous" 
+        async>
+</script>
+
+<style>
+    .utterances {
+        max-width: unset;
+    }
+</style>

layouts/partials/footer/footer.html

@@ -2,7 +2,7 @@
     <section class="copyright">&copy; {{ now.Format "2006" }} {{ .Site.Title }}</section>
     <section class="powerby">
         Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
-        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener">Stack</a></b> designed by
+        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="1.0.5">Stack</a></b> designed by
         <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
     </section>
 </footer>

layouts/partials/helper/icon.html

@@ -0,0 +1,6 @@
+{{- $iconFile := resources.GetMatch (printf "icons/%s.svg" .) -}}
+{{- if $iconFile -}}
+    {{- $iconFile.Content | safeHTML -}}
+{{- else -}}
+    {{- errorf "Error: icon '%s.svg' is not found under 'assets/icons' folder" . -}}
+{{- end -}}

layouts/partials/sidebar/left.html

@@ -33,7 +33,7 @@
         <li {{ if $active }} class='current' {{ end }}>
             <a href='{{ .URL | absLangURL }}'>
                 {{ if .Pre }}
-                    {{ (resources.Get (delimit (slice "icons/" .Pre ".svg") "")).Content | safeHTML }}
+                    {{ partial "helper/icon" .Pre }}
                 {{ end }}
                 <span>{{- .Name -}}</span>
             </a>

layouts/partials/widget/archives.html

@@ -1,6 +1,6 @@
 <section class="widget archives">
     <div class="widget-icon">
-        {{ (resources.Get "icons/infinity.svg").Content | safeHTML }}
+        {{ partial "helper/icon" "infinity" }}
     </div>
     <h1 class="widget-title">{{ T "widgetArchivesTitle" }}</h1>
 
@@ -9,20 +9,16 @@
     {{ $filtered := ($pages | intersect $notHidden) }}
     {{ $archives := $filtered.GroupByDate "2006" }}
 
-    {{ range first .Site.Params.widgets.archives.limit ($archives) }}
+    {{ range $index, $item := first (add .Site.Params.widgets.archives.limit 1) ($archives) }}
-        {{ $id := lower (replace .Key " " "-") }}
+        {{- $id := lower (replace $item.Key " " "-") -}}
         <div class="archives-year">
             <a href="{{ $.Site.Params.widgets.archives.path | relLangURL }}#{{ $id }}">
-                <span class="year">{{ .Key }}</span>
+                {{ if eq $index $.Site.Params.widgets.archives.limit }}
-                <span class="count">{{ len .Pages }}</span>
+                    <span class="year">{{ T "widgetArchivesMore" }}</span>
-            </a> 
+                {{ else }}
-        </div>
+                    <span class="year">{{ .Key }}</span>
-    {{ end }}
+                    <span class="count">{{ len $item.Pages }}</span>
-
+                {{ end }}
-    {{ if gt (len $archives) .Site.Params.widgets.archives.limit }}
-        <div class="archives-year">
-            <a href="{{ $.Site.Params.widgets.archives.path | relLangURL }}">
-                <span class="year">{{ T "widgetArchivesMore" }}</span>
             </a> 
         </div>
     {{ end }}

layouts/partials/widget/tag-cloud.html

@@ -1,16 +1,13 @@
-{{ $tags := .Site.Taxonomies.tags.ByCount }}
-
 <section class="widget tagCloud">
     <div class="widget-icon">
-        {{ (resources.Get "icons/tag.svg").Content | safeHTML }}
+        {{ partial "helper/icon" "tag" }}
     </div>
     <h1 class="widget-title">{{ T "widgetTagCloudTitle" }}</h1>
 
     <div class="tagCloud-tags">
-        {{ range first .Site.Params.widgets.tagCloud.limit $tags }}
+        {{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}
-            {{ $term := $.Site.GetPage (printf "/tags/%s" .Term) }}
+            <a href="{{ .Page.Permalink }}" class="font_size_{{ .Count }}">
-            <a href="{{ $term.Permalink }}" class="font_size_{{ .Count }}">
+                {{ .Page.Title }}
-                {{ $term.Title | humanize }}
             </a>
         {{ end }}
     </div>

layouts/rss.xml

@@ -0,0 +1,42 @@
+{{- $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections -}}
+{{- $notHidden := where .Site.RegularPages "Params.hidden" "!=" true -}}
+{{- $filtered := ($pages | intersect $notHidden) -}}
+{{- $limit := .Site.Config.Services.RSS.Limit -}}
+{{- if ge $limit 1 -}}
+{{- $filtered = $filtered | first $limit -}}
+{{- end -}}
+{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+    <channel>
+        <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
+        <link>{{ .Permalink }}</link>
+        <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
+        <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
+        <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
+        <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
+        <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
+        <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
+        <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
+        {{- with .OutputFormats.Get "RSS" -}}
+        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
+        {{- end -}}
+        {{ range $filtered }}
+        {{- $content := safeHTML (.Summary | html) -}}
+        {{- if .Site.Params.rssFullContent -}}
+            {{- $content = safeHTML (.Content | html) -}}
+        {{- end -}}
+        <item>
+        <title>{{ .Title }}</title>
+        <link>{{ .Permalink }}</link>
+        <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+        {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+        <guid>{{ .Permalink }}</guid>
+        <description>
+            {{- $image := partial "helper/image" (dict "Context" . "Type" "rss") -}}
+            {{- if $image.exists -}}
+                {{ "<" | html }}img src="{{ $image.permalink | absURL }}" alt="Featured image of post {{ .Title }}" {{ "/>" | html}}
+            {{- end -}}{{ $content }}</description>
+        </item>
+        {{ end }}
+    </channel>
+</rss>

theme.toml

@@ -5,7 +5,7 @@ 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://blog.jimmycai.com/p/hugo-theme-stack"
+homepage = "https://theme-stack.jimmycai.com"
 tags = [
     "blog", 
     "responsive", 
@@ -24,4 +24,4 @@ min_version = "0.74.0"
 
 [author]
   name = "Jimmy Cai"
-  homepage = "https://jimmycai.com"
+  homepage = "https://jimmycai.com"