inspin.io/pages/articles/[slug].vue

<script setup>
  const { path } = useRoute()

  const { isMobile, isDesktopOrTablet } = useDevice();

  // https://content.nuxtjs.org/guide/displaying/querying#with-useasyncdata
  const { data, error } = await useAsyncData(`content-${path}`, () => {
    return queryContent().where({ _path: path, public: true }).findOne()
  })

  // https://nuxt.com/docs/api/utils/create-error#createerror
  if (error.value) {
    showError(
      createError({
        statusCode: 404,
        statusMessage: 'Not Found',
      })
    )
  }

  import { format, addMinutes } from "date-fns";

  let formatDate = (date) => {
    date = new Date(date)
    return new Date(
      date.valueOf() + date.getTimezoneOffset() * 60 * 1000
    )
  }

  let date = formatDate(data.value.date)
  date = format(addMinutes(date, 240), 'MMM do, yyy')

  useHead({
    meta: [
      { name: `og:type`, content: `website` },
      { name: `og:image`, content: data.value.image.src },

      { name: `twitter:card`, content: `summary_large_image` },
      { name: `twitter:url`, content: "https://www.inspin.io/articles/" + data.value.slug },
      { name: `twitter:title`, content: data.value.title },
      { name: `twitter:description`, content: data.value.description },
      { name: `twitter:image`, content: data.value.meta.src },
    ],
  })

</script>

<template>
  <div class="post">

    <div class="hero">
      <div class="meta" v-if="isDesktopOrTablet">
        <p class="date"><b>Published</b> <br> {{ date }}</p>
        <p class="author"><b>Author</b> <br> {{ data.author }}</p>
        <p><b>Tags</b></p>
        <p class="tags" v-for="tag in data.tags">{{ tag }}</p>
      </div>
      <div class="head">
        <h2>{{ data.heading }}</h2>
        <p class="excerpt">{{ data.description }}</p>
        <img :src="data.hero.src" :alt="data.hero.alt" />
      </div>
    </div>

    <ContentDoc class="content" />

    <section class="comments">
      <ArticleComments :post="data.slug" />
      <ArticlePolicy />
      <ArticleForm :post="data.slug" />
    </section>
  </div>
</template>