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

[FEAT] SEO labels

Browse Source
This commit is contained in:
root
2025-11-26 17:05:01 +01:00
parent 54ef9121c7
commit d38ba85f4f
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@@ -4,38 +4,38 @@
<header class="mb-6 sm:mb-5"> <header class="mb-6 sm:mb-5">
<div class="flex flex-col sm:flex-row justify-between items-center gap-6 mb-8"> <div class="flex flex-col sm:flex-row justify-between items-center gap-6 mb-8">
<div class="text-center sm:text-left"> <div class="text-center sm:text-left">
<router-link to="/" class="block group"> <router-link to="/" class="block group" title="Spritesheet Generator - Create professional spritesheets" aria-label="Go to homepage">
<h1 class="text-3xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 tracking-tight mb-3 group-hover:opacity-80 transition-opacity">Spritesheet generator</h1> <h1 class="text-3xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 tracking-tight mb-3 group-hover:opacity-80 transition-opacity">Spritesheet generator</h1>
</router-link> </router-link>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">Create professional spritesheets for your game development projects</p> <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">Create professional spritesheets for your game development projects</p>
</div> </div>
<div class="flex flex-col items-center sm:items-end gap-3"> <div class="flex flex-col items-center sm:items-end gap-3">
<nav class="flex flex-wrap items-center justify-center gap-3"> <nav class="flex flex-wrap items-center justify-center gap-3">
<a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="btn btn-secondary hover:shadow-md" data-rybbit-event="source-link"> <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="btn btn-secondary hover:shadow-md" data-rybbit-event="source-link" title="View source code on Gitea" aria-label="View source code repository">
<i class="fab fa-github"></i> <i class="fab fa-github"></i>
<span class="font-medium">Source</span> <span class="font-medium">Source</span>
</a> </a>
<a href="https://discord.gg/JTev3nzeDa" target="_blank" class="btn btn-secondary hover:shadow-md" data-rybbit-event="discord-link"> <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="btn btn-secondary hover:shadow-md" data-rybbit-event="discord-link" title="Join our Discord community" aria-label="Join Discord server">
<i class="fab fa-discord"></i> <i class="fab fa-discord"></i>
<span class="font-medium">Discord</span> <span class="font-medium">Discord</span>
</a> </a>
<a href="#" @click.prevent="openHelpModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="help-link"> <a href="#" @click.prevent="openHelpModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="help-link" title="Get help and documentation" aria-label="Open help modal">
<i class="fas fa-question-circle"></i> <i class="fas fa-question-circle"></i>
<span class="font-medium">Help</span> <span class="font-medium">Help</span>
</a> </a>
<a href="#" @click.prevent="openFeedbackModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="feedback-link"> <a href="#" @click.prevent="openFeedbackModal" class="btn btn-secondary hover:shadow-md" data-rybbit-event="feedback-link" title="Share your feedback with us" aria-label="Open feedback modal">
<i class="fas fa-comment-dots"></i> <i class="fas fa-comment-dots"></i>
<span class="font-medium">Feedback</span> <span class="font-medium">Feedback</span>
</a> </a>
<dark-mode-toggle /> <dark-mode-toggle />
</nav> </nav>
<div class="flex gap-4 text-sm font-medium text-gray-600 dark:text-gray-400"> <div class="flex gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
<router-link to="/" class="hover:text-gray-900 dark:hover:text-white transition-colors">Home</router-link> <router-link to="/" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Spritesheet Generator Home" aria-label="Navigate to home page">Home</router-link>
<router-link to="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors">Blog</router-link> <router-link to="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Read our blog posts" aria-label="Navigate to blog">Blog</router-link>
<router-link to="/about" class="hover:text-gray-900 dark:hover:text-white transition-colors">About Us</router-link> <router-link to="/about" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Learn more about us" aria-label="Navigate to about page">About Us</router-link>
<router-link to="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors">Contact</router-link> <router-link to="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Get in touch with us" aria-label="Navigate to contact page">Contact</router-link>
<router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors">Privacy Policy</router-link> <router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="Read our privacy policy" aria-label="Navigate to privacy policy">Privacy Policy</router-link>
<a href="/sitemap.xml" target="_blank" class="hover:text-gray-900 dark:hover:text-white transition-colors">Sitemap</a> <a href="/sitemap.xml" target="_blank" rel="noopener noreferrer" class="hover:text-gray-900 dark:hover:text-white transition-colors" title="View XML sitemap" aria-label="View sitemap">Sitemap</a>
</div> </div>
</div> </div>
</div> </div>

2
src/views/BlogDetail.vue
View File

@@ -25,7 +25,7 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div v-if="post"> <div v-if="post">
<RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors"> <RouterLink :to="{ name: 'blog-overview' }" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-6 transition-colors" title="Return to blog overview" aria-label="Navigate back to blog overview page">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg> </svg>

2
src/views/BlogOverview.vue
View File

@@ -16,7 +16,7 @@
<h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Blog</h1> <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"> <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="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col h-full"> <article v-for="post in posts" :key="post.slug" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 flex flex-col h-full">
<RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full"> <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" /> <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" />
<div class="p-6 flex-1 flex flex-col"> <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> <h2 class="text-xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">{{ post.title }}</h2>