Merge remote-tracking branch 'upstream/canary'

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,17 +1,15 @@
 name: Bug Report
 description: File a bug report
-title: "[Bug]: "
-labels: ["bug"]
 body:
   - type: markdown
     attributes:
       value: |
-        Thanks for taking the time to fill out this bug report! Please provide as much information as possible and make sure you have checked the [documentation](https://docs.stack.jimmycai.com/).
+        Thanks for taking the time to fill out this bug report! Please provide as much information as possible and make sure you have checked the [documentation](https://stack.jimmycai.com/).
   - type: textarea
     id: what-happened
     attributes:
       label: What happened?
-      description: Also tell us, what did you expect to happen? Please be as detailed as possible, include screenshots and any other information that might help us reproduce the problem.
+      description: Also tell us, what did you expect to happen? Please be as detailed as possible, including screenshots and any other information that might help us reproduce the problem.
       placeholder: Tell us what you see!
     validations:
       required: true
@@ -55,21 +53,13 @@ body:
       label: Relevant log output
       description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
       render: shell
-  - type: markdown
-    attributes:
-      value: |
-        If the issue is not present on the [demo site](https://demo.stack.jimmycai.com), in order to better understand the problem, please provide the link to the source code of your website (not the generated HTML). 
-        Or link to a minimal reproduction of the problem if there are sensible data.
   - type: input
-    id: bug-url
+    id: minimal-reproduction-url
     attributes:
-      label: Link to the page with bug
-      placeholder: https://demo.stack.jimmycai.com
-      value: https://demo.stack.jimmycai.com
+      label: Link to Minimal Reproducible Example
+      description: | 
+        Use [CaiJimmy/hugo-theme-stack-starter](https://github.com/CaiJimmy/hugo-theme-stack-starter) to create a minimal reproduction of the problem. 
+        A minimal reproduction is required so that others can help debug your issue. If a report is vague (e.g. just a generic error message) and has no reproduction, it may be auto-closed. 
+      placeholder: https://github.com/username/your-repository
     validations:
       required: true
-  - type: input
-    id: source-repo
-    attributes:
-      label: Link to the source repository
-      placeholder: https://github.com/CaiJimmy/hugo-theme-stack

archetypes/default.md

@@ -5,7 +5,6 @@ date: {{ .Date }}
 image: 
 math: 
 license: 
-hidden: false
 comments: true
 draft: true
 ---

assets/scss/partials/article.scss

@@ -202,7 +202,6 @@
         .article-preview {
             font-size: 1.4rem;
             color: var(--card-text-color-tertiary);
-            margin-top: 10px;
             line-height: 1.5;
         }
     }

assets/scss/partials/highlight/dark.scss

@@ -11,4 +11,4 @@ $text-color: $color;
 $name-color: #a6e22e;
 $literal-color: #e6db74;
 
-@import "common.scss";
+@import "common.scss";

assets/scss/partials/layout/article.scss

@@ -282,10 +282,12 @@
         line-height: 1.428571429;
         word-break: break-all;
         padding: var(--card-padding);
+
         //  keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
+
         code {
             color: unset;
             border: none;
@@ -299,15 +301,11 @@
         padding: var(--card-padding);
         position: relative;
 
-        &:hover {
-            .copyCodeButton {
-                opacity: 1;
-            }
-        }
         // keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
+
         pre {
             margin: initial;
             padding: 0;
@@ -316,20 +314,34 @@
         }
     }
 
-    .copyCodeButton {
-        position: absolute;
-        top: calc(var(--card-padding));
-        right: calc(var(--card-padding));
-        background: var(--card-background);
-        border: none;
-        box-shadow: var(--shadow-l2);
-        border-radius: var(--tag-border-radius);
-        padding: 8px 16px;
-        color: var(--card-text-color-main);
-        cursor: pointer;
-        font-size: 14px;
-        opacity: 0;
-        transition: opacity 0.3s ease;
+    .codeblock {
+        header {
+            background-color: var(--card-background-selected);
+            padding: 5px var(--card-padding);
+            display: flex;
+            justify-content: space-between;
+            box-shadow: var(--shadow-l1);
+
+            span {
+                text-transform: uppercase;
+                font-weight: bold;
+                color: var(--card-text-color-secondary);
+            }
+        }
+
+        .codeblock-copy {
+            cursor: pointer;
+            background-color: transparent;
+            border: none;
+            padding: 8px 16px;
+            color: var(--card-text-color-secondary);
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        pre {
+            margin: 0;
+        }
     }
 
     .table-wrapper {
@@ -398,7 +410,7 @@
     /// Negative margins
     blockquote,
     figure,
-    .highlight,
+    .codeblock,
     pre,
     .video-wrapper,
     .table-wrapper,

assets/scss/partials/layout/search.scss

@@ -31,6 +31,7 @@
 
     input {
         padding: 40px 20px 20px;
+        padding-inline-end: var(--button-size);
         border-radius: var(--card-border-radius);
         background-color: var(--card-background);
         box-shadow: var(--shadow-l1);
@@ -78,5 +79,4 @@
             height: 20px;
         }
     }
-
-}
+}

assets/scss/partials/sidebar.scss

@@ -11,7 +11,6 @@
     flex-direction: column;
     flex-shrink: 0;
     align-self: stretch;
-    gap: var(--sidebar-element-separation);
     max-width: none;
     width: 100%;
     position: relative;
@@ -65,6 +64,11 @@
             }
         }
     }
+
+    .social-menu,
+    .menu {
+        margin-top: var(--sidebar-element-separation);
+    }
 }
 
 .right-sidebar {

assets/scss/partials/widgets.scss

@@ -65,3 +65,11 @@
         }
     }
 }
+
+/* Color for widget titles */
+.widget-title a.widget-link {
+    color: var(--accent-color);
+    &:hover {
+        color: var(--accent-color-darker);
+    }
+}

assets/ts/codeblock.ts

@@ -0,0 +1,28 @@
+/**
+ * Copy button for code blocks
+*/
+export default () => {
+    const copyButtons = document.querySelectorAll('.codeblock-copy');
+    copyButtons.forEach(button => {
+        const codeblockID = button.getAttribute('data-id'),
+            copyText = button.textContent,
+            copiedText = button.getAttribute('data-copied-text');
+        if (!codeblockID) return;
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            const codeblock = document.getElementById(codeblockID) as HTMLElement;
+            if (!codeblockID) return;
+            navigator.clipboard.writeText(codeblock.textContent)
+                .then(() => {
+                    button.textContent = copiedText;
+                    setTimeout(() => {
+                        button.textContent = copyText;
+                    }, 1000);
+                })
+                .catch(err => {
+                    alert(err)
+                    console.log('Something went wrong', err);
+                });
+        }, false);
+    });
+}

assets/ts/color.ts

@@ -1,63 +0,0 @@
-interface colorScheme {
-    hash: string,                        /// Regenerate color scheme when the image hash is changed
-    DarkMuted: {
-        hex: string,
-        rgb: Number[],
-        bodyTextColor: string
-    },
-    Vibrant: {
-        hex: string,
-        rgb: Number[],
-        bodyTextColor: string
-    }
-}
-
-let colorsCache: { [key: string]: colorScheme } = {};
-
-if (localStorage.hasOwnProperty('StackColorsCache')) {
-    try {
-        colorsCache = JSON.parse(localStorage.getItem('StackColorsCache'));
-    }
-    catch (e) {
-        colorsCache = {};
-    }
-}
-
-async function getColor(key: string, hash: string, imageURL: string) {
-    if (!key) {
-        /**
-         * If no key is provided, do not cache the result
-         */
-        return await Vibrant.from(imageURL).getPalette();
-    }
-
-    if (!colorsCache.hasOwnProperty(key) || colorsCache[key].hash !== hash) {
-        /**
-         * If key is provided, but not found in cache, or the hash mismatches => Regenerate color scheme
-         */
-        const palette = await Vibrant.from(imageURL).getPalette();
-
-        colorsCache[key] = {
-            hash: hash,
-            Vibrant: {
-                hex: palette.Vibrant.hex,
-                rgb: palette.Vibrant.rgb,
-                bodyTextColor: palette.Vibrant.bodyTextColor
-            },
-            DarkMuted: {
-                hex: palette.DarkMuted.hex,
-                rgb: palette.DarkMuted.rgb,
-                bodyTextColor: palette.DarkMuted.bodyTextColor
-            }
-        }
-
-        /* Save the result in localStorage */
-        localStorage.setItem('StackColorsCache', JSON.stringify(colorsCache));
-    }
-
-    return colorsCache[key];
-}
-
-export {
-    getColor
-}

assets/ts/gallery.ts

@@ -0,0 +1,92 @@
+const wrap = (figures: HTMLElement[]) => {
+    const galleryContainer = document.createElement('div');
+    galleryContainer.className = 'gallery';
+
+    const parentNode = figures[0].parentNode,
+        first = figures[0];
+
+    parentNode.insertBefore(galleryContainer, first)
+
+    for (const figure of figures) {
+        galleryContainer.appendChild(figure);
+    }
+}
+
+export default (container: HTMLElement) => {
+    /// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
+    /// because it can not detect whether image is being wrapped by a link or not
+    /// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
+    const images = container.querySelectorAll('img.gallery-image') as NodeListOf<HTMLImageElement>;
+    for (const img of Array.from(images)) {
+        /// Images are wrapped with figure tag if the paragraph has only images without texts
+        /// This is done to allow inline images within paragraphs
+        const paragraph = img.closest('p');
+
+        if (!paragraph || !container.contains(paragraph)) continue;
+
+        if (paragraph.textContent.trim() == '') {
+            /// Once we insert figcaption, this check no longer works
+            /// So we add a class to paragraph to mark it
+            paragraph.classList.add('no-text');
+        }
+
+        let isNewLineImage = paragraph.classList.contains('no-text');
+        if (!isNewLineImage) continue;
+
+        const hasLink = img.parentElement.tagName == 'A';
+
+        let el: HTMLElement = img;
+        /// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes
+        const figure = document.createElement('figure');
+        figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1');
+        figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0');
+        if (hasLink) {
+            /// Wrap <a> if it exists
+            el = img.parentElement;
+        }
+        el.parentElement.insertBefore(figure, el);
+        figure.appendChild(el);
+
+        /// Add figcaption if it exists
+        if (img.hasAttribute('alt')) {
+            const figcaption = document.createElement('figcaption');
+            figcaption.innerText = img.getAttribute('alt');
+            figure.appendChild(figcaption);
+        }
+
+        /// Wrap img tag with <a> tag if image was not wrapped by <a> tag
+        if (!hasLink) {
+            figure.className = 'gallery-image';
+
+            const a = document.createElement('a');
+            a.href = img.src;
+            a.setAttribute('target', '_blank');
+            a.setAttribute('data-pswp-width', img.width.toString());
+            a.setAttribute('data-pswp-height', img.height.toString());
+            img.parentNode.insertBefore(a, img);
+            a.appendChild(img);
+        }
+    }
+
+    const figuresEl = container.querySelectorAll('figure.gallery-image') as NodeListOf<HTMLElement>;
+    let currentGallery = [];
+    for (const figure of Array.from(figuresEl)) {
+        if (!currentGallery.length) {
+            /// First iteration
+            currentGallery = [figure];
+        }
+        else if (figure.previousElementSibling === currentGallery[currentGallery.length - 1]) {
+            /// Adjacent figures
+            currentGallery.push(figure);
+        }
+        else if (currentGallery.length) {
+            /// End gallery
+            wrap(currentGallery);
+            currentGallery = [figure];
+        }
+    }
+
+    if (currentGallery.length > 0) {
+        wrap(currentGallery);
+    }
+};

assets/ts/main.ts

@@ -5,6 +5,7 @@
 *   @website: https://jimmycai.com
 *   @link: https://github.com/CaiJimmy/hugo-theme-stack
 */
+import StackCodeBlock from "ts/codeblock";
 import { getColor } from 'ts/color';
 import menu from 'ts/menu';
 import createElement from 'ts/createElement';
@@ -25,71 +26,8 @@ let Stack = {
             setupScrollspy();
         }
 
-        /**
-         * Add linear gradient background to tile style article
-         */
-        const articleTile = document.querySelector('.article-list--tile');
-        if (articleTile) {
-            let observer = new IntersectionObserver(async (entries, observer) => {
-                entries.forEach(entry => {
-                    if (!entry.isIntersecting) return;
-                    observer.unobserve(entry.target);
-
-                    const articles = entry.target.querySelectorAll('article.has-image');
-                    articles.forEach(async articles => {
-                        const image = articles.querySelector('img'),
-                            imageURL = image.src,
-                            key = image.getAttribute('data-key'),
-                            hash = image.getAttribute('data-hash'),
-                            articleDetails: HTMLDivElement = articles.querySelector('.article-details');
-
-                        const colors = await getColor(key, hash, imageURL);
-
-                        articleDetails.style.background = `
-                        linear-gradient(0deg, 
-                            rgba(${colors.DarkMuted.rgb[0]}, ${colors.DarkMuted.rgb[1]}, ${colors.DarkMuted.rgb[2]}, 0.5) 0%, 
-                            rgba(${colors.Vibrant.rgb[0]}, ${colors.Vibrant.rgb[1]}, ${colors.Vibrant.rgb[2]}, 0.75) 100%)`;
-                    })
-                })
-            });
-
-            observer.observe(articleTile)
-        }
-
-
-        /**
-         * Add copy button to code block
-        */
-        const highlights = document.querySelectorAll('.article-content div.highlight');
-        const copyText = `Copy`,
-            copiedText = `Copied!`;
-
-        highlights.forEach(highlight => {
-            const copyButton = document.createElement('button');
-            copyButton.innerHTML = copyText;
-            copyButton.classList.add('copyCodeButton');
-            highlight.appendChild(copyButton);
-
-            const codeBlock = highlight.querySelector('code[data-lang]');
-            if (!codeBlock) return;
-
-            copyButton.addEventListener('click', () => {
-                navigator.clipboard.writeText(codeBlock.textContent)
-                    .then(() => {
-                        copyButton.textContent = copiedText;
-
-                        setTimeout(() => {
-                            copyButton.textContent = copyText;
-                        }, 1000);
-                    })
-                    .catch(err => {
-                        alert(err)
-                        console.log('Something went wrong', err);
-                    });
-            });
-        });
-
         new StackColorScheme(document.getElementById('dark-mode-toggle'));
+        StackCodeBlock();
     }
 }
 

config/_default/module.toml

@@ -0,0 +1,3 @@
+[hugoVersion]
+extended = true
+min = "0.100.0"

config/_default/params.toml

@@ -0,0 +1,52 @@
+# Theme's default configuration
+mainSections = ["post"]
+featuredImageField = "image"
+rssFullContent = true
+
+[footer]
+
+[dateFormat]
+published = "Jan 02, 2006"
+lastUpdated = "Jan 02, 2006 15:04 MST"
+
+[sidebar]
+compact = false
+
+[sidebar.avatar]
+enabled = true
+local = true
+src = "img/avatar.png"
+
+[article]
+math = false
+toc = true
+readingTime = true
+
+[article.license]
+enabled = false
+default = "Licensed under CC BY-NC-SA 4.0"
+
+[comments]
+enabled = false
+provider = "disqus"
+
+[widgets]
+homepage = []
+page = []
+
+[opengraph.twitter]
+card = "summary_large_image"
+
+[defaultImage.opengraph]
+enabled = false
+local = false
+
+[colorScheme]
+toggle = true
+default = "auto"
+
+[imageProcessing.cover]
+enabled = true
+
+[imageProcessing.content]
+enabled = true

data/external.yaml

@@ -1,8 +1,3 @@
-Vibrant:
-    - src: https://cdn.jsdelivr.net/npm/node-vibrant@3.1.6/dist/vibrant.min.js
-      integrity: sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM=
-      type: script
-
 KaTeX:
     - src: https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css
       integrity: sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI

exampleSite/README.md

@@ -1 +0,0 @@
-Example site modified from https://github.com/gohugoio/hugoBasicExample

exampleSite/config/_default/config.toml

@@ -0,0 +1,20 @@
+# Change baseurl before deploy
+baseurl = "https://demo.stack.jimmycai.com"
+languageCode = "en-us"
+paginate = 5
+title = "Hugo Theme Stack Starter"
+theme = "hugo-theme-stack"
+
+# Theme i18n support
+# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
+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
+
+# Change it to your Disqus shortname before using
+disqusShortname = "hugo-theme-stack"
+
+# GA Tracking ID
+googleAnalytics = ""

exampleSite/config/_default/languages.toml

@@ -0,0 +1,16 @@
+# Enable multilanguage site support
+[en]
+languageName = "English"
+title = "Hugo Theme Stack Example Site"
+weight = 1
+
+[zh-cn]
+languageName = "中文"
+title = "Hugo 主题 Stack 演示站点"
+weight = 2
+
+[ar]
+languageName = "عربي"
+languagedirection = "rtl"
+title = "موقع تجريبي"
+weight = 3

exampleSite/config/_default/markup.toml

@@ -0,0 +1,18 @@
+# Markdown renderer configuration
+[goldmark.renderer]
+# Set it to true if you have HTML content inside Markdown
+unsafe = false
+
+[tableOfContents]
+endLevel = 4
+ordered = true
+startLevel = 2
+
+[highlight]
+noClasses = false
+codeFences = true
+guessSyntax = true
+lineNoStart = 1
+lineNos = true
+lineNumbersInTable = true
+tabWidth = 4

exampleSite/config/_default/menu.toml

@@ -0,0 +1,20 @@
+### Custom menu
+### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
+### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
+main = []
+
+[[social]]
+identifier = "github"
+name = "GitHub"
+url = "https://github.com/CaiJimmy/hugo-theme-stack"
+
+[social.params]
+icon = "brand-github"
+
+[[social]]
+identifier = "twitter"
+name = "Twitter"
+url = "https://twitter.com"
+
+[social.params]
+icon = "brand-twitter"

exampleSite/config/_default/params.toml

@@ -0,0 +1,110 @@
+mainSections = ["post"]
+featuredImageField = "image"
+rssFullContent = true
+favicon = "img/favicon.png"
+
+[footer]
+since = 2020
+
+[dateFormat]
+published = "Jan 02, 2006"
+lastUpdated = "Jan 02, 2006 15:04 MST"
+
+[sidebar]
+emoji = "🍥"
+subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+
+[sidebar.avatar]
+enabled = true
+local = true
+src = "img/logo.jpg"
+
+[article]
+math = false
+toc = true
+readingTime = true
+
+[article.license]
+enabled = true
+default = "Licensed under CC BY-NC-SA 4.0"
+
+[comments]
+enabled = true
+provider = "disqus"
+
+[comments.disqusjs]
+
+[comments.utterances]
+issueTerm = "pathname"
+
+[comments.remark42]
+
+[comments.vssue]
+autoCreateIssue = false
+
+[comments.waline]
+emoji = ["https://unpkg.com/@waline/emojis@1.0.1/weibo"]
+requiredMeta = ["name", "email", "url"]
+
+[comments.waline.locale]
+admin = "Admin"
+
+[comments.twikoo]
+
+[comments.cactus]
+defaultHomeserverUrl = "https://matrix.cactus.chat:8448"
+serverName = "cactus.chat"
+siteName = ""
+
+[comments.giscus]
+reactionsEnabled = 1
+emitMetadata = 0
+
+[comments.gitalk]
+
+[comments.cusdis]
+
+[[widgets.homepage]]
+type = "search"
+
+[[widgets.homepage]]
+type = "archives"
+
+[widgets.homepage.params]
+limit = 5
+
+[[widgets.homepage]]
+type = "taxonomy"
+
+[widgets.homepage.params]
+limit = 10
+type = "tags"
+icon = "tag"
+
+[[widgets.homepage]]
+type = "taxonomy"
+
+[widgets.homepage.params]
+limit = 10
+type = "categories"
+icon = "categories"
+
+[[widgets.page]]
+type = "toc"
+
+[opengraph.twitter]
+card = "summary_large_image"
+
+[defaultImage.opengraph]
+enabled = false
+local = false
+
+[colorScheme]
+toggle = true
+default = "auto"
+
+[imageProcessing.cover]
+enabled = true
+
+[imageProcessing.content]
+enabled = true

exampleSite/config/_default/permalinks.toml

@@ -0,0 +1,3 @@
+# Permalinks format of each content section
+post = "/p/:slug/"
+page = "/:slug/"

exampleSite/config/_default/related.toml

@@ -0,0 +1,12 @@
+# Related contents configuration
+includeNewer = true
+threshold = 60
+toLower = false
+
+[[indices]]
+name = "tags"
+weight = 100
+
+[[indices]]
+name = "categories"
+weight = 200

exampleSite/content/post/emoji-support/index.md

@@ -1,50 +0,0 @@
-+++
-author = "Hugo Authors"
-title = "Emoji Support"
-date = "2019-03-05"
-description = "Guide to emoji usage in Hugo"
-categories = [
-    "Test"
-]
-tags = [
-    "emoji",
-]
-image = "the-creative-exchange-d2zvqp3fpro-unsplash.jpg"
-+++
-
-Emoji can be enabled in a Hugo project in a number of ways. 
-<!--more-->
-The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). 
-
-To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
-
-<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span>  <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
-<br>
-
-The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
-
-***
-
-**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
-
-{{< highlight html >}}
-.emoji {
-  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-}
-{{< /highlight >}}
-
-{{< css.inline >}}
-<style>
-.emojify {
-	font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-	font-size: 2rem;
-	vertical-align: middle;
-}
-@media screen and (max-width:650px) {
-  .nowrap {
-    display: block;
-    margin: 25px 0;
-  }
-}
-</style>
-{{< /css.inline >}}

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

@@ -42,12 +42,12 @@ Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sap
 
 The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
 
-#### Blockquote without attribution
+### Blockquote without attribution
 
 > Tiam, ad mint andaepu dandae nostion secatur sequo quae.
 > **Note** that you can use *Markdown syntax* within a blockquote.
 
-#### Blockquote with attribution
+### Blockquote with attribution
 
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
@@ -63,7 +63,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
     Bob | 27
   Alice | 23
 
-#### Inline Markdown within tables
+### Inline Markdown within tables
 
 | Italics   | Bold     | Code   |
 | --------  | -------- | ------ |
@@ -74,8 +74,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 | 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
+### Code block with backticks
 
 ```html
 <!doctype html>
@@ -90,7 +89,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 </html>
 ```
 
-#### Code block indented with four spaces
+### Code block indented with four spaces
 
     <!doctype html>
     <html lang="en">
@@ -103,21 +102,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
     </body>
     </html>
 
-#### Code block with Hugo's internal highlight shortcode
-{{< highlight html >}}
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-  <p>Test</p>
-</body>
-</html>
-{{< /highlight >}}
-
-#### Diff code block
+### Diff code block
 
 ```diff
 [dependencies.bevy]
@@ -127,21 +112,27 @@ rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
 + features = ["jpeg", "dynamic"]
 ```
 
+### One line code block
+
+```html
+<p>A paragraph</p>
+```
+
 ## List Types
 
-#### Ordered List
+### Ordered List
 
 1. First item
 2. Second item
 3. Third item
 
-#### Unordered List
+### Unordered List
 
 * List item
 * Another item
 * And another item
 
-#### Nested list
+### Nested list
 
 * Fruit
   * Apple

exampleSite/content/post/math-typesetting/index.md

@@ -37,11 +37,7 @@ In this example we will be using [KaTeX](https://katex.org/)
 
 ### Examples
 
-{{< math.inline >}}
-<p>
-Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
-</p>
-{{</ math.inline >}}
+Inline math: $\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…$
 
 Block math:
 $$

go.mod

@@ -1,3 +1,3 @@
-module github.com/CaiJimmy/hugo-theme-stack/v3
+module github.com/CaiJimmy/hugo-theme-stack/v4
 
 go 1.17

i18n/zh-cn.yaml

@@ -1,66 +1,33 @@
-toggleMenu:
-    other: 切换菜单
+toggleMenu: 切换菜单
 
-darkMode:
-    other: 深色模式
+darkMode: 深色模式
 
 article:
-    back:
-        other: 返回
-
-    tableOfContents:
-        other: 目录
-
-    relatedContent:
-        other: 相关文章
-
-    lastUpdatedOn:
-        other: 最后更新于
-
-    readingTime:
-        other: "阅读时长: {{ .Count }} 分钟"
+    back: 返回
+    tableOfContents: 目录
+    relatedContent: 相关文章
+    lastUpdatedOn: 最后更新于
+    readingTime: "阅读时长: {{ .Count }} 分钟"
 
     license:
         other: 许可证：
 
 notFound:
-    title:
-        other: 404 错误
-    subtitle:
-        other: 页面不存在
+    title: 404 错误
+    subtitle: 页面不存在
 
 widget:
     archives:
-        title:
-            other: 归档
-
-        more:
-            other: 更多
-
-    tagCloud:
-        title:
-            other: 标签云
-
-    categoriesCloud:
-        title:
-            other: 分类
+        title: 归档
+        more: 更多
 
 search:
-    title:
-        other: 搜索
-
-    placeholder:
-        other: 输入关键词...
-
-    resultTitle:
-        other: "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"
+    title: 搜索
+    placeholder: 输入关键词...
+    resultTitle: "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"
 
 footer:
-    builtWith:
-        other: Built with {{ .Generator }}
-
-    designedBy:
-        other: 主题 {{ .Theme }} 由 {{ .DesignedBy }} 设计
-
     moddedWith:
-        other: 自用修改版本 {{ .ModVariant }}
+        other: 自用修改版本 {{ .ModVariant }}
+    builtWith: Built with {{ .Generator }}
+    designedBy: 主题 {{ .Theme }} 由 {{ .DesignedBy }} 设计

i18n/zh-hk.yaml

@@ -1,73 +1,39 @@
-toggleMenu:
-    other: 切換選單
+toggleMenu: 切換選單
 
-darkMode:
-    other: 深色模式
+darkMode: 深色模式
 
 list:
     page:
         one: "第 {{ .Count }} 頁"
         other: "第 {{ .Count }} 頁"
-
-    section:
-        other: Section
-
+    section: Section
     subsection:
         one: Subsection
         other: Subsections
 
 article:
-    back:
-        other: 返回
-
-    tableOfContents:
-        other: 目錄
-
-    relatedContent:
-        other: 相關內容
-
-    lastUpdatedOn:
-        other: 上次改過於
-
+    back: 返回
+    tableOfContents: 目錄
+    relatedContent: 相關內容
+    lastUpdatedOn: 上次改過於
     readingTime:
         one: "需要 {{ .Count }} 分鐘閱讀"
         other: "需要 {{ .Count }} 分鐘閱讀"
 
 notFound:
-    title:
-        other: Not Found
-
-    subtitle:
-        other: 頁面不存在
+    title: Not Found
+    subtitle: 頁面不存在
 
 widget:
     archives:
-        title:
-            other: Archives
-
-        more:
-            other: 更多
-
-    tagCloud:
-        title:
-            other: Tags
-    categoriesCloud:
-        title:
-            other: Categories
+        title: Archives
+        more: 更多
 
 search:
-    title:
-        other: 搜尋
-
-    placeholder:
-        other: Type 關鍵字...
-
-    resultTitle:
-        other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
+    title: 搜尋
+    placeholder: Type 關鍵字...
+    resultTitle: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
 
 footer:
-    builtWith:
-        other: Built with {{ .Generator }}
-
-    designedBy:
-        other: 主題 {{ .Theme }} 由 {{ .DesignedBy }} 設計
+    builtWith: Built with {{ .Generator }}
+    designedBy: 主題 {{ .Theme }} 由 {{ .DesignedBy }} 設計

i18n/zh-tw.yaml

@@ -1,56 +1,40 @@
-toggleMenu:
-    other: 切換選單
+toggleMenu: 切換選單
 
-darkMode:
-    other: 夜晚模式
+darkMode: 夜晚模式
+
+list:
+    page:
+        one: "第 {{ .Count }} 頁"
+        other: "第 {{ .Count }} 頁"
+
+    section:
+        other: 段落
+
+    subsection:
+        one: 小節
+        other: 小節
 
 article:
-    back:
-        other: 返回
-
-    tableOfContents:
-        other: 目錄
-
-    relatedContent:
-        other: 相關文章
-
-    lastUpdatedOn:
-        other: 最後更新
-
-    readingTime:
-        other: "閱讀時間: {{ .Count }} 分鐘"
+    back: 返回
+    tableOfContents: 目錄
+    relatedContent: 相關文章
+    lastUpdatedOn: 最後更新
+    readingTime: "閱讀時間: {{ .Count }} 分鐘"
 
 notFound:
-    title:
-        other: 404 錯誤
-    subtitle:
-        other: 頁面不存在
+    title: 404 錯誤
+    subtitle: 頁面不存在
 
 widget:
     archives:
-        title:
-            other: 紀錄
-
-        more:
-            other: 更多
-
-    tagCloud:
-        title:
-            other: 標籤雲
+        title: 紀錄
+        more: 更多
 
 search:
-    title:
-        other: 搜尋
-
-    placeholder:
-        other: 輸入關鍵字...
-
-    resultTitle:
-        other: "#PAGES_COUNT 個結果 （用時 #TIME_SECONDS 秒）"
+    title: 搜尋
+    placeholder: 輸入關鍵字...
+    resultTitle: "#PAGES_COUNT 個結果 （用時 #TIME_SECONDS 秒）"
 
 footer:
-    builtWith:
-        other: 使用 {{ .Generator }} 建立
-
-    designedBy:
-        other: 主題 {{ .Theme }} 由 {{ .DesignedBy }} 設計
+    builtWith: 使用 {{ .Generator }} 建立
+    designedBy: 主題 {{ .Theme }} 由 {{ .DesignedBy }} 設計

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,20 @@
+{{- $class := .Attributes.class | default ""    -}}
+{{- $lang  := .Attributes.lang  | default .Type -}}
+<div class="codeblock">
+    <header>
+        <span class="codeblock-lang">{{ $lang }}</span>
+        <button 
+            class="codeblock-copy"
+            data-id="codeblock-id-{{ .Ordinal }}"
+            data-copied-text="{{ T `article.codeblock.copied` }}"
+        >
+            {{ T `article.codeblock.copy` }}
+        </button>
+    </header>
+    <code id="codeblock-id-{{ .Ordinal }}" style="display:none;">{{- .Inner -}}</code>
+    {{- if transform.CanHighlight $lang -}}
+    <div class="{{ $class }}">{{- highlight .Inner $lang .Options -}}</div>
+    {{- else -}}
+    <pre><code class="{{ $class }}">{{- .Inner -}}</code></pre>
+    {{- end -}}
+</div>

layouts/_default/archives.html

@@ -16,10 +16,8 @@
     </header>
 
     {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
-    {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
-    {{ $filtered := ($pages | intersect $notHidden) }}
-
-    {{ range $filtered.GroupByDate "2006" }}
+    
+    {{ range $pages.GroupByDate "2006" }}
     {{ $id := lower (replace .Key " " "-") }}
     <div class="archives-group" id="{{ $id }}">
         <h2 class="archives-date section-title"><a href="{{ $.RelPermalink }}#{{ $id }}">{{ .Key }}</a></h2>

layouts/_default/list.html

@@ -11,7 +11,7 @@
         <div class="section-card">
             <div class="section-details">
                 <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
-                <h1 class="section-term">{{ .Title }}</h1>
+                <h1 class="section-term">{{ default (strings.FirstUpper .Type) .Title }}</h1>
                 {{ with .Params.description }}
                     <h2 class="section-description">{{ . }}</h2>
                 {{ end }}
@@ -25,7 +25,7 @@
                         {{- $Width := $image.resource.Width -}}
                         {{- $Height := $image.resource.Height -}}
     
-                        {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                        {{- if .Page.Site.Params.imageProcessing.cover.enabled -}}
                             {{- $thumbnail := $image.resource.Fill "120x120" -}}
                             {{- $Permalink = $thumbnail.RelPermalink -}}
                             {{- $Width = $thumbnail.Width -}}

layouts/_default/rss.xml

@@ -6,7 +6,6 @@
 {{- else -}}
 {{- $pages = $pctx.Pages -}}
 {{- end -}}
-{{- $pages := where $pages "Params.hidden" "!=" true -}}
 {{- $limit := .Site.Config.Services.RSS.Limit -}}
 {{- if ge $limit 1 -}}
 {{- $pages = $pages | first $limit -}}

layouts/index.html

@@ -1,9 +1,6 @@
 {{ define "main" }}
     {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
-    {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
-    {{ $filtered := ($pages | intersect $notHidden) }}
-    {{ $pag := .Paginate ($filtered) }}
-
+    {{ $pag := .Paginate ($pages) }}
     <section class="article-list">
         {{ range $index, $element := $pag.Pages }}
             {{ partial "article-list/default" . }}

layouts/page/search.json

@@ -1,16 +1,13 @@
 {{- $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections -}}
-{{- $notHidden := where .Site.RegularPages "Params.hidden" "!=" true -}}
-{{- $filtered := ($pages | intersect $notHidden) -}}
-
 {{- $result := slice -}}
 
-{{- range $filtered -}}
+{{- range $pages -}}
     {{- $data := dict "title" .Title "date" .Date "permalink" .Permalink "content" (.Plain) -}}
 
     {{- $image := partialCached "helper/image" (dict "Context" . "Type" "articleList") .RelPermalink "articleList" -}}
     {{- if $image.exists -}}
         {{- $imagePermalink := "" -}}
-        {{- if and $image.resource (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+        {{- if and $image.resource .Page.Site.Params.imageProcessing.cover.enabled -}}
             {{- $thumbnail := $image.resource.Fill "120x120" -}}
             {{- $imagePermalink = (absURL $thumbnail.Permalink) -}}
         {{- else -}}

layouts/partials/article-list/compact.html

@@ -19,7 +19,7 @@
                     {{- $Width := $image.resource.Width -}}
                     {{- $Height := $image.resource.Height -}}
 
-                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                    {{- if .Page.Site.Params.imageProcessing.cover.enabled -}}
                         {{- $thumbnail := $image.resource.Fill "120x120" -}}
                         {{- $Permalink = $thumbnail.RelPermalink -}}
                         {{- $Width = $thumbnail.Width -}}

layouts/partials/article/components/header.html

@@ -9,7 +9,7 @@
                     {{- $Height := $image.resource.Height -}}
                     {{- $Srcset := "" -}}
                     
-                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                    {{- if .Page.Site.Params.imageProcessing.cover.enabled -}}
                         {{- $thumbnail := $image.resource.Resize "800x" -}}
                         {{- $thumbnailRetina := $image.resource.Resize "1600x" -}}
                         {{- $Srcset = printf "%s 800w, %s 1600w" $thumbnail.RelPermalink $thumbnailRetina.RelPermalink -}}

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

@@ -1,4 +1,4 @@
-{{ $related := (where (.Site.RegularPages.Related .) "Params.hidden" "!=" true) | first 5 }}
+{{ $related := .Site.RegularPages.Related . | first 5 }}
 {{ with $related }}
 <aside class="related-content--wrapper">
     <h2 class="section-title">{{ T "article.relatedContent" }}</h2>

layouts/partials/data/title.html

@@ -6,9 +6,7 @@
 
     <!-- Build paginator -->
     {{ $pages := where .Site.RegularPages "Section" "in" .Site.Params.mainSections }}
-    {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
-    {{ $filtered := ($pages | intersect $notHidden) }}
-    {{ $pag := .Paginate ($filtered) }}
+    {{ $pag := .Paginate ($pages) }}
 
     {{ if .Paginator.HasPrev }}
         <!-- Paginated. Append page number to title -->
@@ -20,8 +18,7 @@
     <!-- Taxonomy page -->
 
     <!-- Build paginator -->
-    {{ $notHidden := where .Pages "Params.hidden" "!=" true }}
-    {{ $pag := .Paginate ($notHidden) }}
+    {{ $pag := .Paginate .Pages }}
 
     <!-- {TAXONOMY_TYPE}: {TAXONOMY_TERM} -->
     {{ $title = slice (title .Data.Singular) ": " $title }}

layouts/partials/footer/components/script.html

@@ -1,5 +1,3 @@
-{{- partial "helper/external" (dict "Context" . "Namespace" "Vibrant") -}}
-
 {{- $opts := dict "minify" hugo.IsProduction -}}
 {{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}
 

layouts/partials/footer/footer.html

@@ -1,4 +1,4 @@
-{{- $ThemeVersion := "3.20.0" -}}
+{{- $ThemeVersion := "4.0.0-alpha.1" -}}
 <footer class="site-footer">
     <section class="copyright">
         &copy; 

layouts/partials/head/colorScheme.html

@@ -1,5 +1,5 @@
-{{- $defaultColorScheme := default "auto" .Site.Params.colorScheme.default -}}
-{{- if not (default false .Site.Params.colorScheme.toggle) -}}
+{{- $defaultColorScheme := .Site.Params.colorScheme.default -}}
+{{- if not .Site.Params.colorScheme.toggle -}}
     {{/* If toggle is disabled, force default scheme */}}
     <script>
         (function() {

layouts/partials/head/head.html

@@ -19,7 +19,12 @@
 {{- end -}}
 
 {{ with .Site.Params.favicon }}
-    <link rel="shortcut icon" href="{{ . }}" />
+    {{ $favicon := resources.Get . }}
+    {{ if $favicon }}
+        <link rel="shortcut icon" href="{{ $favicon.RelPermalink }}" />
+    {{ else }}
+        {{ errorf "Failed loading favicon from %q" . }}
+    {{ end }}
 {{ end }}
 
 {{- template "_internal/google_analytics.html" . -}}

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

@@ -11,6 +11,6 @@
 
 {{- $image := partialCached "helper/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" -}}
 {{- if $image.exists -}}
-    <meta name="twitter:card" content="{{ default `summary_large_image` .Site.Params.opengraph.twitter.card }}">
+    <meta name="twitter:card" content="{{ .Site.Params.opengraph.twitter.card }}">
     <meta name="twitter:image" content='{{ absURL $image.permalink }}' />
 {{- end -}}

layouts/partials/sidebar/left.html

@@ -7,7 +7,7 @@
 
     <header>
         {{ with .Site.Params.sidebar.avatar }}
-            {{ if (default true .enabled) }}
+            {{ if .enabled }}
             <figure class="site-avatar">
                 <a href="{{ .Site.BaseURL | relLangURL }}">
                 {{ if not .local }}
@@ -88,7 +88,7 @@
                 </li>
             {{ end }}
             
-            {{ if (default false .Site.Params.colorScheme.toggle) }}
+            {{ if .Site.Params.colorScheme.toggle }}
                 <li id="dark-mode-toggle">
                     {{ partial "helper/icon" "toggle-left" }}
                     {{ partial "helper/icon" "toggle-right" }}

layouts/partials/widget/archives.html

@@ -7,12 +7,12 @@
         <div class="widget-icon">
             {{ partial "helper/icon" "infinity" }}
         </div>
-        <h2 class="widget-title section-title">{{ T "widget.archives.title" }}</h2>
+        <h2 class="widget-title section-title">
+            <a class="widget-link" href="{{ $archivesPage.RelPermalink }}">{{ T "widget.archives.title" }}</a>
+        </h2>
 
         {{ $pages := where $context.Site.RegularPages "Type" "in" $context.Site.Params.mainSections }}
-        {{ $notHidden := where $context.Site.RegularPages "Params.hidden" "!=" true }}
-        {{ $filtered := ($pages | intersect $notHidden) }}
-        {{ $archives := $filtered.GroupByDate "2006" }}
+        {{ $archives := $pages.GroupByDate "2006" }}
         
         <div class="widget-archive--list">
             {{ range $index, $item := first (add $limit 1) ($archives) }}

layouts/partials/widget/taxonomy.html

@@ -0,0 +1,32 @@
+{{- $query := first 1 (where (where .Context.Site.Pages "Kind" "taxonomy") "Type" .Params.type) -}}
+{{- $context := .Context -}}
+{{- $limit := default 10 .Params.limit -}}
+{{- $hideInTaxonomyPage := default true .Params.hideInTaxonomyPage -}}
+{{- if $query -}}
+    {{- $taxonomyPage := index $query 0 -}}
+    {{- $isTaxonomyPage := eq .Context $taxonomyPage -}}
+    {{- if not (and $isTaxonomyPage $hideInTaxonomyPage) -}}
+        <section class="widget tagCloud">
+            <div class="widget-icon">
+                {{- partial "helper/icon" (default "tag" .Params.icon) -}}
+            </div>
+            <h2 class="widget-title section-title">
+                <a class="widget-link" href="{{ $taxonomyPage.RelPermalink }}">
+                    {{- default $taxonomyPage.Title .Params.title -}}
+                </a>
+            </h2>
+
+            <div class="tagCloud-tags">
+                {{- $pages := index $context.Site.Taxonomies .Params.type -}}
+                {{- $pagesSorted := $pages.ByCount -}}
+                {{- range first $limit $pagesSorted -}}
+                    <a href="{{ .Page.RelPermalink }}">
+                        {{- .Page.Title -}}
+                    </a>
+                {{- end -}}
+            </div>
+        </section>
+    {{- end -}}
+{{- else -}}
+    {{- warnf "Taxonomy [%s] not found." .Params.type -}}
+{{- end -}}

theme.toml

@@ -20,7 +20,7 @@ features = [
     "search",
 ]
 
-min_version = "0.87.0"
+min_version = "0.100.0"
 
 [author]
 name = "Jimmy Cai"