From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 26 Feb 2023 04:10:39 +0000 (-0800)
Subject: Add card subtitle for createdDate
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=0116c2c50230104875e1447141b3ea63dba55d14;p=ardislu.dev

Add card subtitle for createdDate
---

diff --git a/script.js b/script.js
index 694005c..27b607c 100644
--- 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 5ef14d1..c562658 100644
--- 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;