spritesheet-generator/src/composables/useStructuredData.ts

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,
  };
}