Simplify constants declaration

src/constants/code/Animations/animatedContentCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/AnimatedContent/AnimatedContent.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const animatedContent: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/AnimatedContent`,
+export const animatedContent = createCodeObject(code, 'Animations/AnimatedContent', {
   installation: `npm install gsap`,
   usage: `<template>
   <AnimatedContent
@@ -28,8 +27,7 @@ export const animatedContent: CodeObject = {
   import AnimatedContent from "./AnimatedContent.vue";
   
   const handleComplete = () => {
-    console.log("Animation completed!");
-  };
-</script>`,
-  code
-};
+    console.log("Animation completed!");,
+});
+</script>`
+});

src/constants/code/Animations/blobCursorCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/BlobCursor/BlobCursor.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const blobCursor: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/BlobCursor`,
+export const blobCursor = createCodeObject(code, 'Animations/BlobCursor', {
   installation: `npm install gsap`,
   usage: `<template>
   <BlobCursor
@@ -27,6 +26,5 @@ export const blobCursor: CodeObject = {
 
 <script setup lang="ts">
   import BlobCursor from "./BlobCursor.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/clickSparkCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/ClickSpark/ClickSpark.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const clickSpark: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ClickSpark`,
+export const clickSpark = createCodeObject(code, 'Animations/ClickSpark', {
   usage: `<template>
   <ClickSpark
     spark-color="#ff6b6b"
@@ -42,6 +41,5 @@ import ClickSpark from '@/content/Animations/ClickSpark/ClickSpark.vue'
   pointer-events: none;
   user-select: none;
 }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Animations/countUpCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/CountUp/CountUp.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const countup: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/CountUp`,
+export const countup = createCodeObject(code, 'Animations/CountUp', {
   usage: `<template>
   <CountUp
     :from="0"
@@ -28,6 +27,5 @@ export const countup: CodeObject = {
   const handleEnd = () => {
     console.log("Count animation ended!");
   };
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/crosshairCode.ts

@@ -1,9 +1,8 @@
 import code from '@/content/Animations/Crosshair/Crosshair.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const crosshair: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Crosshair`,
-  installation: `npm i gsap`,
+export const crosshair = createCodeObject(code, 'Animations/Crosshair', {
+  installation: `npm install gsap`,
   usage: `<template>
   <div ref="containerRef" style="height: 300px; overflow: hidden;">
     <Crosshair :container-ref="containerElement" color="#ffffff" />
@@ -16,6 +15,5 @@ export const crosshair: CodeObject = {
   
   const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
   const containerElement = computed(() => containerRef.value);
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/cubesCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/Cubes/Cubes.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const cubes: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Cubes`,
+export const cubes = createCodeObject(code, 'Animations/Cubes', {
   installation: `npm install gsap`,
   usage: `// CREDIT
 // Component inspired from Can Tastemel's original work for the lambda.ai landing page
@@ -27,6 +26,5 @@ export const cubes: CodeObject = {
 
 <script setup lang="ts">
   import Cubes from "./Cubes.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/fadeContentCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/FadeContent/FadeContent.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const fadeContent: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/FadeContent`,
+export const fadeContent = createCodeObject(code, 'Animations/FadeContent', {
   usage: `<template>
   <FadeContent
     :blur="true"
@@ -22,6 +21,5 @@ export const fadeContent: CodeObject = {
 
 <script setup lang="ts">
   import FadeContent from "./FadeContent.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/glareHoverCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/GlareHover/GlareHover.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const glareHover: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/GlareHover`,
+export const glareHover = createCodeObject(code, 'Animations/GlareHover', {
   usage: `<template>
   <GlareHover
     width="400px"
@@ -24,6 +23,5 @@ export const glareHover: CodeObject = {
 
 <script setup lang="ts">
   import GlareHover from "./GlareHover.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/imageTrailCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/ImageTrail/ImageTrail.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const imageTrail: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ImageTrail`,
+export const imageTrail = createCodeObject(code, 'Animations/ImageTrail', {
   installation: `npm install gsap`,
   usage: `<template>
   <div :style="{ height: '500px', position: 'relative', overflow: 'hidden'}">
@@ -24,6 +23,5 @@ export const imageTrail: CodeObject = {
 
 <script setup lang="ts">
   import ImageTrail from "./ImageTrail.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/magnetCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/Magnet/Magnet.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const magnet: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Magnet`,
+export const magnet = createCodeObject(code, 'Animations/Magnet', {
   usage: `<template>
   <Magnet
     :padding="120"
@@ -43,6 +42,5 @@ import Magnet from '@/content/Animations/Magnet/Magnet.vue'
   margin: 0;
   opacity: 0.8;
 }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Animations/magnetLinesCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/MagnetLines/MagnetLines.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const magnetLines: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MagnetLines`,
+export const magnetLines = createCodeObject(code, 'Animations/MagnetLines', {
   usage: `<template>
   <MagnetLines 
     :rows="10" 
@@ -17,6 +16,5 @@ export const magnetLines: CodeObject = {
 
 <script setup lang="ts">
   import MagnetLines from "./MagnetLines.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/metaBallsCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/MetaBalls/MetaBalls.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const metaBalls: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MetaBalls`,
+export const metaBalls = createCodeObject(code, 'Animations/MetaBalls', {
   installation: `npm install ogl`,
   usage: `<template>
     <MetaBalls
@@ -21,6 +20,5 @@ export const metaBalls: CodeObject = {
 
 <script setup lang="ts">
   import MetaBalls from "./MetaBalls.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/metallicPaintCode.ts

@@ -1,9 +1,8 @@
 import code from '@content/Animations/MetallicPaint/MetallicPaint.vue?raw';
 import utility from '@content/Animations/MetallicPaint/parseImage.ts?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const metallicPaint: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MetallicPaint`,
+export const metallicPaint = createCodeObject(code, 'Animations/MetallicPaint', {
   usage: `<template>
   <MetallicPaint
     :image-data="imageData"
@@ -42,6 +41,5 @@ import { ref, onMounted } from 'vue';
     }
   });
 </script>`,
-  code,
   utility
-};
+});

src/constants/code/Animations/noiseCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/Noise/Noise.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const noise: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Noise`,
+export const noise = createCodeObject(code, 'Animations/Noise', {
   usage: `<template>
   <Noise 
     :pattern-size="250" 
@@ -14,6 +13,5 @@ export const noise: CodeObject = {
 
 <script setup lang="ts">
   import Noise from './Noise.vue'
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/pixelTransitionCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/PixelTransition/PixelTransition.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const pixelTransition: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/PixelTransition`,
+export const pixelTransition = createCodeObject(code, 'Animations/PixelTransition', {
   installation: `npm install gsap`,
   usage: `<template>
   <PixelTransition
@@ -24,6 +23,5 @@ export const pixelTransition: CodeObject = {
 
 <script setup lang=\"ts\">
   import PixelTransition from './PixelTransition.vue';
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/ribbonsCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/Ribbons/Ribbons.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const ribbons: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Ribbons`,
+export const ribbons = createCodeObject(code, 'Animations/Ribbons', {
   installation: `npm install ogl`,
   usage: `<template>
   <Ribbons
@@ -23,6 +22,5 @@ export const ribbons: CodeObject = {
 
 <script setup lang="ts">
   import Ribbons from "./Ribbons.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/shapeBlurCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/ShapeBlur/ShapeBlur.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const shapeBlur: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ShapeBlur`,
+export const shapeBlur = createCodeObject(code, 'Animations/ShapeBlur', {
   installation: `npm install three @types/three`,
   usage: `<template>
   <ShapeBlur
@@ -19,6 +18,5 @@ export const shapeBlur: CodeObject = {
 
 <script setup lang="ts">
   import ShapeBlur from "./ShapeBlur.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/splashCursorCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/SplashCursor/SplashCursor.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const splashCursor: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/SplashCursor`,
+export const splashCursor = createCodeObject(code, 'Animations/SplashCursor', {
   usage: `<template>
   <SplashCursor
     :SIM_RESOLUTION="128"
@@ -24,6 +23,5 @@ export const splashCursor: CodeObject = {
 
 <script setup lang="ts">
   import SplashCursor from "./SplashCursor.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/starBorderCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Animations/StarBorder/StarBorder.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const starBorder: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/StarBorder`,
+export const starBorder = createCodeObject(code, 'Animations/StarBorder', {
   usage: `<template>
     <StarBorder 
         as="button" 
@@ -16,6 +15,5 @@ export const starBorder: CodeObject = {
 
 <script setup lang="ts">
   import StarBorder from './StarBorder.vue'
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Animations/targetCursorCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/Animations/TargetCursor/TargetCursor.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const targetCursor: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/TargetCursor`,
+export const targetCursor = createCodeObject(code, 'Animations/TargetCursor', {
   installation: `npm install gsap`,
   usage: `<template>
     <TargetCursor
@@ -17,6 +16,5 @@ export const targetCursor: CodeObject = {
 
 <script setup lang="ts">
   import TargetCursor from "./TargetCursor.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/auroraCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Aurora/Aurora.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const aurora: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Aurora`,
+export const aurora = createCodeObject(code, 'Backgrounds/Aurora', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="aurora-container">
@@ -28,6 +27,5 @@ export const aurora: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/balatroCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Balatro/Balatro.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const balatro: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Balatro`,
+export const balatro = createCodeObject(code, 'Backgrounds/Balatro', {
   installation: `npm install ogl`,
   usage: `<template>
     <Balatro
@@ -14,6 +13,5 @@ export const balatro: CodeObject = {
 
 <script setup lang="ts">
     import Balatro from "./Balatro.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/ballpitCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Ballpit/Ballpit.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const ballpit: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Ballpit`,
+export const ballpit = createCodeObject(code, 'Backgrounds/Ballpit', {
   installation: `npm install three @types/three gsap`,
   usage: `//Component inspired by Kevin Levron:
 //https://x.com/soju22/status/1858925191671271801
@@ -21,6 +20,5 @@ export const ballpit: CodeObject = {
 
 <script setup lang="ts">
   import Ballpit from "./Ballpit.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/beamsCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Beams/Beams.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const beams: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Beams`,
+export const beams = createCodeObject(code, 'Backgrounds/Beams', {
   installation: `npm install three @types/three`,
   usage: `<template>
   <div class="beams-container">
@@ -31,6 +30,5 @@ export const beams: CodeObject = {
     overflow: hidden;
     background: #000;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/darkVeilCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/DarkVeil/DarkVeil.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const darkVeil: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/DarkVeil`,
+export const darkVeil = createCodeObject(code, 'Backgrounds/DarkVeil', {
   installation: `npm install ogl`,
   usage: `<template>
   <div style="width: 100%; height: 600px; position: relative">
@@ -20,6 +19,5 @@ export const darkVeil: CodeObject = {
 
 <script setup lang="ts">
   import DarkVeil from "./DarkVeil.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/ditherCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Dither/Dither.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const dither: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Dither`,
+export const dither = createCodeObject(code, 'Backgrounds/Dither', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="relative w-full h-[500px] overflow-hidden">
@@ -22,6 +21,5 @@ export const dither: CodeObject = {
 
 <script setup lang="ts">
   import Dither from "./Dither.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/dotGridCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/DotGrid/DotGrid.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const dotGrid: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/DotGrid`,
+export const dotGrid = createCodeObject(code, 'Backgrounds/DotGrid', {
   installation: `npm install gsap`,
   usage: `<template>
   <div class="dot-grid-container">
@@ -34,6 +33,5 @@ export const dotGrid: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/gridDistortionCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/GridDistortion/GridDistortion.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const gridDistortion: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridDistortion`,
+export const gridDistortion = createCodeObject(code, 'Backgrounds/GridDistortion', {
   installation: `npm install three @types/three`,
   usage: `<template>
   <div class="relative w-full h-[600px]">
@@ -19,6 +18,5 @@ export const gridDistortion: CodeObject = {
 
 <script setup lang="ts">
   import GridDistortion from "./GridDistortion.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/gridMotionCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/GridMotion/GridMotion.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const gridMotion: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridMotion`,
+export const gridMotion = createCodeObject(code, 'Backgrounds/GridMotion', {
   installation: `npm install gsap`,
   usage: `<template>
     <GridMotion
@@ -16,6 +15,5 @@ export const gridMotion: CodeObject = {
   const imageUrl = 'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
   const numberOfImages = 30;
   const images = Array.from({ length: numberOfImages }, () => imageUrl);
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/hyperspeedCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Hyperspeed/Hyperspeed.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const hyperspeed: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Hyperspeed`,
+export const hyperspeed = createCodeObject(code, 'Backgrounds/Hyperspeed', {
   installation: `npm install three postprocessing`,
   usage: `<template>
   <div class="hyperspeed-container">
@@ -62,6 +61,5 @@ export const hyperspeed: CodeObject = {
   height: 100%;
   cursor: pointer;
 }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/iridescenceCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Iridescence/Iridescence.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const iridescence: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Iridescence`,
+export const iridescence = createCodeObject(code, 'Backgrounds/Iridescence', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="w-full h-[400px]">
@@ -17,6 +16,5 @@ export const iridescence: CodeObject = {
 
 <script setup lang="ts">
   import Iridescence from "./Iridescence.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/letterGlitchCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/LetterGlitch/LetterGlitch.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const letterGlitch: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LetterGlitch`,
+export const letterGlitch = createCodeObject(code, 'Backgrounds/LetterGlitch', {
   usage: `<template>
   <div class="letter-glitch-container">
     <LetterGlitch
@@ -27,6 +26,5 @@ export const letterGlitch: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/lightningCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Lightning/Lightning.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const lightning: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Lightning`,
+export const lightning = createCodeObject(code, 'Backgrounds/Lightning', {
   installation: `No additional dependencies required`,
   usage: `<template>
   <div class="lightning-container">
@@ -28,6 +27,5 @@ export const lightning: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/liquidChromeCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/LiquidChrome/LiquidChrome.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const liquidChrome: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LiquidChrome`,
+export const liquidChrome = createCodeObject(code, 'Backgrounds/LiquidChrome', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="relative w-full h-[600px]">
@@ -17,6 +16,5 @@ export const liquidChrome: CodeObject = {
 
 <script setup lang="ts">
   import LiquidChrome from "./LiquidChrome.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/orbCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Orb/Orb.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const orb: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Orb`,
+export const orb = createCodeObject(code, 'Backgrounds/Orb', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="relative w-full h-[600px]">
@@ -12,6 +11,5 @@ export const orb: CodeObject = {
 
 <script setup lang="ts">
   import Orb from "./Orb.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/particlesCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Particles/Particles.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const particles: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Particles`,
+export const particles = createCodeObject(code, 'Backgrounds/Particles', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="particles-container">
@@ -34,6 +33,5 @@ export const particles: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/rippleGridCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/RippleGrid/RippleGrid.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const rippleGrid: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/RippleGrid`,
+export const rippleGrid = createCodeObject(code, 'Backgrounds/RippleGrid', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="relative overflow-hidden h-[600px]">
@@ -21,6 +20,5 @@ export const rippleGrid: CodeObject = {
 
 <script setup lang="ts">
   import RippleGrid from "./RippleGrid.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/silkCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Silk/Silk.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const silk: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Silk`,
+export const silk = createCodeObject(code, 'Backgrounds/Silk', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="silk-container">
@@ -28,6 +27,5 @@ export const silk: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Backgrounds/squaresCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Squares/Squares.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const squares: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Squares`,
+export const squares = createCodeObject(code, 'Backgrounds/Squares', {
   usage: `<template>
   <div class="w-full h-[400px]">
     <Squares 
@@ -17,6 +16,5 @@ export const squares: CodeObject = {
 
 <script setup lang="ts">
   import Squares from "./Squares.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/threadsCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Threads/Threads.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const threads: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Threads`,
+export const threads = createCodeObject(code, 'Backgrounds/Threads', {
   installation: `npm install ogl`,
   usage: `<template>
   <div class="w-full h-[400px]">
@@ -17,6 +16,5 @@ export const threads: CodeObject = {
 
 <script setup lang="ts">
   import Threads from "./Threads.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Backgrounds/wavesCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Backgrounds/Waves/Waves.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const waves: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Waves`,
+export const waves = createCodeObject(code, 'Backgrounds/Waves', {
   usage: `<template>
   <div class="waves-container">
     <Waves
@@ -33,6 +32,5 @@ export const waves: CodeObject = {
     position: relative;
     overflow: hidden;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Components/animatedListCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/AnimatedList/AnimatedList.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const animatedList: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/AnimatedList`,
+export const animatedList = createCodeObject(code, 'Components/AnimatedList', {
   installation: `npm install motion-v`,
   usage: `<template>
   <AnimatedList
@@ -22,6 +21,5 @@ const items = [
   'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10',
   'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15'
 ]
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/cardSwapCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/CardSwap/CardSwap.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const cardSwap: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CardSwap`,
+export const cardSwap = createCodeObject(code, 'Components/CardSwap', {
   installation: `npm install gsap`,
   usage: `<template>
   <CardSwap 
@@ -49,6 +48,5 @@ export const cardSwap: CodeObject = {
   const handleCardClick = (index: number) => {
     console.log(\`Card \${index} clicked\`);
   };
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/carouselCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Carousel/Carousel.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const carousel: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Carousel`,
+export const carousel = createCodeObject(code, 'Components/Carousel', {
   installation: `npm install motion-v`,
   usage: `<template>
   <Carousel 
@@ -35,6 +34,5 @@ export const carousel: CodeObject = {
     },
     // Add more items as needed
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/chromaGridCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/ChromaGrid/ChromaGrid.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const chromaGrid: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ChromaGrid`,
+export const chromaGrid = createCodeObject(code, 'Components/ChromaGrid', {
   installation: `npm install gsap`,
   usage: `<template>
   <div class="w-[600px] relative">
@@ -39,6 +38,5 @@ export const chromaGrid: CodeObject = {
     url: "https://linkedin.com/in/mikechen"
   }
 ]
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/circularGalleryCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/CircularGallery/CircularGallery.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const circularGallery: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CircularGallery`,
+export const circularGallery = createCodeObject(code, 'Components/CircularGallery', {
   installation: `npm install ogl`,
   usage: `<template>
   <CircularGallery
@@ -22,6 +21,5 @@ export const circularGallery: CodeObject = {
 
 <script setup lang="ts">
   import CircularGallery from "./CircularGallery.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/decayCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/DecayCard/DecayCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const decayCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/DecayCard`,
+export const decayCard = createCodeObject(code, 'Components/DecayCard', {
   installation: `npm install gsap`,
   usage: `<template>
   <DecayCard
@@ -18,6 +17,5 @@ export const decayCard: CodeObject = {
 
 <script setup lang="ts">
   import DecayCard from "./DecayCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/dockCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Dock/Dock.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const dock: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Dock`,
+export const dock = createCodeObject(code, 'Components/Dock', {
   installation: `npm install motion-v`,
   usage: `<template>
   <Dock
@@ -42,6 +41,5 @@ export const dock: CodeObject = {
       onClick: () => console.log('Settings clicked!') 
     },
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/elasticSliderCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/ElasticSlider/ElasticSlider.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const elasticSlider: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ElasticSlider`,
+export const elasticSlider = createCodeObject(code, 'Components/ElasticSlider', {
   usage: `<template>  
   <ElasticSlider 
     :default-value="75"
@@ -25,6 +24,5 @@ export const elasticSlider: CodeObject = {
 
 <script setup lang="ts">
   import ElasticSlider from "./ElasticSlider.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/flowingMenuCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/FlowingMenu/FlowingMenu.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const flowingMenu: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlowingMenu`,
+export const flowingMenu = createCodeObject(code, 'Components/FlowingMenu', {
   installation: `npm install gsap`,
   usage: `<template>
   <FlowingMenu :items="items" />
@@ -17,6 +16,5 @@ export const flowingMenu: CodeObject = {
     { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
     { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/flyingPostersCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const flyingPosters: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
+export const flyingPosters = createCodeObject(code, 'Components/FlyingPosters', {
   installation: `npm install ogl`,
   usage: `<template>
   <FlyingPosters 
@@ -32,6 +31,5 @@ export const flyingPosters: CodeObject = {
   'https://picsum.photos/800/800?grayscale&random=9',
   'https://picsum.photos/800/800?grayscale&random=10',
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/folderCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Folder/Folder.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const folder: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Folder`,
+export const folder = createCodeObject(code, 'Components/Folder', {
   usage: `<template>
   <Folder :items="items" :size="2" color="#5227FF" class="my-folder-class" />
 </template>
@@ -11,6 +10,5 @@ export const folder: CodeObject = {
   import Folder from "./Folder.vue";
 
   const items = ['Doc 1', 'Doc 2', 'Doc 3'];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/glassIconsCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/GlassIcons/GlassIcons.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const glassIcons: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GlassIcons`,
+export const glassIcons = createCodeObject(code, 'Components/GlassIcons', {
   usage: `<template>
   <GlassIcons :items="items" class="my-glass-icons" />
 </template>
@@ -18,6 +17,5 @@ export const glassIcons: CodeObject = {
     { icon: 'pi pi-pencil', color: 'orange', label: 'Notes' },
     { icon: 'pi pi-chart-bar', color: 'green', label: 'Stats' }
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/gooeyNavCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/GooeyNav/GooeyNav.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const gooeyNav: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GooeyNav`,
+export const gooeyNav = createCodeObject(code, 'Components/GooeyNav', {
   usage: `<template>
   <GooeyNav
     :items="navItems"
@@ -35,6 +34,5 @@ export const gooeyNav: CodeObject = {
     --color-3: #45b7d1;
     --color-4: #f9ca24;
   }
-</style>`,
-  code
-};
+</style>`
+});

src/constants/code/Components/infiniteScrollCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/InfiniteScroll/InfiniteScroll.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const infiniteScroll: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/InfiniteScroll`,
+export const infiniteScroll = createCodeObject(code, 'Components/InfiniteScroll', {
   installation: `npm install gsap`,
   usage: `<template>
   <InfiniteScroll
@@ -29,6 +28,5 @@ export const infiniteScroll: CodeObject = {
     { content: "Item 3" },
     // Add more items as needed
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/magicBentoCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/MagicBento/MagicBento.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const magicBento: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/MagicBento`,
+export const magicBento = createCodeObject(code, 'Components/MagicBento', {
   installation: `npm install gsap`,
   usage: `<template>
     <MagicBento
@@ -21,6 +20,5 @@ export const magicBento: CodeObject = {
 
 <script setup lang="ts">
   import MagicBento from "./MagicBento.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/masonryCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Masonry/Masonry.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const masonry: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Masonry`,
+export const masonry = createCodeObject(code, 'Components/Masonry', {
   installation: `npm install gsap`,
   usage: `<template>
   <Masonry
@@ -27,6 +26,5 @@ const items = ref([
   { id: '3', img: 'https://picsum.photos/300/350?random=3', url: 'https://picsum.photos', height: 350 },
   // ... more items
 ])
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/pixelCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/PixelCard/PixelCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const pixelCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/PixelCard`,
+export const pixelCard = createCodeObject(code, 'Components/PixelCard', {
   usage: `<template>
   <PixelCard 
     variant="default" 
@@ -16,6 +15,5 @@ export const pixelCard: CodeObject = {
 
 <script setup lang="ts">
   import PixelCard from "./PixelCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/profileCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/ProfileCard/ProfileCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const profileCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+export const profileCard = createCodeObject(code, 'Components/ProfileCard', {
   usage: `<template>
   <ProfileCard
     name="Javi A. Torres"
@@ -26,6 +25,5 @@ export const profileCard: CodeObject = {
   const handleContactClick = () => {
     console.log('Contact button clicked!');
   };
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/spotlightCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/SpotlightCard/SpotlightCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const spotlightCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/SpotlightCard`,
+export const spotlightCard = createCodeObject(code, 'Components/SpotlightCard', {
   usage: `<template>
   <SpotlightCard 
     class-name="custom-spotlight-card"
@@ -14,6 +13,5 @@ export const spotlightCard: CodeObject = {
 
 <script setup lang="ts">
   import SpotlightCard from "./SpotlightCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/stackCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/Stack/Stack.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const stack: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Stack`,
+export const stack = createCodeObject(code, 'Components/Stack', {
   installation: `npm install motion-v`,
   usage: `<template>
   <Stack
@@ -22,6 +21,5 @@ export const stack: CodeObject = {
     { id: 3, img: "https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format" },
     { id: 4, img: "https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format" }
   ];
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/Components/tiltedCardCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/Components/TiltedCard/TiltedCard.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const tiltedCard: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/TiltedCard`,
+export const tiltedCard = createCodeObject(code, 'Components/TiltedCard', {
   installation: `npm install motion-v`,
   usage: `<template>
   <TiltedCard
@@ -29,6 +28,5 @@ export const tiltedCard: CodeObject = {
 
 <script setup lang="ts">
   import TiltedCard from "./TiltedCard.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/asciiTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/AsciiText/AsciiText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '../../../types/code';
 
-export const asciiText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/AsciiText`,
+export const asciiText = createCodeObject(code, 'TextAnimations/AsciiText', {
   installation: `npm install three @types/three`,
   usage: `<template>
   <AsciiText
@@ -18,6 +17,5 @@ export const asciiText: CodeObject = {
 
 <script setup lang="ts">
   import AsciiText from "./AsciiText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/blurTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/BlurText/BlurText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const blurText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/BlurText`,
+export const blurText = createCodeObject(code, 'TextAnimations/BlurText', {
   installation: `npm install motion-v`,
   usage: `<template>
   <BlurText
@@ -22,8 +21,7 @@ export const blurText: CodeObject = {
   import BlurText from "./BlurText.vue";
 
   const handleAnimationComplete = () => {
-    console.log('All animations complete!');
-  };
-</script>`,
-  code
-};
+    console.log('All animations complete!');,
+});
+</script>`
+});

src/constants/code/TextAnimations/circularTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/CircularText/CircularText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const circularText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/CircularText`,
+export const circularText = createCodeObject(code, 'TextAnimations/CircularText', {
   installation: `npm install motion-v`,
   usage: `<template>
   <CircularText
@@ -15,6 +14,5 @@ export const circularText: CodeObject = {
 
 <script setup lang="ts">
   import CircularText from "./CircularText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/curvedLoopCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/CurvedLoop/CurvedLoop.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const curvedLoop: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/CurvedLoop`,
+export const curvedLoop = createCodeObject(code, 'TextAnimations/CurvedLoop', {
   usage: `<template>
   <CurvedLoop
     marquee-text="Be ✦ Creative ✦ With ✦ Vue ✦ Bits ✦"
@@ -15,6 +14,5 @@ export const curvedLoop: CodeObject = {
 
 <script setup lang="ts">
   import CurvedLoop from "./CurvedLoop.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/decryptedTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/DecryptedText/DecryptedText.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const decryptedText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/DecryptedText`,
+export const decryptedText = createCodeObject(code, 'TextAnimations/DecryptedText', {
   usage: `<template>
   <DecryptedText
     text="Hello World!"
@@ -19,6 +18,5 @@ export const decryptedText: CodeObject = {
 
 <script setup lang="ts">
   import DecryptedText from "./DecryptedText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/fallingTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/FallingText/FallingText.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const fallingText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/FallingText`,
+export const fallingText = createCodeObject(code, 'TextAnimations/FallingText', {
   installation: `npm install matter-js @types/matter-js`,
   usage: `<template>
   <FallingText
@@ -17,6 +16,5 @@ export const fallingText: CodeObject = {
 
 <script setup lang="ts">
   import FallingText from "./FallingText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/fuzzyTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const fuzzyText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/FuzzyText`,
+export const fuzzyText = createCodeObject(code, 'TextAnimations/FuzzyText', {
   usage: `<template>
   <FuzzyText
     text="404"
@@ -17,6 +16,5 @@ export const fuzzyText: CodeObject = {
 
 <script setup lang="ts">
   import FuzzyText from "./FuzzyText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/glitchTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/GlitchText/GlitchText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const glitchText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/GlitchText`,
+export const glitchText = createCodeObject(code, 'TextAnimations/GlitchText', {
   usage: `<template>
   <GlitchText
     children="Vue Bits"
@@ -14,6 +13,5 @@ export const glitchText: CodeObject = {
 
 <script setup lang="ts">
   import GlitchText from "./GlitchText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/gradientTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/GradientText/GradientText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const gradientText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/GradientText`,
+export const gradientText = createCodeObject(code, 'TextAnimations/GradientText', {
   usage: `<template>
   <GradientText
     text="Add a splash of color!"
@@ -15,6 +14,5 @@ export const gradientText: CodeObject = {
 
 <script setup lang="ts">
   import GradientText from "./GradientText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/rotatingTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/RotatingText/RotatingText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const rotatingText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/RotatingText`,
+export const rotatingText = createCodeObject(code, 'TextAnimations/RotatingText', {
   installation: `npm install motion-v`,
   usage: `<template>
     <RotatingText
@@ -21,6 +20,5 @@ export const rotatingText: CodeObject = {
 
 <script setup lang="ts">
   import RotatingText from "./RotatingText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/scrambleTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/ScrambleText/ScrambleText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const scrambleTextCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrambleText`,
+export const scrambleTextCode = createCodeObject(code, 'TextAnimations/ScrambleText', {
   installation: `npm install gsap`,
   usage: `// Component inspired by Tom Miller from the GSAP community
 // https://codepen.io/creativeocean/pen/NPWLwJM
@@ -23,6 +22,5 @@ export const scrambleTextCode: CodeObject = {
 
 <script setup lang="ts">
   import ScrambleText from "./ScrambleText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/scrollFloatCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const scrollFloatCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
+export const scrollFloatCode = createCodeObject(code, 'TextAnimations/ScrollFloat', {
   installation: `npm install gsap`,
   usage: `<template>
   <ScrollFloat
@@ -21,6 +20,5 @@ export const scrollFloatCode: CodeObject = {
 
 <script setup lang="ts">
   import ScrollFloat from "./ScrollFloat.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/scrollRevealCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const scrollRevealCode: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollReveal`,
+export const scrollRevealCode = createCodeObject(code, 'TextAnimations/ScrollReveal', {
   installation: `npm install gsap`,
   usage: `<template>
     <ScrollReveal
@@ -22,6 +21,5 @@ export const scrollRevealCode: CodeObject = {
 
 <script setup lang="ts">
   import ScrollReveal from "./ScrollReveal.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/scrollVelocityCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/ScrollVelocity/ScrollVelocity.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const scrollVelocity: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollVelocity`,
+export const scrollVelocity = createCodeObject(code, 'TextAnimations/ScrollVelocity', {
   installation: `npm install gsap`,
   usage: `<template>
   <ScrollVelocity
@@ -19,6 +18,5 @@ export const scrollVelocity: CodeObject = {
 
 <script setup lang="ts">
   import ScrollVelocity from "./ScrollVelocity.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/shinyTextCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const shinyText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ShinyText`,
+export const shinyText = createCodeObject(code, 'TextAnimations/ShinyText', {
   usage: `<template>
   <ShinyText 
     text="Just some shiny text!" 
@@ -14,6 +13,5 @@ export const shinyText: CodeObject = {
 
 <script setup lang="ts">
   import ShinyText from "./ShinyText.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/splitTextCode.ts

@@ -1,9 +1,8 @@
 // Fun fact: this is the first component ever made for Vue Bits!
 import code from '@content/TextAnimations/SplitText/SplitText.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const splitText: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/SplitText`,
+export const splitText = createCodeObject(code, 'TextAnimations/SplitText', {
   installation: `npm install gsap`,
   usage: `<template>
   <SplitText
@@ -28,6 +27,5 @@ export const splitText: CodeObject = {
   const handleAnimationComplete = () => {
     console.log('All letters have animated!');
   };
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/textCursorCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/TextCursor/TextCursor.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const textCursor: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextCursor`,
+export const textCursor = createCodeObject(code, 'TextAnimations/TextCursor', {
   installation: `npm install motion-v`,
   usage: `<template>
   <TextCursor
@@ -19,6 +18,5 @@ export const textCursor: CodeObject = {
 
 <script setup lang="ts">
   import TextCursor from "./TextCursor.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/textPressureCode.ts

@@ -1,8 +1,7 @@
 import code from '@content/TextAnimations/TextPressure/TextPressure.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const textPressure: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextPressure`,
+export const textPressure = createCodeObject(code, 'TextAnimations/TextPressure', {
   usage: `<template>
   <TextPressure
     text="Hello!"
@@ -20,6 +19,5 @@ export const textPressure: CodeObject = {
 
 <script setup lang="ts">
   import TextPressure from "./TextPressure.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/textTrailCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/TextTrail/TextTrail.vue?raw';
-import type { CodeObject } from '@/types/code';
+import { createCodeObject } from '@/types/code';
 
-export const textTrail: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextTrail`,
+export const textTrail = createCodeObject(code, 'TextAnimations/TextTrail', {
   installation: `npm install three @types/three`,
   usage: `<template>
   <TextTrail
@@ -18,6 +17,5 @@ export const textTrail: CodeObject = {
 
 <script setup lang="ts">
   import TextTrail from "./TextTrail.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/constants/code/TextAnimations/trueFocusCode.ts

@@ -1,8 +1,7 @@
 import code from '@/content/TextAnimations/TrueFocus/TrueFocus.vue?raw';
-import type { CodeObject } from '../../../types/code';
+import { createCodeObject } from '@/types/code';
 
-export const trueFocus: CodeObject = {
-  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TrueFocus`,
+export const trueFocus = createCodeObject(code, 'TextAnimations/TrueFocus', {
   installation: `npm install motion-v`,
   usage: `<template>
   <TrueFocus
@@ -17,6 +16,5 @@ export const trueFocus: CodeObject = {
 
 <script setup lang="ts">
   import TrueFocus from "./TrueFocus.vue";
-</script>`,
-  code
-};
+</script>`
+});

src/content/Backgrounds/DarkVeil/DarkVeil.vue

@@ -116,10 +116,10 @@ const cleanup = () => {
 
 const resize = () => {
   if (!canvasRef.value || !renderer || !program) return;
-  
+
   const parent = canvasRef.value.parentElement;
   if (!parent) return;
-  
+
   const w = parent.clientWidth;
   const h = parent.clientHeight;
   renderer.setSize(w * props.resolutionScale, h * props.resolutionScale);
@@ -128,7 +128,7 @@ const resize = () => {
 
 const loop = () => {
   if (!program || !renderer || !mesh) return;
-  
+
   program.uniforms.uTime.value = ((performance.now() - start) / 1000) * props.speed;
   program.uniforms.uHueShift.value = props.hueShift;
   program.uniforms.uNoise.value = props.noiseIntensity;
@@ -141,14 +141,14 @@ const loop = () => {
 
 onMounted(() => {
   if (!canvasRef.value) return;
-  
+
   const canvas = canvasRef.value;
   const parent = canvas.parentElement;
   if (!parent) return;
 
   renderer = new Renderer({
     dpr: Math.min(window.devicePixelRatio, 2),
-    canvas,
+    canvas
   });
 
   const gl = renderer.gl;
@@ -164,8 +164,8 @@ onMounted(() => {
       uNoise: { value: props.noiseIntensity },
       uScan: { value: props.scanlineIntensity },
       uScanFreq: { value: props.scanlineFrequency },
-      uWarp: { value: props.warpAmount },
-    },
+      uWarp: { value: props.warpAmount }
+    }
   });
 
   mesh = new Mesh(gl, { geometry, program });
@@ -181,13 +181,23 @@ onUnmounted(() => {
   cleanup();
 });
 
-watch(() => [props.hueShift, props.noiseIntensity, props.scanlineIntensity, props.speed, props.scanlineFrequency, props.warpAmount], () => {
-  if (program) {
-    program.uniforms.uHueShift.value = props.hueShift;
-    program.uniforms.uNoise.value = props.noiseIntensity;
-    program.uniforms.uScan.value = props.scanlineIntensity;
-    program.uniforms.uScanFreq.value = props.scanlineFrequency;
-    program.uniforms.uWarp.value = props.warpAmount;
+watch(
+  () => [
+    props.hueShift,
+    props.noiseIntensity,
+    props.scanlineIntensity,
+    props.speed,
+    props.scanlineFrequency,
+    props.warpAmount
+  ],
+  () => {
+    if (program) {
+      program.uniforms.uHueShift.value = props.hueShift;
+      program.uniforms.uNoise.value = props.noiseIntensity;
+      program.uniforms.uScan.value = props.scanlineIntensity;
+      program.uniforms.uScanFreq.value = props.scanlineFrequency;
+      program.uniforms.uWarp.value = props.warpAmount;
+    }
   }
-});
+);
 </script>

src/demo/Backgrounds/DarkVeilDemo.vue

@@ -10,56 +10,17 @@
           :scanline-frequency="scanlineFrequency"
           :warp-amount="warpAmount"
         />
-        
-        <BackgroundContent
-          pill-text="New Background"
-          headline="Become emboldened by the flame of ambition"
-        />
+
+        <BackgroundContent pill-text="New Background" headline="Become emboldened by the flame of ambition" />
       </div>
 
       <Customize>
-        <PreviewSlider 
-          title="Speed" 
-          :min="0" 
-          :max="3" 
-          :step="0.1" 
-          v-model="speed" 
-        />
-        <PreviewSlider 
-          title="Hue Shift" 
-          :min="0" 
-          :max="360" 
-          :step="1" 
-          v-model="hueShift" 
-        />
-        <PreviewSlider 
-          title="Noise Intensity" 
-          :min="0" 
-          :max="0.2" 
-          :step="0.01" 
-          v-model="noiseIntensity" 
-        />
-        <PreviewSlider 
-          title="Scanline Frequency" 
-          :min="0.5" 
-          :max="5" 
-          :step="0.1" 
-          v-model="scanlineFrequency" 
-        />
-        <PreviewSlider 
-          title="Scanline Intensity" 
-          :min="0" 
-          :max="1" 
-          :step="0.01" 
-          v-model="scanlineIntensity" 
-        />
-        <PreviewSlider 
-          title="Warp Amount" 
-          :min="0" 
-          :max="5" 
-          :step="0.1" 
-          v-model="warpAmount" 
-        />
+        <PreviewSlider title="Speed" :min="0" :max="3" :step="0.1" v-model="speed" />
+        <PreviewSlider title="Hue Shift" :min="0" :max="360" :step="1" v-model="hueShift" />
+        <PreviewSlider title="Noise Intensity" :min="0" :max="0.2" :step="0.01" v-model="noiseIntensity" />
+        <PreviewSlider title="Scanline Frequency" :min="0.5" :max="5" :step="0.1" v-model="scanlineFrequency" />
+        <PreviewSlider title="Scanline Intensity" :min="0" :max="1" :step="0.01" v-model="scanlineIntensity" />
+        <PreviewSlider title="Warp Amount" :min="0" :max="5" :step="0.1" v-model="warpAmount" />
       </Customize>
 
       <PropTable :data="propData" />

src/types/code.ts

@@ -5,3 +5,21 @@ export interface CodeObject {
   usage?: string;
   installation?: string;
 }
+
+export interface CodeObjectInput {
+  utility?: string;
+  code?: string;
+  usage?: string;
+  installation?: string;
+}
+
+export function createCodeObject(code: string, path: string, data: CodeObjectInput): CodeObject {
+  const [category, componentName] = path.split('/');
+  return {
+    cli: `npx jsrepo add https://vue-bits.dev/ui/${category}/${componentName}`,
+    ...(data.installation && { installation: data.installation }),
+    ...(data.usage && { usage: data.usage }),
+    code,
+    ...(data.utility && { utility: data.utility })
+  };
+}