refactor: better encapsulation of heatmap and pagefind

move initializers of both components into its own file


Former-commit-id: ed628a0a4983dd0b21030b365558b514d7ac6d1f

3 files changed, 38 insertions, 44 deletions

diff --git a/layouts/partials/components/heatmap.html b/layouts/partials/components/heatmap.html
index 719538a2..0152c982 100644
--- a/layouts/partials/components/heatmap.html
+++ b/layouts/partials/components/heatmap.html
@@ -2,7 +2,38 @@
 <div id="cal-heatmap-container">
     <div id="cal-heatmap"></div>
 </div>
-<script>initCalHeatmap();</script>
+<script>
+const cal = new CalHeatmap();
+
+// Calculate the date 6 months ago
+const startDate = new Date();
+startDate.setMonth(startDate.getMonth() - 12);
+
+// Render the heatmap
+cal.paint({
+  domain: {
+    type: 'month',
+  },
+  subDomain: { type: 'day' },
+  scale: {
+      color: {
+        range: ['#eee', 'black'],
+        type: 'linear',
+        domain: [0, 6000],
+      },
+    },
+  date: {
+    timezone: 'Asia/Shanghai',
+    start: startDate,
+  },
+  data: {
+    source: '/cal-heatmap.json', // 指定数据源
+    x: d => new Date(d.date), // 提取日期字段并转换为 Date 对象
+    y: d => d.value, // 提取数值字段
+    defaultValue: 0, // 缺失数据的默认值
+  },
+});
+</script>
 <style>
 .ch-container{display:block}.ch-container,.ch-domain,.ch-domain-container,.ch-domain-container-animation-wrapper{overflow:visible}.ch-domain-container.in-transition .ch-domain-container-animation-wrapper{overflow:hidden}.ch-domain-bg{fill:transparent}.ch-domain-text{fill:currentColor;font-size:10px}.ch-subdomain{overflow:visible}.ch-subdomain-bg{fill:#ededed}.ch-subdomain-bg.highlight{stroke:#444;stroke-width:1px}.ch-subdomain-bg:hover{stroke:#000;stroke-width:1px}.ch-subdomain-text{font-size:8px;pointer-events:none}[data-theme=dark] .ch-subdomain-bg{fill:#2d333b}[data-theme=dark] .ch-subdomain-bg.highlight{stroke:#768390}[data-theme=dark] .ch-subdomain-bg:hover{stroke:#636e7b}#ch-plugin-legend>svg{background:transparent;color:currentColor}#ch-tooltip{background:#222;border-radius:2px;box-shadow:2px 2px 2px rgba(0,0,0,.2);box-sizing:border-box;color:#bbb;display:none;font-size:12px;line-height:1.4;padding:5px 10px;text-align:center}#ch-tooltip[data-show]{display:block}#ch-tooltip-arrow,#ch-tooltip-arrow:before{background:inherit;height:8px;position:absolute;width:8px}#ch-tooltip-arrow{visibility:hidden}#ch-tooltip-arrow:before{content:"";transform:rotate(45deg);visibility:visible}#ch-tooltip[data-popper-placement^=top]>#ch-tooltip-arrow{bottom:-4px;margin-left:-4px}#ch-tooltip[data-popper-placement^=bottom]>#ch-tooltip-arrow{margin-left:-4px;top:-4px}#ch-tooltip[data-popper-placement^=left]>#ch-tooltip-arrow{right:-4px}#ch-tooltip[data-popper-placement^=right]>#ch-tooltip-arrow{left:-4px}#ch-tooltip[data-theme=dark]{background:#636e7b;color:#cdd9e5}    #cal-heatmap-container {
         display: flex;
diff --git a/layouts/partials/components/pagefind.html b/layouts/partials/components/pagefind.html
index 80b810c9..fb031ace 100644
--- a/layouts/partials/components/pagefind.html
+++ b/layouts/partials/components/pagefind.html
@@ -1,3 +1,7 @@
 <!-- Pagefind Search -->
-<div id="search"></div>
-<script>window.addEventListener('DOMContentLoaded', () => initPagefind());</script>
+<div id="pagefind"></div>
+<script>
+window.addEventListener('DOMContentLoaded', () => {
+  new PagefindUI({ element: "#pagefind", showSubResults: true });
+});
+</script>
diff --git a/layouts/partials/head/headscript.html b/layouts/partials/head/headscript.html
index 1dec4c13..ed68e4c8 100644
--- a/layouts/partials/head/headscript.html
+++ b/layouts/partials/head/headscript.html
@@ -11,42 +11,6 @@ if (window.location.hostname !== 'localhost') {
   document.head.appendChild(script);
 }
 
-/* === cal-heatmap Initializing Method */
-
-function initCalHeatmap() {
-  // Initialize CalHeatmap
-  const cal = new CalHeatmap();
-
-  // Calculate the date 6 months ago
-  const startDate = new Date();
-  startDate.setMonth(startDate.getMonth() - 12);
-
-  // Render the heatmap
-  cal.paint({
-    domain: {
-      type: 'month',
-    },
-    subDomain: { type: 'day' },
-    scale: {
-        color: {
-          range: ['#eee', 'black'],
-          type: 'linear',
-          domain: [0, 6000],
-        },
-      },
-    date: {
-      timezone: 'Asia/Shanghai',
-      start: startDate,
-    },
-    data: {
-      source: '/cal-heatmap.json', // 指定数据源
-      x: d => new Date(d.date), // 提取日期字段并转换为 Date 对象
-      y: d => d.value, // 提取数值字段
-      defaultValue: 0, // 缺失数据的默认值
-    },
-  });
-}
-
 /* === giscus === */
 function loadGiscus() {
   const giscusContainer = document.querySelector('.giscus'); // Make sure this matches your Giscus container class
@@ -72,9 +36,4 @@ function loadGiscus() {
       document.body.appendChild(script);
   }
 }
-
-/* == Pagefind === */
-function initPagefind() {
-  new PagefindUI({ element: "#search", showSubResults: true });
-}
 </script>