Refactor heatmap from shortcode to partial, so it could be seamless integrated with archive.

ramsayleung · ramsayleung · commit 9a174c3e6a11 · 2025-01-07T22:57:28.000-08:00
diff --git a/content/en/about_me.md b/content/en/about_me.md
@@ -5,8 +5,6 @@ lastmod = 2022-02-23T17:23:37+08:00
 draft = false
 +++
 
-{{< heatmap >}}
-
 ## About me {#about-me}
 
 I'm Ramsay, a software engineer making a living by pressing keyboard, an amateur cook, an Emacs deadhead and Linux enthusiast.
diff --git a/content/zh/about_me_zh.md b/content/zh/about_me_zh.md
@@ -6,8 +6,6 @@ draft = false
 toc = true
 +++
 
-{{< heatmap title_text="文章日历" language="ZH" >}}
-
 ## <span class="section-num">0x0</span> 自我认知 {#自我认知}
 一个努力但平凡的人，希望做个有趣的人, work hard and be nice to people. 
 
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -1,2 +1,7 @@
 - id: highlighted_posts
   translation: "Highlighted Posts"
+- id: article_activity
+  translation: "Article Activity"
+- id: thousand_words
+  translation: "k words"
+
diff --git a/i18n/zh.yaml b/i18n/zh.yaml
@@ -1,2 +1,7 @@
 - id: highlighted_posts
   translation: "精选阅读"
+- id: article_activity
+  translation: "文章日历"
+- id: thousand_words
+  translation: "千字"
+
diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html
@@ -26,6 +26,10 @@ <h1>
   {{- end }}
 </header>
 
+<div class="heatmap-section">
+    {{ partial "heatmap.html" .}}
+</div>
+
 {{/* Get all pages */}}
 {{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
 {{- if site.Params.ShowAllPagesInArchive }}
diff --git a/layouts/partials/heatmap.html b/layouts/partials/heatmap.html
@@ -1,10 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
+<!-- Add heatmap section at the top -->
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Responsive Heatmap</title>
     <style>
+	.heatmap-section {
+	    margin-bottom: 30px;
+	}
+
 	/* Default styles */
 	.heatmap-container {
 	    display: block;
@@ -45,7 +48,7 @@
         <div>
             <div style="display: flex; justify-content: center; align-items: center">
                 <p style="margin-right: 15px; margin-bottom: 0; padding: 8px">
-                    {{ default "Article Activity" (.Get "title_text") }}
+		  {{ i18n "article_activity" }}
                 </p>
                 <select id="yearSelector">
                     <!-- Years will be dynamically added here -->
@@ -141,7 +144,6 @@
         function populatePostData() {
           var postsByDate = new Map();
           var years = new Set();
-
           {{ range ((where .Site.RegularPages "Type" "post"))  }}
               var date = {{ .Date.Format "2006-01-02" }};
               var year = {{ .Date.Format "2006" }};
@@ -163,7 +165,7 @@
               totalWordCount += wordCount;
               data.set("totalWordCount", totalWordCount);
               postsByDate.set(date, data);
-          {{- end -}}
+	    {{- end -}}
 
           years = Array.from(years).sort().reverse();
           return [postsByDate, years];
@@ -251,10 +253,10 @@
                 yearLabel: { show: false },
                 dayLabel: {
                     firstDay: 1,
-                    nameMap: {{ default "EN" (.Get "language")}}
+                    nameMap: "{{.Lang}}"
                 },
                 monthLabel: {
-                    nameMap: {{ default "EN" (.Get "language")}}
+                    nameMap: "{{.Lang}}"
                 },
                 splitLine: {
                     show: false,
@@ -268,7 +270,7 @@
                 },
                 backgroundColor: getTooltipBgColor(),
                 formatter: function (params) {
-                    const thousandWordsText = {{ default "EN" (.Get "language")}} === "EN" ? 'k words': '千字';
+                    const thousandWordsText = {{ i18n "thousand_words" }};
                     const date = params.data[0];
                     const posts = postsByDate.get(date).get("posts");
                     var content = `${date}`;
