144 lines
4.1 KiB
Vue
144 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { formatDate } from 'date-fns'
|
|
|
|
const config = useAppConfig()
|
|
const meta = {
|
|
title: 'The Enderchest',
|
|
description:
|
|
'A blog about software development, scientific research and Windows quirks.',
|
|
image: `${config.url}/images/chest.png`,
|
|
url: `${config.url}/blog`,
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: meta.title,
|
|
description: meta.description,
|
|
ogTitle: meta.title,
|
|
ogDescription: meta.description,
|
|
ogImage: meta.image,
|
|
ogUrl: meta.url,
|
|
ogType: 'website',
|
|
twitterTitle: meta.title,
|
|
twitterDescription: meta.description,
|
|
twitterImage: meta.image,
|
|
twitterCard: 'summary',
|
|
})
|
|
|
|
useHead({
|
|
title: 'The Enderchest',
|
|
htmlAttrs: {
|
|
lang: config.locale || 'en',
|
|
},
|
|
link: [
|
|
{
|
|
rel: 'icon',
|
|
type: 'image/x-icon',
|
|
href: '/favicon.ico',
|
|
},
|
|
],
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<h3 class="alex">The Enderchest</h3>
|
|
<p>
|
|
You're browsing the enderchest — a blog about software development,
|
|
scientific research and Windows quirks.
|
|
</p>
|
|
<h4 class="alex">Recent posts</h4>
|
|
<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 ??
|
|
`/images/blog/thumbnails/${post._path!.split('/').at(-1)}.png`
|
|
"
|
|
: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>
|