Simplify constants declaration

2026-03-09 16:39:31 -06:00 · 2025-07-20 23:42:47 +03:00
parent 9d027c25b7
commit 0c79f0af67
85 changed files with 383 additions and 558 deletions
--- a/src/constants/code/TextAnimations/asciiTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/blurTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/circularTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/curvedLoopCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/decryptedTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/fallingTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/fuzzyTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/glitchTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/gradientTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/rotatingTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/scrambleTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/scrollFloatCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/scrollRevealCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/scrollVelocityCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/shinyTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/splitTextCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/textCursorCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/textPressureCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/textTrailCode.ts
+++ b/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>`
+});
--- a/src/constants/code/TextAnimations/trueFocusCode.ts
+++ b/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>`
+});