From: Ardis Lu <ardisglu@gmail.com>
Date: Sun, 26 Feb 2023 03:57:56 +0000 (-0800)
Subject: Add tags
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=2080d6f89cd106b60859fc3c0db866ec0b5c15a1;p=ardislu.dev

Add tags
---

diff --git a/script.js b/script.js
index 1f7479a..694005c 100644
--- a/script.js
+++ b/script.js
@@ -47,7 +47,7 @@ async function fetchPostMetadata() {
       linkText: row[3],
       createdDate: row[5],
       updatedDate: row[6],
-      tags: row[7]
+      tags: row[7].split(',').map(s => s.trim())
     });
   }
 
@@ -62,7 +62,10 @@ function buildHomeComponent(metadata) {
   for (const [path, post] of metadata) {
     home.insertAdjacentHTML('beforeend',
       `<article class="card">
-        <h2>${post.title}</h2><p>${post.description}</p><p><a href="${path}">${post.linkText}</a></p>
+        <h2>${post.title}</h2>
+        <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>
       </article>`);
   }
 
diff --git a/style.css b/style.css
index 216dba0..1dd7911 100644
--- a/style.css
+++ b/style.css
@@ -264,6 +264,33 @@ code:not(.hljs) {
   transition: opacity 400ms;
 }
 
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  list-style: none;
+  padding: 0;
+}
+
+.tag {
+  padding-block: 4px;
+}
+
+.tag > a {
+  padding-block: 4px;
+  padding-inline: 6px;
+  border-radius: 12px;
+  text-decoration: none;
+  font-weight: 500;
+  background: hsl(216deg 50% 90%);
+  transition: background-color 600ms;
+}
+
+.tag > a:hover, .tag > a:focus-within  {
+  background: hsl(30deg 80% 90%);
+  transition: background-color 200ms;
+}
+
 .post {
   inline-size: min(100% - 2rem, 1440px);
   margin-inline: auto;