spritesheet-generator/src/views/BlogDetail.vue

<script setup lang="ts">
  import { ref, onMounted, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useBlog, type BlogPost } from '../composables/useBlog';
  import { useHead } from '@vueuse/head';
  import { marked } from 'marked';

  const route = useRoute();
  const router = useRouter();
  const { getPost } = useBlog();
  const post = ref<BlogPost | undefined>(undefined);
  const renderedContent = ref('');

  const slug = computed(() => route.params.slug as string);

  // Reactive SEO data that updates when post loads
  const pageTitle = computed(() => (post.value ? `${post.value.title} - Spritesheet Generator` : 'Blog Post - Spritesheet Generator'));

  const pageDescription = computed(() => post.value?.description || 'Read our latest article about spritesheet generation and game development.');

  const pageImage = computed(() => (post.value?.image ? `https://spritesheetgenerator.online${post.value.image}` : 'https://spritesheetgenerator.online/og-image.png'));

  const pageUrl = computed(() => `https://spritesheetgenerator.online/blog/${slug.value}`);

  const keywords = computed(() => post.value?.keywords || 'sprite sheet, game development, blog');

  // Dynamic meta tags using reactive computed values
  useHead({
    title: pageTitle,
    meta: [
      { name: 'title', content: pageTitle },
      { name: 'description', content: pageDescription },
      { name: 'keywords', content: keywords },
      { name: 'robots', content: 'index, follow' },

      // Open Graph
      { property: 'og:type', content: 'article' },
      { property: 'og:url', content: pageUrl },
      { property: 'og:title', content: pageTitle },
      { property: 'og:description', content: pageDescription },
      { property: 'og:image', content: pageImage },
      { property: 'og:site_name', content: 'Spritesheet Generator' },
      { property: 'article:author', content: computed(() => post.value?.author || 'nu11ed') },
      { property: 'article:published_time', content: computed(() => post.value?.date || '') },

      // Twitter
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:url', content: pageUrl },
      { name: 'twitter:title', content: pageTitle },
      { name: 'twitter:description', content: pageDescription },
      { name: 'twitter:image', content: pageImage },
    ],
    link: [{ rel: 'canonical', href: pageUrl }],
    script: computed(() => {
      const scripts = [];

      // Breadcrumb schema
      scripts.push({
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement: [
            {
              '@type': 'ListItem',
              position: 1,
              name: 'Home',
              item: 'https://spritesheetgenerator.online/',
            },
            {
              '@type': 'ListItem',
              position: 2,
              name: 'Blog',
              item: 'https://spritesheetgenerator.online/blog',
            },
            {
              '@type': 'ListItem',
              position: 3,
              name: post.value?.title || 'Article',
              item: pageUrl.value,
            },
          ],
        }),
      });

      // Blog post schema
      if (post.value) {
        scripts.push({
          type: 'application/ld+json',
          children: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'BlogPosting',
            headline: post.value.title,
            description: post.value.description,
            image: `https://spritesheetgenerator.online${post.value.image}`,
            author: {
              '@type': 'Person',
              name: post.value.author || 'nu11ed',
            },
            publisher: {
              '@type': 'Organization',
              name: 'Spritesheet Generator',
              logo: {
                '@type': 'ImageObject',
                url: 'https://spritesheetgenerator.online/og-image.png',
              },
            },
            datePublished: post.value.date,
            dateModified: post.value.date,
            mainEntityOfPage: {
              '@type': 'WebPage',
              '@id': pageUrl.value,
            },
          }),
        });
      }

      return scripts;
    }),
  });

  onMounted(async () => {
    post.value = await getPost(slug.value);

    if (post.value) {
      renderedContent.value = await marked(post.value.content);
    } else {
      router.push({ name: 'blog-overview' });
    }
  });
</script>

<template>
  <div class="w-full">
    <div v-if="post">
      <RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors" title="Return to blog overview" aria-label="Navigate back to blog overview page">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
        Back to overview
      </RouterLink>

      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">{{ post.title }}</h1>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-8">{{ post.date }}</p>
      <!-- Image is intentionally omitted here as per requirements -->
      <div class="prose max-w-none" v-html="renderedContent"></div>
    </div>
    <div v-else class="text-center py-12">
      <p class="text-xl text-gray-600 dark:text-gray-400">Loading...</p>
    </div>
  </div>
</template>