release: 3.31.0

* fix(disqusjs): refactor local DisqusJS loading check for improved readability

* fix(gitalk): refactor local Gitalk loading check for improved readability

assets/ts/colorScheme.ts

@@ -8,6 +8,10 @@ class StackColorScheme {
     constructor(toggleEl: HTMLElement) {
         this.bindMatchMedia();
         this.currentScheme = this.getSavedScheme();
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches === true)
+            this.systemPreferScheme = 'dark'
+        else
+            this.systemPreferScheme = 'light';
 
         this.dispatchEvent(document.documentElement.dataset.scheme as colorScheme);
 

assets/ts/search.tsx

@@ -53,7 +53,14 @@ class Search {
         this.resultTitle = resultTitle;
         this.resultTitleTemplate = resultTitleTemplate;
 
+        /// Check if there's already value in the search input
+        if (this.input.value.trim() !== '') {
+            this.doSearch(this.input.value.split(' '));
+        }
+        else {
             this.handleQueryString();
+        }
+
         this.bindQueryStringChange();
         this.bindSearchForm();
     }

exampleSite/hugo.yaml

@@ -18,20 +18,23 @@ languages:
         title: Example Site
         weight: 1
         params:
-            description: Example description
+            sidebar:
+                subtitle: Example description
     zh-cn:
         languageName: 中文
         title: 演示站点
         weight: 2
         params:
-            description: 演示说明
+            sidebar:
+                subtitle: 演示说明
     ar:
         languageName: عربي
         languagedirection: rtl
         title: موقع تجريبي
         weight: 3
         params:
-            description: وصف تجريبي
+            sidebar:
+                subtitle: وصف تجريبي
 
 services:
     # Change it to your Disqus shortname before using

i18n/ar.yaml

@@ -68,7 +68,7 @@ search:
 
 footer:
     builtWith:
-        other: "مبني بستخدام {{ .Generator }}"
+        other: "مبني باستخدام {{ .Generator }}"
         
     designedBy:
         other:  "قالب {{ .Theme }} مصمم من {{ .DesignedBy }}"

i18n/fr.yaml

@@ -50,6 +50,9 @@ widget:
     tagCloud:
         title:
             other: Mots clés
+    categoriesCloud:
+        title:
+            other: Catégories
 
 search:
     title:

layouts/404.html

@@ -3,5 +3,43 @@
         <h1 class="article-title">{{ T "notFound.title" }}</h1>
         <h2 class="article-subtitle">{{ T "notFound.subtitle" }}</h2>
     </div>
+
+    {{- $query := first 1 (where .Site.Pages "Layout" "==" "search") -}}
+    {{- $searchPage := index $query 0 -}}
+
+    {{- with $searchPage -}}
+        <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
+            <p>
+                <label>{{ T "search.title" }}</label>
+                <input id="searchInput" name="keyword" required placeholder="{{ T `search.placeholder` }}" />
+            
+                <button title="{{ T `search.title` }}">
+                    {{ partial "helper/icon" "search" }}
+                </button>
+            </p>
+        </form>
+
+        <div class="search-result">
+            <h3 class="search-result--title section-title"></h3>
+            <div class="search-result--list article-list--compact"></div>
+        </div>
+        
+        <script>
+            window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"
+        </script>
+
+        {{- $opts := dict "minify" hugo.IsProduction "JSXFactory" "createElement" -}}
+        {{- $searchScript := resources.Get "ts/search.tsx" | js.Build $opts -}}
+        <script type="text/javascript" src="{{ $searchScript.RelPermalink }}" defer></script>
+
+        <script>
+            const wrongUrl = new URL(window.location.href);
+
+            /// Get the search keyword from the wrong URL by removing all slashes and dashes
+            const searchKeyword = wrongUrl.pathname.split(/[/|-]/).join(' ').trim();
+
+            document.getElementById('searchInput').setAttribute('value', searchKeyword);
+        </script>
+    {{- end -}}
     {{ partialCached "footer/footer" . }}
 {{ end }}

layouts/partials/article-list/compact.html

@@ -6,7 +6,7 @@
             </h2>
             <footer class="article-time">
                 <time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
-                    {{- .Date.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
+                    {{- .Date | time.Format (or .Site.Params.dateFormat.published "Jan 02, 2006") -}}
                 </time>
             </footer>
         </div>

layouts/partials/article/components/math.html

@@ -1,7 +1,8 @@
 {{- partial "helper/external" (dict "Context" . "Namespace" "KaTeX") -}}
 <script>
     window.addEventListener("DOMContentLoaded", () => {
-        renderMathInElement(document.body, {
+	const mainArticleElement = document.querySelector(".main-article");
+        renderMathInElement(mainArticleElement, {
             delimiters: [
                 { left: "$$", right: "$$", display: true },
                 { left: "$", right: "$", display: false },

layouts/partials/comments/provider/disqusjs.html

@@ -21,8 +21,12 @@
         }
 
         function lazyLoadDisqusJS() {
-            if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
-                document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
+            const excludedHosts = ["localhost", "127.0.0.1"];
+            const hostname = window.location.hostname;
+
+            if (excludedHosts.includes(hostname)) {
+                document.getElementById('disqus_thread').innerHTML =
+                    'Disqus comments not available by default when the website is previewed locally.';
                 return;
             }
 

layouts/partials/comments/provider/giscus.html

@@ -12,6 +12,7 @@
     data-input-position="{{- default `top` .inputPosition -}}"
     data-theme="{{- default `light` .lightTheme -}}"
     data-lang="{{- default `en` .lang -}}"
+    data-loading="{{- .loading -}}"
     crossorigin="anonymous"
     async
 ></script>

layouts/partials/comments/provider/gitalk.html

@@ -18,9 +18,10 @@
         proxy: {{- .proxy -}},
     });
     (function () {
-        if (
-            ["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1
-        ) {
+        const excludedHosts = ["localhost", "127.0.0.1"];
+        const hostname = window.location.hostname;
+
+        if (excludedHosts.includes(hostname)) {
             document.getElementById("gitalk-container").innerHTML =
                 "Gitalk comments not available by default when the website is previewed locally.";
             return;

layouts/partials/comments/provider/waline.html

@@ -16,7 +16,7 @@
 
 {{- with .Site.Params.comments.waline -}}
 {{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
-{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" -}}
+{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" "turnstilekey" "turnstileKey" -}}
 
 {{- range $key, $val := . -}}
     {{- if ne $val nil -}}  

layouts/partials/footer/components/script.html

@@ -1,12 +1,12 @@
 {{- partial "helper/external" (dict "Context" . "Namespace" "Vibrant") -}}
 
 {{- $opts := dict "minify" hugo.IsProduction -}}
-{{- $script := resources.Get "ts/main.ts" | js.Build $opts -}}
+{{- $script := resources.Get "ts/main.ts" | js.Build $opts | fingerprint -}}
 
 <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 -}}
+    {{- $customScript := . | js.Build $opts | fingerprint -}}
     <script type="text/javascript" src="{{ $customScript.RelPermalink }}" defer></script>
 {{- end -}}

layouts/partials/footer/footer.html

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