index/pages/blog/[slug].vue

<script setup lang="ts">
import { formatDate } from 'date-fns'
import { useAsyncData } from '#app'

const config = useAppConfig()

let thumbnail: string | null = null
let slug = useRoute().params.slug

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

const { data } = 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>
  <article
    v-if="data"
    class="post scrollbar fade-mask-sm flex flex-col gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-3"
  >
    <div
      class="post-preamble"
      :style="{ backgroundImage: 'url(' + thumbnail + ')' }"
    >
      <div class="p-2">
        <h3 class="alex">{{ data.title }}</h3>
        <div class="flex flex-row gap-x-0 gap-y-2 flex-wrap">
          <div class="flex flex-row items-center gap-1">
            <iconify-icon icon="mdi:calendar" />
            <strong class="nobr font-small">
              {{ formatDate(data.created, 'LLLL do, y &ndash; HH:mm') }}
            </strong>
          </div>
          <div class="flex flex-row items-center gap-1">
            <iconify-icon icon="mdi:clock-outline" />
            <strong class="nobr font-small">
              {{ data!.readingTime.text.split(' ')[0] + ' minutes to read' }}
            </strong>
          </div>
        </div>
      </div>
      <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="link post-preamble-share px-2 py-1"
      >
        <iconify-icon icon="mdi:twitter"></iconify-icon>
      </NuxtLink>
      <NuxtLink to="/blog" class="link post-preamble-control px-2 py-1">
        <iconify-icon icon="icon-park-solid:back"></iconify-icon>
      </NuxtLink>
    </div>
    <div class="post-content">
      <hr class="accent accent-gradient border-0 h-px" />
      <ContentRenderer :value="data" />
    </div>
  </article>
  <NotFound v-else />
</template>