lunasqu.ee-nuxt/components/blog-post.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>