url setup

2026-03-07 06:29:30 -07:00 · 2025-07-09 10:47:01 +03:00
parent fa26b78ae0
commit d318c2eeb6
13 changed files with 181 additions and 24 deletions
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@

 ## Documentation

-Go to [vuebits.dev](https://vuebits.dev/) to view the documentation.
+Go to [vue-bits.dev](https://vue-bits.dev/) to view the documentation.

 ## About

@@ -39,7 +39,7 @@ Vue Bits is a large collection of animated Vue components made to spice up your
 ## CLI (<a href="https://jsrepo.dev"><img src="https://jsrepo.dev/badges/jsrepo.svg" width="50" alt="jsrepo"></a>)

 Vue Bits uses [jsrepo](https://jsrepo.dev) for installing components via CLI. </br>
-The setup steps can be found on each component's page in the [documentation](https://vuebits.dev/).
+The setup steps can be found on each component's page in the [documentation](https://vue-bits.dev/).

 ## How To Contribute?

--- a/index.html
+++ b/index.html
@@ -40,11 +40,11 @@
  <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" content="https://vue-bits.dev/og-pic.png">
  <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:url" content="https://vue-bits.dev">
  <meta property="og:site_name" content="Vue Bits">
  <meta property="og:locale" content="en_US">

@@ -53,7 +53,7 @@
  <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" content="https://vue-bits.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 -->
@@ -62,7 +62,7 @@
  <link rel="manifest" href="/site.webmanifest">

  <!-- Canonical & Robots Meta Tags -->
-  <link rel="canonical" href="https://vuebits.dev">
+  <link rel="canonical" href="https://vue-bits.dev">
  <meta name="robots" content="index, follow">

  <!-- Structured Data (JSON-LD for SEO) -->
@@ -71,9 +71,9 @@
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Vue Bits",
-    "url": "https://vuebits.dev",
+    "url": "https://vue-bits.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",
+    "image": "https://vue-bits.dev/og-pic.jpg",
    "author": {
      "@type": "Person",
      "name": "David Haz"
--- a/jsrepo-build-config.json
+++ b/jsrepo-build-config.json
@@ -4,7 +4,7 @@
 		"authors": ["David Haz"],
 		"description": "An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable user interfaces.",
 		"bugs": "https://github.com/DavidHDev/vue-bits/issues",
-		"homepage": "https://vuebits.dev",
+		"homepage": "https://vue-bits.dev",
 		"repository": "https://github.com/DavidHDev/vue-bits",
 		"tags": [
 			"vue",
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@primeuix/themes": "^1.2.1",
        "@wdns/vue-code-block": "^2.3.5",
        "gsap": "^3.13.0",
+        "motion-v": "^1.5.0",
        "ogl": "^1.0.11",
        "primeicons": "^7.0.0",
        "primevue": "^4.3.6",
@@ -2770,6 +2771,12 @@
        "form-data": "^4.0.0"
      }
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.36.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.36.0.tgz",
@@ -3403,6 +3410,94 @@
        }
      }
    },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@wdns/vue-code-block": {
      "version": "2.3.5",
      "resolved": "https://registry.npmjs.org/@wdns/vue-code-block/-/vue-code-block-2.3.5.tgz",
@@ -5051,6 +5146,33 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.22.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.22.0.tgz",
+      "integrity": "sha512-qG07rR8/mboCNU34nORbrIbBXbJzP4aDqBdr67TAIVlMryDEOwh7LXjylWovlnPCMg78ExoY0Gn2F1fV+3DNIw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.22.0",
+        "motion-utils": "^12.19.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/fs-extra": {
      "version": "11.3.0",
      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
@@ -5304,6 +5426,12 @@
        "he": "bin/he"
      }
    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
    "node_modules/highlight.js": {
      "version": "11.11.1",
      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
@@ -6210,6 +6338,36 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.22.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.22.0.tgz",
+      "integrity": "sha512-ooH7+/BPw9gOsL9VtPhEJHE2m4ltnhMlcGMhEqA0YGNhKof7jdaszvsyThXI6LVIKshJUZ9/CP6HNqQhJfV7kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.19.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.19.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.19.0.tgz",
+      "integrity": "sha512-BuFTHINYmV07pdWs6lj6aI63vr2N4dg0vR+td0rtrdpWOhBzIkEklZyLcvKBoEtwSqx8Jg06vUB5RS0xDiUybw==",
+      "license": "MIT"
+    },
+    "node_modules/motion-v": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-1.5.0.tgz",
+      "integrity": "sha512-AIwI0U0ZlxDgdtjZKNzSpUo+X3IKRUGNqrdf+hig3TIehxgFds4gSL3amqsx9iZIGjYnGDdlwuqxKPYR1cxiTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^10.0.0",
+        "framer-motion": "12.22.0",
+        "hey-listen": "^1.0.8",
+        "motion-dom": "12.22.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
    "node_modules/mrmime": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -7453,9 +7611,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
    },
    "node_modules/type-check": {
      "version": "0.4.0",
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "@primeuix/themes": "^1.2.1",
    "@wdns/vue-code-block": "^2.3.5",
    "gsap": "^3.13.0",
+    "motion-v": "^1.5.0",
    "ogl": "^1.0.11",
    "primeicons": "^7.0.0",
    "primevue": "^4.3.6",
@@ -36,13 +37,13 @@
    "eslint": "^9.29.0",
    "eslint-plugin-vue": "~10.2.0",
    "jiti": "^2.4.2",
+    "jsrepo": "^1.30.1",
    "npm-run-all2": "^8.0.4",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.11",
    "typescript": "~5.8.0",
    "vite": "^7.0.0",
    "vite-plugin-vue-devtools": "^7.7.7",
-    "vue-tsc": "^2.2.10",
-		"jsrepo": "^1.30.1"
+    "vue-tsc": "^2.2.10"
  }
 }
--- a/public/og-pic.jpg
+++ b/public/og-pic.jpg
--- a/src/components/code/CliInstallation.vue
+++ b/src/components/code/CliInstallation.vue
@@ -23,7 +23,7 @@
            <p class="demo-extra-info">1. Initialize a config file for your project</p>

            <div class="setup-option">
-              <VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vuebits.dev" highlightjs
+              <VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vue-bits.dev" highlightjs
                lang="bash" theme="nord" :copy-button="true" class="code-block" />
            </div>

--- a/src/components/landing/Hero/Hero.vue
+++ b/src/components/landing/Hero/Hero.vue
@@ -23,7 +23,7 @@
    </div>

    <div v-if="!isMobile" class="hero-cards-container">
-      <div class="hero-card hero-card-1" @click="openUrl('https://vuebits.dev/backgrounds/dot-grid')">
+      <div class="hero-card hero-card-1" @click="openUrl('https://vue-bits.dev/backgrounds/dot-grid')">
        <div class="w-full h-full relative hero-dot-grid">
          <DotGrid base-color="#ffffff" active-color="rgba(138, 43, 226, 0.9)" :dot-size="8" :gap="16"
            :proximity="50" />
@@ -32,12 +32,12 @@
      </div>

      <div class="hero-cards-row">
-        <div class="hero-card hero-card-2" @click="openUrl('https://vuebits.dev/backgrounds/letter-glitch')">
+        <div class="hero-card hero-card-2" @click="openUrl('https://vue-bits.dev/backgrounds/letter-glitch')">
          <LetterGlitch class-name="hero-glitch" :glitch-colors="['#ffffff', '#999999', '#333333']" />
          <div class="placeholder-card"></div>
        </div>

-        <div class="hero-card hero-card-3" @click="openUrl('https://vuebits.dev/backgrounds/squares')">
+        <div class="hero-card hero-card-3" @click="openUrl('https://vue-bits.dev/backgrounds/squares')">
          <Squares border-color="#fff" :speed="0.2" direction="diagonal" hover-fill-color="#fff" />
          <div class="placeholder-card"></div>
        </div>
--- a/src/constants/code/Animations/fadeContentCode.ts
+++ b/src/constants/code/Animations/fadeContentCode.ts
@@ -2,7 +2,7 @@ import code from '@content/Animations/FadeContent/FadeContent.vue?raw'
 import type { CodeObject } from '../../../types/code'

 export const fadeContent: CodeObject = {
-  cli: `npx jsrepo add https://vuebits.dev/Animations/FadeContent`,
+  cli: `npx jsrepo add https://vue-bits.dev/Animations/FadeContent`,
  usage: `<template>
  <FadeContent
    :blur="true"
--- a/src/constants/code/Backgrounds/dotGridCode.ts
+++ b/src/constants/code/Backgrounds/dotGridCode.ts
@@ -2,7 +2,7 @@ import code from '@content/Backgrounds/DotGrid/DotGrid.vue?raw'
 import type { CodeObject } from '../../../types/code'

 export const dotGrid: CodeObject = {
-  cli: `npx jsrepo add https://vuebits.dev/Backgrounds/DotGrid`,
+  cli: `npx jsrepo add https://vue-bits.dev/Backgrounds/DotGrid`,
  installation: `npm install gsap`,
  usage: `<template>
  <div class="dot-grid-container">
--- a/src/constants/code/Components/masonryCode.ts
+++ b/src/constants/code/Components/masonryCode.ts
@@ -2,7 +2,7 @@ import code from '@content/Components/Masonry/Masonry.vue?raw'
 import type { CodeObject } from '../../../types/code'

 export const masonry: CodeObject = {
-  cli: `npx jsrepo add https://vuebits.dev/Components/Masonry`,
+  cli: `npx jsrepo add https://vue-bits.dev/Components/Masonry`,
  installation: `npm install gsap`,
  usage: `<template>
  <Masonry
--- a/src/constants/code/TextAnimations/splitTextCode.ts
+++ b/src/constants/code/TextAnimations/splitTextCode.ts
@@ -3,7 +3,7 @@ import code from '@content/TextAnimations/SplitText/SplitText.vue?raw'
 import type { CodeObject } from '../../../types/code'

 export const splitText: CodeObject = {
-  cli: `npx jsrepo add https://vuebits.dev/TextAnimations/SplitText`,
+  cli: `npx jsrepo add https://vue-bits.dev/TextAnimations/SplitText`,
  installation: `npm install gsap`,
  usage: `<template>
  <SplitText
--- a/src/css/sidebar.css
+++ b/src/css/sidebar.css
@@ -237,9 +237,9 @@
 .category-name {
  margin-bottom: 0.5rem;
  font-weight: 900;
-  letter-spacing: -1px;
+  letter-spacing: -0.5px;
  color: #fff;
-  font-size: 1rem;
+  font-size: 1.1rem;
 }

 .category-items {