SEO, images, cleanup

2026-03-07 06:29:30 -07:00 · 2025-07-09 09:50:02 +03:00
parent 83607dc6c5
commit 8b35b43b08
18 changed files with 165 additions and 76 deletions
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -2,11 +2,6 @@ import { globalIgnores } from 'eslint/config'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 import pluginVue from 'eslint-plugin-vue'

-// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
-// import { configureVueProject } from '@vue/eslint-config-typescript'
-// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
-// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
-
 export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
--- a/index.html
+++ b/index.html
@@ -1,19 +1,94 @@
-<!DOCTYPE html>
-<html lang="">
+<!doctype html>
+<html lang="en" style="background: #0b0b0b;">

 <head>
-  <meta charset="UTF-8">
-  <meta name="theme-color" content="#0b0b0b">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Basic Meta Tags -->
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#0b0b0b" />
+  <meta name="author" content="David Haz">
+  <meta name="description"
+    content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces." />
+  <meta name="keywords"
+    content="Vue, Vue tutorials, Vue tips, Vue best practices, Vue development, Vue guides, Vue articles, Vue ecosystem, JavaScript, frontend development, VueJS, UI Library, Component Library, Vue Components, Vue Animations" />

-  <!-- Fonts -->
+  <!-- Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
-    href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Gochi+Hand&display=swap"
+    href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
    rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Figtree:wght@200..800&display=swap"
+    rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet">

-  <title>Vue Bits</title>
+  <!-- Icons -->
+  <link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="favicon.ico" />
+  <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
+  <link rel="shortcut icon" href="favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <meta name="apple-mobile-web-app-title" content="Vue Bits" />
+  <link rel="manifest" href="/site.webmanifest" />
+
+  <!-- Open Graph (OG) - Facebook, LinkedIn, etc. -->
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Vue Bits">
+  <meta property="og:description"
+    content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.">
+  <meta property="og:image" content="https://vuebits.dev/og-pic.jpg">
+  <meta property="og:image:alt" content="The Vue Bits landing page design, showcasing the logo and a subtitle!">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:url" content="https://vuebits.dev">
+  <meta property="og:site_name" content="Vue Bits">
+  <meta property="og:locale" content="en_US">
+
+  <!-- Twitter Card - Twitter Sharing -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Vue Bits">
+  <meta name="twitter:description"
+    content="An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.">
+  <meta name="twitter:image" content="https://vuebits.dev/og-pic.jpg">
+  <meta name="twitter:image:alt" content="The Vue Bits landing page design, showcasing the logo and a subtitle!">
+
+  <!-- Favicon & Apple Touch Icons -->
+  <link rel="icon" href="/favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="manifest" href="/site.webmanifest">
+
+  <!-- Canonical & Robots Meta Tags -->
+  <link rel="canonical" href="https://vuebits.dev">
+  <meta name="robots" content="index, follow">
+
+  <!-- Structured Data (JSON-LD for SEO) -->
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "Vue Bits",
+    "url": "https://vuebits.dev",
+    "description": "An open source collection of high quality, animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.",
+    "image": "https://vuebits.dev/og-pic.jpg",
+    "author": {
+      "@type": "Person",
+      "name": "David Haz"
+    },
+    "publisher": {
+      "@type": "Person",
+      "name": "David Haz",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "https://davidhaz.com"
+      }
+    }
+  }
+  </script>
+  <title>Vue Bits - Animated UI Components For Vue</title>
 </head>

 <body>
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-512x512.png
+++ b/public/android-chrome-512x512.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/og-pic.png
+++ b/public/og-pic.png
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/scripts/generateComponent.js
+++ b/scripts/generateComponent.js
@@ -0,0 +1,43 @@
+import fs from "fs";
+import path from "path";
+import process from "process";
+
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const args = process.argv.slice(2);
+if (args.length < 2) {
+  console.error("Usage: npm run generate:component <ComponentType> <ComponentName>");
+  process.exit(1);
+}
+
+const [componentType, componentName] = args;
+const componentNameLower = componentName.charAt(0).toLowerCase() + componentName.slice(1);
+
+const paths = {
+  content: path.join(__dirname, "../src/content", componentType, componentName),
+  demo: path.join(__dirname, "../src/demo", componentType),
+  constants: path.join(__dirname, "../src/constants/code", componentType),
+};
+
+Object.values(paths).forEach((dir) => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+});
+
+const files = [
+  path.join(paths.content, `${componentName}.vue`),
+  path.join(paths.demo, `${componentName}Demo.jsx`),
+  path.join(paths.constants, `${componentNameLower}Code.js`),
+];
+
+files.forEach((file) => {
+  if (!fs.existsSync(file)) {
+    fs.writeFileSync(file, "");
+  }
+});
+
+console.log(`Component "${componentName}" structure created successfully under "${componentType}".`);
--- a/src/components/landing/PlasmaWave/PlasmaWave.vue
+++ b/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;
  }
  
--- a/src/components/navs/Header.vue
+++ b/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: {
--- a/src/components/navs/Sidebar.vue
+++ b/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) {
--- a/src/composables/useStars.ts
+++ b/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)
--- a/src/content/TextAnimations/SplitText/SplitText.vue
+++ b/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,
--- a/src/main.ts
+++ b/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)
--- a/src/pages/CategoryPage.vue
+++ b/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,22 +17,21 @@
  </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(() => {
+const SubcategoryComponent = computed(() => {
  if (!subcategory.value) {
    return null
  }
@@ -44,27 +43,24 @@
  }

  return defineAsyncComponent(componentLoader)
-  })
+})

-  // Update document title
-  watch(decodedLabel, (newLabel) => {
+watch(decodedLabel, (newLabel) => {
  if (newLabel) {
    document.title = `Vue Bits - ${newLabel}`
  }
-  }, { immediate: true })
+}, { immediate: true })

-  // Scroll to top when subcategory changes
-  watch(subcategory, async () => {
+watch(subcategory, async () => {
  if (scrollRef.value) {
    await nextTick()
    scrollRef.value.scrollTo(0, 0)
  }
-  })
+})

-  onMounted(() => {
-    // Initial scroll to top
+onMounted(() => {
  if (scrollRef.value) {
    scrollRef.value.scrollTo(0, 0)
  }
-  })
+})
 </script>
				`@@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`