From d055d70ba4b5da70fc8581da6a61e8ec44a3e99e Mon Sep 17 00:00:00 2001
From: Charles Chin <eallions@gmail.com>
Date: Wed, 31 Jan 2024 02:43:15 +0800
Subject: [PATCH] feat: giscus data loading lazy (#1172)

---
 assets/js/lib/giscus.js                                        | 1 +
 exampleSite/config/_default/params.toml                        | 1 +
 .../content/posts/theme-documentation-basics/index.en.md       | 3 +--
 .../content/posts/theme-documentation-basics/index.zh-cn.md    | 1 +
 layouts/partials/comment.html                                  | 1 +
 5 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/assets/js/lib/giscus.js b/assets/js/lib/giscus.js
index 2a0e3d6ca..8043ff3d7 100644
--- a/assets/js/lib/giscus.js
+++ b/assets/js/lib/giscus.js
@@ -14,6 +14,7 @@ if (window.config?.comment?.giscus) {
   script.setAttribute('data-theme', window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme)
   script.setAttribute('data-lang', giscusConfig.dataLang)
   script.setAttribute('data-strict', giscusConfig.dataStrict)
+  script.setAttribute('data-loading', giscusConfig.dataLoading)
   script.crossOrigin = 'anonymous'
   script.async = true
   document.getElementById('giscus').appendChild(script)
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index a23406290..7737bdf76 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -451,6 +451,7 @@ cacheRemoteImages = false
       lightTheme = "light"
       darkTheme = "dark"
       dataLang = "en"
+      dataLoading = "lazy"
     # artalk comment config (https://artalk.js.org/guide/frontend/config.html)
     # artalk comment 评论系统设置 (https://artalk.js.org/guide/frontend/config.html)
     [page.comment.artalk]
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
index 754f784ab..bcac0fe01 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -691,6 +691,7 @@ Please open the code block below to view the complete sample configuration :(far
         lightTheme = "light"
         darkTheme = "dark"
         dataLang = "en"
+        dataLoading = "lazy"
       # {{< link "https://artalk.js.org/" "artalk" >}} comment config
       [params.page.comment.artalk]
         enable = false
@@ -1066,8 +1067,6 @@ In `assets/css/_custom.scss`, you can add some css style code to customize the s
 | Ukrainian            | `uk`      | `uk`                  | :(far fa-square fa-fw):       |
 | Traditional Chinese  | `zh-tw`   | `zh-tw`               | :(far fa-square fa-fw):       |
 
-
-
 ### Basic Configuration
 
 After learning [how Hugo handle multilingual websites](https://gohugo.io/content-management/multilingual), define your languages in your [site configuration](#site-configuration).
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
index 17845b493..5c74ca140 100644
--- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -695,6 +695,7 @@ hugo
         lightTheme = "light"
         darkTheme = "dark"
         dataLang = "zh-CN"
+        dataLoading = "lazy"
       # {{< link "https://artalk.js.org/" "artalk" >}} 评论系统设置
       [params.page.comment.artalk]
         enable = false
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
index 2879d32a7..1d89080a7 100644
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@@ -322,6 +322,7 @@
             {{- $commentConfig = $giscus.lightTheme | default "light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.darkTheme | default "dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.dataLang | default "en" | dict "dataLang" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataLoading | default "lazy" | dict "dataLoading" | dict "giscus" | merge $commentConfig -}}
             {{- $options := dict "targetPath" "js/giscus.min.js" "minify" true -}}
             {{- $js := resources.Get "js/lib/giscus.js" | js.Build $options -}}
             {{- $_ := $js.RelPermalink -}}