[ FIX ] : ASCIIText Naming & Registry

src/constants/Components.ts

@@ -42,7 +42,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
-  'ascii-text': () => import("../demo/TextAnimations/AsciiTextDemo.vue"),
+  'ascii-text': () => import("../demo/TextAnimations/ASCIITextDemo.vue"),
   'scramble-text': () => import("../demo/TextAnimations/ScrambleTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),

src/constants/Information.ts

@@ -225,11 +225,11 @@ export const componentMetadata: ComponentMetadata = {
 
   //! Text Animations -------------------------------------------------------------------------------------------------------------------------------
 
-  'TextAnimations/AsciiText': {
+  'TextAnimations/ASCIIText': {
     videoUrl: '/assets/videos/asciitext.webm',
     description: 'Renders text with an animated ASCII background for a retro feel.',
     category: 'TextAnimations',
-    name: 'AsciiText',
+    name: 'ASCIIText',
     docsUrl: 'https://vue-bits.dev/text-animations/ascii-text',
     tags: []
   },

src/constants/code/TextAnimations/asciiTextCode.ts

@@ -1,12 +1,12 @@
-import code from '@/content/TextAnimations/AsciiText/AsciiText.vue?raw';
+import code from '@/content/TextAnimations/ASCIIText/ASCIIText.vue?raw';
 import { createCodeObject } from '../../../types/code';
 
-export const asciiText = createCodeObject(code, 'TextAnimations/AsciiText', {
+export const asciiText = createCodeObject(code, 'TextAnimations/ASCIIText', {
   installation: `npm install three @types/three`,
   usage: `<!-- Component ported and enhanced from https://codepen.io/JuanFuentes/pen/eYEeoyE -->
   
 <template>
-  <AsciiText
+  <ASCIIText
     text="Hey!"
     :ascii-font-size="8"
     :text-font-size="200"
@@ -18,6 +18,6 @@ export const asciiText = createCodeObject(code, 'TextAnimations/AsciiText', {
 </template>
 
 <script setup lang="ts">
-  import AsciiText from "./AsciiText.vue";
+  import ASCIIText from "./ASCIIText.vue";
 </script>`
 });

src/content/TextAnimations/AsciiText/AsciiText.vue

@@ -4,7 +4,7 @@
 import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import * as THREE from 'three';
 
-interface AsciiTextProps {
+interface ASCIITextProps {
   text?: string;
   asciiFontSize?: number;
   textFontSize?: number;
@@ -14,7 +14,7 @@ interface AsciiTextProps {
   className?: string;
 }
 
-const props = withDefaults(defineProps<AsciiTextProps>(), {
+const props = withDefaults(defineProps<ASCIITextProps>(), {
   text: 'David!',
   asciiFontSize: 8,
   textFontSize: 200,

src/demo/TextAnimations/AsciiTextDemo.vue

@@ -2,7 +2,7 @@
   <TabbedLayout>
     <template #preview>
       <div class="demo-container h-[400px] overflow-hidden">
-        <AsciiText
+        <ASCIIText
           :key="rerenderKey"
           :text="text"
           :ascii-font-size="asciiFontSize"
@@ -62,7 +62,7 @@ import Customize from '@/components/common/Customize.vue';
 import PreviewSlider from '@/components/common/PreviewSlider.vue';
 import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
 import PreviewText from '@/components/common/PreviewText.vue';
-import AsciiText from '@/content/TextAnimations/AsciiText/AsciiText.vue';
+import ASCIIText from '@/content/TextAnimations/ASCIIText/ASCIIText.vue';
 import { asciiText } from '@/constants/code/TextAnimations/asciiTextCode';
 import { useForceRerender } from '@/composables/useForceRerender';