Add card subtitle for createdDate

diff --git a/script.js b/script.js
index 694005c7c87615f84f758c4ae6f1a66c05a548a2..27b607c55a70b82c77f8517fe6a34e6bc1365cfa 100644 (file)
--- a/script.js
+++ b/script.js
@@ -45,8 +45,8 @@ async function fetchPostMetadata() {
       description: row[1],
       id: row[2],
       linkText: row[3],
-      createdDate: row[5],
-      updatedDate: row[6],
+      createdDate: new Date(row[5]).toLocaleDateString(),
+      updatedDate: new Date(row[6]).toLocaleDateString(),
       tags: row[7].split(',').map(s => s.trim())
     });
   }
@@ -63,6 +63,7 @@ function buildHomeComponent(metadata) {
     home.insertAdjacentHTML('beforeend',
       `<article class="card">
         <h2>${post.title}</h2>
+        <p class="subtitle">${post.createdDate}</p>
         <ul class="tags">${post.tags.map(t => `<li class="tag"><a href="${location.origin}/search?q=${t}">${t}</a></li>`).join('')}</ul>
         <p>${post.description}</p>
         <p><a href="${path}">${post.linkText}</a></p>

diff --git a/style.css b/style.css
index 5ef14d183f460fa79919028bfc979fb2eef1469c..c562658b08aec031bf3fc4e09c570aaa4acdf957 100644 (file)
--- a/style.css
+++ b/style.css
@@ -264,6 +264,13 @@ code:not(.hljs) {
   transition: opacity 400ms;
 }
 
+.subtitle {
+  margin-block: -8px;
+  font-size: 0.875em;
+  font-weight: 300;
+  color: hsl(216deg 20% 40%);
+}
+
 .tags {
   display: flex;
   flex-wrap: wrap;