feat: add image module

pages/[...slug].vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { BlogParsedContent, StoryParsedContent } from "@/shared/types";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc.js";
-import tz from "dayjs/plugin/timezone.js";
-
-dayjs.extend(utc);
-dayjs.extend(tz);
+import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
 
 type GeneralParsedContent = BlogParsedContent | StoryParsedContent;
 
@@ -13,22 +8,46 @@ const route = useRoute();
 
 // we're not using ContentDoc because i need control
 const doc = await queryContent<GeneralParsedContent>(route.path).findOne();
+const type = route.path.startsWith("/stories")
+  ? "stories"
+  : route.path.startsWith("/blog")
+  ? "blog"
+  : "unknown";
+
+const descText =
+  type === "stories"
+    ? `${calcReadingTime(doc).words.total} words`
+    : `${calcReadingTime(doc).minutes} min read`;
 useTitle(doc.title);
+
+const captionText =
+  type === "stories" ? "Story" : type === "blog" ? "Blog post" : "";
 </script>
 
 <template>
   <div class="container prose dark:prose-invert w-full">
-    <h1>{{ doc.title }}</h1>
-    <ContentRenderer tag="article" :value="doc" class="pt-0 w-full">
-      <ContentRendererMarkdown :value="doc" />
-
+    <p class="m-0 uppercase font-mono text-sm" v-if="captionText !== ''">
+      {{ captionText }}
+    </p>
+    <h1 class="m-0">{{ doc.title }}</h1>
+    <p class="my-2">{{ getPrettyDate(doc) }} · {{ descText }}</p>
+    <div class="flex flex-wrap">
+      <Tag
+        v-for="(tag, index) in doc.tags"
+        :dest="`/tags/${type}/${tag}`"
+        :key="index"
+      >
+        {{ tag }}
+      </Tag>
+    </div>
+    <ContentDoc tag="article" class="pt-0 w-full">
       <template #empty>
         <p>No description found.</p>
       </template>
       <template #not-found>
         <h1>404 - Not Found</h1>
       </template>
-    </ContentRenderer>
+    </ContentDoc>
   </div>
 </template>