From e802e3723c3758c7ee9bb922b8ad3a860d9c36e4 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Mon, 8 Aug 2022 18:41:29 -0400
Subject: [PATCH] feat: add story stat box

---
 components/BlogStatBox.vue  |  8 ++++-
 components/HomeStatBox.vue  |  4 ++-
 components/StoryStatBox.vue | 58 +++++++++++++++++++++++++++++++++++--
 components/Tag.vue          | 16 ++++++----
 content/stories/test.md     |  1 -
 5 files changed, 77 insertions(+), 10 deletions(-)
 delete mode 100644 content/stories/test.md

diff --git a/components/BlogStatBox.vue b/components/BlogStatBox.vue
index f81ac8b..5fc8215 100644
--- a/components/BlogStatBox.vue
+++ b/components/BlogStatBox.vue
@@ -30,7 +30,13 @@ const prettyDate = latestDate.format("DD MMM YYYY");
         {{ prettyDate }} · {{ latest.readingTime.text }}
       </p>
       <div class="tag-list mt-1">
-        <Tag v-for="(tag, index) in latest.tags" :key="index">{{ tag }}</Tag>
+        <Tag
+          v-for="(tag, index) in latest.tags"
+          :key="index"
+          :dest="`/blog/tags/${tag}`"
+        >
+          {{ tag }}
+        </Tag>
       </div>
       <!--
       <ContentRenderer
diff --git a/components/HomeStatBox.vue b/components/HomeStatBox.vue
index bb93783..8c14c38 100644
--- a/components/HomeStatBox.vue
+++ b/components/HomeStatBox.vue
@@ -12,7 +12,9 @@ const { href, color = "pink" } = defineProps<{
   <a class="no-underline" :href="href">
     <div class="container box">
       <p class="m-0 w-full title">{{ title }}</p>
-      <div class="main-content"><slot /></div>
+      <div class="main-content">
+        <slot />
+      </div>
     </div>
   </a>
 </template>
diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue
index 0a8f7be..936be2c 100644
--- a/components/StoryStatBox.vue
+++ b/components/StoryStatBox.vue
@@ -1,7 +1,61 @@
 <script setup lang="ts">
-//const latest = await queryContent("stories").findOne();
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import tz from "dayjs/plugin/timezone.js";
+import type { BlogParsedContent } from "@/shared/types";
+
+dayjs.extend(utc);
+dayjs.extend(tz);
+
+const docs = await queryContent<BlogParsedContent>("/stories")
+  .sort({ date: 1 })
+  .where({ _draft: false })
+  .find();
+
+const latest = docs.at(-1);
+
+const latestDate = dayjs(latest.date).utc();
+const prettyDate = latestDate.format("DD MMM YYYY");
 </script>
 
 <template>
-  <HomeStatBox color="lightgreen" title="Latest story"> </HomeStatBox>
+  <div class="prose dark:prose-invert">
+    <HomeStatBox :href="latest._path" color="lightgreen" title="Latest story">
+      <h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
+      <p class="text-sm text-gray-500 m-0">
+        {{ prettyDate }} · {{ latest.readingTime.text }}
+      </p>
+      <div class="tag-list mt-1">
+        <Tag
+          v-for="(tag, index) in latest.tags"
+          :key="index"
+          :dest="`/stories/tags/${tag}`"
+        >
+          {{ tag }}
+        </Tag>
+      </div>
+      <!--
+      <ContentRenderer
+        tag="article"
+        :value="latest"
+        :excerpt="true"
+        class="pt-0 w-full"
+      >
+        <ContentRendererMarkdown :value="latest" :excerpt="true" />
+        <template #empty>
+          <p>No description found.</p>
+        </template>
+      </ContentRenderer>
+      -->
+      <p class="excerpt text-gray-600 text-base m-0 mt-5">
+        {{ latest.description }} …
+      </p>
+    </HomeStatBox>
+  </div>
 </template>
+
+<style scoped>
+article p {
+  color: gray;
+}
+</style>
diff --git a/components/Tag.vue b/components/Tag.vue
index af6ffcf..ab54322 100644
--- a/components/Tag.vue
+++ b/components/Tag.vue
@@ -1,7 +1,13 @@
+<script setup lang="ts">
+const { dest } = defineProps<{ dest: string }>();
+</script>
+
 <template>
-  <div
-    class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;"
-  >
-    <slot />
-  </div>
+  <a :href="dest">
+    <div
+      class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;"
+    >
+      <slot />
+    </div>
+  </a>
 </template>
diff --git a/content/stories/test.md b/content/stories/test.md
deleted file mode 100644
index 7abf662..0000000
--- a/content/stories/test.md
+++ /dev/null
@@ -1 +0,0 @@
-oy
\ No newline at end of file