69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<article class="blog-post" v-if="post">
|
|
<div class="blog-post__meta">
|
|
<NuxtLink :to="'/blog/' + post.fullSlug">
|
|
<time :datetime="new Date(post.date).toISOString()">
|
|
{{ post.date }}
|
|
</time>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="blog-post__inner">
|
|
<header class="blog-post__title">
|
|
<h1>
|
|
<template v-if="detail">
|
|
{{ post.title }}
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink :to="'/blog/' + post.fullSlug">{{ post.title }}</NuxtLink>
|
|
</template>
|
|
</h1>
|
|
</header>
|
|
<template v-if="detail">
|
|
<div class="blog-post__content" v-html="post.html"></div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="blog-post__content" v-html="post.summary"></div>
|
|
<NuxtLink :to="'/blog/' + post.fullSlug" class="blog-post__continue"
|
|
>Continue reading...</NuxtLink
|
|
>
|
|
</template>
|
|
<div class="blog-post__footer">
|
|
<div class="blog-post__tags">
|
|
<NuxtLink
|
|
v-for="tag of post.tags"
|
|
:to="'/blog/tags/' + tag"
|
|
class="blog-post__tag"
|
|
>#{{ tag }}</NuxtLink
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="detail" class="blog-post__page">
|
|
<NuxtLink
|
|
v-if="post.prev"
|
|
:to="'/blog/' + post.prev.fullSlug"
|
|
class="blog-post__page-link blog-post__page-link--older"
|
|
>
|
|
<span class="blog-post__page-title">Older</span>
|
|
<span class="blog-post__page-name">{{ post.prev.title }}</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
v-if="post.next"
|
|
:to="'/blog/' + post.next.fullSlug"
|
|
class="blog-post__page-link blog-post__page-link--newer"
|
|
>
|
|
<span class="blog-post__page-title">Newer</span>
|
|
<span class="blog-post__page-name">{{ post.next.title }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { BlogPost } from '~~/lib/types/post';
|
|
|
|
defineProps<{ post: BlogPost | null; detail?: boolean }>();
|
|
</script>
|