enhancement/display published date for blog posts list

src/components/blog-posts-list/blog-posts-list.js

@@ -15,7 +15,14 @@ export default class BlogPostsList extends HTMLElement {
         ${posts
           .map((post) => {
             const { title, route } = post;
-            const { coverImage, abstract = "" } = post.data;
+            const { coverImage, abstract = "", published } = post.data;
+            const date = new Date(published);
+            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";
@@ -34,6 +41,9 @@ export default class BlogPostsList extends HTMLElement {
 
                   <div class="${styles.postsListItemContentContainer}">
                     <h2 class="${styles.postsListItemContentTitle}">${title}</h2>
+                    <span class="${styles.postsListItemContentPublished}">Published: 
+                      <time datetime="${dateTime}">${displayTime}</time>
+                    </span>
                     <p class="${styles.postsListItemContentAbstract}">${abstract}</p>
                   </div>
 

src/components/blog-posts-list/blog-posts-list.module.css

@@ -47,10 +47,22 @@
 .postsListItemContentTitle {
   font-family: var(--font-primary-bold);
   font-size: var(--font-size-2);
-  display: inline-flex;
+  display: block;
   margin: 0 0 var(--size-1);
 }
 
+.postsListItemContentPublished {
+  font-size: 16px;
+  display: block;
+  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 {
   font-size: var(--font-size-1);
   line-height: var(--size-lineheight-2);
@@ -71,7 +83,10 @@
   }
 
   .postsListItemCoverImage {
-    margin: var(--size-1);
+    margin: 0 var(--size-1);
+    max-width: 12%;
+    max-height: var(--size-9);
+    min-height: var(--size-9);
   }
 }
 
@@ -82,14 +97,6 @@
     margin: 0 auto;
   }
 
-  .postsListItemCoverImage {
-    width: 20%;
-    max-width: 80px;
-    max-height: var(--size-9);
-    min-height: var(--size-9);
-    margin: var(--size-2);
-  }
-
   .postsListItemContentTitle {
     font-size: var(--font-size-3);
   }

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");