From b030a8c832c60d0ab1ea864dba9045b1943f86b4 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Wed, 10 Aug 2022 13:14:48 -0400
Subject: [PATCH] feat: copy orig story layout

---
 components/BlogStatBox.vue  |  2 --
 components/StoryStatBox.vue |  2 --
 pages/stories.vue           | 50 ++++++++++++++++++++++++++++++++++++-
 shared/types.d.ts           |  3 ++-
 4 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/components/BlogStatBox.vue b/components/BlogStatBox.vue
index f894e01..3753b0a 100644
--- a/components/BlogStatBox.vue
+++ b/components/BlogStatBox.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 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>("/blog")
   .sort({ date: 1 })
diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue
index 00c96d8..b8b9e33 100644
--- a/components/StoryStatBox.vue
+++ b/components/StoryStatBox.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc.js";
-import tz from "dayjs/plugin/timezone.js";
 import { type StoryParsedContent } from "@/shared/types";
 
 dayjs.extend(utc);
-dayjs.extend(tz);
 
 const docs = await queryContent<StoryParsedContent>("/stories")
   .sort({ date: 1 })
diff --git a/pages/stories.vue b/pages/stories.vue
index f2d2135..adb3a13 100644
--- a/pages/stories.vue
+++ b/pages/stories.vue
@@ -1,16 +1,64 @@
 <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 })
   .where({ _draft: false })
   .find();
+
+const getPrettyDate = (story: StoryParsedContent) => {
+  const date = dayjs(story.date).utc();
+  return date.format("DD MMM YYYY");
+};
 </script>
 
 <template>
-  <main class="flex grow prose dark:prose-invert">
+  <main class="flex flex-col grow prose dark:prose-invert max-w-3xl">
     <h1>Stories</h1>
+    <div class="story-card p-4" v-for="(story, index) in docs" :key="index">
+      <a :href="story._path" class="no-underline">
+        <h3
+          class="text-left text-2xl sm:text-2xl font-bold hover:text-blue-700 leading-tight m-0"
+        >
+          {{ story.title }}
+        </h3>
+      </a>
+      <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 m-0"
+        >
+          Continue reading →
+        </a>
+      </div>
+    </div>
   </main>
 </template>
+
+<style scoped>
+.story-card {
+  border: 0.1rem solid gray;
+  max-width: 100%;
+  border-radius: 0.5rem;
+}
+</style>
diff --git a/shared/types.d.ts b/shared/types.d.ts
index fd6c151..8ac7d27 100644
--- a/shared/types.d.ts
+++ b/shared/types.d.ts
@@ -11,7 +11,7 @@ interface BlogParsedContent extends ParsedContent {
   date: Date;
   title: string;
   tags: string[];
-  description?: Record<string, any>;
+  description?: string;
   readingTime: ReadingTime;
 }
 
@@ -19,5 +19,6 @@ interface StoryParsedContent extends ParsedContent {
   date: Date;
   title: string;
   tags: string[];
+  description?: string;
   readingTime: ReadingTime;
 }