update local changes

2025-04-29 12:03:31 +08:00 · 2022-03-07 12:30:05 +08:00 · 2022-03-07 12:30:05 +08:00 · 90959c505b
commit 90959c505b
parent d165621568
16 changed files with 191 additions and 93 deletions
--- a/README.md
+++ b/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) |
--- a/assets/jsconfig.json
+++ b/assets/jsconfig.json
@ -1,10 +1,10 @@
 {
-    "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-            "*": [
-                "*"
-            ]
-        },
-    }
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "*"
+   ]
+  }
+ }
 }
--- a/assets/scss/partials/base.scss
+++ b/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;
-}
-/**/
--- a/assets/scss/partials/layout/article.scss
+++ b/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);
--- a/assets/scss/variables.scss
+++ b/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";
--- a/assets/ts/main.ts
+++ b/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 => {
--- a/assets/ts/search.tsx
+++ b/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">
--- a/exampleSite/content/post/markdown-syntax/index.md
+++ b/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
--- a/go.mod
+++ b/go.mod
@ -0,0 +1,3 @@
+module github.com/CaiJimmy/hugo-theme-stack
+
+go 1.12
--- a/i18n/zh-TW.yaml
+++ b/i18n/zh-TW.yaml
@ -4,6 +4,18 @@ toggleMenu:
 darkMode:
    other: 夜晚模式

+list:
+    page:
+        one: "{{ .Count }} 個頁面"
+        other: "{{ .Count }} 個頁面"
+
+    section:
+        other: Section
+
+    subsection:
+        one: Subsection
+        other: Subsections
+
 article:
    back:
        other: 返回
@ -18,13 +30,15 @@ article:
        other: 最後更新

    readingTime:
+        one: "閱讀時間: {{ .Count }} 分鐘"
        other: "閱讀時間: {{ .Count }} 分鐘"

 notFound:
    title:
-        other: 404 錯誤
+        other: 404 錯誤:(
+
    subtitle:
-        other: 頁面不存在
+        other: 頁面並不存在:(

 widget:
    archives:
@ -43,7 +57,14 @@ search:
        other: 搜尋

    placeholder:
-        other: 輸入關鍵字...
+        other: 請輸入關鍵字...

    resultTitle:
-        other: "#PAGES_COUNT 個結果 （用時 #TIME_SECONDS 秒）"
+        other: "#PAGES_COUNT 個結果 （花了 #TIME_SECONDS 秒）"
+
+footer:
+    builtWith:
+        other: 使用 {{ .Generator }} 建造
+
+    designedBy:
+        other: 自豪的使用由 {{ .DesignedBy }} 設計的 {{ .Theme }}
--- a/layouts/partials/article/components/content.html
+++ b/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>
--- a/layouts/partials/comments/provider/giscus.html
+++ b/layouts/partials/comments/provider/giscus.html
@ -9,6 +9,7 @@
    data-reactions-enabled="{{- default 1 .reactionsEnabled -}}"
    data-emit-metadata="{{- default 0 .emitMetadata -}}"
    data-theme="{{- default `light` .lightTheme -}}"
+    data-lang="zh-TW"
    crossorigin="anonymous"
    async
 ></script>
--- a/layouts/partials/comments/provider/twikoo.html
+++ b/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 {
--- a/layouts/partials/footer/components/script.html
+++ b/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 -}}
--- a/layouts/partials/footer/footer.html
+++ b/layouts/partials/footer/footer.html
@ -1,4 +1,4 @@
-{{- $ThemeVersion := "3.6.0" -}}
+{{- $ThemeVersion := "3.7.0" -}}
 <footer class="site-footer">
    <section class="copyright">
        &copy; 
--- a/layouts/partials/sidebar/left.html
+++ b/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,7 +23,7 @@
                        {{ errorf "Failed loading avatar from %q" . }}
                    {{ end }}
                {{ end }}
-
+                </a>
                {{ with $.Site.Params.sidebar.emoji }}
                    <span class="emoji">{{ . }}</span>
                {{ end }}