65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<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 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>
|