From 65a963496bc57360c32d0c6b1d0fde1fe15bbe8d Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Mon, 31 Mar 2025 15:48:06 +0800
Subject: refactor: encapsulate giscus and heatmap component

- move giscus script to comment.html
- move heatmap dependency to its component file to avoid loading it when not needed
- delete headscript partial


Former-commit-id: e2acf0e10c83acd322853aac9fab341c8d91b7f3
---
 layouts/partials/components/comment.html | 17 +++++++++++++-
 layouts/partials/components/heatmap.html |  3 +++
 layouts/partials/head.html               | 13 ++++++++++-
 layouts/partials/head/headscript.html    | 39 --------------------------------
 4 files changed, 31 insertions(+), 41 deletions(-)
 delete mode 100644 layouts/partials/head/headscript.html

diff --git a/layouts/partials/components/comment.html b/layouts/partials/components/comment.html
index f5ec95d3..b0b4ed47 100644
--- a/layouts/partials/components/comment.html
+++ b/layouts/partials/components/comment.html
@@ -28,5 +28,20 @@
     {{ if eq .Site.Language.Lang "zh" }}
     <p style="text-align:center">你也可以加入本站的 <a href="https://t.me/teaparty418" target="_blank">Telegram 群组</a>参与讨论</p>
     {{ end }}
-    <script>loadGiscus()</script>
+    <!-- giscus script -->
+    <script src="https://giscus.app/client.js"
+            data-repo="{{ .Site.Params.giscus.repo }}"
+            data-repo-id="{{ .Site.Params.giscus.repoId }}"
+            data-category="{{ .Site.Params.giscus.category }}"
+            data-category-id="{{ .Site.Params.giscus.categoryId }}"
+            data-mapping="{{ .Site.Params.giscus.mapping }}"
+            data-strict="{{ .Site.Params.giscus.strict }}"
+            data-reactions-enabled="{{ .Site.Params.giscus.reactionsEnabled }}"
+            data-emit-metadata="{{ .Site.Params.giscus.emitMetadata }}"
+            data-input-position="{{ .Site.Params.giscus.inputPosition }}"
+            data-theme="{{ .Site.Params.giscus.theme }}"
+            data-lang="{{ T "lang" }}"
+            crossorigin="anonymous"
+            async>
+    </script>
 </div>
diff --git a/layouts/partials/components/heatmap.html b/layouts/partials/components/heatmap.html
index 0152c982..ab45615e 100644
--- a/layouts/partials/components/heatmap.html
+++ b/layouts/partials/components/heatmap.html
@@ -2,6 +2,9 @@
 <div id="cal-heatmap-container">
     <div id="cal-heatmap"></div>
 </div>
+
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
 <script>
 const cal = new CalHeatmap();
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 8ae6c46f..a3e49dc5 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -10,7 +10,18 @@
 
   {{ partial "head/siteinfo" . }}
   {{ partial "head/css" . }}
-  {{ partial "head/headscript" . }}
+
+  <!-- Umami Tracking -->
+  <script>
+    if (window.location.hostname !== 'localhost') {
+      // track traffic
+      const script = document.createElement('script');
+      script.defer = true;
+      script.src = 'https://cloud.umami.is/script.js';
+      script.dataset.websiteId = 'ae8c2619-56eb-4577-ac31-9dc6ea44bda7';
+      document.head.appendChild(script);
+    }
+  </script>
 
   <!-- Extra head -->
   {{ .Site.Params.extraHead | safeHTML }}
diff --git a/layouts/partials/head/headscript.html b/layouts/partials/head/headscript.html
deleted file mode 100644
index ed68e4c8..00000000
--- a/layouts/partials/head/headscript.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<script src="https://d3js.org/d3.v7.min.js"></script>
-<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
-<script>
-/* === umami tracking === */
-if (window.location.hostname !== 'localhost') {
-  // track traffic
-  const script = document.createElement('script');
-  script.defer = true;
-  script.src = 'https://cloud.umami.is/script.js';
-  script.dataset.websiteId = 'ae8c2619-56eb-4577-ac31-9dc6ea44bda7';
-  document.head.appendChild(script);
-}
-
-/* === giscus === */
-function loadGiscus() {
-  const giscusContainer = document.querySelector('.giscus'); // Make sure this matches your Giscus container class
-  const giscusScript = document.getElementById('giscus-script');
-  if (giscusContainer && !giscusScript) {
-      const script = document.createElement('script');
-      script.id = "giscus-script";
-      script.src = 'https://giscus.app/client.js';
-      script.setAttribute('data-repo', '{{ .Site.Params.giscus.repo }}');
-      script.setAttribute('data-repo-id', '{{ .Site.Params.giscus.repoId }}');
-      script.setAttribute('data-category', '{{ .Site.Params.giscus.category }}');
-      script.setAttribute('data-category-id', '{{ .Site.Params.giscus.categoryId }}');
-      script.setAttribute('data-mapping', '{{ .Site.Params.giscus.mapping }}');
-      script.setAttribute('data-strict', '{{ .Site.Params.giscus.strict }}');
-      script.setAttribute('data-reactions-enabled', '{{ .Site.Params.giscus.reactionsEnabled }}');
-      script.setAttribute('data-emit-metadata', '{{ .Site.Params.giscus.emitMetadata }}');
-      script.setAttribute('data-input-position', '{{ .Site.Params.giscus.inputPosition }}');
-      script.setAttribute('data-theme', '{{ .Site.Params.giscus.theme }}');
-      script.setAttribute('data-lang', '{{ T "lang" }}');
-      script.crossOrigin = 'anonymous';
-      script.async = true;
-
-      document.body.appendChild(script);
-  }
-}
-</script>
-- 
cgit v1.2.3