index/pages/blog/[slug].vue

<script setup lang="ts">
import { formatDate } from 'date-fns'
import chestAnimation from '~/assets/images/chest.webp'

const config = useAppConfig()
const route = useRoute()

let thumbnail: string | null = null
let slug = route.params.slug

if (Array.isArray(slug)) slug = slug.join('/')

const { data, status } = await useAsyncData('home', () =>
  queryContent(`/blog/${slug}`).findOne(),
)

const meta = {
  title: data.value ? data.value.title : 'Page not found',
  description: data.value
    ? data.value.description
    : 'The page you are looking for does not exist. It might have been removed, had its name changed, or is temporarily unavailable.',
  url: `${config.url}/blog`,
}

// When defineOgImage is used, useSeoMeta must exclude ogImage and twitterImage properties.
useSeoMeta({
  title: meta.title,
  description: meta.description,
  ogTitle: meta.title,
  ogDescription: meta.description,
  // ogImage: EXCLUDED
  ogUrl: meta.url,
  ogType: 'article',
  twitterTitle: meta.title,
  twitterDescription: meta.description,
  // twitterImage: EXCLUDED
  twitterCard: 'summary_large_image',
})

if (data.value) {
  thumbnail =
    data.value.thumbnail ??
    `/images/blog/thumbnails/${data.value._path!.split('/').at(-1)}.png`

  // Generate the article's Open Graph image.
  defineOgImageComponent(
    'OgImage',
    {
      title: data.value.title,
      description: data.value.description,
      logo: '/images/logo.png',
      sectionLogo: '/images/chest.png',
      thumbnail,
      alt: data.value.title,
    },
    {
      fonts: ['Alexandria:700', 'Lato:700'],
    },
  )

  // Hydrate the rendered items.
  // onMounted(() => {
  //   document.querySelectorAll('pre').forEach((pre) => {
  //     const icon = document.createElement('iconify-icon')
  //
  //     icon.setAttribute('icon', 'mdi:content-copy')
  //     icon.setAttribute('inline', 'true')
  //
  //     icon.classList.add('button')
  //
  //     pre.appendChild(icon)
  //   })
  //
  //   document
  //     .querySelectorAll('code:not(pre *), pre > iconify-icon.button')
  //     .forEach((code) => {
  //       if (code instanceof HTMLElement) {
  //         code.onclick = () => {
  //           const area = document.createElement('textarea')
  //
  //           area.textContent =
  //             code.nodeName && code.nodeName.toLowerCase() === 'code'
  //               ? code.textContent
  //               : code.parentElement!.textContent
  //
  //           // It's necessary to create the textarea element every time you copy to get access to the select() method.
  //           area.setSelectionRange(0, 99999) // An iOS gotcha.
  //           area.select()
  //
  //           // Copy the text inside the textarea.
  //           navigator.clipboard.writeText(area.value)
  //
  //           // TODO: Alert the user text has been successfully copied.
  //
  //           // Remove the textarea element.
  //           area.remove()
  //         }
  //       }
  //     })
  // })
  //
  // onUnmounted(() => {
  //   document.querySelectorAll('code').forEach((code) => {
  //     code.onclick = null
  //   })
  //
  //   document.querySelectorAll('pre').forEach((pre) => {
  //     pre.querySelector('.clipboard')?.remove()
  //   })
  // })
}

useHead({
  title: data.value ? data.value.title : 'Page not found',
  htmlAttrs: {
    lang: config.locale || 'en',
  },
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico',
    },
  ],
})
</script>

<template>
  <div
    v-if="status === 'pending'"
    class="flex flex-col items-center justify-center gap-4 w-full select-none text-center"
  >
    <img draggable="false" :src="chestAnimation" alt="The Ender Chest" />
    <div>
      <h1 class="font-enchant">Loading document...</h1>
      <span class="opacity-0 hover:opacity-100 transition-ease">
        <em>Loading document...</em>
      </span>
    </div>
  </div>
  <article
    v-else-if="status === 'success' && data"
    class="flex-grow post fade-mask-sm flex flex-col gap-4 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-4"
  >
    <div
      class="relative flex flex-col justify-end items-start w-full min-h-[400px] rounded-xl accent-text-shadow post-preamble"
      :style="{ backgroundImage: 'url(' + thumbnail + ')' }"
    >
      <div class="p-2">
        <h3>{{ data.title }}</h3>
        <div class="flex flex-row flex-wrap gap-x-2 gap-y-0">
          <div class="flex flex-row items-center gap-2">
            <iconify-icon icon="mdi:calendar" />
            <small class="whitespace-nowrap">
              <strong>
                {{ formatDate(data.created, 'LLLL do, y &ndash; HH:mm') }}
              </strong>
            </small>
          </div>
          <div class="flex flex-row items-center gap-2">
            <iconify-icon icon="mdi:clock-outline" />
            <small class="whitespace-nowrap">
              <strong>
                {{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
              </strong>
            </small>
          </div>
        </div>
      </div>
      <NuxtLink
        to="/blog"
        class="absolute top-0 left-0 p-2 text-inherit no-underline"
      >
        <iconify-icon
          icon="icon-park-solid:back"
          width="2em"
          height="2em"
          style="color: lavender"
        />
      </NuxtLink>
      <NuxtLink
        :href="`https://twitter.com/share?url=${config.url}/blog/${slug}&text=${data.title}&hashtags=${data.tags.slice(0, 3).join(',').replace(/ /g, '')}`"
        target="_blank"
        class="absolute top-0 right-0 p-2"
      >
        <iconify-icon icon="logos:twitter" width="2em" height="2em" />
      </NuxtLink>
    </div>
    <div class="post-content">
      <hr class="accent-text accent-gradient border-0 h-px" />
      <ContentRenderer :value="data" />
    </div>
  </article>
  <NotFound v-else />
</template>