Add tags

diff --git a/script.js b/script.js
index 1f7479a0edfd9a8eb903901d8a22840761bc5b58..694005c7c87615f84f758c4ae6f1a66c05a548a2 100644 (file)
--- 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 216dba0fb43141299ce6a7809e96d64b7008866d..1dd7911970b0b372228db82ba1b402c5ba8fa014 100644 (file)
--- 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;