57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { StoryParsedContent } from "@/shared/types";
|
|
import { calcReadingTime } from "@/shared/metadata";
|
|
|
|
const docs = await queryContent<StoryParsedContent>("/stories")
|
|
.sort({ date: 1 })
|
|
.where({ _draft: false })
|
|
.find();
|
|
|
|
const latest = docs.at(-1) as StoryParsedContent;
|
|
</script>
|
|
|
|
<template>
|
|
<div class="prose dark:prose-invert flex onhover">
|
|
<HomeStatBox
|
|
:href="latest._path"
|
|
color="lightgreen"
|
|
darkcolor="#2c8a2c"
|
|
title="Latest story"
|
|
>
|
|
<h2 class="m-0 mt-4 mb-1">{{ latest.title }}</h2>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 m-0">
|
|
<Date :doc="latest" /> · {{ calcReadingTime(latest).words.total }} words
|
|
</p>
|
|
<div class="tag-list mt-1">
|
|
<Tag
|
|
v-for="(tag, index) in latest.tags"
|
|
:key="index"
|
|
:dest="`/tags/stories/${tag}`"
|
|
:name="tag"
|
|
/>
|
|
</div>
|
|
<ContentRenderer
|
|
tag="article"
|
|
:value="latest"
|
|
:excerpt="true"
|
|
class="text-gray-600 dark:text-gray-300 text-base m-0 mt-5 text-ellipsis"
|
|
>
|
|
<ContentRendererMarkdown :value="latest" :excerpt="true" />
|
|
<template #empty>
|
|
<p>No description found.</p>
|
|
</template>
|
|
</ContentRenderer>
|
|
</HomeStatBox>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
h2 {
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
div.onhover:hover h2 {
|
|
@apply text-blue-700 dark:text-blue-400;
|
|
}
|
|
</style>
|