[FEAT] Clean code

src/views/AboutUs.vue

@@ -4,7 +4,6 @@
 
   const { addBreadcrumbSchema } = useStructuredData();
 
-  // 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.',

src/views/BlogDetail.vue

@@ -13,7 +13,6 @@
 
   const slug = computed(() => route.params.slug as string);
 
-  // Reactive SEO data that updates when post loads
   const pageTitle = computed(() => (post.value ? `${post.value.title} - Spritesheet Generator` : 'Blog Post - Spritesheet Generator'));
 
   const pageDescription = computed(() => post.value?.description || 'Read our latest article about spritesheet generation and game development.');
@@ -24,7 +23,6 @@
 
   const keywords = computed(() => post.value?.keywords || 'sprite sheet, game development, blog');
 
-  // Dynamic meta tags using reactive computed values
   useHead({
     title: pageTitle,
     meta: [
@@ -33,7 +31,6 @@
       { name: 'keywords', content: keywords },
       { name: 'robots', content: 'index, follow' },
 
-      // Open Graph
       { property: 'og:type', content: 'article' },
       { property: 'og:url', content: pageUrl },
       { property: 'og:title', content: pageTitle },
@@ -43,7 +40,6 @@
       { property: 'article:author', content: computed(() => post.value?.author || 'streetshadow') },
       { property: 'article:published_time', content: computed(() => post.value?.date || '') },
 
-      // Twitter
       { name: 'twitter:card', content: 'summary_large_image' },
       { name: 'twitter:url', content: pageUrl },
       { name: 'twitter:title', content: pageTitle },
@@ -54,7 +50,6 @@
     script: computed(() => {
       const scripts = [];
 
-      // Breadcrumb schema
       scripts.push({
         type: 'application/ld+json',
         children: JSON.stringify({
@@ -83,7 +78,6 @@
         }),
       });
 
-      // Blog post schema
       if (post.value) {
         scripts.push({
           type: 'application/ld+json',

src/views/BlogOverview.vue

@@ -9,7 +9,6 @@
   const { 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.',
@@ -18,7 +17,6 @@
     keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation',
   });
 
-  // Add breadcrumb synchronously
   addBreadcrumbSchema([
     { name: 'Home', url: '/' },
     { name: 'Blog', url: '/blog' },

src/views/Contact.vue

@@ -4,7 +4,6 @@
 
   const { addBreadcrumbSchema } = useStructuredData();
 
-  // 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!",

src/views/EditorView.vue

@@ -374,7 +374,6 @@
     toRef(settingsStore, 'manualCellHeight')
   );
 
-  // Zoom Control
   const {
     zoom,
     increase: zoomIn,
@@ -387,7 +386,6 @@
     initial: 1,
   });
 
-  // View Options & Tools
   const isMultiSelectMode = ref(false);
   const showActiveBorder = ref(true);
   const allowCellSwap = ref(false);
@@ -397,7 +395,6 @@
   const customColor = ref('#ffffff');
   const isCustomMode = ref(false);
 
-  // Background Color Logic
   const presetBgColors = ['transparent', '#ffffff', '#000000', '#f9fafb'] as const;
   const isHexColor = (val: string) => /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(val);
 
@@ -460,7 +457,6 @@
   const editingLayerName = ref('');
   const layerNameInput = ref<HTMLInputElement | null>(null);
 
-  // Upload Handlers
   const handleSpritesUpload = async (files: File[]) => {
     const jsonFile = files.find(file => file.type === 'application/json' || file.name.endsWith('.json'));
 
@@ -561,7 +557,6 @@
     }
   };
 
-  // Layer Editing
   const startEditingLayer = (layerId: string, currentName: string) => {
     editingLayerId.value = layerId;
     editingLayerName.value = currentName;
@@ -640,7 +635,6 @@
     const id = route.params.id as string;
     if (id) {
       if (projectStore.currentProject?.id !== id) {
-        // Only load if active project is different
         await projectStore.loadProject(id);
         if (projectStore.currentProject?.data) {
           await loadProjectData(projectStore.currentProject.data);
@@ -660,8 +654,6 @@
           }
         }
       } else {
-        // If navigated to /editor without ID, maybe clear logic?
-        // We likely want to keep state if user created new project.
       }
     }
   );

src/views/FAQ.vue

@@ -4,7 +4,6 @@
 
   const { addFAQSchema, addBreadcrumbSchema } = useStructuredData();
 
-  // Set SEO synchronously
   useSEO({
     title: 'FAQ - Frequently Asked Questions',
     description: 'Find answers to common questions about the Spritesheet Generator. Learn about supported formats, export options, and how to use the tool effectively.',

src/views/HomeView.seo.ts

@@ -5,7 +5,6 @@ import { useHead } from '@vueuse/head';
 export function useHomeViewSEO() {
   const { addOrganizationSchema, addWebSiteSchema } = useStructuredData();
 
-  // 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.',
@@ -14,13 +13,10 @@ export function useHomeViewSEO() {
     keywords: 'spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools',
   });
 
-  // Add organization schema
   addOrganizationSchema();
 
-  // Add website schema
   addWebSiteSchema();
 
-  // Add SoftwareApplication schema
   useHead({
     script: [
       {

src/views/NotFound.vue

@@ -6,18 +6,13 @@
         <div class="text-6xl">👻</div>
       </div>
     </div>
-    
+
     <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">Page not found</h1>
-    <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mb-8">
-      Oops! The page you're looking for doesn't exist or has been moved.
-    </p>
-    
-    <router-link 
-      to="/" 
-      class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-xl transition-all shadow-lg hover:shadow-indigo-500/30 flex items-center gap-2"
-    >
+    <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mb-8">Oops! The page you're looking for doesn't exist or has been moved.</p>
+
+    <router-link to="/" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-xl transition-all shadow-lg hover:shadow-indigo-500/30 flex items-center gap-2">
       <i class="fas fa-home"></i>
       <span>Go home</span>
     </router-link>
   </div>
-</template>
+</template>

src/views/PrivacyPolicy.vue

@@ -4,7 +4,6 @@
 
   const { addBreadcrumbSchema } = useStructuredData();
 
-  // 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.',

src/views/ShareView.vue

@@ -169,7 +169,6 @@
 
     const data = spritesheetData.value;
 
-    // Apply config settings
     columns.value = data.config.columns;
     settingsStore.negativeSpacingEnabled = data.config.negativeSpacingEnabled;
     settingsStore.backgroundColor = data.config.backgroundColor;
@@ -177,7 +176,6 @@
     settingsStore.manualCellWidth = data.config.manualCellWidth;
     settingsStore.manualCellHeight = data.config.manualCellHeight;
 
-    // Load sprites into layers
     const loadSprite = (spriteData: any): Promise<Sprite> =>
       new Promise(resolve => {
         const img = new Image();
@@ -199,7 +197,6 @@
             height: spriteData.height,
             x: spriteData.x || 0,
             y: spriteData.y || 0,
-            // Transformations are already baked into the base64 image
             rotation: 0,
             flipX: false,
             flipY: false,
@@ -226,10 +223,8 @@
       activeLayerId.value = firstWithSprites ? firstWithSprites.id : newLayers[0].id;
     }
 
-    // Clear current project so it's treated as new/unsaved
     projectStore.currentProject = null;
 
-    // Navigate to editor
     router.push({ name: 'editor' });
   };