lunasqu.ee-nuxt/components/blog-post.vue

67 lines
2.0 KiB
Vue
Raw Normal View History

2022-10-16 09:37:13 +00:00
<template>
<article class="blog-post">
<div class="blog-post__meta">
2022-10-16 11:04:03 +00:00
<NuxtLink :to="'/blog/' + post.fullSlug">
2022-10-16 09:37:13 +00:00
<time :datetime="new Date(post.date).toISOString()">
{{ post.date }}
</time>
2022-10-16 11:04:03 +00:00
</NuxtLink>
2022-10-16 09:37:13 +00:00
</div>
<div class="blog-post__inner">
<header class="blog-post__title">
<h1>
<template v-if="detail">
{{ post.title }}
</template>
<template v-else>
2022-10-16 11:04:03 +00:00
<NuxtLink :to="'/blog/' + post.fullSlug">{{ post.title }}</NuxtLink>
2022-10-16 09:37:13 +00:00
</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>
2022-10-16 09:37:13 +00:00
<div class="blog-post__footer">
<div class="blog-post__tags">
2022-10-16 11:04:03 +00:00
<NuxtLink
2022-10-16 09:37:13 +00:00
v-for="tag of post.tags"
2022-10-16 11:04:03 +00:00
:to="'/blog/tags/' + tag"
2022-10-16 09:37:13 +00:00
class="blog-post__tag"
2022-10-16 11:04:03 +00:00
>#{{ tag }}</NuxtLink
2022-10-16 09:37:13 +00:00
>
</div>
</div>
</div>
2022-10-16 16:17:55 +00:00
<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>
2022-10-16 09:37:13 +00:00
</article>
</template>
<script setup lang="ts">
2022-10-16 11:04:03 +00:00
import { BlogPost } from '~~/lib/types/post';
defineProps<{ post: BlogPost; detail?: boolean }>();
2022-10-16 09:37:13 +00:00
</script>