[...slug].vue

<script setup lang="ts">
import type { Breadcrumb } from "@/types";

const { path } = useRoute();
const { data } = await useAsyncData(`content-${path}`, () => queryContent().where({ _path: path }).findOne());
const viewCount = await getViewCount(path);
const pageTitle = data.value?.title + " | Посты | Александр Голдовский";

const breadcrumbs: Breadcrumb[] = [
  {
    title: "Посты",
    url: "/blog/",
  },
  {
    title: data.value?.title as string,
    url: null,
  },
];

useSeoMeta({
  title: pageTitle,
  description: data.value?.description,
  ogTitle: pageTitle,
  ogDescription: data.value?.description,
  ogUrl: "https://hazadus.ru" + path,
  ogImage: "https://hazadus.ru/images/blog/" + data.value?.cover,
  twitterTitle: pageTitle,
  twitterDescription: data.value?.description,
  twitterCard: "summary",
  twitterImage: "https://hazadus.ru/images/blog/" + data.value?.cover,
});
</script>

<template>
  <template v-if="data">
    <Title>
      {{ pageTitle }}
    </Title>

    <Breadcrumbs :breadcrumbs="breadcrumbs" />

    <ContentRenderer
      :value="data"
      class="prose my-10 mx-auto max-w-4xl"
    />

    <div class="pt-6 mx-auto max-w-4xl border-t">
      <Icon name="ic:outline-keyboard-alt" />&nbsp;
      <NuxtLink
        to="/about/#contact"
        class="hover:underline"
        >Александр Голдовский</NuxtLink
      >
      &middot; <Icon name="mdi:calendar-outline" /> {{ formatDate(data.date) }} &middot;
      <Icon name="ic:round-remove-red-eye" /> {{ viewCount }}
    </div>

    <div class="my-8 pb-4 mx-auto max-w-4xl border-b">
      <Tag
        v-for="tag in data.tags"
        :key="`tag-${tag}`"
        :title="tag"
      />
    </div>

    <ContactForm class="my-8" />

    <div class="my-8 mx-auto max-w-4xl border-t">
      <PostList
        list-type="simple"
        :limit="5"
        :exclude-path="path"
      />
    </div>
  </template>
</template>