From 1357c3e3a72b8c2c6be448c259f9648584141e4f Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Thu, 22 May 2025 20:30:11 +0900
Subject: [PATCH] docs: refactor components to TypeScript

---
 .vitepress/theme/components/AsideSponsors.vue |  2 +-
 .vitepress/theme/components/YouTubeVideo.vue  |  2 +-
 .../landing/1. hero-section/HeroDiagram.vue   | 22 ++++++-------
 .../landing/1. hero-section/HeroSection.vue   |  2 +-
 .../landing/2. feature-section/FeatureCI.vue  | 32 +++++++++----------
 .../FeatureFlexiblePlugins.vue                |  2 +-
 .../FeatureInstantServerStart.vue             |  5 +--
 .../FeatureOptimizedBuild.vue                 | 24 +++++++-------
 .../FeatureRichFeatures.vue                   |  5 ++-
 .../2. feature-section/FeatureSection.vue     |  2 +-
 .../FrameworksSection.vue                     |  4 +--
 .../4. community-section/CommunitySection.vue |  1 -
 .../5. sponsor-section/SponsorSection.vue     |  2 +-
 .../components/landing/common/SvgNode.vue     |  4 +--
 .vitepress/theme/composables/sponsor.ts       |  2 +-
 .../theme/composables/useCardAnimation.ts     |  2 +-
 .vitepress/vite-env.d.ts                      |  1 +
 17 files changed, 57 insertions(+), 57 deletions(-)
 create mode 100644 .vitepress/vite-env.d.ts

diff --git a/.vitepress/theme/components/AsideSponsors.vue b/.vitepress/theme/components/AsideSponsors.vue
index c2c1f8ee..0b500b1e 100644
--- a/.vitepress/theme/components/AsideSponsors.vue
+++ b/.vitepress/theme/components/AsideSponsors.vue
@@ -8,7 +8,7 @@ const { data } = useSponsor()
 const sponsors = computed(() => {
   return [
     { size: 'small', items: [voidZero] },
-    ...(data?.value.map((sponsor) => {
+    ...(data.value?.map((sponsor) => {
       return {
         size: sponsor.size === 'big' ? 'mini' : 'xmini',
         items: sponsor.items,
diff --git a/.vitepress/theme/components/YouTubeVideo.vue b/.vitepress/theme/components/YouTubeVideo.vue
index 4aa6c93d..59f05d56 100644
--- a/.vitepress/theme/components/YouTubeVideo.vue
+++ b/.vitepress/theme/components/YouTubeVideo.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 defineProps({
   videoId: String,
 })
diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue
index b192bc19..171f58e0 100644
--- a/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue	
+++ b/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue	
@@ -29,8 +29,8 @@ const inputLines: Ref<SvgNodeProps>[] = inputPaths.map((path) =>
     visible: false,
     labelVisible: false,
     label: '',
-    dotColor: null,
-    glowColor: null,
+    dotColor: undefined,
+    glowColor: undefined,
     path,
   }),
 )
@@ -117,10 +117,10 @@ const animateDiagram = () => {
 
   // Animate the input nodes/lines
   prepareInputs().forEach((lineIndex, fileIndex) => {
-    timeline.add(
+    timeline!.add(
       isMobile
-        ? animateSingleInputMobile(inputLines[lineIndex as number])
-        : animateSingleInputDesktop(inputLines[lineIndex as number]),
+        ? animateSingleInputMobile(inputLines[lineIndex])
+        : animateSingleInputDesktop(inputLines[lineIndex]),
       fileIndex * (isMobile ? 0.4 : 0.2),
     )
   })
@@ -133,7 +133,7 @@ const animateDiagram = () => {
   // Animate the output nodes/lines
   timeline.addLabel('showOutput', '<')
   outputLines.forEach((outputLine, index) => {
-    timeline.add(
+    timeline!.add(
       isMobile
         ? animateSingleOutputMobile(outputLine)
         : animateSingleOutputDesktop(outputLine, index),
@@ -161,7 +161,7 @@ const prepareInputs = () => {
     inputFileSets.value[Math.floor(Math.random() * inputFileSets.value.length)]
 
   // Choose enough unique lines for the input file nodes to slide along
-  const inputLineIndexes = new Set()
+  const inputLineIndexes = new Set<number>()
   while (inputLineIndexes.size < 3) {
     const index: number = Math.floor(Math.random() * inputLines.length)
     inputLineIndexes.add(index)
@@ -170,10 +170,10 @@ const prepareInputs = () => {
   // Assign each line it's appropriate node label
   const inputs = [...inputLineIndexes]
   inputs.forEach((lineIndex, fileIndex) => {
-    inputLines[lineIndex as number].value.label = inputFileSet[fileIndex].label
-    inputLines[lineIndex as number].value.dotColor = inputLines[
-      lineIndex as number
-    ].value.glowColor = inputFileSet[fileIndex].color as string | null
+    inputLines[lineIndex].value.label = inputFileSet[fileIndex].label
+    inputLines[lineIndex].value.dotColor = inputLines[
+      lineIndex
+    ].value.glowColor = inputFileSet[fileIndex].color
   })
   return inputs
 }
diff --git a/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue b/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue
index caef0374..045d639d 100644
--- a/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue	
+++ b/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import HeroDiagram from './HeroDiagram.vue'
 </script>
 
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue
index 10272c23..a35f9898 100644
--- a/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue	
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue	
@@ -44,7 +44,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
       () => {
         glowVisible.value = true
       },
-      null,
+      undefined,
       0.2,
     )
     // Make the glowing lines hidden shortly after
@@ -52,7 +52,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
       () => {
         glowVisible.value = false
       },
-      null,
+      undefined,
       1.1,
     )
 
@@ -62,7 +62,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
         () => {
           checkmark.value = true
         },
-        null,
+        undefined,
         1.3 + index * 0.2,
       )
     })
@@ -228,91 +228,91 @@ const { startAnimation, isCardActive } = useCardAnimation(
             path="M1.00048 119.402L200.243 68.2732C213.283 65.4129 221.832 58.4923 221.832 50.7968V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1.00048 136.779L231.212 68.7423C242.847 65.5523 250.195 59.0356 250.195 51.9076V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1 165.731L263.267 69.1267C272.82 65.6348 278.558 59.7587 278.558 53.4667V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 154.23L464.019 69.1276C454.474 65.6348 448.743 59.7616 448.743 53.4731V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 125.219L496.078 68.7439C484.449 65.5528 477.106 59.0377 477.106 51.9119V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719 107.817L527.05 68.2749C514.015 65.4134 505.469 58.4939 505.469 50.8001V20.323V1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M719.001 96.2159L557.314 67.8323C543.291 65.2673 533.835 58.0756 533.835 49.976V20.323V9.78386C533.835 4.93267 529.902 1 525.051 1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M1 107.817L169.982 67.8308C184.008 65.2668 193.467 58.0743 193.467 49.9735V20.323V9.78387C193.467 4.93267 197.4 1 202.251 1"
             :position="glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M306.924 1V20.323V55.7423C306.924 60.7337 303.306 65.5207 296.865 69.0509L62.8139 197.336C52.968 202.733 46.8471 213.068 46.8471 224.296V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M335.286 1V20.323V59.0919C335.286 62.0155 334.043 64.8989 331.656 67.5136L213.175 197.282C208.003 202.947 205.136 210.34 205.136 218.011V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M363.65 1V20.323L363.428 206.088V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M392.015 1V20.323V59.1056C392.015 62.0204 393.25 64.8954 395.624 67.5041L513.712 197.291C518.862 202.951 521.716 210.328 521.716 217.981V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
           <SvgNode
             path="M420.377 1V20.323V55.7518C420.377 60.7376 423.987 65.5197 430.415 69.0489L664.058 197.332C673.893 202.732 680.005 213.061 680.005 224.28V240.342"
             :position="1 - glowPosition"
             :visible="glowVisible"
-            :dot-color="false"
+            :dot-color="undefined"
             glow-color="#13B351"
           />
         </svg>
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue
index e570ef80..b79251b4 100644
--- a/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue	
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue	
@@ -12,7 +12,7 @@ useSlideIn('#flexible-plugin-system')
  */
 const { isCardActive, startAnimation } = useCardAnimation(
   '#flexible-plugin-system',
-  null,
+  undefined,
   {
     once: true,
   },
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue
index afc7327c..8b050aae 100644
--- a/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue	
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { gsap } from 'gsap'
 import { useSlideIn } from '../../../composables/useSlideIn'
@@ -26,6 +26,7 @@ const { startAnimation } = useCardAnimation(
       commandTriggered.value = true
       highlightEnter.value = false
     })
+    return timeline
   },
   {
     once: true,
@@ -35,7 +36,7 @@ const { startAnimation } = useCardAnimation(
 /**
  * Run the command animation on enter press
  */
-function handleEnterPress(event) {
+function handleEnterPress(event: KeyboardEvent) {
   if (event.key === 'Enter') {
     startAnimation()
     window.removeEventListener('keydown', handleEnterPress)
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue
index d7e1c0ee..fb4f200f 100644
--- a/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue	
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue	
@@ -43,7 +43,7 @@ const { startAnimation } = useCardAnimation(
         () => {
           node.visible.value = false
         },
-        null,
+        undefined,
         '-=0.6',
       )
       timeline.add(subTimeline, Math.random())
@@ -54,7 +54,7 @@ const { startAnimation } = useCardAnimation(
       () => {
         isBoltActive.value = true
       },
-      null,
+      undefined,
       '-=0.5',
     )
 
@@ -92,7 +92,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 31.5L89.8055 30.377C76.1575 30.377 62.535 29.076 49.0906 26.4886L-21 13"
           :position="nodes[0].position.value"
           :visible="nodes[0].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -105,7 +105,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 50L69.295 47.754L-21 41.016"
           :position="nodes[1].position.value"
           :visible="nodes[1].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -118,7 +118,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 68.5L-21 69.5642"
           :position="nodes[2].position.value"
           :visible="nodes[2].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -131,7 +131,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 87L69.2951 89.2463L-21 96.1614"
           :position="nodes[3].position.value"
           :visible="nodes[3].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -144,7 +144,7 @@ const { startAnimation } = useCardAnimation(
           path="M195 105.5L89.8055 106.623C76.1575 106.623 62.535 107.924 49.0906 110.511L-21 124"
           :position="nodes[4].position.value"
           :visible="nodes[4].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -182,7 +182,7 @@ const { startAnimation } = useCardAnimation(
           path="M0 93.5L105.194 94.623C118.843 94.623 132.465 95.924 145.909 98.5114L216 112"
           :position="nodes[5].position.value"
           :visible="nodes[5].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -195,7 +195,7 @@ const { startAnimation } = useCardAnimation(
           path="M0 75L125.705 77.246L216 83.984"
           :position="nodes[6].position.value"
           :visible="nodes[6].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -208,7 +208,7 @@ const { startAnimation } = useCardAnimation(
           path="M4.65162e-08 56.5L216 55.4358"
           :position="nodes[7].position.value"
           :visible="nodes[7].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -221,7 +221,7 @@ const { startAnimation } = useCardAnimation(
           path="M4.00455e-07 38L125.705 35.7537L216 28.8386"
           :position="nodes[8].position.value"
           :visible="nodes[8].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
@@ -234,7 +234,7 @@ const { startAnimation } = useCardAnimation(
           path="M8.0866e-07 19.5L105.194 18.377C118.843 18.377 132.465 17.076 145.909 14.4887L216 1"
           :position="nodes[9].position.value"
           :visible="nodes[9].visible.value"
-          :dot-color="false"
+          :dot-color="undefined"
           glow-color="#FFE358"
         />
 
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue
index e50978c9..cb1df392 100644
--- a/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue	
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import logoJSON from './images/json.svg'
 import logoCSS from './images/css3.svg'
 import logoJS from './images/js.svg'
@@ -18,7 +18,7 @@ useSlideIn('#rich-features-card')
  */
 const { isCardActive, startAnimation } = useCardAnimation(
   '#rich-features-card',
-  null,
+  undefined,
   {
     once: true,
   },
@@ -39,7 +39,6 @@ const { isCardActive, startAnimation } = useCardAnimation(
           width="658"
           height="275"
           viewBox="0 0 658 275"
-          d
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
diff --git a/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue b/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue
index 70aa8f18..2dbafffb 100644
--- a/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue	
+++ b/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue	
@@ -51,7 +51,7 @@ const startAnimation = () => {
       () => {
         animationVisible.value = true
       },
-      null,
+      undefined,
       0,
     )
     .to(
diff --git a/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue b/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue
index aa793cc0..9ac81538 100644
--- a/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
+++ b/.vitepress/theme/components/landing/3. frameworks-section/FrameworksSection.vue	
@@ -318,7 +318,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
     <div class="frameworks-container">
       <!-- Top Row -->
       <div class="framework-row" :style="rowStyle">
-        <FrameworkCard v-for="i in numBlocksPerRow + 2" />
+        <FrameworkCard v-for="_ in numBlocksPerRow + 2" />
       </div>
 
       <!-- Logo Rows -->
@@ -350,7 +350,7 @@ const rowStyle: ComputedRef<{ transform: string }> = computed(() => {
 
       <!-- Bottom Row -->
       <div class="framework-row" :style="rowStyle">
-        <FrameworkCard v-for="i in numBlocksPerRow + 2" />
+        <FrameworkCard v-for="_ in numBlocksPerRow + 2" />
       </div>
     </div>
   </section>
diff --git a/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue b/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue
index b25dc1fd..9dafa123 100644
--- a/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue	
+++ b/.vitepress/theme/components/landing/4. community-section/CommunitySection.vue	
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import CommunityCard, { Testimonial } from './CommunityCard.vue'
-import placeholderAvatar from '/images/community/placeholder.jpg'
 
 const testimonials: Testimonial[] = [
   {
diff --git a/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue b/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue
index 8b4b86d3..9544bb2c 100644
--- a/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue	
+++ b/.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue	
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useSponsor, voidZero } from '../../../composables/sponsor'
 import { VPSponsors } from 'vitepress/theme'
 
diff --git a/.vitepress/theme/components/landing/common/SvgNode.vue b/.vitepress/theme/components/landing/common/SvgNode.vue
index 8ac6c76b..1bb35a5a 100644
--- a/.vitepress/theme/components/landing/common/SvgNode.vue
+++ b/.vitepress/theme/components/landing/common/SvgNode.vue
@@ -34,12 +34,12 @@ export interface SvgNodeProps {
   /**
    * The color of the glow effect.
    */
-  glowColor?: string
+  glowColor?: string | undefined
 
   /**
    * The color of the dot.
    */
-  dotColor?: string | boolean
+  dotColor?: string | undefined
 }
 
 const props = withDefaults(defineProps<SvgNodeProps>(), {
diff --git a/.vitepress/theme/composables/sponsor.ts b/.vitepress/theme/composables/sponsor.ts
index 0fd3f13c..e42e2c0c 100644
--- a/.vitepress/theme/composables/sponsor.ts
+++ b/.vitepress/theme/composables/sponsor.ts
@@ -20,7 +20,7 @@ interface Sponsor {
 }
 
 // shared data across instances so we load only once.
-const data = ref()
+const data = ref<{ tier: string; size: string; items: Sponsor[] }[]>()
 
 const dataHost = 'https://sponsors.vuejs.org'
 const dataUrl = `${dataHost}/vite.json`
diff --git a/.vitepress/theme/composables/useCardAnimation.ts b/.vitepress/theme/composables/useCardAnimation.ts
index 2a6c7c83..13e1f6a8 100644
--- a/.vitepress/theme/composables/useCardAnimation.ts
+++ b/.vitepress/theme/composables/useCardAnimation.ts
@@ -8,7 +8,7 @@ gsap.registerPlugin(ScrollTrigger)
  * A custom hook for animating a card element.
  *
  * @param {HTMLElement | string} el - The element or selector for the element to be animated
- * @param {() => GSAPTimeline | null} animation - A function that returns a GSAP timeline for the animation
+ * @param {() => GSAPTimeline} animation - A function that returns a GSAP timeline for the animation
  * @param {object} options - Options for the animation
  */
 export function useCardAnimation(
diff --git a/.vitepress/vite-env.d.ts b/.vitepress/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/.vitepress/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />