release: 1.1.0 version

feat: local search

.github/FUNDING.yml

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

.github/release-drafter.yml

@@ -0,0 +1,31 @@
+name-template: 'v$RESOLVED_VERSION 🌈'
+tag-template: 'v$RESOLVED_VERSION'
+categories:
+  - title: '🚀 Features'
+    labels:
+      - 'feature'
+      - 'enhancement'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'fix'
+      - 'bugfix'
+      - 'bug'
+  - title: '🧰 Maintenance'
+    label: 'chore'
+change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
+change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
+version-resolver:
+  major:
+    labels:
+      - 'major'
+  minor:
+    labels:
+      - 'minor'
+  patch:
+    labels:
+      - 'patch'
+  default: patch
+template: |
+  ## Changes
+
+  $CHANGES

.github/workflows/release-drafter.yml

@@ -0,0 +1,16 @@
+name: Release Drafter
+
+on:
+  push:
+    # branches to consider in the event; optional, defaults to all
+    branches:
+      - master
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      # Drafts your next Release notes as Pull Requests are merged into "master"
+      - uses: release-drafter/release-drafter@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

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/icons/search.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <circle cx="10" cy="10" r="7" />
+  <line x1="21" y1="21" x2="15" y2="15" />
+</svg>
+
+

assets/scss/custom.scss

@@ -0,0 +1 @@
+/* Place your custom SCSS in HUGO_SITE_FOLDER/assets/scss/custom.scss */

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,21 @@
 
         .article-image {
             img {
-                width: 60px;
-                height: 60px;
+                width: var(--image-size);
+                height: var(--image-size);
             }
         }
+
+        .article-time {
+            font-size: 1.4rem;
+        }
+
+        .article-preview{
+            font-size: 1.4rem;
+            color: var(--card-text-color-tertiary);
+            margin-top: 10px;
+            line-height: 1.5;
+        }
     }
 }
 

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

@@ -1,15 +1,5 @@
 .archives-group {
     margin-bottom: var(--section-separation);
-    .archives-date {
-        text-transform: uppercase;
-        margin-bottom: 10px;
-        font-size: 1.6rem;
-        font-weight: bold;
-
-        a {
-            color: var(--body-text-color);
-        }
-    }
 }
 
 .template-archives {

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/layout/search.scss

@@ -0,0 +1,82 @@
+.search-form {
+    margin-bottom: var(--section-separation);
+    position: relative;
+    --button-size: 80px;
+
+    &.widget {
+        --button-size: 60px;
+
+        label {
+            font-size: 1.3rem;
+            top: 10px;
+        }
+
+        input {
+            font-size: 1.5rem;
+            padding: 30px 20px 15px 20px;
+        }
+    }
+
+    p {
+        position: relative;
+        margin: 0;
+    }
+
+    label {
+        position: absolute;
+        top: 15px;
+        left: 20px;
+        font-size: 1.4rem;
+        color: var(--card-text-color-tertiary);
+    }
+
+    input {
+        padding: 40px 20px 20px;
+        border-radius: var(--card-border-radius);
+        background-color: var(--card-background);
+        box-shadow: var(--shadow-l1);
+        color: var(--card-text-color-main);
+        width: 100%;
+        border: 0;
+        -webkit-appearance: none;
+
+        transition: box-shadow 0.3s ease;
+
+        font-size: 1.8rem;
+
+        &:focus {
+            outline: 0;
+            box-shadow: var(--shadow-l2);
+        }
+    }
+
+    button {
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 100%;
+        width: var(--button-size);
+        cursor: pointer;
+        background-color: transparent;
+        border: 0;
+
+        padding: 0 10px;
+
+        &:focus {
+            outline: 0;
+
+            svg {
+                stroke-width: 2;
+                color: var(--accent-color);
+            }
+        }
+
+        svg {
+            color: var(--card-text-color-secondary);
+            stroke-width: 1.33;
+            transition: all 0.3s ease;
+            width: 20px;
+            height: 20px;
+        }
+    }
+}

assets/scss/partials/layout/taxonomy.scss

@@ -1,11 +1,3 @@
-.taxonomy-type {
-    text-transform: uppercase;
-    color: var(--body-text-color);
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 1.6rem;
-}
-
 .taxonomy-card {
     border-radius: var(--card-border-radius);
     background-color: var(--card-background);

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

@@ -1,13 +1,4 @@
 .widget {
-    .widget-title {
-        text-transform: uppercase;
-        color: var(--body-text-color);
-        font-weight: bold;
-        margin: 0;
-        margin-bottom: 10px;
-        font-size: 1.6rem;
-    }
-
     .widget-icon {
         svg {
             width: 32px;
@@ -45,28 +36,26 @@
 
 /* Archives widget */
 .widget.archives {
+    .widget-archive--list {
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--shadow-l1);
+        background-color: var(--card-background);
+    }
+
     .archives-year {
-        margin-bottom: 10px;
+        &:not(:last-of-type) {
+            border-bottom: 1.5px solid var(--card-separator-color);
+        }
+
         a {
-            background-color: var(--card-background);
-            padding: 15px 25px;
-            border-radius: var(--card-border-radius);
-            box-shadow: var(--shadow-l1);
+            font-size: 1.4rem;
+            padding: 18px 25px;
             display: flex;
-            transition: box-shadow 0.3s ease;
-
-            &:hover {
-                box-shadow: var(--shadow-l2);
-            }
-
-            @media (max-width: $on-desktop-large) {
-                padding: 12px 20px;
-                font-size: 1.4rem;
-            }
 
             span.year {
                 flex: 1;
                 color: var(--card-text-color-main);
+                font-weight: bold;
             }
 
             span.count {

assets/scss/style.scss

@@ -8,6 +8,7 @@
 
 @import "breakpoints.scss";
 @import "variables.scss";
+@import "grid.scss";
 
 @import "external/normalize.scss";
 
@@ -22,6 +23,9 @@
 @import "partials/layout/article.scss";
 @import "partials/layout/taxonomy.scss";
 @import "partials/layout/404.scss";
+@import "partials/layout/search.scss";
+
+@import "custom.scss";
 
 a {
     text-decoration: none;
@@ -41,96 +45,16 @@ a {
     }
 }
 
-.container {
-    margin-left: auto;
-    margin-right: auto;
+.section-title {
+    text-transform: uppercase;
+    margin-top: 0;
+    margin-bottom: 10px;
+    display: block;
+    font-size: 1.6rem;
+    font-weight: bold;
+    color: var(--body-text-color);
 
-    &.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;
+    a {
+        color: var(--body-text-color);
     }
 }

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/createElement.ts

@@ -0,0 +1,34 @@
+/**
+ * createElement
+ * Edited from:
+ * @link https://stackoverflow.com/a/42405694
+ */
+function createElement(tag, attrs, children) {
+    var element = document.createElement(tag);
+
+    for (let name in attrs) {
+        if (name && attrs.hasOwnProperty(name)) {
+            let value = attrs[name];
+
+            if (name == "dangerouslySetInnerHTML") {
+                element.innerHTML = value.__html;
+            }
+            else if (value === true) {
+                element.setAttribute(name, name);
+            } else if (value !== false && value != null) {
+                element.setAttribute(name, value.toString());
+            }
+        }
+    }
+    for (let i = 2; i < arguments.length; i++) {
+        let child = arguments[i];
+        if (child) {
+            element.appendChild(
+                child.nodeType == null ?
+                    document.createTextNode(child.toString()) : child);
+        }
+    }
+    return element;
+}
+
+export default createElement;

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

@@ -9,6 +9,7 @@
 import { createGallery } from "./gallery"
 import { getColor } from './color';
 import menu from './menu';
+import createElement from './createElement';
 
 let Stack = {
     init: () => {
@@ -65,29 +66,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);
     }
 }
 
@@ -97,4 +75,12 @@ window.addEventListener('load', () => {
     }, 0);
 })
 
-window.Stack = Stack;
+declare global {
+    interface Window {
+        createElement: any;
+        Stack: any
+    }
+}
+
+window.Stack = Stack;
+window.createElement = createElement;

assets/ts/search.tsx

@@ -0,0 +1,263 @@
+interface pageData {
+    title: string,
+    date: string,
+    permalink: string,
+    content: string,
+    image?: string,
+    preview: string,
+    matchCount: number
+}
+
+/**
+ * Escape HTML tags as HTML entities
+ * Edited from:
+ * @link https://stackoverflow.com/a/5499821
+ */
+const tagsToReplace = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '…': '&hellip;'
+};
+
+function replaceTag(tag) {
+    return tagsToReplace[tag] || tag;
+}
+
+function replaceHTMLEnt(str) {
+    return str.replace(/[&<>"]/g, replaceTag);
+}
+
+function escapeRegExp(string) {
+    return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
+}
+
+class Search {
+    private data: pageData[];
+    private form: HTMLFormElement;
+    private input: HTMLInputElement;
+    private list: HTMLDivElement;
+    private resultTitle: HTMLHeadElement;
+    private resultTitleTemplate: string;
+
+    constructor({ form, input, list, resultTitle, resultTitleTemplate }) {
+        this.form = form;
+        this.input = input;
+        this.list = list;
+        this.resultTitle = resultTitle;
+        this.resultTitleTemplate = resultTitleTemplate;
+
+        this.handleQueryString();
+        this.bindQueryStringChange();
+        this.bindSearchForm();
+    }
+
+    private async searchKeywords(keywords: string[]) {
+        const rawData = await this.getData();
+        let results: pageData[] = [];
+
+        /// Sort keywords by their length
+        keywords.sort((a, b) => {
+            return b.length - a.length
+        });
+
+        for (const item of rawData) {
+            let result = {
+                ...item,
+                preview: '',
+                matchCount: 0
+            }
+
+            let matched = false;
+
+            for (const keyword of keywords) {
+                if (keyword === '') continue;
+
+                const regex = new RegExp(escapeRegExp(replaceHTMLEnt(keyword)), 'gi');
+
+                const contentMatch = regex.exec(result.content);
+                regex.lastIndex = 0;            /// Reset regex
+
+                const titleMatch = regex.exec(result.title);
+                regex.lastIndex = 0;            /// Reset regex
+
+                if (titleMatch) {
+                    result.title = result.title.replace(regex, Search.marker);
+                }
+
+                if (titleMatch || contentMatch) {
+                    matched = true;
+                    ++result.matchCount;
+
+                    let start = 0,
+                        end = 100;
+
+                    if (contentMatch) {
+                        start = contentMatch.index - 20;
+                        end = contentMatch.index + 80
+
+                        if (start < 0) start = 0;
+                    }
+
+                    if (result.preview.indexOf(keyword) !== -1) {
+                        result.preview = result.preview.replace(regex, Search.marker);
+                    }
+                    else {
+                        if (start !== 0) result.preview += `[...] `;
+                        result.preview += `${result.content.slice(start, end).replace(regex, Search.marker)} `;
+                    }
+                }
+            }
+
+            if (matched) {
+                result.preview += '[...]';
+                results.push(result);
+            }
+        }
+
+        /** Result with more matches appears first */
+        return results.sort((a, b) => {
+            return b.matchCount - a.matchCount;
+        });
+    }
+
+    public static marker(match) {
+        return '<mark>' + match + '</mark>';
+    }
+
+    private async doSearch(keywords: string[]) {
+        const startTime = performance.now();
+
+        const results = await this.searchKeywords(keywords);
+        this.clear();
+
+        for (const item of results) {
+            this.list.append(Search.render(item));
+        }
+
+        const endTime = performance.now();
+
+        this.resultTitle.innerText = this.generateResultTitle(results.length, ((endTime - startTime) / 1000).toPrecision(1));
+    }
+
+    private generateResultTitle(resultLen, time) {
+        return this.resultTitleTemplate.replace("#PAGES_COUNT", resultLen).replace("#TIME_SECONDS", time);
+    }
+
+    public async getData() {
+        if (!this.data) {
+            /// Not fetched yet
+            const jsonURL = this.form.dataset.json;
+            this.data = await fetch(jsonURL).then(res => res.json());
+        }
+
+        return this.data;
+    }
+
+    private bindSearchForm() {
+        let lastSearch = '';
+
+        const eventHandler = (e) => {
+            e.preventDefault();
+            const keywords = this.input.value;
+
+            Search.updateQueryString(keywords, true);
+
+            if (keywords === '') {
+                return this.clear();
+            }
+
+            if (lastSearch === keywords) return;
+            lastSearch = keywords;
+
+            this.doSearch(keywords.split(' '));
+        }
+
+        this.input.addEventListener('input', eventHandler);
+        this.input.addEventListener('compositionend', eventHandler);
+    }
+
+    private clear() {
+        this.list.innerHTML = '';
+        this.resultTitle.innerText = '';
+    }
+
+    private bindQueryStringChange() {
+        window.addEventListener('popstate', (e) => {
+            this.handleQueryString()
+        })
+    }
+
+    private handleQueryString() {
+        const pageURL = new URL(window.location.toString());
+        const keywords = pageURL.searchParams.get('keyword');
+        this.input.value = keywords;
+
+        if (keywords) {
+            this.doSearch(keywords.split(' '));
+        }
+        else {
+            this.clear()
+        }
+    }
+
+    private static updateQueryString(keywords: string, replaceState = false) {
+        const pageURL = new URL(window.location.toString());
+
+        if (keywords === '') {
+            pageURL.searchParams.delete('keyword')
+        }
+        else {
+            pageURL.searchParams.set('keyword', keywords);
+        }
+
+        if (replaceState) {
+            window.history.replaceState('', '', pageURL.toString());
+        }
+        else {
+            window.history.pushState('', '', pageURL.toString());
+        }
+    }
+
+    public static render(item: pageData) {
+        return <article>
+            <a href={item.permalink}>
+                <div class="article-details">
+                    <h2 class="article-title" dangerouslySetInnerHTML={{ __html: item.title }}></h2>
+                    <secion class="article-preview" dangerouslySetInnerHTML={{ __html: item.preview }}></secion>
+                </div>
+                {item.image &&
+                    <div class="article-image">
+                        <img src={item.image} loading="lazy" />
+                    </div>
+                }
+            </a>
+        </article>;
+    }
+}
+
+declare global {
+    interface Window {
+        searchResultTitleTemplate: string;
+    }
+}
+
+window.addEventListener('load', () => {
+    setTimeout(function () {
+        const searchForm = document.querySelector('.search-form') as HTMLFormElement,
+            searchInput = searchForm.querySelector('input') as HTMLInputElement,
+            searchResultList = document.querySelector('.search-result--list') as HTMLDivElement,
+            searchResultTitle = document.querySelector('.search-result--title') as HTMLHeadingElement;
+
+        new Search({
+            form: searchForm,
+            input: searchInput,
+            list: searchResultList,
+            resultTitle: searchResultTitle,
+            resultTitleTemplate: window.searchResultTitleTemplate
+        });
+    }, 0);
+})
+
+export default Search;

exampleSite/config.toml

@@ -13,42 +13,47 @@ 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']
+        enabled = ['search', 'archives', 'tag-cloud']
         [params.widgets.archives]
             limit = 5
             ### Archives page relative URL
             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
@@ -73,6 +78,12 @@ DefaultContentLanguage = "en"                   # Theme i18n support
         url = "archives"
         weight = -70
         pre = "archives"
+    [[menu.main]]
+        identifier = "search"
+        name = "Search"
+        url = "search"
+        weight = -60
+        pre = "search"
 
 [related]
     includeNewer = true
@@ -89,4 +100,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/page/search.md

@@ -0,0 +1,8 @@
+---
+title: "Search"
+slug: "search"
+layout: "search"
+outputs:
+    - html
+    - json
+---

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/content/post/rich-content/index.md

@@ -13,14 +13,6 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 <!--more-->
 ---
 
-## Instagram Simple Shortcode
-
-{{< instagram_simple BGvuInzyFAe hidecaption >}}
-
-<br>
-
----
-
 ## YouTube Privacy Enhanced Shortcode
 
 {{< youtube ZJthWmvUzzc >}}

i18n/en.toml

@@ -5,7 +5,7 @@
     other = "Related contents"
 
 [lastUpdatedOn]
-    other ="Last updated on {{ .Count }}"
+    other ="Last updated on"
 
 [widgetArchivesTitle]
     other = "Archives"
@@ -20,4 +20,13 @@
     other = "Not Found"
 
 [notFoundSubtitle]
-    other = "This page does not exist."
+    other = "This page does not exist."
+
+[searchTitle]
+    other = "Search"
+
+[searchPlaceholder]
+    other = "Type something..."
+
+[searchResultTitle]
+    other = "#PAGES_COUNT pages (#TIME_SECONDS seconds)"

i18n/ja.toml

@@ -0,0 +1,23 @@
+[toggleMenu]
+    other = "メニューを開く・閉じる"
+    
+[relatedContents]
+    other = "関連するコンテンツ"
+
+[lastUpdatedOn]
+    other = "最終更新"
+
+[widgetArchivesTitle]
+    other = "アーカイブ"
+
+[widgetArchivesMore]
+    other = "さらに見る"
+
+[widgetTagCloudTitle]
+    other = "タグ"
+
+[notFoundTitle]
+    other = "404 Not Found"
+
+[notFoundSubtitle]
+    other = "指定されたページは存在しません。"

i18n/zh-CN.toml

@@ -5,7 +5,7 @@
     other = "相关文章"
 
 [lastUpdatedOn]
-    other ="最后更新于 {{ .Count }}"
+    other ="最后更新于"
 
 [widgetArchivesTitle]
     other = "归档"
@@ -20,4 +20,13 @@
     other = "404 错误"
 
 [notFoundSubtitle]
-    other = "页面不存在"
+    other = "页面不存在"
+
+[searchTitle]
+    other = "搜索"
+
+[searchPlaceholder]
+    other = "输入关键词..."
+
+[searchResultTitle]
+    other = "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"

layouts/_default/archives.html

@@ -2,14 +2,12 @@
 {{ define "main" }}
     {{ $categories := ($.Site.GetPage "taxonomyTerm" "categories").Pages }}
     {{ if $categories }}
-    <div class="widget">
-        <h1 class="widget-title">Categories</h1>
-        <div class="category-list">
-            <div class="article-list--tile">
-                {{ range $categories }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
-                {{ end }}
-            </div>
+    <h2 class="section-title">Categories</h2>
+    <div class="category-list">
+        <div class="article-list--tile">
+            {{ range $categories }}
+                {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "taxonomy") }}
+            {{ end }}
         </div>
     </div>
     {{ end }}
@@ -21,7 +19,7 @@
     {{ range $filtered.GroupByDate "2006" }}
     {{ $id := lower (replace .Key " " "-") }}
     <div class="archives-group" id="{{ $id }}">
-        <h3 class="archives-date"><a href="{{ $.Permalink }}#{{ $id }}">{{ .Key }}</a></h3>
+        <h2 class="archives-date section-title"><a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a></h2>
         <div class="article-list--compact">
             {{ range .Pages }}
                 {{ partial "article-list/compact" . }}

layouts/_default/baseof.html

@@ -1,8 +1,11 @@
 <!DOCTYPE html>
 <html lang="{{ .Site.LanguageCode }}">
-    {{- partial "head/head.html" . -}}
+    <head>
+        {{- partial "head/head.html" . -}}
+        {{- block "head" . -}}{{ end }}
+    </head>
     <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/_default/term.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-    <h3 class="taxonomy-type">{{ .Type | singularize  | humanize }}</h3>
+    <h3 class="taxonomy-type section-title">{{ .Type | singularize | humanize }}</h3>
     <div class="taxonomy-card">
         <div class="taxonomy-details">
             <h3 class="taxonomy-count">{{ len .Pages }} post{{ if gt (len .Pages) 1 }}s{{ end }}</h3>

layouts/index.html

@@ -15,5 +15,5 @@
 {{ end }}
 
 {{ define "right-sidebar" }}
-    {{ partialCached "sidebar/right.html" . }}
+    {{ partial "sidebar/right.html" . }}
 {{ end }}

layouts/page/search.html

@@ -0,0 +1,31 @@
+{{ define "body-class" }}template-search{{ end }}
+{{ define "head" }}
+    {{- with .OutputFormats.Get "json" -}} 
+        <link rel="preload" href="{{ .Permalink }}" as="fetch" crossorigin="anonymous">
+    {{- end -}}
+{{ end }}
+{{ define "main" }}
+<form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
+    <p>
+        <label>{{ T "searchTitle" }}</label>
+        <input name="keyword" placeholder="{{ T `searchPlaceholder` }}" />
+    </p>
+
+    <button title="Search">
+        {{ partial "helper/icon" "search" }}
+    </button>
+</form>
+
+<h3 class="search-result--title section-title"></h3>
+<div class="search-result--list article-list--compact"></div>
+
+<script>
+    window.searchResultTitleTemplate = "{{ T `searchResultTitle` }}"
+</script>
+
+{{- $opts := dict "minify" hugo.IsProduction "JSXFactory" "createElement" -}}
+{{- $searchScript := resources.Get "ts/search.tsx" | js.Build $opts -}}
+<script type="text/javascript" src="{{ $searchScript.RelPermalink }}" defer></script>
+
+{{ partialCached "footer/footer" . }}
+{{ end }}

layouts/page/search.json

@@ -0,0 +1,20 @@
+{{- $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections -}}
+{{- $notHidden := where .Site.RegularPages "Params.hidden" "!=" true -}}
+{{- $filtered := ($pages | intersect $notHidden) -}}
+
+{{- $result := slice -}}
+
+{{- range $filtered -}}
+    {{- $data := dict "title" .Title "date" .Date "permalink" .Permalink "content" (.Plain) -}}
+
+    {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
+    {{- if and $image.exists $image.resource -}}
+        {{- $thumbnail := $image.resource.Fill "120x120" -}}
+        {{- $image := dict "image" (absURL $thumbnail.Permalink) -}}
+        {{- $data = merge $data $image -}}
+    {{ end }}
+
+    {{- $result = $result | append $data -}}
+{{- end -}}
+
+{{ jsonify $result }}

layouts/partials/article-list/compact.html

@@ -1,27 +1,27 @@
 <article>
-    <div class="article-details">
-        <h2 class="article-title">
-            <a href="{{ .Permalink }}">
+    <a href="{{ .RelPermalink }}">
+        <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 := 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 }}
+            </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

@@ -2,7 +2,7 @@
 <article class="{{ if $image.exists }}has-image{{ end }}">
     {{ if $image.exists }}
         <div class="article-image">
-            <a href="{{ .Permalink }}">
+            <a href="{{ .RelPermalink }}">
                 {{ if $image.resource }}
                     {{- $thumbnail := $image.resource.Fill "800x250" -}}
                     {{- $thumbnailRetina := $image.resource.Fill "1600x500" -}}

layouts/partials/article-list/tile.html

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

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,25 +1,28 @@
 {{ $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 }}
-            {{ $term := $.Site.GetPage (printf "/categories/%s" $category) }}
+        {{ range (.GetTerms "categories") }}
             {{ if and $image.exists $image.resource }}
                 {{- $imageRaw := $image.resource | resources.Fingerprint "md5"  -}}
                 {{- $20x := $imageRaw.Fill "20x20 smart"  -}}
-                <a href="{{ $term.Permalink }}" class="color-tag"
-                    data-image="{{ $20x.RelPermalink }}" data-key="{{ $context.Slug }}" data-hash="{{ $imageRaw.Data.Integrity }}">{{ $term.Title | humanize }}</a>
+                <a href="{{ .RelPermalink }}" 
+                    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="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
             {{ end }}
         {{ end }}
     </header>
     {{ end }}
 
     <h2 class="article-title">
-        <a href="{{ .Permalink }}">
+        <a href="{{ .RelPermalink }}">
             {{- .Title -}}
         </a>
     </h2>
@@ -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/related-contents.html

@@ -1,7 +1,7 @@
-<aside class="widget related-contents--wrapper">
-    {{ $related := .Site.RegularPages.Related . | first 5 }}
+<aside class="related-contents--wrapper">
+    {{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
     {{ with $related }}
-        <h1 class="widget-title">{{ T "relatedContents" }}</h1>
+        <h2 class="section-title">{{ T "relatedContents" }}</h2>
         <div class="related-contents">
             <div class="flex article-list--tile">
                 {{ range . }}
@@ -10,4 +10,4 @@
             </div>
         </div>
     {{ end }}
-</aside>
+</aside>

layouts/partials/article/components/tags.html

@@ -1,10 +1,7 @@
-{{- $tags := .Params.Tags -}}
-{{ if $tags }}
+{{ if .Params.Tags }}
     <section class="article-tags">
-        {{ range $tag := $tags }}
-            {{ with $.Site.GetPage (printf "/tags/%s" $tag) }}
-                <a href="{{ .Permalink }}">{{ .Title | humanize }}</a>
-            {{ end }}
+        {{ range (.GetTerms "tags") }}
+            <a href="{{ .RelPermalink }}">{{ .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/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.1.0">Stack</a></b> designed by
         <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
     </section>
 </footer>

layouts/partials/head/head.html

@@ -1,22 +1,20 @@
-<head>
-    <meta charset='utf-8'>
-    <meta name='viewport' content='width=device-width, initial-scale=1'>
-    
-    {{- $description := partialCached "data/description" . .RelPermalink -}}
-    <meta name='description' content='{{ $description }}'>
+<meta charset='utf-8'>
+<meta name='viewport' content='width=device-width, initial-scale=1'>
 
-    {{- $title := partialCached "data/title" . .RelPermalink -}}
-    <title>{{ $title }}</title>
-    
-    <link rel='canonical' href='{{ .Permalink }}'>
-    
-    {{- partial "head/style.html" . -}}
-    {{- partial "head/script.html" . -}}
-    {{- partial "head/opengraph/include.html" . -}}
+{{- $description := partialCached "data/description" . .RelPermalink -}}
+<meta name='description' content='{{ $description }}'>
 
-    {{- range .AlternativeOutputFormats -}}
-        <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
-    {{- end -}}
-    
-    {{- partial "head/custom.html" . -}}
-</head>
+{{- $title := partialCached "data/title" . .RelPermalink -}}
+<title>{{ $title }}</title>
+
+<link rel='canonical' href='{{ .Permalink }}'>
+
+{{- partial "head/style.html" . -}}
+{{- partial "head/script.html" . -}}
+{{- partial "head/opengraph/include.html" . -}}
+
+{{- range .AlternativeOutputFormats -}}
+    <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
+{{- end -}}
+
+{{- partial "head/custom.html" . -}}

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

@@ -31,9 +31,9 @@
         {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
 
         <li {{ if $active }} class='current' {{ end }}>
-            <a href='{{ .URL | absLangURL }}'>
+            <a href='{{ .URL | relURL }}'>
                 {{ 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,29 +1,27 @@
 <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>
+    <h2 class="widget-title section-title">{{ T "widgetArchivesTitle" }}</h2>
 
     {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
     {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
     {{ $filtered := ($pages | intersect $notHidden) }}
     {{ $archives := $filtered.GroupByDate "2006" }}
-
-    {{ range first .Site.Params.widgets.archives.limit ($archives) }}
-        {{ $id := lower (replace .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>
-            </a> 
-        </div>
-    {{ end }}
-</section>
+    
+    <div class="widget-archive--list">
+        {{ 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 }}">
+                    {{ 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 }}
+    </div>
+</section>

layouts/partials/widget/search.html

@@ -0,0 +1,10 @@
+<form action="/search" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
+    <p>
+        <label>{{ T "searchTitle" }}</label>
+        <input name="keyword" required placeholder="{{ T `searchPlaceholder` }}" />
+    
+        <button title="Search">
+            {{ partial "helper/icon" "search" }}
+        </button>
+    </p>
+</form>

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>
+    <h2 class="widget-title section-title">{{ T "widgetTagCloudTitle" }}</h2>
 
     <div class="tagCloud-tags">
-        {{ range first .Site.Params.widgets.tagCloud.limit $tags }}
-            {{ $term := $.Site.GetPage (printf "/tags/%s" .Term) }}
-            <a href="{{ $term.Permalink }}" class="font_size_{{ .Count }}">
-                {{ $term.Title | humanize }}
+        {{ range first .Site.Params.widgets.tagCloud.limit .Site.Taxonomies.tags.ByCount }}
+            <a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">
+                {{ .Page.Title }}
             </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"