tags on home page

src/components/PostList.astro

@@ -2,6 +2,7 @@
 import { getCollection, type CollectionEntry } from "astro:content";
 import Timestamp from "./Timestamp.astro";
 import { sortBy } from "lodash-es";
+import TagList from "./TagList.astro";
 
 interface Props {
   basePath: string;
@@ -43,18 +44,22 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
   {
     sortedPosts.map((post) => {
       return (
-        <tr class="row">
-          <td class="info">
-            <Timestamp timestamp={post.data.date} />
-          </td>
-          <td>
-            <span class="title">
-              <a href={`${basePath}/${post.slug}`} class="brand-colorlink">
-                {post.data.title}
-              </a>
-            </span>
-          </td>
-        </tr>
+        <>
+          <tr class="row">
+            <td class="info">
+              <span class="spacer" />
+              <Timestamp timestamp={post.data.date} />
+            </td>
+            <td>
+              <div class="title">
+                <a href={`${basePath}/${post.slug}`} class="brand-colorlink">
+                  {post.data.title}
+                </a>
+              </div>
+              <TagList tags={post.data.tags} />
+            </td>
+          </tr>
+        </>
       );
     })
   }
@@ -63,14 +68,14 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
 <style lang="scss">
   .postListing {
     width: 100%;
-    border-spacing: 6px;
+    border-spacing: 6px 10px;
 
     td {
       // padding-bottom: 10px;
       // line-height: 1;
 
       .title {
-        font-size: 1.1em;
+        font-size: 12pt;
       }
 
       .summary {
@@ -89,6 +94,11 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
       font-size: 0.75em;
       white-space: nowrap;
       text-align: right;
+      vertical-align: baseline;
+
+      .spacer {
+        font-size: 12pt;
+      }
     }
   }
 </style>

src/components/TagList.astro

@@ -0,0 +1,18 @@
+---
+import "../styles/tagList.scss";
+
+const { extraFront, tags, extraBack } = Astro.props;
+---
+
+<div class="tags">
+  {extraFront}
+  {
+    tags.toSorted().map((tag) => (
+      <a href={`/tags/${tag}`} class="tag">
+        <i class="fa fa-tag" aria-hidden="true" />
+        <span class="text">{tag}</span>
+      </a>
+    ))
+  }
+  {extraBack}
+</div>

src/pages/posts/[...slug].astro

@@ -5,6 +5,7 @@ import { type CollectionEntry, getCollection } from "astro:content";
 import Timestamp from "../../components/Timestamp.astro";
 import { getImage } from "astro:assets";
 import TocWrapper from "../../components/TocWrapper.astro";
+import TagList from "../../components/TagList.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("posts");
@@ -60,14 +61,7 @@ const excerpt = remarkPluginFrontmatter.excerpt?.replaceAll("\n", "");
           )
         }
 
-        {
-          post.data.tags.map((tag) => (
-            <a href={`/tags/${tag}`} class="tag">
-              <i class="fa fa-tag" aria-hidden="true" />
-              <span class="text">{tag}</span>
-            </a>
-          ))
-        }
+        <TagList tags={post.data.tags} />
       </span>
 
       <small class="post-meta">

src/styles/_colors.scss

@@ -16,7 +16,8 @@
     --link-color: #{$linkColor};
     --link-hover-color: #{lighten($linkColor, 35%)};
     --code-color: firebrick;
-    --tag-color: #{lighten($linkColor, 35%)};
+    --tag-color: lavender;
+    --tag-text-color: #{darken(lavender, 20%)};
 
     // Admonition
     --note-color: #{$linkColor};

src/styles/post.scss

@@ -239,33 +239,6 @@ hr.endline {
   border-color: var(--hr-color);
 }
 
-.tags {
-  display: flex;
-  gap: 6px;
-  margin-bottom: 6px;
-  flex-wrap: wrap;
-
-  .tag {
-    font-size: 0.75rem;
-    background-color: var(--tag-color);
-    padding: 2px 7px;
-    border-radius: 4px;
-
-    &.draft {
-      background-color: orange;
-      color: black;
-    }
-
-    .text {
-      text-decoration: none;
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
 .admonition {
   // TODO: Figure out how to distinguish admonitions
   --admonition-color: var(--note-color);

src/styles/tagList.scss

@@ -0,0 +1,27 @@
+.tags {
+  display: flex;
+  gap: 6px;
+  //   margin-bottom: 6px;
+  flex-wrap: wrap;
+
+  .tag {
+    font-size: 0.75rem;
+    background-color: var(--tag-color);
+    color: var(--tag-text-color);
+    padding: 2px 7px;
+    border-radius: 4px;
+
+    &.draft {
+      background-color: orange;
+      color: black;
+    }
+
+    .text {
+      text-decoration: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}