From 59367c696c6c4b8c5a537286d778b79164824d52 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 4 Oct 2024 17:50:37 -0400
Subject: [PATCH] test cases and misc refactoring

---
 src/components/blog-posts-list/blog-posts-list.js   | 13 +++++++++----
 .../blog-posts-list/blog-posts-list.module.css      |  4 ++++
 .../blog-posts-list/blog-posts-list.spec.js         | 12 ++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/blog-posts-list/blog-posts-list.js b/src/components/blog-posts-list/blog-posts-list.js
index eae5a7f7..ecf6dfe7 100644
--- a/src/components/blog-posts-list/blog-posts-list.js
+++ b/src/components/blog-posts-list/blog-posts-list.js
@@ -17,9 +17,12 @@ export default class BlogPostsList extends HTMLElement {
             const { title, route } = post;
             const { coverImage, abstract = "", published } = post.data;
             const date = new Date(published);
-            const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth();
-            const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
-            const time = `${date.getFullYear()}.${month}.${day}`;
+            const month =
+              date.getMonth() + 1 < 10 ? `0${date.getUTCMonth() + 1}` : date.getUTCMonth() + 1;
+            const day = date.getDate() < 10 ? `0${date.getUTCDate()}` : date.getUTCDate();
+            const year = date.getFullYear();
+            const displayTime = `${year}.${month}.${day}`;
+            const dateTime = `${year}-${month}-${day}`;
             const coverBackground = coverImage ? coverImage : "/assets/greenwood-logo-leaf.svg";
             const coverBackgroundPadding =
               coverImage && coverImage !== "/assets/greenwood-logo-g.svg" ? "4px" : "14px";
@@ -38,7 +41,9 @@ export default class BlogPostsList extends HTMLElement {
 
                   <div class="${styles.postsListItemContentContainer}">
                     <h2 class="${styles.postsListItemContentTitle}">${title}</h2>
-                    <span class="${styles.postsListItemContentPublished}">Published: ${time}</span>
+                    <span class="${styles.postsListItemContentPublished}">Published: 
+                      <time datetime="${dateTime}">${displayTime}</time>
+                    </span>
                     <p class="${styles.postsListItemContentAbstract}">${abstract}</p>
                   </div>
 
diff --git a/src/components/blog-posts-list/blog-posts-list.module.css b/src/components/blog-posts-list/blog-posts-list.module.css
index fe3a379c..c91785d1 100644
--- a/src/components/blog-posts-list/blog-posts-list.module.css
+++ b/src/components/blog-posts-list/blog-posts-list.module.css
@@ -57,6 +57,10 @@
   margin: 0 0 var(--size-3) 0;
   padding: 0 0 var(--size-2) 0;
   border-bottom: 1px solid var(--color-black);
+
+  & time {
+    font-size: inherit;
+  }
 }
 
 .postsListItemContentAbstract {
diff --git a/src/components/blog-posts-list/blog-posts-list.spec.js b/src/components/blog-posts-list/blog-posts-list.spec.js
index f9918ccb..aac1659b 100644
--- a/src/components/blog-posts-list/blog-posts-list.spec.js
+++ b/src/components/blog-posts-list/blog-posts-list.spec.js
@@ -78,6 +78,18 @@ describe("Components/Blog Posts List", () => {
       });
     });
 
+    it("should have the expected published time", () => {
+      const published = list.querySelectorAll("[datetime]");
+
+      expect(published.length).to.equal(expectedBlogPosts.length);
+
+      published.forEach((time, i) => {
+        expect(time.textContent).to.equal(
+          expectedBlogPosts[i].data.published.split("T")[0].replace(/-/g, "."),
+        );
+      });
+    });
+
     it("should have the expected abstract with the right content", () => {
       const paragraphs = list.querySelectorAll("p");