release: 3.7.0

* feat: table can't scroll & delete scrollbar style for Chromium

* Undo some line breaks

* Add a table with overflow to exampleSite

.devcontainer/Dockerfile

@@ -0,0 +1,31 @@
+# Update the NODE_VERSION arg in docker-compose.yml to pick a Node version: 10, 12, 14
+ARG NODE_VERSION=14
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${NODE_VERSION}
+
+# VARIANT can be either 'hugo' for the standard version or 'hugo_extended' for the extended version.
+ARG VARIANT=hugo
+# VERSION can be either 'latest' or a specific version number
+ARG VERSION=latest
+
+# Download Hugo
+RUN apt-get update && apt-get install -y ca-certificates openssl git curl && \
+    rm -rf /var/lib/apt/lists/* && \
+    case ${VERSION} in \
+    latest) \
+    export VERSION=$(curl -s https://api.github.com/repos/gohugoio/hugo/releases/latest | grep "tag_name" | awk '{print substr($2, 3, length($2)-4)}') ;;\
+    esac && \
+    echo ${VERSION} && \
+    wget -O ${VERSION}.tar.gz https://github.com/gohugoio/hugo/releases/download/v${VERSION}/${VARIANT}_${VERSION}_Linux-64bit.tar.gz && \
+    tar xf ${VERSION}.tar.gz && \
+    mv hugo /usr/bin/hugo
+
+# Hugo dev server port
+EXPOSE 1313
+
+# [Optional] Uncomment this section to install additional OS packages you may want.
+#
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install more global node packages
+# RUN sudo -u node npm install -g <your-package-list-here>

.devcontainer/devcontainer.json

@@ -0,0 +1,45 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.202.3/containers/hugo
+{
+	"name": "Hugo (Community)",
+	"build": {
+		"dockerfile": "Dockerfile",
+		"args": {
+			// Update VARIANT to pick hugo variant.
+			// Example variants: hugo, hugo_extended
+			// Rebuild the container if it already exists to update.
+			"VARIANT": "hugo_extended",
+			// Update VERSION to pick a specific hugo version.
+			// Example versions: latest, 0.73.0, 0,71.1
+			// Rebuild the container if it already exists to update.
+			"VERSION": "latest",
+			// Update NODE_VERSION to pick the Node.js version: 12, 14
+			"NODE_VERSION": "14",
+		}
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": {
+		"html.format.templating": true,
+	},
+	
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"bungcip.better-toml",
+		"davidanson.vscode-markdownlint"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		1313
+	],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "uname -a",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node",
+	"features": {
+		"golang": "latest"
+	}
+}

.gitignore

@@ -0,0 +1,3 @@
+public
+resources
+assets/jsconfig.json

README.md

@@ -5,7 +5,7 @@
 
 ## Demo
 
-[Example Site](https://theme-stack.jimmycai.com/)
+[Example Site](https://demo.stack.jimmycai.com/)
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a2d2807a-a905-4bcb-97da-8da8d847da3d/deploy-status)](https://app.netlify.com/sites/hugo-theme-stack/deploys)
 
@@ -35,7 +35,10 @@ It's necessary to use **Hugo Extended ≥ 0.87.0**.
 
 ## Installation
 
-Clone / Download this repository to `theme` folder, and edit your site config following `exampleSite/config.yaml`.
+* Route 1: Clone / Download this repository to `theme` folder
+* Route 2: Turn your site into a hugo module and add this theme as a module dependency
+
+ Edit your site config following `exampleSite/config.yaml`.
 
 *Note: Remove `config.toml` if there is one in the site folder.*
 
@@ -77,4 +80,4 @@ Some references that I took while building this theme:
 | Project | Licence|
 | ------- | ------|
 | [artchen/hexo-theme-element](https://github.com/artchen/hexo-theme-element) | [MIT](https://github.com/artchen/hexo-theme-element/blob/master/LICENSE) |
-| [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) | [MIT](https://github.com/MunifTanjim/minimo/blob/master/LICENSE) |
+| [MunifTanjim/minimo](https://github.com/MunifTanjim/minimo) | [MIT](https://github.com/MunifTanjim/minimo/blob/master/LICENSE) |

assets/icons/brand-github.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" 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" fill="none"/>
+  <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+</svg>
+
+

assets/icons/brand-twitter.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" 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" fill="none"/>
+  <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+</svg>
+
+

assets/jsconfig.json

@@ -6,5 +6,7 @@
                 "*"
             ]
         },
+        "lib": ["es2020", "dom"],
+        "jsx": "preserve"
     }
 }

assets/scss/partials/base.scss

@@ -23,17 +23,3 @@ body {
     scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 /**/
-
-/* scrollbar styles for Chromium */
-::-webkit-scrollbar {
-    height: auto;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar-thumb);
-}
-
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-/**/

assets/scss/partials/highlight/light.scss

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

assets/scss/partials/layout/article.scss

@@ -71,7 +71,8 @@
                 text-transform: unset;
             }
 
-            .article-copyright, .article-lastmod {
+            .article-copyright,
+            .article-lastmod {
                 a {
                     color: var(--body-text-color);
                 }
@@ -359,6 +360,12 @@
         }
     }
 
+    .table-wrapper {
+        padding: 0 var(--card-padding);
+        overflow-x: auto;
+        display: block;
+    }
+
     table {
         width: 100%;
         border-collapse: collapse;
@@ -407,9 +414,10 @@
     /// Negative margins
     blockquote,
     figure,
-    .gallery,
     pre,
+    .gallery,
     .video-wrapper,
+    .table-wrapper,
     .s_video_simple {
         margin-left: calc((var(--card-padding)) * -1);
         margin-right: calc((var(--card-padding)) * -1);

assets/scss/partials/menu.scss

@@ -201,3 +201,18 @@
         }
     }
 }
+
+.social-menu {
+    list-style: none;
+    padding: 0%;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        stroke: var(--body-text-color);
+        stroke-width: 1.33;
+    }
+}

assets/scss/variables.scss

@@ -8,6 +8,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 }
 
 [data-scheme="dark"] {
+    color-scheme: dark;
     --pre-text-color: #f8f8f2;
     --pre-background-color: #272822;
     @import "partials/highlight/dark.scss";

assets/ts/main.ts

@@ -58,7 +58,7 @@ let Stack = {
         /**
          * Add copy button to code block
         */
-        const codeBlocks = document.querySelectorAll('.article-content .highlight');
+        const codeBlocks = document.querySelectorAll('.article-content > div.highlight');
         const copyText = `Copy`,
             copiedText = `Copied!`;
         codeBlocks.forEach(codeBlock => {

assets/ts/search.tsx

@@ -8,6 +8,11 @@ interface pageData {
     matchCount: number
 }
 
+interface match {
+    start: number,
+    end: number
+}
+
 /**
  * Escape HTML tags as HTML entities
  * Edited from:
@@ -53,79 +58,131 @@ class Search {
         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
+    /**
+     * Processes search matches
+     * @param str original text
+     * @param matches array of matches
+     * @param ellipsis whether to add ellipsis to the end of each match
+     * @param charLimit max length of preview string
+     * @param offset how many characters before and after the match to include in preview
+     * @returns preview string
+     */
+    private static processMatches(str: string, matches: match[], ellipsis: boolean = true, charLimit = 140, offset = 20): string {
+        matches.sort((a, b) => {
+            return a.start - b.start;
         });
 
+        let i = 0,
+            lastIndex = 0,
+            charCount = 0;
+
+        const resultArray: string[] = [];
+
+        while (i < matches.length) {
+            const item = matches[i];
+
+            /// item.start >= lastIndex (equal only for the first iteration)
+            /// because of the while loop that comes after, iterating over variable j
+
+            if (ellipsis && item.start - offset > lastIndex) {
+                resultArray.push(`${replaceHTMLEnt(str.substring(lastIndex, lastIndex + offset))} [...] `);
+                resultArray.push(`${replaceHTMLEnt(str.substring(item.start - offset, item.start))}`);
+                charCount += offset * 2;
+            }
+            else {
+                /// If the match is too close to the end of last match, don't add ellipsis
+                resultArray.push(replaceHTMLEnt(str.substring(lastIndex, item.start)));
+                charCount += item.start - lastIndex;
+            }
+
+            let j = i + 1,
+                end = item.end;
+
+            /// Include as many matches as possible
+            /// [item.start, end] is the range of the match
+            while (j < matches.length && matches[j].start <= end) {
+                end = Math.max(matches[j].end, end);
+                ++j;
+            }
+
+            resultArray.push(`<mark>${replaceHTMLEnt(str.substring(item.start, end))}</mark>`);
+            charCount += end - item.start;
+
+            i = j;
+            lastIndex = end;
+
+            if (ellipsis && charCount > charLimit) break;
+        }
+
+        /// Add the rest of the string
+        if (lastIndex < str.length) {
+            let end = str.length;
+            if (ellipsis) end = Math.min(end, lastIndex + offset);
+
+            resultArray.push(`${replaceHTMLEnt(str.substring(lastIndex, end))}`);
+
+            if (ellipsis && end != str.length) {
+                resultArray.push(` [...]`);
+            }
+        }
+
+        return resultArray.join('');
+    }
+
+    private async searchKeywords(keywords: string[]) {
+        const rawData = await this.getData();
+        const results: pageData[] = [];
+
+        const regex = new RegExp(keywords.filter((v, index, arr) => {
+            arr[index] = escapeRegExp(v);
+            return v.trim() !== '';
+        }).join('|'), 'gi');
+
         for (const item of rawData) {
+            const titleMatches: match[] = [],
+                contentMatches: match[] = [];
+
             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)} `;
-                    }
-                }
+            const contentMatchAll = item.content.matchAll(regex);
+            for (const match of Array.from(contentMatchAll)) {
+                contentMatches.push({
+                    start: match.index,
+                    end: match.index + match[0].length
+                });
             }
 
-            if (matched) {
-                result.preview += '[...]';
-                results.push(result);
+            const titleMatchAll = item.title.matchAll(regex);
+            for (const match of Array.from(titleMatchAll)) {
+                titleMatches.push({
+                    start: match.index,
+                    end: match.index + match[0].length
+                });
             }
+
+            if (titleMatches.length > 0) result.title = Search.processMatches(result.title, titleMatches, false);
+            if (contentMatches.length > 0) {
+                result.preview = Search.processMatches(result.content, contentMatches);
+            }
+            else {
+                /// If there are no matches in the content, use the first 140 characters as preview
+                result.preview = replaceHTMLEnt(result.content.substring(0, 140));
+            }
+
+            result.matchCount = titleMatches.length + contentMatches.length;
+            if (result.matchCount > 0) results.push(result);
         }
 
-        /** Result with more matches appears first */
+        /// 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();
 
@@ -150,6 +207,11 @@ class Search {
             /// Not fetched yet
             const jsonURL = this.form.dataset.json;
             this.data = await fetch(jsonURL).then(res => res.json());
+            const parser = new DOMParser();
+
+            for (const item of this.data) {
+                item.content = parser.parseFromString(item.content, 'text/html').body.innerText;
+            }
         }
 
         return this.data;
@@ -160,7 +222,7 @@ class Search {
 
         const eventHandler = (e) => {
             e.preventDefault();
-            const keywords = this.input.value;
+            const keywords = this.input.value.trim();
 
             Search.updateQueryString(keywords, true);
 
@@ -225,7 +287,7 @@ class Search {
             <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>
+                    <section class="article-preview" dangerouslySetInnerHTML={{ __html: item.preview }}></section>
                 </div>
                 {item.image &&
                     <div class="article-image">

config.yaml

@@ -0,0 +1,147 @@
+module:
+    hugoVersion:
+        extended: true
+        min: "0.87.0"
+
+params:
+    mainSections:
+        - post
+    featuredImageField: image
+    rssFullContent: true
+    favicon:
+
+    footer:
+        since:
+        customText:
+
+    dateFormat:
+        published: Jan 02, 2006
+        lastUpdated: Jan 02, 2006 15:04 MST
+
+    sidebar:
+        emoji:
+        subtitle:
+        avatar:
+            enabled: true
+            local: true
+            src: img/avatar.png
+
+    article:
+        math: false
+        toc: true
+        readingTime: true
+        license:
+            enabled: false
+            default: Licensed under CC BY-NC-SA 4.0
+
+    comments:
+        enabled: false
+        provider: disqus
+
+        disqusjs:
+            shortname:
+            apiUrl:
+            apiKey:
+            admin:
+            adminLabel:
+
+        utterances:
+            repo:
+            issueTerm: pathname
+            label:
+
+        remark42:
+            host:
+            site:
+            locale:
+
+        vssue:
+            platform:
+            owner:
+            repo:
+            clientId:
+            clientSecret:
+            autoCreateIssue: false
+
+        # Waline client configuration see: https://waline.js.org/en/reference/client.html
+        waline:
+            serverURL:
+            lang:
+            visitor:
+            avatar:
+            emoji:
+                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
+            requiredMeta:
+                - name
+                - email
+                - url
+            placeholder:
+            locale:
+                admin: Admin
+
+        twikoo:
+            envId:
+            region:
+            path:
+            lang:
+
+        giscus:
+            repo:
+            repoID:
+            category:
+            categoryID:
+            mapping:
+            lightTheme:
+            darkTheme:
+            reactionsEnabled: 1
+            emitMetadata: 0
+
+        gitalk:
+            owner:
+            admin:
+            repo:
+            clientID:
+            clientSecret:
+
+        cusdis:
+            host:
+            id:
+
+    widgets:
+        enabled:
+            - search
+            - archives
+            - tag-cloud
+
+        archives:
+            limit: 5
+
+        tagCloud:
+            limit: 10
+
+    opengraph:
+        twitter:
+            # Your Twitter username
+            site:
+
+            # Available values: summary, summary_large_image
+            card: summary_large_image
+
+    defaultImage:
+        opengraph:
+            enabled: false
+            local: false
+            src:
+
+    colorScheme:
+        # Display toggle
+        toggle: true
+
+        # Available values: auto, light, dark
+        default: auto
+
+    imageProcessing:
+        cover:
+            enabled: true
+        content:
+            enabled: true

debug.sh

@@ -0,0 +1 @@
+cd exampleSite && hugo server --gc --themesDir=../..

exampleSite/.gitignore

@@ -22,6 +22,9 @@ _testmain.go
 *.exe
 *.test
 
-/public
-/themes
+public
+themes
+resources
+
+assets/jsconfig.json
 .DS_Store

exampleSite/config.yaml

@@ -11,9 +11,13 @@ disqusShortname: hugo-theme-stack
 googleAnalytics:
 
 # Theme i18n support
-# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de, nl, it
+# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk
 DefaultContentLanguage: en
 
+# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
+# This will make .Summary and .WordCount behave correctly for CJK languages.
+hasCJKLanguage: false
+
 permalinks:
     post: /p/:slug/
     page: /:slug/
@@ -111,6 +115,17 @@ params:
             reactionsEnabled: 1
             emitMetadata: 0
 
+        gitalk:
+            owner: 
+            admin:  
+            repo: 
+            clientID: 
+            clientSecret: 
+        
+        cusdis:
+            host: 
+            id: 
+
     widgets:
         enabled:
             - search
@@ -159,10 +174,23 @@ menu:
           name: Home
           url: /
           weight: -100
-          pre: home
           params:
               ### For demonstration purpose, the home link will be open in a new tab
               newTab: true
+              icon: home
+    
+    social:
+        - identifier: github
+          name: GitHub
+          url: https://github.com/CaiJimmy/hugo-theme-stack
+          params:
+            icon: brand-github
+            
+        - identifier: twitter
+          name: Twitter
+          url: https://twitter.com
+          params:
+            icon: brand-twitter
 
 related:
     includeNewer: true
@@ -176,6 +204,10 @@ related:
           weight: 200
 
 markup:
+    goldmark:
+        renderer:
+            ## Set to true if you have HTML content inside Markdown
+            unsafe: false
     tableOfContents:
         endLevel: 4
         ordered: true

exampleSite/content/page/about/index.md

@@ -11,7 +11,8 @@ lastmod: '2020-10-09'
 menu:
     main: 
         weight: -90
-        pre: user
+        params:
+            icon: user
 ---
 
 Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.

exampleSite/content/page/archives/index.md

@@ -6,5 +6,6 @@ slug: "archives"
 menu:
     main:
         weight: -70
-        pre: archives
+        params: 
+            icon: archives
 ---

exampleSite/content/page/links/index.md

@@ -0,0 +1,37 @@
+---
+title: Links
+links:
+  - title: GitHub
+    description: GitHub is the world's largest software development platform.
+    website: https://github.com
+    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+  - title: TypeScript
+    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
+    website: https://www.typescriptlang.org
+    image: ts-logo-128.jpg
+menu:
+    main: 
+        weight: -50
+        params:
+            icon: link
+
+comments: false
+---
+
+To use this feature, add `links` section to frontmatter.
+
+This page's frontmatter:
+
+```yaml
+links:
+  - title: GitHub
+    description: GitHub is the world's largest software development platform.
+    website: https://github.com
+    image: https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png
+  - title: TypeScript
+    description: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
+    website: https://www.typescriptlang.org
+    image: ts-logo-128.jpg
+```
+
+`image` field accepts both local and external images.

exampleSite/content/page/search/index.md

@@ -8,5 +8,6 @@ outputs:
 menu:
     main:
         weight: -60
-        pre: search
+        params: 
+            icon: search
 ---

exampleSite/content/post/markdown-syntax/index.md

@@ -69,6 +69,10 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 | --------  | -------- | ------ |
 | *italics* | **bold** | `code` |
 
+| A                                                        | B                                                                                                             | C                                                                                                                                    | D                                                 | E                                                          | F                                                                    |
+|----------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|------------------------------------------------------------|----------------------------------------------------------------------|
+| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. | Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus | Proin sit amet velit nec enim imperdiet vehicula. | Ut bibendum vestibulum quam, eu egestas turpis gravida nec | Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien |
+
 ## Code Blocks
 
 #### Code block with backticks
@@ -113,6 +117,16 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 {{< /highlight >}}
 
+#### Diff code block
+
+```diff
+[dependencies.bevy]
+git = "https://github.com/bevyengine/bevy"
+rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
+- features = ["dynamic"]
++ features = ["jpeg", "dynamic"]
+```
+
 ## List Types
 
 #### Ordered List

exampleSite/content/post/rich-content/index.md

@@ -32,3 +32,7 @@ Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-manageme
 ## Vimeo Simple Shortcode
 
 {{< vimeo_simple 48912912 >}}
+
+## bilibilibi Shortcode
+
+{{< bilibili av498363026 >}}

go.mod

@@ -0,0 +1,3 @@
+module github.com/CaiJimmy/hugo-theme-stack
+
+go 1.12

i18n/de.yaml

@@ -17,23 +17,37 @@ list:
         other: Unterabschnitte
 
 article:
+    back:
+        other: Zurück
+
+    tableOfContents:
+        other: Inhaltsverzeichnis
+
     relatedContents:
         other: Verwandte Inhalte
+
     lastUpdatedOn:
         other: Zuletzt aktualisiert am
 
+    readingTime:
+        one: "{{ .Count }} Minute Lesezeit"
+        other: "{{ .Count }} Minuten Lesezeit"
+
 notFound:
     title:
         other: Seite nicht gefunden
+
     subtitle:
-        other: Diese Seite existiert nicht.
+        other: Diese Seite existiert nicht
 
 widget:
     archives:
         title:
             other: Archiv
+
         more:
             other: Weitere
+
     tagCloud:
         title:
             other: Schlagwörter
@@ -41,13 +55,16 @@ widget:
 search:
     title:
         other: Suche
+
     placeholder:
         other: Etwas tippen...
+
     resultTitle:
-        other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
+        other: "#PAGES_COUNT Seiten (#TIME_SECONDS Sekunden)"
 
 footer:
     builtWith:
         other: Erstellt mit {{ .Generator }}
+
     designedBy:
         other: Theme {{ .Theme }} gestaltet von {{ .DesignedBy }}

i18n/el.yaml

@@ -0,0 +1,70 @@
+toggleMenu:
+    other: Εναλλαγή Μενού
+
+darkMode:
+    other: Σκοτεινό θέμα
+
+list:
+    page:
+        one: "{{ .Count }} σελιδα"
+        other: "{{ .Count }} σελιδες"
+
+    section:
+        other: Ενότητα
+
+    subsection:
+        one: Υποενότητα
+        other: Υποενότητες
+
+article:
+    back:
+        other: Πισω
+
+    tableOfContents:
+        other: Πινακας περιεχομενων
+
+    relatedContents:
+        other: Σχετικο περιεχομενο
+
+    lastUpdatedOn:
+        other: Τελευταια τροποποιηση στις
+
+    readingTime:
+        one: "{{ .Count }} λεπτό ανάγνωσης"
+        ### Seems that there's no need to add 's' even if it's plural in English
+        other: "{{ .Count }} λεπτά ανάγνωσης"
+
+notFound:
+    title:
+        other: Δε βρέθηκε
+    subtitle:
+        other: Η σελίδα δε βρέθηκε.
+
+widget:
+    archives:
+        title:
+            other: Αρχειο
+
+        more:
+            other: Περισσότερα
+
+    tagCloud:
+        title:
+            other: Tags
+
+search:
+    title:
+        other: Αναζήτηση
+
+    placeholder:
+        other: Πληκτρολογήστε κάτι...
+
+    resultTitle:
+        other: "#PAGES_COUNT σελιδες (#TIME_SECONDS δευτερολεπτα)"
+
+footer:
+    builtWith:
+        other: Δημιουργήθηκε με τη χρήση {{ .Generator }}
+
+    designedBy:
+        other: Το θέμα {{ .Theme }} σχεδιάστηκε από το {{ .DesignedBy }}

i18n/en.yaml

@@ -30,15 +30,15 @@ article:
         other: Last updated on
 
     readingTime:
-        one: "{{ .Count }} min read"
-        ### Seems that there's no need to add 's' even if it's plural in English
-        other: "{{ .Count }} min read"
+        one: "{{ .Count }} minute read"
+        other: "{{ .Count }} minute read"
 
 notFound:
     title:
         other: Not Found
+
     subtitle:
-        other: This page does not exist.
+        other: This page does not exist
 
 widget:
     archives:

i18n/es.yaml

@@ -17,14 +17,26 @@ list:
         other: Subsecciones
 
 article:
+    back:
+        other: Volver
+
+    tableOfContents:
+        other: Tabla de contenido
+
     relatedContents:
         other: Contenidos relacionados
+
     lastUpdatedOn:
         other: Última vez actualizado
 
+    readingTime:
+        one: "{{ .Count }} minuto a leer"
+        other: "{{ .Count }} minutos a leer"
+
 notFound:
     title:
         other: No Encontrado
+
     subtitle:
         other: Esta página no existe
 
@@ -32,8 +44,10 @@ widget:
     archives:
         title:
             other: Archivo
+
         more:
             other: Más
+
     tagCloud:
         title:
             other: Etiquetas
@@ -41,13 +55,16 @@ widget:
 search:
     title:
         other: Búsqueda
+
     placeholder:
         other: Teclea algo...
+
     resultTitle:
         other: "#PAGES_COUNT páginas en (#TIME_SECONDS segundos)"
 
 footer:
     builtWith:
         other: Creado con {{ .Generator }}
+
     designedBy:
         other: Tema {{ .Theme }} diseñado por {{ .DesignedBy }}

i18n/fr.yaml

@@ -29,6 +29,10 @@ article:
     lastUpdatedOn:
         other: Dernière mise à jour le
 
+    readingTime:
+        one: "{{ .Count }} minute de lecture"
+        other: "{{ .Count }} minutes de lecture"
+
 notFound:
     title:
         other: Page non trouvée

i18n/ko.yaml

@@ -1,15 +1,42 @@
 toggleMenu:
     other: 메뉴 여닫기
 
+darkMode:
+    other: 다크 모드
+
+list:
+    page:
+        one: "{{ .Count }} 페이지"
+        other: "{{ .Count }} 페이지"
+
+    section:
+        other: 섹션
+
+    subsection:
+        one: 서브섹션
+        other: 서브섹션
+
 article:
+    back:
+        other: 뒤로가기
+
+    tableOfContents:
+        other: 목차
+        
     relatedContents:
         other: 관련 글
+        
     lastUpdatedOn:
         other: "마지막 수정: "
+        
+    readingTime:
+        one: "{{ .Count }} 분 정도"
+        other: "{{ .Count }} 분 정도"
 
 notFound:
     title:
         other: 찾을 수 없음
+        
     subtitle:
         other: 페이지를 찾을 수 없습니다.
 
@@ -19,6 +46,7 @@ widget:
             other: 보관함
         more:
             other: 더보기
+            
     tagCloud:
         title:
             other: 태그
@@ -26,8 +54,10 @@ widget:
 search:
     title:
         other: 검색
+        
     placeholder:
         other: 검색어를 입력하세요...
+        
     resultTitle:
         other: "#PAGES_COUNT 페이지 (#TIME_SECONDS 초)"
 

i18n/pt-BR.yaml

@@ -17,11 +17,22 @@ list:
         other: Subseções
 
 article:
+    back:
+        other: Voltar
+
+    tableOfContents:
+        other: Índice
+
     relatedContents:
-        other: Conteúdos Relacionados
+        other: Conteúdo relacionado
+
     lastUpdatedOn:
         other: Última atualização em
 
+    readingTime:
+        one: "{{ .Count }} minuto de leitura"
+        other: "{{ .Count }} minutos de leitura"
+
 notFound:
     title:
         other: Não Encontrado

i18n/th.yaml

@@ -0,0 +1,70 @@
+toggleMenu:
+    other: สลับเมนู
+
+darkMode:
+    other: ธีมมืด
+
+list:
+    page:
+        one: "{{ .Count }} หน้า"
+        other: "{{ .Count }} หน้า"
+
+    section:
+        other: หมวดหมู่
+
+    subsection:
+        one: หมวดหมู่ย่อย
+        other: หมวดหมู่ย่อยอื่นๆ
+
+article:
+    back:
+        other: กลับไป
+
+    tableOfContents:
+        other: สารบัญ
+
+    relatedContents:
+        other: เนื้อหาคล้ายคลึงกัน
+
+    lastUpdatedOn:
+        other: อัปเดตล่าสุดเมื่อ
+
+    readingTime:
+        one: "น่าจะใช้เวลา {{ .Count }} นาทีในการอ่าน"
+        other: "น่าจะใช้เวลา {{ .Count }} นาทีในการอ่าน"
+
+notFound:
+    title:
+        other: ไม่พบหัวข้อ
+
+    subtitle:
+        other: ไม่พบหน้านี้ในระบบ
+
+widget:
+    archives:
+        title:
+            other: เนื้อหาที่เก็บถาวรแล้ว
+
+        more:
+            other: อื่นๆ นอกจากนี้
+
+    tagCloud:
+        title:
+            other: แท็ก
+
+search:
+    title:
+        other: ค้นหา
+
+    placeholder:
+        other: พิมพ์เพื่อค้นหา ...
+
+    resultTitle:
+        other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
+
+footer:
+    builtWith:
+        other: ถูกสร้างด้วย {{ .Generator }}
+
+    designedBy:
+        other: ธีม {{ .Theme }} ออกแบบโดย {{ .DesignedBy }}

i18n/uk.yaml

@@ -0,0 +1,71 @@
+toggleMenu:
+    other: Показати меню
+
+darkMode:
+    other: Темна тема
+
+list:
+    page:
+        one: "{{ .Count }} сторінка"
+        few: "{{ .Count }} сторінки"
+        other: "{{ .Count }} сторінок"
+
+    section:
+        other: Секція
+
+    subsection:
+        one: Підсекція
+        other: Підсекції
+
+article:
+    back:
+        other: Назад
+
+    tableOfContents:
+        other: Зміст
+
+    relatedContents:
+        other: Схожі матеріали
+
+    lastUpdatedOn:
+        other: Востаннє оновлено
+
+    readingTime:
+        one: "Час читання: {{ .Count }} хв"
+        other: "Час читання: {{ .Count }} хв"
+
+notFound:
+    title:
+        other: Не знайдено
+
+    subtitle:
+        other: Ця сторінка не існує
+
+widget:
+    archives:
+        title:
+            other: Архіви
+
+        more:
+            other: Більше
+
+    tagCloud:
+        title:
+            other: Теґи
+
+search:
+    title:
+        other: Пошук
+
+    placeholder:
+        other: Напишіть що-небудь...
+
+    resultTitle:
+        other: "#PAGES_COUNT сторінок (#TIME_SECONDS секунд)"
+
+footer:
+    builtWith:
+        other: Створено з {{ .Generator }}
+
+    designedBy:
+        other: Тема {{ .Theme }}, дизайн {{ .DesignedBy }}

i18n/zh-TW.yaml

@@ -0,0 +1,49 @@
+toggleMenu:
+    other: 切換選單
+
+darkMode:
+    other: 夜晚模式
+
+article:
+    back:
+        other: 返回
+
+    tableOfContents:
+        other: 目錄
+
+    relatedContents:
+        other: 相關文章
+
+    lastUpdatedOn:
+        other: 最後更新
+
+    readingTime:
+        other: "閱讀時間: {{ .Count }} 分鐘"
+
+notFound:
+    title:
+        other: 404 錯誤
+    subtitle:
+        other: 頁面不存在
+
+widget:
+    archives:
+        title:
+            other: 紀錄
+
+        more:
+            other: 更多
+
+    tagCloud:
+        title:
+            other: 標籤雲
+
+search:
+    title:
+        other: 搜尋
+
+    placeholder:
+        other: 輸入關鍵字...
+
+    resultTitle:
+        other: "#PAGES_COUNT 個結果 （用時 #TIME_SECONDS 秒）"

layouts/_default/single.html

@@ -15,9 +15,13 @@
 {{ define "main" }}
     {{ partial "article/article.html" . }}
 
+    {{ if .Params.links }}
+        {{ partial "article/components/links" . }}
+    {{ end }}
+
     {{ partial "article/components/related-contents" . }}
      
-    {{ if or (not (isset .Params "comments")) (eq .Params.comments "true")}} 
+    {{ if not (eq .Params.comments false) }}
         {{ partial "comments/include" . }}
     {{ end }}
 
@@ -29,7 +33,7 @@
 {{ define "left-sidebar" }}
     {{ if (.Scratch.Get "hasTOC") }}
         <div id="article-toolbar">
-            <a href="{{ .Site.BaseURL }}" class="back-home">
+            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
                 {{ (resources.Get "icons/back.svg").Content | safeHTML }}
                 <span>{{ T "article.back" }}</span>
             </a>
@@ -54,4 +58,4 @@
             </section>
         </aside>
     {{ end }}
-{{ end }}
+{{ end }}

layouts/partials/article-list/compact.html

@@ -29,6 +29,7 @@
                     <img src="{{ $Permalink }}" 
                         width="{{ $Width }}"
                         height="{{ $Height }}" 
+                        alt="{{ .Title }}"
                         loading="lazy">
                 {{ else }}
                     <img src="{{ $image.permalink }}" loading="lazy" alt="Featured image of post {{ .Title }}" />

layouts/partials/article-list/tile.html

@@ -20,8 +20,9 @@
                     <img src="{{ $Permalink }}" 
                         width="{{ $Width }}" 
                         height="{{ $Height }}" 
-                        loading="lazy" 
-                        data-key="{{ .context.Slug }}" 
+                        loading="lazy"
+                        alt="Featured image of post {{ .context.Title }}"
+                        {{ with .context.Slug }}data-key="{{ . }}" {{ end }}
                         data-hash="{{ $imageRaw.Data.Integrity }}">
                 {{ else }}
                     <img src="{{ $image.permalink }}" loading="lazy" data-key="{{ .context.Slug }}" data-hash="{{ $image.permalink }}"/>

layouts/partials/article/components/content.html

@@ -1,3 +1,5 @@
 <section class="article-content">
-    {{ .Content }}
+    <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
+    {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
+    {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
 </section>

layouts/partials/article/components/links.html

@@ -0,0 +1,26 @@
+<div class="article-list--compact links">
+    {{ range $i, $link := .Params.links }}
+        <article>
+            <a href="{{ $link.website }}" target="_blank" rel="noopener">
+                <div class="article-details">
+                    <h2 class="article-title">
+                        {{- $link.title -}}
+                    </h2>
+                    <footer class="article-time">
+                        {{ with $link.description }}
+                            {{ . }}
+                        {{ else }}
+                            {{ $link.website }}
+                        {{ end }}
+                    </footer>
+                </div>
+        
+                {{ with $link.image }}
+                    <div class="article-image">
+                        <img src="{{ . }}" loading="lazy">
+                    </div>
+                {{ end }}
+            </a>
+        </article>
+    {{ end }}
+</div>

layouts/partials/comments/provider/cusdis.html

@@ -0,0 +1,21 @@
+{{- $host := default "https://cusdis.com" .Site.Params.comments.cusdis.host -}}
+<div id="cusdis_thread"
+    data-host="{{ $host }}"
+    data-app-id="{{ .Site.Params.comments.cusdis.id }}"
+    data-page-id="{{ .File.UniqueID }}"
+    data-page-url="{{ .Permalink }}"
+    data-page-title="{{ .Title }}"></div>
+<script async defer src="{{ $host }}/js/cusdis.es.js"></script>
+
+<script>
+    function setCusdisTheme(theme) {
+        let cusdis = document.querySelector('#cusdis_thread iframe');
+        if (cusdis) {
+            window.CUSDIS.setTheme(theme)
+        }
+    }
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        setCusdisTheme(e.detail)
+    })
+</script>

layouts/partials/comments/provider/gitalk.html

@@ -0,0 +1,30 @@
+{{- with .Site.Params.comments.gitalk -}}
+<div id="gitalk-container"></div>
+<link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.18.0/js/md5.min.js"></script>
+<script>
+    const gitalk = new Gitalk({
+        clientID: "{{- .clientID -}}",
+        clientSecret: "{{- .clientSecret -}}",
+        repo: "{{- .repo -}}",
+        owner: "{{- .owner -}}",
+        admin: ["{{- .admin -}}"],
+        distractionFreeMode: false, // Facebook-like distraction free mode
+        id: md5(location.pathname), // Max Location.pathname Legth:75  https://github.com/gitalk/gitalk/issues/102
+    });
+    (function () {
+        if (
+            ["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1
+        ) {
+            document.getElementById("gitalk-container").innerHTML =
+                "Gitalk comments not available by default when the website is previewed locally.";
+            return;
+        }
+        gitalk.render("gitalk-container");
+    })();
+</script>
+{{ end }}

layouts/partials/comments/provider/twikoo.html

@@ -1,4 +1,4 @@
-<script src="//cdn.jsdelivr.net/npm/twikoo@1.4.3/dist/twikoo.all.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/twikoo@1.4.15/dist/twikoo.all.min.js"></script>
 <div id="tcomment"></div>
 <style>
     .twikoo {

layouts/partials/footer/components/script.html

@@ -3,4 +3,10 @@
 {{- $opts := dict "minify" hugo.IsProduction -}}
 {{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}
 
-<script type="text/javascript" src="{{ $script.RelPermalink }}" defer></script>
+<script type="text/javascript" src="{{ $script.RelPermalink }}" defer></script>
+
+{{- with resources.Get "ts/custom.ts" -}}
+    {{/* Place your custom script in HUGO_SITE_FOLDER/assets/ts/custom.ts */}}
+    {{- $customScript := . | js.Build $opts -}}
+    <script type="text/javascript" src="{{ $customScript.RelPermalink }}" defer></script>
+{{- end -}}

layouts/partials/footer/footer.html

@@ -1,4 +1,4 @@
-{{- $ThemeVersion := "3.2.0" -}}
+{{- $ThemeVersion := "3.7.0" -}}
 <footer class="site-footer">
     <section class="copyright">
         &copy; 

layouts/partials/head/style.html

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

layouts/partials/sidebar/left.html

@@ -9,6 +9,7 @@
         {{ with .Site.Params.sidebar.avatar }}
             {{ if (default true .enabled) }}
             <figure class="site-avatar">
+                <a href="{{ .Site.BaseURL | relLangURL }}">
                 {{ if not .local }}
                     <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
                 {{ else }}
@@ -22,15 +23,35 @@
                         {{ errorf "Failed loading avatar from %q" . }}
                     {{ end }}
                 {{ end }}
-
+                </a>
                 {{ with $.Site.Params.sidebar.emoji }}
                     <span class="emoji">{{ . }}</span>
                 {{ end }}
             </figure>
             {{ end }}
         {{ end }}
-        <h1 class="site-name"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
+        
+        <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
         <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
+
+        {{- with .Site.Menus.social -}}
+            <ol class="social-menu">
+                {{ range . }}
+                    <li>
+                        <a 
+                            href='{{ .URL }}'
+                            {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
+                            {{ with .Name }}title="{{ . }}"{{ end }}
+                        >
+                            {{ $icon := default "link" .Params.Icon }}
+                            {{ with $icon }}
+                                {{ partial "helper/icon" . }}
+                            {{ end }}
+                        </a>
+                    </li>
+                {{ end }}
+            </ol>
+        {{- end -}}
     </header>
 
     <ol class="menu" id="main-menu">
@@ -39,9 +60,13 @@
         {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
 
         <li {{ if $active }} class='current' {{ end }}>
-            <a href='{{ .URL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
+            <a href='{{ .URL | relLangURL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
+                {{ $icon := default .Pre .Params.Icon }}
                 {{ if .Pre }}
-                    {{ partial "helper/icon" .Pre }}
+                    {{ warnf "Menu item [%s] is using [pre] field to set icon, please use [params.icon] instead.\nMore information: https://docs.stack.jimmycai.com/configuration/custom-menu.html" .URL }}
+                {{ end }}
+                {{ with $icon }}
+                    {{ partial "helper/icon" . }}
                 {{ end }}
                 <span>{{- .Name -}}</span>
             </a>

layouts/shortcodes/bilibili.html

@@ -13,7 +13,7 @@
 {{ end }}
 
 <div class="video-wrapper">
-    <iframe src="//player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
+    <iframe src="https://player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
             scrolling="no"
             frameborder="no"
             framespacing="0"

layouts/shortcodes/tencent.html

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

layouts/shortcodes/video.html

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

theme.toml

@@ -6,7 +6,7 @@ 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://github.com/CaiJimmy/hugo-theme-stack"
-demosite = "https://theme-stack.jimmycai.com"
+demosite = "https://demo.stack.jimmycai.com"
 
 tags = ["blog", "responsive", "clean", "light", "dark", "personal"]
 
@@ -20,7 +20,7 @@ features = [
     "search",
 ]
 
-min_version = "0.78.0"
+min_version = "0.87.0"
 
 [author]
 name = "Jimmy Cai"