SEO, images, cleanup

src/pages/CategoryPage.vue

@@ -8,7 +8,7 @@
           <component :is="SubcategoryComponent" v-if="SubcategoryComponent" />
         </template>
         <template #fallback>
-          <div class="loading-placeholder">Loading...</div>
+          <div class="loading-placeholder"></div>
         </template>
       </Suspense>
     </div>
@@ -17,54 +17,50 @@
   </div>
 </template>
 
-  <script setup lang="ts">
-  import { ref, computed, watch, onMounted, nextTick, defineAsyncComponent } from 'vue'
-  import { useRoute } from 'vue-router'
-  import { componentMap } from '../constants/Components'
-  import { decodeLabel } from '../utils/utils'
-  import BackToTopButton from '@/components/common/BackToTopButton.vue'
-  import '../css/category.css'
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick, defineAsyncComponent } from 'vue'
+import { useRoute } from 'vue-router'
+import { componentMap } from '../constants/Components'
+import { decodeLabel } from '../utils/utils'
+import BackToTopButton from '@/components/common/BackToTopButton.vue'
+import '../css/category.css'
 
-  const route = useRoute()
-  const scrollRef = ref<HTMLDivElement | null>(null)
+const route = useRoute()
+const scrollRef = ref<HTMLDivElement | null>(null)
 
-  const subcategory = computed(() => route.params.subcategory as string)
-  const decodedLabel = computed(() => decodeLabel(subcategory.value))
+const subcategory = computed(() => route.params.subcategory as string)
+const decodedLabel = computed(() => decodeLabel(subcategory.value))
 
-  // Lazy load the component based on subcategory
-  const SubcategoryComponent = computed(() => {
-    if (!subcategory.value) {
-      return null
-    }
+const SubcategoryComponent = computed(() => {
+  if (!subcategory.value) {
+    return null
+  }
 
-    const componentLoader = componentMap[subcategory.value as keyof typeof componentMap]
+  const componentLoader = componentMap[subcategory.value as keyof typeof componentMap]
 
-    if (!componentLoader) {
-      return null
-    }
+  if (!componentLoader) {
+    return null
+  }
 
-    return defineAsyncComponent(componentLoader)
-  })
+  return defineAsyncComponent(componentLoader)
+})
 
-  // Update document title
-  watch(decodedLabel, (newLabel) => {
-    if (newLabel) {
-      document.title = `Vue Bits - ${newLabel}`
-    }
-  }, { immediate: true })
+watch(decodedLabel, (newLabel) => {
+  if (newLabel) {
+    document.title = `Vue Bits - ${newLabel}`
+  }
+}, { immediate: true })
 
-  // Scroll to top when subcategory changes
-  watch(subcategory, async () => {
-    if (scrollRef.value) {
-      await nextTick()
-      scrollRef.value.scrollTo(0, 0)
-    }
-  })
+watch(subcategory, async () => {
+  if (scrollRef.value) {
+    await nextTick()
+    scrollRef.value.scrollTo(0, 0)
+  }
+})
 
-  onMounted(() => {
-    // Initial scroll to top
-    if (scrollRef.value) {
-      scrollRef.value.scrollTo(0, 0)
-    }
-  })
+onMounted(() => {
+  if (scrollRef.value) {
+    scrollRef.value.scrollTo(0, 0)
+  }
+})
 </script>