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/css/highlight/dark.css

@@ -0,0 +1,390 @@
+/*
+*   Style: monokai
+*   https://xyproto.github.io/splash/docs/monokai.html
+*/
+
+:root {
+    --pre-text-color: #f8f8f2;
+    --pre-background-color: #272822;
+}
+
+/* Background */
+.chroma {
+    color: #f8f8f2;
+    background-color: #272822
+}
+
+/* Other */
+.chroma .x {}
+
+/* Error */
+.chroma .err {
+    color: #960050;
+    background-color: #1e0010
+}
+
+/* LineTableTD */
+.chroma .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: auto;
+    overflow: auto;
+    display: block;
+}
+
+/* LineHighlight */
+.chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f
+}
+
+/* LineNumbers */
+.chroma .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f
+}
+
+/* Keyword */
+.chroma .k {
+    color: #66d9ef
+}
+
+/* KeywordConstant */
+.chroma .kc {
+    color: #66d9ef
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+    color: #66d9ef
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+    color: #f92672
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+    color: #66d9ef
+}
+
+/* KeywordReserved */
+.chroma .kr {
+    color: #66d9ef
+}
+
+/* KeywordType */
+.chroma .kt {
+    color: #66d9ef
+}
+
+/* Name */
+.chroma .n {}
+
+/* NameAttribute */
+.chroma .na {
+    color: #a6e22e
+}
+
+/* NameBuiltin */
+.chroma .nb {}
+
+/* NameBuiltinPseudo */
+.chroma .bp {}
+
+/* NameClass */
+.chroma .nc {
+    color: #a6e22e
+}
+
+/* NameConstant */
+.chroma .no {
+    color: #66d9ef
+}
+
+/* NameDecorator */
+.chroma .nd {
+    color: #a6e22e
+}
+
+/* NameEntity */
+.chroma .ni {}
+
+/* NameException */
+.chroma .ne {
+    color: #a6e22e
+}
+
+/* NameFunction */
+.chroma .nf {
+    color: #a6e22e
+}
+
+/* NameFunctionMagic */
+.chroma .fm {}
+
+/* NameLabel */
+.chroma .nl {}
+
+/* NameNamespace */
+.chroma .nn {}
+
+/* NameOther */
+.chroma .nx {
+    color: #a6e22e
+}
+
+/* NameProperty */
+.chroma .py {}
+
+/* NameTag */
+.chroma .nt {
+    color: #f92672
+}
+
+/* NameVariable */
+.chroma .nv {}
+
+/* NameVariableClass */
+.chroma .vc {}
+
+/* NameVariableGlobal */
+.chroma .vg {}
+
+/* NameVariableInstance */
+.chroma .vi {}
+
+/* NameVariableMagic */
+.chroma .vm {}
+
+/* Literal */
+.chroma .l {
+    color: #ae81ff
+}
+
+/* LiteralDate */
+.chroma .ld {
+    color: #e6db74
+}
+
+/* LiteralString */
+.chroma .s {
+    color: #e6db74
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+    color: #e6db74
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: #e6db74
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+    color: #e6db74
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: #e6db74
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+    color: #e6db74
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: #e6db74
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+    color: #ae81ff
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: #e6db74
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+    color: #e6db74
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+    color: #e6db74
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+    color: #e6db74
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: #e6db74
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: #e6db74
+}
+
+/* LiteralNumber */
+.chroma .m {
+    color: #ae81ff
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+    color: #ae81ff
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+    color: #ae81ff
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+    color: #ae81ff
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+    color: #ae81ff
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+    color: #ae81ff
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+    color: #ae81ff
+}
+
+/* Operator */
+.chroma .o {
+    color: #f92672
+}
+
+/* OperatorWord */
+.chroma .ow {
+    color: #f92672
+}
+
+/* Punctuation */
+.chroma .p {}
+
+/* Comment */
+.chroma .c {
+    color: #75715e
+}
+
+/* CommentHashbang */
+.chroma .ch {
+    color: #75715e
+}
+
+/* CommentMultiline */
+.chroma .cm {
+    color: #75715e
+}
+
+/* CommentSingle */
+.chroma .c1 {
+    color: #75715e
+}
+
+/* CommentSpecial */
+.chroma .cs {
+    color: #75715e
+}
+
+/* CommentPreproc */
+.chroma .cp {
+    color: #75715e
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+    color: #75715e
+}
+
+/* Generic */
+.chroma .g {}
+
+/* GenericDeleted */
+.chroma .gd {
+    color: #f92672
+}
+
+/* GenericEmph */
+.chroma .ge {
+    font-style: italic
+}
+
+/* GenericError */
+.chroma .gr {}
+
+/* GenericHeading */
+.chroma .gh {}
+
+/* GenericInserted */
+.chroma .gi {
+    color: #a6e22e
+}
+
+/* GenericOutput */
+.chroma .go {}
+
+/* GenericPrompt */
+.chroma .gp {}
+
+/* GenericStrong */
+.chroma .gs {
+    font-weight: bold
+}
+
+/* GenericSubheading */
+.chroma .gu {
+    color: #75715e
+}
+
+/* GenericTraceback */
+.chroma .gt {}
+
+/* GenericUnderline */
+.chroma .gl {}
+
+/* TextWhitespace */
+.chroma .w {}

assets/css/highlight/light.css

@@ -0,0 +1,411 @@
+/*
+*   Style: monokailight
+*   https://xyproto.github.io/splash/docs/monokailight.html
+*/
+:root {
+    --pre-text-color: #272822;
+    --pre-background-color: #fafafa;
+}
+
+/* Background */
+.chroma {
+    color: #272822;
+    background-color: #fafafa;
+}
+
+/* Other */
+.chroma .x {}
+
+/* Error */
+.chroma .err {
+    color: #960050;
+    background-color: #1e0010
+}
+
+/* LineTableTD */
+.chroma .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
+/* LineTable */
+.chroma .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: auto;
+    overflow: auto;
+    display: block;
+}
+
+/* LineHighlight */
+.chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc
+}
+
+/* LineNumbersTable */
+.chroma .lnt {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f
+}
+
+/* LineNumbers */
+.chroma .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f
+}
+
+/* Keyword */
+.chroma .k {
+    color: #00a8c8
+}
+
+/* KeywordConstant */
+.chroma .kc {
+    color: #00a8c8
+}
+
+/* KeywordDeclaration */
+.chroma .kd {
+    color: #00a8c8
+}
+
+/* KeywordNamespace */
+.chroma .kn {
+    color: #f92672
+}
+
+/* KeywordPseudo */
+.chroma .kp {
+    color: #00a8c8
+}
+
+/* KeywordReserved */
+.chroma .kr {
+    color: #00a8c8
+}
+
+/* KeywordType */
+.chroma .kt {
+    color: #00a8c8
+}
+
+/* Name */
+.chroma .n {
+    color: #111111
+}
+
+/* NameAttribute */
+.chroma .na {
+    color: #75af00
+}
+
+/* NameBuiltin */
+.chroma .nb {
+    color: #111111
+}
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+    color: #111111
+}
+
+/* NameClass */
+.chroma .nc {
+    color: #75af00
+}
+
+/* NameConstant */
+.chroma .no {
+    color: #00a8c8
+}
+
+/* NameDecorator */
+.chroma .nd {
+    color: #75af00
+}
+
+/* NameEntity */
+.chroma .ni {
+    color: #111111
+}
+
+/* NameException */
+.chroma .ne {
+    color: #75af00
+}
+
+/* NameFunction */
+.chroma .nf {
+    color: #75af00
+}
+
+/* NameFunctionMagic */
+.chroma .fm {
+    color: #111111
+}
+
+/* NameLabel */
+.chroma .nl {
+    color: #111111
+}
+
+/* NameNamespace */
+.chroma .nn {
+    color: #111111
+}
+
+/* NameOther */
+.chroma .nx {
+    color: #75af00
+}
+
+/* NameProperty */
+.chroma .py {
+    color: #111111
+}
+
+/* NameTag */
+.chroma .nt {
+    color: #f92672
+}
+
+/* NameVariable */
+.chroma .nv {
+    color: #111111
+}
+
+/* NameVariableClass */
+.chroma .vc {
+    color: #111111
+}
+
+/* NameVariableGlobal */
+.chroma .vg {
+    color: #111111
+}
+
+/* NameVariableInstance */
+.chroma .vi {
+    color: #111111
+}
+
+/* NameVariableMagic */
+.chroma .vm {
+    color: #111111
+}
+
+/* Literal */
+.chroma .l {
+    color: #ae81ff
+}
+
+/* LiteralDate */
+.chroma .ld {
+    color: #d88200
+}
+
+/* LiteralString */
+.chroma .s {
+    color: #d88200
+}
+
+/* LiteralStringAffix */
+.chroma .sa {
+    color: #d88200
+}
+
+/* LiteralStringBacktick */
+.chroma .sb {
+    color: #d88200
+}
+
+/* LiteralStringChar */
+.chroma .sc {
+    color: #d88200
+}
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+    color: #d88200
+}
+
+/* LiteralStringDoc */
+.chroma .sd {
+    color: #d88200
+}
+
+/* LiteralStringDouble */
+.chroma .s2 {
+    color: #d88200
+}
+
+/* LiteralStringEscape */
+.chroma .se {
+    color: #8045ff
+}
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+    color: #d88200
+}
+
+/* LiteralStringInterpol */
+.chroma .si {
+    color: #d88200
+}
+
+/* LiteralStringOther */
+.chroma .sx {
+    color: #d88200
+}
+
+/* LiteralStringRegex */
+.chroma .sr {
+    color: #d88200
+}
+
+/* LiteralStringSingle */
+.chroma .s1 {
+    color: #d88200
+}
+
+/* LiteralStringSymbol */
+.chroma .ss {
+    color: #d88200
+}
+
+/* LiteralNumber */
+.chroma .m {
+    color: #ae81ff
+}
+
+/* LiteralNumberBin */
+.chroma .mb {
+    color: #ae81ff
+}
+
+/* LiteralNumberFloat */
+.chroma .mf {
+    color: #ae81ff
+}
+
+/* LiteralNumberHex */
+.chroma .mh {
+    color: #ae81ff
+}
+
+/* LiteralNumberInteger */
+.chroma .mi {
+    color: #ae81ff
+}
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+    color: #ae81ff
+}
+
+/* LiteralNumberOct */
+.chroma .mo {
+    color: #ae81ff
+}
+
+/* Operator */
+.chroma .o {
+    color: #f92672
+}
+
+/* OperatorWord */
+.chroma .ow {
+    color: #f92672
+}
+
+/* Punctuation */
+.chroma .p {
+    color: #111111
+}
+
+/* Comment */
+.chroma .c {
+    color: #75715e
+}
+
+/* CommentHashbang */
+.chroma .ch {
+    color: #75715e
+}
+
+/* CommentMultiline */
+.chroma .cm {
+    color: #75715e
+}
+
+/* CommentSingle */
+.chroma .c1 {
+    color: #75715e
+}
+
+/* CommentSpecial */
+.chroma .cs {
+    color: #75715e
+}
+
+/* CommentPreproc */
+.chroma .cp {
+    color: #75715e
+}
+
+/* CommentPreprocFile */
+.chroma .cpf {
+    color: #75715e
+}
+
+/* Generic */
+.chroma .g {}
+
+/* GenericDeleted */
+.chroma .gd {}
+
+/* GenericEmph */
+.chroma .ge {
+    font-style: italic
+}
+
+/* GenericError */
+.chroma .gr {}
+
+/* GenericHeading */
+.chroma .gh {}
+
+/* GenericInserted */
+.chroma .gi {}
+
+/* GenericOutput */
+.chroma .go {}
+
+/* GenericPrompt */
+.chroma .gp {}
+
+/* GenericStrong */
+.chroma .gs {
+    font-weight: bold
+}
+
+/* GenericSubheading */
+.chroma .gu {}
+
+/* GenericTraceback */
+.chroma .gt {}
+
+/* GenericUnderline */
+.chroma .gl {}
+
+/* TextWhitespace */
+.chroma .w {}

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;
-        align-items: center;
-        padding: var(--small-card-padding);
+        & > a {
+            display: flex;
+            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;
-                height: 60px;
+                width: var(--image-size);
+                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);
-            padding-top: 0;
+            margin: var(--card-padding);
+            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

@@ -122,10 +122,12 @@
 
 /* Menu style */
 .menu {
+    padding-left: 0;
     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) {
@@ -178,6 +180,11 @@
             height: 25px;
             stroke-width: 1.33;
             margin-right: 40px;
+
+            @media (max-width: $on-desktop-large) {
+                width: 20px;
+                height: 20px;
+            }
         }
 
         a {
@@ -187,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;
-    }
-
-    @media (min-width: $on-desktop + 1) {
-        width: 25%;
+        padding-top: var(--main-top-padding);
     }
 }
 
 .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: 150px;
-        height: 150px;
+        width: var(--sidebar-avatar-size);
+        height: var(--sidebar-avatar-size);
 
-        @media (max-width: $on-desktop-large) {
-            height: 120px;
-            width: 120px;
-        }
+        margin-bottom: var(--sidebar-element-separation);
 
         .site-logo {
             width: 100%;
@@ -131,16 +122,15 @@
 
 .sidebar {
     .widget {
-        &:not(:last-of-type) {
-            margin-bottom: var(--section-separation);
-            &:after {
-                content: "";
-                width: 100px;
-                height: 2px;
-                background-color: var(--body-text-color);
-                display: block;
-                margin-top: var(--section-separation);
-            }
+        margin-bottom: var(--section-separation);
+
+        &:not(:last-of-type):after {
+            content: "";
+            width: 100px;
+            height: 2px;
+            background-color: var(--body-text-color);
+            display: block;
+            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://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"),
-        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css"),
-        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css")
+        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"),
+        loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"),
+        loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.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"
+        provider = "disqus"         # Available: disqus, utterances    
+        [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
@@ -64,13 +69,13 @@ DefaultContentLanguage = "en"                   # Theme i18n support
     [[menu.main]]
         identifier = "about-cn"
         name = "About"
-        url = "/about/"
+        url = "about"
         weight = -90
         pre = "user"
     [[menu.main]]
         identifier = "archives"
         name = "Archives"
-        url = "/archives/"
+        url = "archives"
         weight = -70
         pre = "archives"
 
@@ -85,4 +90,8 @@ DefaultContentLanguage = "en"                   # Theme i18n support
 
     [[related.indices]]
         name = "categories"
-        weight = 200
+        weight = 200
+
+[markup]
+    [markup.highlight]
+        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"
 +++

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

@@ -0,0 +1,27 @@
+> 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

@@ -0,0 +1,39 @@
+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

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

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/archives.html

@@ -7,7 +7,7 @@
         <div class="category-list">
             <div class="article-list--tile">
                 {{ range $categories }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150") }}
+                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
                 {{ end }}
             </div>
         </div>

layouts/_default/baseof.html

@@ -2,15 +2,13 @@
 <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 }}
             </main>
             {{- block "right-sidebar" . -}}{{ end }}
         </div>
-        {{ partial "footer/script.html" . }}
-        {{ partial "footer/style.html" . }}
-        {{ partial "footer/custom.html" . }}
+        {{ partial "footer/include.html" . }}
     </body>
 </html>

layouts/_default/single.html

@@ -8,5 +8,5 @@
 
     {{ partialCached "footer/footer" . }}
 
-    {{ partial "article/components/photoswipe" . }}
+    {{ partialCached "article/components/photoswipe" . }}
 {{ end }}

layouts/_default/term.html

@@ -9,7 +9,7 @@
             {{ end }}
         </div>
 
-        {{ $image := partial "helper/image" (dict "Context" . "Type" "taxonomy") }}
+        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "taxonomy") .RelPermalink "taxonomy" -}}
         {{ if $image.exists }}
             <div class="taxonomy-image">
                 {{ if $image.resource }}   

layouts/partials/article-list/compact.html

@@ -1,28 +1,27 @@
 <article>
-    <div class="article-details">
-        <h2 class="article-title">
-            <a href="{{ .Permalink }}">
+    <a href="{{ .Permalink }}">
+        <div class="article-details">
+            <h2 class="article-title">
                 {{- .Title -}}
-            </a>
-        </h2>
-        <footer class="article-time">
-            <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
-            </time>
-        </footer>
-    </div>
-
-    {{ $image := partial "helper/image" (dict "Context" . "Type" "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 }}
+            </h2>
+            <footer class="article-time">
+                <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
+                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+                </time>
+            </footer>
         </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-list/default.html

@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" (dict "Context" . "Type" "articleList") }}
+{{ $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" }}
 <article class="{{ if $image.exists }}has-image{{ end }}">
     {{ if $image.exists }}
         <div class="article-image">
@@ -8,7 +8,7 @@
                     {{- $thumbnailRetina := $image.resource.Fill "1600x500" -}}
 
                     <img src="{{ $thumbnail.RelPermalink }}" 
-                        srcset="{{ $thumbnail.RelPermalink }} 1x, {{ $thumbnailRetina.RelPermalink }} 2x"
+                        srcset="{{ $thumbnail.RelPermalink }} 800w, {{ $thumbnailRetina.RelPermalink }} 1600w"
                         width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" loading="lazy"
                         alt="Featured image of post {{ .Title }}" />
                 {{ else }}
@@ -18,5 +18,5 @@
         </div>
     {{ end }}
 
-    {{ partial "article/components/details" . }}
+    {{ partialCached "article/components/details" . .RelPermalink }}
 </article>

layouts/partials/article-list/tile.html

@@ -1,4 +1,4 @@
-{{ $image := partial "helper/image" (dict "Context" .context "Type" .Type) }}
+{{ $image := partialCached "helper/image" (dict "Context" .context "Type" .Type) .context.RelPermalink .Type }}
 <article class="{{ if $image.exists }}has-image{{ end }}">
     <a href="{{ .context.Permalink }}">
         

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,16 +1,21 @@
-{{ $image := partial "helper/image" (dict "Context" .) }}
-{{ $context := . }}
+{{ $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" }}
+{{- $context := . -}}
 <div class="article-details">
-    {{ with $categories := .Params.categories }}
+    {{ if .Params.categories }}
     <header class="article-category">
-        {{ range $categories }}
+        {{ range (.GetTerms "categories") }}
             {{ if and $image.exists $image.resource }}
                 {{- $imageRaw := $image.resource | resources.Fingerprint "md5"  -}}
                 {{- $20x := $imageRaw.Fill "20x20 smart"  -}}
-                <a href="{{ printf `categories/%s` (. | urlize) | relLangURL }}" class="color-tag"
-                    data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">{{ . | humanize }}</a>
+                <a href="{{ .Permalink }}" 
+                    class="color-tag"
+                    data-image="{{ $20x.RelPermalink }}" 
+                    data-key="{{ $context.Slug }}" 
+                    data-hash="{{ $imageRaw.Data.Integrity }}">
+                    {{ .LinkTitle }}
+                </a>
             {{ else }}
-                <a href="{{ printf `categories/%s` (. | urlize) | relLangURL }}">{{ . | humanize }}</a>
+                <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
             {{ end }}
         {{ end }}
     </header>
@@ -30,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

@@ -1,24 +1,18 @@
 <footer class="article-footer">
-    {{ with $tags := .Params.Tags }}
-    <section class="article-tags">
-        {{ range $tags }}
-        <a href="{{ printf `tags/%s` (. | urlize) | relLangURL }}">{{ . | humanize }}</a>
-        {{ end }}
-    </section>
-    {{ end }}
+    {{ partial "article/components/tags" . }}
 
     {{ 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/header.html

@@ -1,6 +1,5 @@
 <header class="article-header">
-    {{ $image := partial "helper/image" (dict "Context" . "Type" "article") }}
-
+    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "article") .RelPermalink "article" -}}
     {{ if $image.exists }}
         <div class="article-image">
             {{ if $image.resource }}
@@ -16,5 +15,5 @@
         </div>
     {{ end }}
 
-    {{ partial "article/components/details" . }}
+    {{ partialCached "article/components/details" . .RelPermalink }}
 </header>

layouts/partials/article/components/math.html

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

layouts/partials/article/components/related-contents.html

@@ -5,7 +5,7 @@
         <div class="related-contents">
             <div class="flex article-list--tile">
                 {{ range . }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150") }}
+                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
                 {{ end }}
             </div>
         </div>

layouts/partials/article/components/tags.html

@@ -0,0 +1,7 @@
+{{ if .Params.Tags }}
+    <section class="article-tags">
+        {{ range (.GetTerms "tags") }}
+            <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+        {{ 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/components/highlight.html

@@ -0,0 +1,4 @@
+{{- $light := resources.Get "css/highlight/light.css" | minify -}}
+{{- $dark := resources.Get "css/highlight/dark.css" | minify -}}
+<link rel="stylesheet" href="{{ $light.RelPermalink }}" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="{{ $dark.RelPermalink }}" media="(prefers-color-scheme: dark)">

layouts/partials/footer/components/script.html

@@ -1,7 +1,7 @@
 <script src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"
     integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g=" crossorigin="anonymous"></script>
 
-{{ $opts := dict "minify" hugo.IsProduction }}
-{{ $script := resources.Get "ts/main.ts" | js.Build $opts }}
+{{- $opts := dict "minify" hugo.IsProduction -}}
+{{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}
 
 <script type="text/javascript" src="{{ $script.RelPermalink }}" defer></script>

layouts/partials/footer/footer.html

@@ -1,8 +1,8 @@
 <footer class="site-footer">
     <section class="copyright">&copy; {{ now.Format "2006" }} {{ .Site.Title }}</section>
     <section class="powerby">
-        Built with <a href="https://gohugo.io/" target="_blank">Hugo</a> <br />
-        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank">Stack</a></b> designed by
-        <a href="https://jimmycai.com" target="_blank">Jimmy</a>
+        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" 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/footer/include.html

@@ -0,0 +1,4 @@
+{{ partialCached "footer/components/script.html" . }}
+{{ partialCached "footer/components/custom-font.html" . }}
+{{ partialCached "footer/components/highlight.html" . }}
+{{ partial "footer/custom.html" . }}

layouts/partials/head/head.html

@@ -2,10 +2,10 @@
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     
-    {{- $description := partial "data/description" . -}}
+    {{- $description := partialCached "data/description" . .RelPermalink -}}
     <meta name='description' content='{{ $description }}'>
 
-    {{- $title := partial "data/title" . -}}
+    {{- $title := partialCached "data/title" . .RelPermalink -}}
     <title>{{ $title }}</title>
     
     <link rel='canonical' href='{{ .Permalink }}'>

layouts/partials/head/opengraph/provider/base.html

@@ -1,5 +1,5 @@
-{{- $title := partial "data/title" . -}}
-{{- $description := partial "data/description" . -}}
+{{- $title := partialCached "data/title" . .RelPermalink -}}
+{{- $description := partialCached "data/description" . .RelPermalink -}}
 
 <meta property='og:title' content='{{ $title }}'>
 <meta property='og:description' content='{{ $description }}'>
@@ -37,7 +37,7 @@
 	{{- end -}}
 {{- end -}}
 
-{{ $image := partial "helper/image" (dict "Context" . "Type" "opengraph") }}
+{{ $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" }}
 {{- if $image.exists -}}
     <meta property='og:image' content='{{ absURL $image.permalink }}' />
 {{- end -}}

layouts/partials/head/opengraph/provider/twitter.html

@@ -2,13 +2,13 @@
     <meta name="twitter:site" content="{{ . }}">
 {{- end -}}
 
-{{- $title := partial "data/title" . -}}
-{{- $description := partial "data/description" . -}}
+{{- $title := partialCached "data/title" . .RelPermalink -}}
+{{- $description := partialCached "data/description" . .RelPermalink -}}
 
 <meta name="twitter:title" content="{{ $title }}">
 <meta name="twitter:description" content="{{ $description }}">
 
-{{- $image := partial "helper/image" (dict "Context" . "Type" "opengraph") -}}
+{{- $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" -}}
 {{- if $image.exists -}}
 	<meta name="twitter:card" content="{{ .Site.Params.opengraph.twitter.card }}">
 	<meta name="twitter:image" content='{{ absURL $image.permalink }}' />

layouts/partials/head/style.html

@@ -1,3 +1,3 @@
 {{ $sass := resources.Get "scss/style.scss" }}
 {{ $style := $sass | resources.ToCSS | minify }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">

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

@@ -25,19 +25,19 @@
         <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
     </header>
 
-    <nav class="menu" id="main-menu">
+    <ol class="menu" id="main-menu">
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
         {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
 
         <li {{ if $active }} class='current' {{ end }}>
-            <a href='{{ .URL }}'>
+            <a href='{{ .URL | absLangURL }}'>
                 {{ if .Pre }}
-                    {{ (resources.Get (delimit (slice "icons/" .Pre ".svg") "")).Content | safeHTML }}
+                    {{ partial "helper/icon" .Pre }}
                 {{ end }}
                 <span>{{- .Name -}}</span>
             </a>
         </li>
         {{ end }}
-    </nav>
+    </ol>
 </aside>

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) }}
-        {{ $id := lower (replace .Key " " "-") }}
+    {{ range $index, $item := first (add .Site.Params.widgets.archives.limit 1) ($archives) }}
+        {{- $id := lower (replace $item.Key " " "-") -}}
         <div class="archives-year">
             <a href="{{ $.Site.Params.widgets.archives.path | relLangURL }}#{{ $id }}">
-                <span class="year">{{ .Key }}</span>
-                <span class="count">{{ len .Pages }}</span>
-            </a> 
-        </div>
-    {{ 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>
+                {{ if eq $index $.Site.Params.widgets.archives.limit }}
+                    <span class="year">{{ T "widgetArchivesMore" }}</span>
+                {{ else }}
+                    <span class="year">{{ .Key }}</span>
+                    <span class="count">{{ len $item.Pages }}</span>
+                {{ end }}
             </a> 
         </div>
     {{ end }}

layouts/partials/widget/tag-cloud.html

@@ -1,16 +1,14 @@
-{{ $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 }}
-        <a href="{{ printf `tags/%s` (.Term | urlize) | relLangURL }}" class="font_size_{{ .Count }}">
-            {{ .Term | humanize }}
-        </a>
+        {{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}
+            <a href="{{ .Page.Permalink }}" class="font_size_{{ .Count }}">
+                {{ .Page.Title }}
+            </a>
         {{ end }}
     </div>
 </section>

layouts/post/single.html

@@ -17,5 +17,5 @@
 
     {{ partialCached "footer/footer" . }}
 
-    {{- partial "article/components/photoswipe.html" . -}}
+    {{- partialCached "article/components/photoswipe.html" . -}}
 {{ end }}

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>

netlify.toml

@@ -14,4 +14,7 @@
     command = "cd exampleSite && hugo --gc --themesDir ../.. -b ${DEPLOY_PRIME_URL}"
 
 [context.deploy-preview]
-    command = "cd exampleSite && hugo --gc --themesDir ../.. -b ${DEPLOY_PRIME_URL}"
+    command = "cd exampleSite && hugo --gc --themesDir ../.. -b ${DEPLOY_PRIME_URL}"
+
+[[plugins]]
+    package = "/exampleSite/plugins/netlify-plugin-hugo-cache-resources"

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"