BReadcrumbs

src/views/BlogDetail.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
+  import { ref, onMounted, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { useBlog, type BlogPost } from '../composables/useBlog';
+  import { useSEO } from '../composables/useSEO';
+  import { useStructuredData } from '../composables/useStructuredData';
   import { marked } from 'marked';
 
   const route = useRoute();
   const router = useRouter();
   const { getPost } = useBlog();
+  const { addBlogPostSchema, addBreadcrumbSchema } = useStructuredData();
   const post = ref<BlogPost | undefined>(undefined);
   const renderedContent = ref('');
 
@@ -16,6 +19,35 @@
 
     if (post.value) {
       renderedContent.value = await marked(post.value.content);
+
+      // Set SEO meta tags
+      useSEO({
+        title: post.value.title,
+        description: post.value.description,
+        image: post.value.image,
+        url: `/blog/${slug}`,
+        type: 'article',
+        author: post.value.author || 'nu11ed',
+        publishedTime: post.value.date,
+        keywords: post.value.keywords || 'sprite sheet, game development, blog'
+      });
+
+      // Add structured data
+      addBlogPostSchema({
+        title: post.value.title,
+        description: post.value.description,
+        author: post.value.author || 'nu11ed',
+        datePublished: post.value.date,
+        image: post.value.image,
+        url: `/blog/${slug}`
+      });
+
+      // Add breadcrumb
+      addBreadcrumbSchema([
+        { name: 'Home', url: '/' },
+        { name: 'Blog', url: '/blog' },
+        { name: post.value.title, url: `/blog/${slug}` }
+      ]);
     } else {
       router.push({ name: 'blog-overview' });
     }