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

<template>
  <article class="blog-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>
      <div class="blog-post__content" v-html="post.html"></div>
      <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>
  </article>
</template>

<script setup lang="ts">
import { BlogPost } from '~~/lib/types/post';

defineProps<{ post: BlogPost; detail?: boolean }>();
</script>