49 lines
2.1 KiB
Vue
49 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useBlog, type BlogPost } from '../composables/useBlog';
|
|
import { useSEO } from '../composables/useSEO';
|
|
import { useStructuredData } from '../composables/useStructuredData';
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
const { getPosts } = useBlog();
|
|
const { addBreadcrumbSchema } = useStructuredData();
|
|
const posts = ref<BlogPost[]>([]);
|
|
|
|
// Set SEO meta tags synchronously
|
|
useSEO({
|
|
title: 'Blog - Latest Articles on Spritesheet Generation',
|
|
description: 'Explore our latest articles about sprite sheet generation, game development, pixel art, and sprite animation techniques.',
|
|
url: '/blog',
|
|
type: 'website',
|
|
keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation',
|
|
});
|
|
|
|
// Add breadcrumb synchronously
|
|
addBreadcrumbSchema([
|
|
{ name: 'Home', url: '/' },
|
|
{ name: 'Blog', url: '/blog' },
|
|
]);
|
|
|
|
onMounted(async () => {
|
|
posts.value = await getPosts();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Blog</h1>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<article v-for="post in posts" :key="post.slug" class="glass-panel overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full group border-0 ring-1 ring-gray-200 dark:ring-gray-700">
|
|
<RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full" :title="`Read more: ${post.title}`" :aria-label="`Read full blog post: ${post.title}`">
|
|
<img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" loading="lazy" decoding="async" />
|
|
<div class="p-6 flex-1 flex flex-col">
|
|
<h2 class="text-xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">{{ post.title }}</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 text-xs mb-3">{{ post.date }}</p>
|
|
<p class="text-gray-700 dark:text-gray-300 text-sm line-clamp-3 flex-1">{{ post.description }}</p>
|
|
</div>
|
|
</RouterLink>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</template>
|