feat: lots of things

pages/[...slug].vue

@@ -1,21 +1,40 @@
-<script setup lang="ts"></script>
+<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);
+
+type GeneralParsedContent = BlogParsedContent | StoryParsedContent;
+
+const route = useRoute();
+
+// we're not using ContentDoc because i need control
+const doc = await queryContent<GeneralParsedContent>(route.path).findOne();
+</script>
 
 <template>
-  <ContentDoc tag="article" class="prose dark:prose-invert">
-    <template #not-found>
-      <!-- 404 -->
-      <main class="prose dark:prose-invert h-full">
+  <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" />
+
+      <template #empty>
+        <p>No description found.</p>
+      </template>
+      <template #not-found>
         <h1>404 - Not Found</h1>
-        <p>Maybe you can find somewhere else?</p>
-      </main>
-    </template>
-  </ContentDoc>
+      </template>
+    </ContentRenderer>
+  </div>
 </template>
 
-<style>
-article {
+<style scoped>
+.container {
   width: 80%;
-  height: 100%;
+  max-width: 72ch;
   padding-top: 2rem;
 }
 

pages/index.vue

@@ -9,7 +9,7 @@ useTitle("Home");
   <main class="flex flex-col items-center justify-around gap-8">
     <h1>Welcome!</h1>
     <p>What are you here to see?</p>
-    <div class="flex justify-around items-center w-full flex-wrap gap-y-10">
+    <div class="flex justify-around items-stretch w-full flex-wrap gap-y-10">
       <BlogStatBox />
       <StoryStatBox />
       <CommitStatBox />