import { useHead } from '@vueuse/head'; const SITE_URL = 'https://spritesheetgenerator.online'; const SITE_NAME = 'Spritesheet Generator'; export interface BlogPostSchema { title: string; description: string; author: string; datePublished: string; dateModified?: string; image: string; url: string; } export interface BreadcrumbItem { name: string; url: string; } export interface FAQItem { question: string; answer: string; } export function useStructuredData() { // Organization Schema const addOrganizationSchema = () => { const schema = { '@context': 'https://schema.org', '@type': 'Organization', name: SITE_NAME, url: SITE_URL, logo: `${SITE_URL}/og-image.png`, description: 'Free online tool to create spritesheets for game development', sameAs: ['https://gitea.adhd.sh/root/spritesheet-generator', 'https://discord.gg/JTev3nzeDa'], }; useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(schema), }, ], }); }; // WebSite Schema const addWebSiteSchema = () => { const schema = { '@context': 'https://schema.org', '@type': 'WebSite', name: SITE_NAME, url: SITE_URL, description: 'Create professional spritesheets for your game development projects', potentialAction: { '@type': 'SearchAction', target: `${SITE_URL}/blog?search={search_term_string}`, 'query-input': 'required name=search_term_string', }, }; useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(schema), }, ], }); }; // BlogPosting Schema const addBlogPostSchema = (post: BlogPostSchema) => { const schema = { '@context': 'https://schema.org', '@type': 'BlogPosting', headline: post.title, description: post.description, image: `${SITE_URL}${post.image}`, author: { '@type': 'Person', name: post.author, }, publisher: { '@type': 'Organization', name: SITE_NAME, logo: { '@type': 'ImageObject', url: `${SITE_URL}/og-image.png`, }, }, datePublished: post.datePublished, dateModified: post.dateModified || post.datePublished, mainEntityOfPage: { '@type': 'WebPage', '@id': `${SITE_URL}${post.url}`, }, }; useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(schema), }, ], }); }; // Breadcrumb Schema const addBreadcrumbSchema = (items: BreadcrumbItem[]) => { const schema = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: items.map((item, index) => ({ '@type': 'ListItem', position: index + 1, name: item.name, item: `${SITE_URL}${item.url}`, })), }; useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(schema), }, ], }); }; // Blog List Schema const addBlogListSchema = (posts: BlogPostSchema[]) => { const schema = { '@context': 'https://schema.org', '@type': 'Blog', name: `${SITE_NAME} Blog`, description: 'Latest articles about sprite sheet generation and game development', url: `${SITE_URL}/blog`, blogPost: posts.map(post => ({ '@type': 'BlogPosting', headline: post.title, description: post.description, image: `${SITE_URL}${post.image}`, author: { '@type': 'Person', name: post.author, }, datePublished: post.datePublished, url: `${SITE_URL}${post.url}`, })), }; useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(schema), }, ], }); }; // FAQ Schema const addFAQSchema = (faqs: FAQItem[]) => { const schema = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faqs.map(faq => ({ '@type': 'Question', name: faq.question, acceptedAnswer: { '@type': 'Answer', text: faq.answer, }, })), }; useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(schema), }, ], }); }; return { addOrganizationSchema, addWebSiteSchema, addBlogPostSchema, addBreadcrumbSchema, addBlogListSchema, addFAQSchema, }; }