root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Fix vue warn

Browse Source
This commit is contained in:
root
2025-11-26 17:16:52 +01:00
parent 09c77f5414
commit accea99408
6 changed files with 148 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/AboutUs.vue
View File

@@ -1,24 +1,22 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { useSEO } from '../composables/useSEO';
import { useStructuredData } from '../composables/useStructuredData';
const { addBreadcrumbSchema } = useStructuredData();
onMounted(() => {
useSEO({
title: 'About Us - Our Mission & Story',
description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
url: '/about',
type: 'website',
keywords: 'about spritesheet generator, game development tools, open source sprite editor'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'About Us', url: '/about' }
]);
// Set SEO synchronously
useSEO({
title: 'About Us - Our Mission & Story',
description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
url: '/about',
type: 'website',
keywords: 'about spritesheet generator, game development tools, open source sprite editor'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'About Us', url: '/about' }
]);
</script>
<template>

62
src/views/BlogDetail.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { ref, onMounted, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useBlog, type BlogPost } from '../composables/useBlog';
import { useSEO } from '../composables/useSEO';
@@ -13,43 +13,61 @@
const post = ref<BlogPost | undefined>(undefined);
const renderedContent = ref('');
const slug = computed(() => route.params.slug as string);
// Initialize with default SEO (will be updated when post loads)
useSEO({
title: 'Blog Post',
description: 'Read our latest article about spritesheet generation and game development.',
url: `/blog/${slug.value}`,
type: 'article',
keywords: 'sprite sheet, game development, blog'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' },
{ name: 'Article', url: `/blog/${slug.value}` }
]);
onMounted(async () => {
const slug = route.params.slug as string;
post.value = await getPost(slug);
post.value = await getPost(slug.value);
if (post.value) {
renderedContent.value = await marked(post.value.content);
} else {
router.push({ name: 'blog-overview' });
}
});
// Set SEO meta tags
// Update SEO and structured data when post loads
watch(post, (newPost) => {
if (newPost) {
useSEO({
title: post.value.title,
description: post.value.description,
image: post.value.image,
url: `/blog/${slug}`,
title: newPost.title,
description: newPost.description,
image: newPost.image,
url: `/blog/${slug.value}`,
type: 'article',
author: post.value.author || 'nu11ed',
publishedTime: post.value.date,
keywords: post.value.keywords || 'sprite sheet, game development, blog'
author: newPost.author || 'nu11ed',
publishedTime: newPost.date,
keywords: newPost.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}`
title: newPost.title,
description: newPost.description,
author: newPost.author || 'nu11ed',
datePublished: newPost.date,
image: newPost.image,
url: `/blog/${slug.value}`
});
// Add breadcrumb
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' },
{ name: post.value.title, url: `/blog/${slug}` }
{ name: newPost.title, url: `/blog/${slug.value}` }
]);
} else {
router.push({ name: 'blog-overview' });
}
});
</script>

42
src/views/BlogOverview.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, watch } from 'vue';
import { useBlog, type BlogPost } from '../composables/useBlog';
import { useSEO } from '../composables/useSEO';
import { useStructuredData } from '../composables/useStructuredData';
@@ -9,22 +9,30 @@
const { addBlogListSchema, 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();
});
// Set SEO meta tags
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 blog list structured data
if (posts.value.length > 0) {
// Watch posts and add structured data when available
watch(posts, (newPosts) => {
if (newPosts.length > 0) {
addBlogListSchema(
posts.value.map(post => ({
newPosts.map(post => ({
title: post.title,
description: post.description,
author: post.author || 'nu11ed',
@@ -34,13 +42,7 @@
}))
);
}
// Add breadcrumb
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Blog', url: '/blog' }
]);
});
}, { immediate: true });
</script>
<template>

26
src/views/Contact.vue
View File

@@ -1,24 +1,22 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { useSEO } from '../composables/useSEO';
import { useStructuredData } from '../composables/useStructuredData';
const { addBreadcrumbSchema } = useStructuredData();
onMounted(() => {
useSEO({
title: 'Contact Us - Get in Touch',
description: 'Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We\'d love to hear from you!',
url: '/contact',
type: 'website',
keywords: 'contact spritesheet generator, support, discord, gitea'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Contact', url: '/contact' }
]);
// Set SEO synchronously
useSEO({
title: 'Contact Us - Get in Touch',
description: 'Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We\'d love to hear from you!',
url: '/contact',
type: 'website',
keywords: 'contact spritesheet generator, support, discord, gitea'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Contact', url: '/contact' }
]);
</script>
<template>

103
src/views/HomeView.seo.ts
View File

@@ -1,4 +1,3 @@
import { onMounted } from 'vue';
import { useSEO } from '../composables/useSEO';
import { useStructuredData } from '../composables/useStructuredData';
import { useHead } from '@vueuse/head';
@@ -6,60 +5,58 @@ import { useHead } from '@vueuse/head';
export function useHomeViewSEO() {
const { addOrganizationSchema, addWebSiteSchema } = useStructuredData();
onMounted(() => {
// Set page SEO
useSEO({
title: 'Spritesheet Generator - Create Game Spritesheets Online',
description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
url: '/',
type: 'website',
keywords: 'spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools'
});
// Set page SEO synchronously
useSEO({
title: 'Spritesheet Generator - Create Game Spritesheets Online',
description: 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
url: '/',
type: 'website',
keywords: 'spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools'
});
// Add organization schema
addOrganizationSchema();
// Add organization schema
addOrganizationSchema();
// Add website schema
addWebSiteSchema();
// Add website schema
addWebSiteSchema();
// Add SoftwareApplication schema
useHead({
script: [
{
type: 'application/ld+json',
children: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
'name': 'Spritesheet Generator',
'applicationCategory': 'DesignApplication',
'offers': {
'@type': 'Offer',
'price': '0',
'priceCurrency': 'USD'
},
'operatingSystem': 'Web Browser',
'description': 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
'url': 'https://spritesheetgenerator.online',
'screenshot': 'https://spritesheetgenerator.online/og-image.png',
'featureList': [
'Free sprite editor',
'Automatic spritesheet generation',
'Customizable grid layouts',
'Animation preview',
'Cross-platform compatibility',
'Zero installation required',
'Batch processing',
'Multiple export formats (PNG, JPG, GIF, ZIP, JSON)'
],
'browserRequirements': 'Requires JavaScript. Requires HTML5.',
'aggregateRating': {
'@type': 'AggregateRating',
'ratingValue': '4.8',
'ratingCount': '127'
}
})
}
]
});
// Add SoftwareApplication schema
useHead({
script: [
{
type: 'application/ld+json',
children: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
'name': 'Spritesheet Generator',
'applicationCategory': 'DesignApplication',
'offers': {
'@type': 'Offer',
'price': '0',
'priceCurrency': 'USD'
},
'operatingSystem': 'Web Browser',
'description': 'Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.',
'url': 'https://spritesheetgenerator.online',
'screenshot': 'https://spritesheetgenerator.online/og-image.png',
'featureList': [
'Free sprite editor',
'Automatic spritesheet generation',
'Customizable grid layouts',
'Animation preview',
'Cross-platform compatibility',
'Zero installation required',
'Batch processing',
'Multiple export formats (PNG, JPG, GIF, ZIP, JSON)'
],
'browserRequirements': 'Requires JavaScript. Requires HTML5.',
'aggregateRating': {
'@type': 'AggregateRating',
'ratingValue': '4.8',
'ratingCount': '127'
}
})
}
]
});
}

26
src/views/PrivacyPolicy.vue
View File

@@ -1,24 +1,22 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { useSEO } from '../composables/useSEO';
import { useStructuredData } from '../composables/useStructuredData';
const { addBreadcrumbSchema } = useStructuredData();
onMounted(() => {
useSEO({
title: 'Privacy Policy - Your Data Protection',
description: 'Read our privacy policy. Spritesheet Generator is a client-side tool that does not collect personal data or upload your images to our servers.',
url: '/privacy-policy',
type: 'website',
keywords: 'privacy policy, data protection, client-side processing'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Privacy Policy', url: '/privacy-policy' }
]);
// Set SEO synchronously
useSEO({
title: 'Privacy Policy - Your Data Protection',
description: 'Read our privacy policy. Spritesheet Generator is a client-side tool that does not collect personal data or upload your images to our servers.',
url: '/privacy-policy',
type: 'website',
keywords: 'privacy policy, data protection, client-side processing'
});
addBreadcrumbSchema([
{ name: 'Home', url: '/' },
{ name: 'Privacy Policy', url: '/privacy-policy' }
]);
</script>
<template>