feat: add image module

components/BlogStatBox.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc.js";
 import type { BlogParsedContent } from "@/shared/types";
-import { calcReadingTime } from "@/shared/readingTime";
-
-dayjs.extend(utc);
+import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
 
 const docs = await queryContent<BlogParsedContent>("/blog")
   .sort({ date: 1 })
@@ -12,9 +8,7 @@ const docs = await queryContent<BlogParsedContent>("/blog")
   .find();
 
 const latest = docs.at(-1) as BlogParsedContent;
-
-const latestDate = dayjs(latest.date).utc();
-const prettyDate = latestDate.format("DD MMM YYYY");
+const prettyDate = getPrettyDate(latest);
 </script>
 
 <template>

components/PostPreviewCard.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import type { StoryParsedContent, BlogParsedContent } from "@/shared/types";
-import { calcReadingTime } from "@/shared/readingTime";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc.js";
-
-dayjs.extend(utc);
+import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
 
 const { post, type, highlighttags } = defineProps<{
   post: StoryParsedContent | BlogParsedContent;
@@ -12,11 +8,6 @@ const { post, type, highlighttags } = defineProps<{
   highlighttags?: string[];
 }>();
 
-const getPrettyDate = (story: StoryParsedContent) => {
-  const date = dayjs(story.date).utc();
-  return date.format("DD MMM YYYY");
-};
-
 const readingTime = calcReadingTime(post);
 const descText =
   type === "stories"

components/StoryStatBox.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc.js";
 import { type StoryParsedContent } from "@/shared/types";
-import { calcReadingTime } from "@/shared/readingTime";
-
-dayjs.extend(utc);
+import { calcReadingTime, getPrettyDate } from "@/shared/metadata";
 
 const docs = await queryContent<StoryParsedContent>("/stories")
   .sort({ date: 1 })
@@ -13,8 +9,7 @@ const docs = await queryContent<StoryParsedContent>("/stories")
 
 const latest = docs.at(-1) as StoryParsedContent;
 
-const latestDate = dayjs(latest.date).utc();
-const prettyDate = latestDate.format("DD MMM YYYY");
+const prettyDate = getPrettyDate(latest);
 </script>
 
 <template>

components/content/image.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { src } = defineProps<{ src: string }>();
+</script>
+
+<template>
+  <figure>
+    <img :src="`/images/posts/${src}`" />
+    <figcaption class="text-center"><Markdown /></figcaption>
+  </figure>
+</template>

content/blog/2021/dark-mode.md

@@ -0,0 +1,14 @@
+---
+title: On the Topic of Dark Mode
+date: 2021-04-07
+tags:
+- misc
+nopreview: true
+---
+On the desktop, dark mode is an abomination that should be eradicated from applications.
+
+Browsers, IDEs, and other applications must be freed from their shadowy chains and returned to light — where they truly belong.
+
+::image{src=light-discord.png}
+Perfect.
+::

content/blog/first.md

@@ -1,5 +0,0 @@
----
-date: 2022-01-01
----
-
-hoihoi

content/blog/test.md

@@ -1,7 +0,0 @@
----
-date: 2022-03-01
----
-
-HELLO!
-
-**markdown test**

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>
 

shared/metadata.ts

@@ -1,5 +1,9 @@
 import type { BlogParsedContent, StoryParsedContent } from "./types";
 import readingTime from "reading-time";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+
+dayjs.extend(utc);
 
 function countWords(str: string) {
   let words = 0;
@@ -28,3 +32,8 @@ export function calcReadingTime(doc: BlogParsedContent | StoryParsedContent) {
   let body: string[] = search(doc.body);
   return readingTime(body.join(" "));
 }
+
+export function getPrettyDate(doc: BlogParsedContent | StoryParsedContent) {
+  const date = dayjs(doc.date).utc();
+  return date.format("DD MMM YYYY");
+}