feat: add links to tags

src/components/SmallCard.astro

@@ -21,28 +21,30 @@ interface Props {
 const { post } = Astro.props;
 ---
 
-<a
-  href={tp(`/${post.collection}/${post.slug.split("/")[0]}`)}
-  class="rounded-diag-md border border-neutral p-4 overflow-hidden"
->
-  <h2
-    class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden"
-  >
-    {post.data.icon && <img src={post.data.icon} class="h-6" />}
-    {post.data.title}
-  </h2>
-  <p class="text-ellipsis overflow-hidden line-clamp-2">
-    {post.data.description || markdownToText(post.body).slice(0, 200)}
-  </p>
+<div class="rounded-diag-md border border-neutral p-4 overflow-hidden">
+  <a href={tp(`/${post.collection}/${post.slug.split("/")[0]}`)}>
+    <h2
+      class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden"
+    >
+      {post.data.icon && <img src={post.data.icon} class="h-6" />}
+      {post.data.title}
+    </h2>
+    <p class="text-ellipsis overflow-hidden line-clamp-2">
+      {post.data.description || markdownToText(post.body).slice(0, 200)}
+    </p>
+  </a>
   {
     post.data.tags && (
       <div class="flex gap-2 mt-2">
         {post.data.tags.map((tag) => (
-          <span class="text-xs border border-neutral p-2 rounded-md">
+          <a
+            href={tp(`/tag/${tag}`)}
+            class="text-xs border border-neutral p-2 rounded-md"
+          >
             {tag}
-          </span>
+          </a>
         ))}
       </div>
     )
   }
-</a>
+</div>