99 lines
3.1 KiB
Vue
99 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { formatDate } from 'date-fns'
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<h3 class="alex">Recent posts</h3>
|
|
<ContentList
|
|
:query="{
|
|
path: '/blog',
|
|
where: [{ draft: false }],
|
|
limit: 3,
|
|
sort: [{ created: -1 }],
|
|
}"
|
|
>
|
|
<template #default="{ list }">
|
|
<div class="d-grid gap-3">
|
|
<NuxtLink
|
|
v-for="post in list"
|
|
:key="post._path"
|
|
:to="post._path"
|
|
class="no-decoration"
|
|
>
|
|
<article
|
|
class="post-box d-flex flex-column flex-md-row gap-3 rounded-4 h-100"
|
|
>
|
|
<div class="post-thumb">
|
|
<img
|
|
draggable="false"
|
|
:src="post.thumbnail"
|
|
:alt="post.title"
|
|
class="rounded-4"
|
|
/>
|
|
</div>
|
|
<div class="w-100">
|
|
<h3 class="post-title alex">{{ post.title }}</h3>
|
|
<p class="post-description mb-0">{{ post.description }}</p>
|
|
|
|
<div class="post-tags d-flex flex-row flex-wrap gap-2 py-2">
|
|
<span
|
|
v-for="(tag, index) in post.tags.slice(0, 3)"
|
|
:key="index"
|
|
class="nobr"
|
|
>
|
|
{{ tag }}
|
|
</span>
|
|
<span v-if="post.tags.length > 3" class="nobr">
|
|
{{ post.tags.length - 3 }} more
|
|
</span>
|
|
</div>
|
|
|
|
<Separator class="m-0" />
|
|
|
|
<div class="post-details py-2">
|
|
<div class="d-flex flex-row gap-1 align-items-center">
|
|
<iconify-icon icon="mdi:calendar" />
|
|
<small class="nobr">
|
|
{{ formatDate(post.created, 'LLLL do, y – HH:mm') }}
|
|
</small>
|
|
</div>
|
|
<div
|
|
v-if="post.updated"
|
|
class="d-flex flex-row gap-1 align-items-center"
|
|
>
|
|
<iconify-icon icon="mdi:pencil" />
|
|
<small class="nobr">
|
|
{{ formatDate(post.updated, 'LLLL do, y – HH:mm') }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="post-pocket d-flex flex-row gap-1 align-items-center p-2"
|
|
>
|
|
<iconify-icon icon="mdi:clock-outline" />
|
|
<small class="nobr font-monospace font-small">
|
|
{{ post.readingTime.text }}
|
|
</small>
|
|
</div>
|
|
</article>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<template #not-found>
|
|
<div
|
|
class="d-flex flex-column justify-content-center align-items-center gap-3"
|
|
>
|
|
<span>No posts found 🙁</span>
|
|
<NuxtLink to="/" class="link-hi">Back to index</NuxtLink>
|
|
</div>
|
|
</template>
|
|
</ContentList>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|