feat: add tag navigation

pages/blog.vue

@@ -1,5 +1,25 @@
 <script setup lang="ts">
+import type { BlogParsedContent } from "@/shared/types";
+
 useTitle("Blog");
+
+// TODO: paginate stories
+const docs = await queryContent<BlogParsedContent>("/blog")
+  .sort({ date: -1 })
+  .where({ _draft: false })
+  .find();
 </script>
 
-<template></template>
+<template>
+  <main
+    class="flex flex-col grow prose dark:prose-invert max-w-3xl gap-6 transition"
+  >
+    <h1 class="mb-0">Blog</h1>
+    <PostPreviewCard
+      v-for="(post, index) in docs"
+      :key="index"
+      :post="post"
+      type="blog"
+    />
+  </main>
+</template>

pages/stories.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
 import type { StoryParsedContent } from "@/shared/types";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc.js";
-
-dayjs.extend(utc);
 
 useTitle("Stories");
 
 // TODO: paginate stories
 const docs = await queryContent<StoryParsedContent>("/stories")
-  .sort({ date: 1 })
+  .sort({ date: -1 })
   .where({ _draft: false })
   .find();
-
-const getPrettyDate = (story: StoryParsedContent) => {
-  const date = dayjs(story.date).utc();
-  return date.format("DD MMM YYYY");
-};
 </script>
 
 <template>
@@ -24,48 +15,11 @@ const getPrettyDate = (story: StoryParsedContent) => {
     class="flex flex-col grow prose dark:prose-invert max-w-3xl gap-6 transition"
   >
     <h1 class="mb-0">Stories</h1>
-    <div
-      class="story-card p-4 pb-2"
+    <PostPreviewCard
       v-for="(story, index) in docs"
       :key="index"
-    >
-      <h3 class="m-0">
-        <a
-          :href="story._path"
-          class="no-underline text-left text-2xl sm:text-2xl font-bold hover:text-blue-700 dark:hover:text-blue-400 leading-tight transition"
-        >
-          {{ story.title }}</a
-        >
-      </h3>
-      <p class="my-1 text-sm">
-        {{ getPrettyDate(story) }} · {{ story.readingTime.text }}
-      </p>
-      <div class="flex flex-wrap">
-        <Tag
-          :dest="`/stories/tags/${tag}`"
-          v-for="(tag, index) in story.tags"
-          :key="index"
-        >
-          {{ tag }}
-        </Tag>
-      </div>
-      <p class="mb-1">{{ story.description }} ...</p>
-      <div class="text-right">
-        <a
-          :href="story._path"
-          class="no-underline hover:underline font-semibold text-blue-700 dark:text-blue-400"
-        >
-          Continue reading →
-        </a>
-      </div>
-    </div>
+      :post="story"
+      type="stories"
+    />
   </main>
 </template>
-
-<style scoped>
-.story-card {
-  border: 0.1rem solid gray;
-  max-width: 100%;
-  border-radius: 0.5rem;
-}
-</style>

pages/tags/blog/[tag].vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { tagInfo, type TagData } from "@/data/tagInfo";
+import type { BlogParsedContent } from "@/shared/types";
+
+const route = useRoute();
+
+const tag =
+  typeof route.params.tag === "string" ? route.params.tag : route.params.tag[0];
+
+const details: TagData = tagInfo[tag] ?? {};
+
+const docs = await queryContent<BlogParsedContent>("/blog")
+  .sort({ date: -1 })
+  .where({ _draft: false, tags: { $contains: tag } })
+  .find();
+</script>
+
+<template>
+  <main
+    class="prose dark:prose-invert max-w-3xl flex flex-col grow gap-6 transition"
+  >
+    <div>
+      <h1 class="mb-0">{{ details.name ?? `"${tag}"` }} Posts</h1>
+      <p
+        v-if="details.description"
+        v-html="details.description"
+        class="mt-2"
+      ></p>
+    </div>
+    <PostPreviewCard
+      v-for="(post, index) in docs"
+      :key="index"
+      :post="post"
+      :highlighttags="[tag]"
+      type="blog"
+    />
+  </main>
+</template>

pages/tags/stories/[tag].vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { tagInfo, type TagData } from "@/data/tagInfo";
+import type { StoryParsedContent } from "@/shared/types";
+
+const route = useRoute();
+
+const tag =
+  typeof route.params.tag === "string" ? route.params.tag : route.params.tag[0];
+
+const details: TagData = tagInfo[tag] ?? {};
+
+const docs = await queryContent<StoryParsedContent>("/stories")
+  .sort({ date: -1 })
+  .where({ _draft: false, tags: { $contains: tag } })
+  .find();
+</script>
+
+<template>
+  <main
+    class="prose dark:prose-invert max-w-3xl flex flex-col grow gap-6 transition"
+  >
+    <div>
+      <h1 class="mb-0">{{ details.name ?? `"${tag}"` }} Stories</h1>
+      <p
+        v-if="details.description"
+        v-html="details.description"
+        class="mt-2"
+      ></p>
+    </div>
+    <PostPreviewCard
+      v-for="(story, index) in docs"
+      :key="index"
+      :post="story"
+      :highlighttags="[tag]"
+      type="stories"
+    />
+  </main>
+</template>