From d38ba85f4f01895adc0049be735a0638b65ccf7a Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Wed, 26 Nov 2025 17:05:01 +0100
Subject: [PATCH] [FEAT] SEO labels

---
 src/App.vue                | 22 +++++++++++-----------
 src/views/BlogDetail.vue   |  2 +-
 src/views/BlogOverview.vue |  2 +-
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d34e15d..3ebc949 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,38 +4,38 @@
       <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="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>
             </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>
           </div>
           <div class="flex flex-col items-center sm:items-end 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>
                 <span class="font-medium">Source</span>
               </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>
                 <span class="font-medium">Discord</span>
               </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>
                 <span class="font-medium">Help</span>
               </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>
                 <span class="font-medium">Feedback</span>
               </a>
               <dark-mode-toggle />
             </nav>
             <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="/blog" class="hover:text-gray-900 dark:hover:text-white transition-colors">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="/contact" class="hover:text-gray-900 dark:hover:text-white transition-colors">Contact</router-link>
-              <router-link to="/privacy-policy" class="hover:text-gray-900 dark:hover:text-white transition-colors">Privacy Policy</router-link>
-              <a href="/sitemap.xml" target="_blank" class="hover:text-gray-900 dark:hover:text-white transition-colors">Sitemap</a>
+              <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" 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" 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" 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" title="Read our privacy policy" aria-label="Navigate to privacy policy">Privacy Policy</router-link>
+              <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>
diff --git a/src/views/BlogDetail.vue b/src/views/BlogDetail.vue
index 63a4c3e..1663eca 100644
--- a/src/views/BlogDetail.vue
+++ b/src/views/BlogDetail.vue
@@ -25,7 +25,7 @@
 <template>
   <div class="w-full">
     <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">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
         </svg>
diff --git a/src/views/BlogOverview.vue b/src/views/BlogOverview.vue
index 5e847d6..f8797c2 100644
--- a/src/views/BlogOverview.vue
+++ b/src/views/BlogOverview.vue
@@ -16,7 +16,7 @@
     <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="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" />
           <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>