SEO, images, cleanup

src/components/landing/PlasmaWave/PlasmaWave.vue

@@ -117,17 +117,13 @@ void mainImage(out vec4 C, in vec2 U) {
 
   vec3 c = max(cos(d * pi2) - s * sqrt(d) - k, 0.0);
   
-  // Vue.js colors: #42B883 (green) and #35495e (dark gray)
   vec3 vueGreen = vec3(0.259, 0.722, 0.514);  // #42B883
   vec3 vueDark = vec3(0.208, 0.286, 0.369);   // #35495e
   
-  // Use different colors for different wave components
   vec3 finalColor = vec3(0.0);
   if (k.x < k.y) {
-    // First wave component - Vue green
     finalColor = vueGreen * c.x;
   } else {
-    // Second wave component - Vue dark gray
     finalColor = vueDark * c.y;
   }
   

src/components/navs/Header.vue

@@ -94,7 +94,6 @@ const stars = useStars()
 const route = useRoute()
 const router = useRouter()
 
-// Helper function
 const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase()
 
 const toggleDrawer = () => {
@@ -134,7 +133,6 @@ const handleKeyDown = (e: KeyboardEvent) => {
   }
 }
 
-// Category Component
 const Category = defineComponent({
   name: 'Category',
   props: {

src/components/navs/Sidebar.vue

@@ -82,7 +82,6 @@ import '../../css/sidebar.css'
 
 const HOVER_TIMEOUT_DELAY = 150
 
-// Reactive data
 const isDrawerOpen = ref(false)
 const linePosition = ref<number | null>(null)
 const isLineVisible = ref(false)
@@ -95,14 +94,12 @@ const isTransitioning = ref(false)
 const sidebarRef = ref<HTMLDivElement>()
 const sidebarContainerRef = ref<HTMLDivElement>()
 
-// Timeouts
 let hoverTimeoutRef: number | null = null
 let hoverDelayTimeoutRef: number | null = null
 
 const route = useRoute()
 const router = useRouter()
 
-// Helper functions
 const scrollToTop = () => window.scrollTo(0, 0)
 const slug = (str: string) => str.replace(/\s+/g, "-").toLowerCase()
 
@@ -115,7 +112,6 @@ const findActiveElement = () => {
       return activePath === expectedPath
     })
     if (activeItem) {
-      // Try to find the element within the sidebar
       const selector = `.sidebar a[href="${activePath}"]`
       const element = document.querySelector(selector) as HTMLElement
       return element
@@ -145,7 +141,6 @@ const handleTransitionNavigation = async (path: string) => {
 
   pendingActivePath.value = path
 
-  // Simple navigation without transition for now
   // TODO: Implement transition when available
   await router.push(path)
   scrollToTop()
@@ -158,7 +153,6 @@ const handleMobileTransitionNavigation = async (path: string) => {
   closeDrawer()
   pendingActivePath.value = path
 
-  // Simple navigation without transition for now
   // TODO: Implement transition when available
   await router.push(path)
   scrollToTop()
@@ -201,7 +195,6 @@ const handleScroll = () => {
 const updateActiveLine = async () => {
   await nextTick()
 
-  // Wait a bit more to ensure DOM is fully updated
   setTimeout(() => {
     const activeEl = findActiveElement()
 
@@ -220,7 +213,6 @@ const updateActiveLine = async () => {
   }, 100)
 }
 
-// Category Component
 const Category = defineComponent({
   name: 'Category',
   props: {
@@ -311,11 +303,9 @@ const Category = defineComponent({
   }
 })
 
-// Watchers
 watch(() => route.path, updateActiveLine)
 watch(pendingActivePath, updateActiveLine)
 
-// Lifecycle
 onMounted(() => {
   updateActiveLine()
   if (sidebarContainerRef.value) {

src/composables/useStars.ts

@@ -32,7 +32,6 @@ export function useStars() {
     } catch (error) {
       console.error('Error fetching stars:', error)
       
-      // Fall back to cached data if available
       const cachedData = localStorage.getItem(CACHE_KEY)
       if (cachedData) {
         const { count } = JSON.parse(cachedData)

src/content/TextAnimations/SplitText/SplitText.vue

@@ -60,7 +60,6 @@ const splitterRef = ref<GSAPSplitText | null>(null)
 const initializeAnimation = async () => {
   if (typeof window === 'undefined' || !textRef.value || !props.text) return
 
-  // Wait for DOM to be fully updated
   await nextTick()
   
   const el = textRef.value
@@ -174,7 +173,6 @@ onUnmounted(() => {
   cleanup()
 })
 
-// Watch for prop changes and reinitialize animation
 watch(
   [
     () => props.text,

src/main.ts

@@ -8,7 +8,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-// PrimeVue imports
 import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
 import Button from 'primevue/button'
@@ -26,7 +25,6 @@ app.use(PrimeVue, {
 })
 app.use(ToastService)
 
-// Global components
 app.component('Button', Button)
 app.component('Toast', Toast)
 app.component('Select', Select)

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>