refactor: encapsulate heatmap component

2 files changed, 15 insertions, 6 deletions

diff --git a/layouts/partials/components/heatmap.html b/layouts/partials/components/heatmap.html
new file mode 100644
index 00000000..269e7f52
--- /dev/null
+++ b/layouts/partials/components/heatmap.html
@@ -0,0 +1,14 @@
+<!-- Post Word-count Heatmap -->
+<div id="cal-heatmap-container">
+    <div id="cal-heatmap"></div>
+</div>
+<script>initCalHeatmap();</script>
+<style>
+    #cal-heatmap-container {
+        display: flex;
+        width: 100%;
+        overflow-x: auto;
+        justify-content: flex-end;
+        margin: 1rem 0;
+    }
+</style>
diff --git a/layouts/section/posts.html b/layouts/section/posts.html
index 8dd142f7..ebc7d0cd 100644
--- a/layouts/section/posts.html
+++ b/layouts/section/posts.html
@@ -3,12 +3,7 @@
       {{ partial "header.html" . }}
       <div id="posts-archive" class="posts-list">
 
-        <!-- Post Word-count Heatmap -->
-        <div id="cal-heatmap-container">
-            <div id="cal-heatmap"></div>
-        </div>
-        <script>initCalHeatmap();</script>
-
+        {{ partial "components/heatmap.html" . }}
         {{ partial "components/pagefind.html" . }}
 
         <!-- Post Archive List -->