Skip to content

Commit 1a660a9

Browse files
wChenonlywChenonly
authored
docs: refactor components to TypeScript (#20075)
1 parent daf4a25 commit 1a660a9

File tree

17 files changed

+57
-57
lines changed

17 files changed

+57
-57
lines changed

‎docs/.vitepress/theme/components/AsideSponsors.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const { data } = useSponsor()
88
const sponsors = computed(() => {
99
return [
1010
{ size: 'small', items: [voidZero] },
11-
...(data?.value.map((sponsor) => {
11+
...(data.value?.map((sponsor) => {
1212
return {
1313
size: sponsor.size === 'big' ? 'mini' : 'xmini',
1414
items: sponsor.items,

‎docs/.vitepress/theme/components/YouTubeVideo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script setup>
1+
<script setup lang="ts">
22
defineProps({
33
videoId: String,
44
})

‎docs/.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const inputLines: Ref<SvgNodeProps>[] = inputPaths.map((path) =>
2929
visible: false,
3030
labelVisible: false,
3131
label: '',
32-
dotColor: null,
33-
glowColor: null,
32+
dotColor: undefined,
33+
glowColor: undefined,
3434
path,
3535
}),
3636
)
@@ -117,10 +117,10 @@ const animateDiagram = () => {
117117
118118
// Animate the input nodes/lines
119119
prepareInputs().forEach((lineIndex, fileIndex) => {
120-
timeline.add(
120+
timeline!.add(
121121
isMobile
122-
? animateSingleInputMobile(inputLines[lineIndex as number])
123-
: animateSingleInputDesktop(inputLines[lineIndex as number]),
122+
? animateSingleInputMobile(inputLines[lineIndex])
123+
: animateSingleInputDesktop(inputLines[lineIndex]),
124124
fileIndex * (isMobile ? 0.4 : 0.2),
125125
)
126126
})
@@ -133,7 +133,7 @@ const animateDiagram = () => {
133133
// Animate the output nodes/lines
134134
timeline.addLabel('showOutput', '<')
135135
outputLines.forEach((outputLine, index) => {
136-
timeline.add(
136+
timeline!.add(
137137
isMobile
138138
? animateSingleOutputMobile(outputLine)
139139
: animateSingleOutputDesktop(outputLine, index),
@@ -161,7 +161,7 @@ const prepareInputs = () => {
161161
inputFileSets.value[Math.floor(Math.random() * inputFileSets.value.length)]
162162
163163
// Choose enough unique lines for the input file nodes to slide along
164-
const inputLineIndexes = new Set()
164+
const inputLineIndexes = new Set<number>()
165165
while (inputLineIndexes.size < 3) {
166166
const index: number = Math.floor(Math.random() * inputLines.length)
167167
inputLineIndexes.add(index)
@@ -170,10 +170,10 @@ const prepareInputs = () => {
170170
// Assign each line it's appropriate node label
171171
const inputs = [...inputLineIndexes]
172172
inputs.forEach((lineIndex, fileIndex) => {
173-
inputLines[lineIndex as number].value.label = inputFileSet[fileIndex].label
174-
inputLines[lineIndex as number].value.dotColor = inputLines[
175-
lineIndex as number
176-
].value.glowColor = inputFileSet[fileIndex].color as string | null
173+
inputLines[lineIndex].value.label = inputFileSet[fileIndex].label
174+
inputLines[lineIndex].value.dotColor = inputLines[
175+
lineIndex
176+
].value.glowColor = inputFileSet[fileIndex].color
177177
})
178178
return inputs
179179
}

‎docs/.vitepress/theme/components/landing/1. hero-section/HeroSection.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script setup>
1+
<script setup lang="ts">
22
import HeroDiagram from './HeroDiagram.vue'
33
</script>
44

‎docs/.vitepress/theme/components/landing/2. feature-section/FeatureCI.vue

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ const { startAnimation, isCardActive } = useCardAnimation(
4444
() => {
4545
glowVisible.value = true
4646
},
47-
null,
47+
undefined,
4848
0.2,
4949
)
5050
// Make the glowing lines hidden shortly after
5151
timeline.call(
5252
() => {
5353
glowVisible.value = false
5454
},
55-
null,
55+
undefined,
5656
1.1,
5757
)
5858
@@ -62,7 +62,7 @@ const { startAnimation, isCardActive } = useCardAnimation(
6262
() => {
6363
checkmark.value = true
6464
},
65-
null,
65+
undefined,
6666
1.3 + index * 0.2,
6767
)
6868
})
@@ -228,91 +228,91 @@ const { startAnimation, isCardActive } = useCardAnimation(
228228
path="M1.00048 119.402L200.243 68.2732C213.283 65.4129 221.832 58.4923 221.832 50.7968V20.323V1"
229229
:position="glowPosition"
230230
:visible="glowVisible"
231-
:dot-color="false"
231+
:dot-color="undefined"
232232
glow-color="#13B351"
233233
/>
234234
<SvgNode
235235
path="M1.00048 136.779L231.212 68.7423C242.847 65.5523 250.195 59.0356 250.195 51.9076V20.323V1"
236236
:position="glowPosition"
237237
:visible="glowVisible"
238-
:dot-color="false"
238+
:dot-color="undefined"
239239
glow-color="#13B351"
240240
/>
241241
<SvgNode
242242
path="M1 165.731L263.267 69.1267C272.82 65.6348 278.558 59.7587 278.558 53.4667V20.323V1"
243243
:position="glowPosition"
244244
:visible="glowVisible"
245-
:dot-color="false"
245+
:dot-color="undefined"
246246
glow-color="#13B351"
247247
/>
248248
<SvgNode
249249
path="M719.001 154.23L464.019 69.1276C454.474 65.6348 448.743 59.7616 448.743 53.4731V20.323V1"
250250
:position="glowPosition"
251251
:visible="glowVisible"
252-
:dot-color="false"
252+
:dot-color="undefined"
253253
glow-color="#13B351"
254254
/>
255255
<SvgNode
256256
path="M719.001 125.219L496.078 68.7439C484.449 65.5528 477.106 59.0377 477.106 51.9119V20.323V1"
257257
:position="glowPosition"
258258
:visible="glowVisible"
259-
:dot-color="false"
259+
:dot-color="undefined"
260260
glow-color="#13B351"
261261
/>
262262
<SvgNode
263263
path="M719 107.817L527.05 68.2749C514.015 65.4134 505.469 58.4939 505.469 50.8001V20.323V1"
264264
:position="glowPosition"
265265
:visible="glowVisible"
266-
:dot-color="false"
266+
:dot-color="undefined"
267267
glow-color="#13B351"
268268
/>
269269
<SvgNode
270270
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"
271271
:position="glowPosition"
272272
:visible="glowVisible"
273-
:dot-color="false"
273+
:dot-color="undefined"
274274
glow-color="#13B351"
275275
/>
276276
<SvgNode
277277
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"
278278
:position="glowPosition"
279279
:visible="glowVisible"
280-
:dot-color="false"
280+
:dot-color="undefined"
281281
glow-color="#13B351"
282282
/>
283283
<SvgNode
284284
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"
285285
:position="1 - glowPosition"
286286
:visible="glowVisible"
287-
:dot-color="false"
287+
:dot-color="undefined"
288288
glow-color="#13B351"
289289
/>
290290
<SvgNode
291291
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"
292292
:position="1 - glowPosition"
293293
:visible="glowVisible"
294-
:dot-color="false"
294+
:dot-color="undefined"
295295
glow-color="#13B351"
296296
/>
297297
<SvgNode
298298
path="M363.65 1V20.323L363.428 206.088V240.342"
299299
:position="1 - glowPosition"
300300
:visible="glowVisible"
301-
:dot-color="false"
301+
:dot-color="undefined"
302302
glow-color="#13B351"
303303
/>
304304
<SvgNode
305305
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"
306306
:position="1 - glowPosition"
307307
:visible="glowVisible"
308-
:dot-color="false"
308+
:dot-color="undefined"
309309
glow-color="#13B351"
310310
/>
311311
<SvgNode
312312
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"
313313
:position="1 - glowPosition"
314314
:visible="glowVisible"
315-
:dot-color="false"
315+
:dot-color="undefined"
316316
glow-color="#13B351"
317317
/>
318318
</svg>

‎docs/.vitepress/theme/components/landing/2. feature-section/FeatureFlexiblePlugins.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ useSlideIn('#flexible-plugin-system')
1212
*/
1313
const { isCardActive, startAnimation } = useCardAnimation(
1414
'#flexible-plugin-system',
15-
null,
15+
undefined,
1616
{
1717
once: true,
1818
},

‎docs/.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script setup>
1+
<script setup lang="ts">
22
import { onMounted, onUnmounted, ref } from 'vue'
33
import { gsap } from 'gsap'
44
import { useSlideIn } from '../../../composables/useSlideIn'
@@ -26,6 +26,7 @@ const { startAnimation } = useCardAnimation(
2626
commandTriggered.value = true
2727
highlightEnter.value = false
2828
})
29+
return timeline
2930
},
3031
{
3132
once: true,
@@ -35,7 +36,7 @@ const { startAnimation } = useCardAnimation(
3536
/**
3637
* Run the command animation on enter press
3738
*/
38-
function handleEnterPress(event) {
39+
function handleEnterPress(event: KeyboardEvent) {
3940
if (event.key === 'Enter') {
4041
startAnimation()
4142
window.removeEventListener('keydown', handleEnterPress)

‎docs/.vitepress/theme/components/landing/2. feature-section/FeatureOptimizedBuild.vue

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const { startAnimation } = useCardAnimation(
4343
() => {
4444
node.visible.value = false
4545
},
46-
null,
46+
undefined,
4747
'-=0.6',
4848
)
4949
timeline.add(subTimeline, Math.random())
@@ -54,7 +54,7 @@ const { startAnimation } = useCardAnimation(
5454
() => {
5555
isBoltActive.value = true
5656
},
57-
null,
57+
undefined,
5858
'-=0.5',
5959
)
6060
@@ -92,7 +92,7 @@ const { startAnimation } = useCardAnimation(
9292
path="M195 31.5L89.8055 30.377C76.1575 30.377 62.535 29.076 49.0906 26.4886L-21 13"
9393
:position="nodes[0].position.value"
9494
:visible="nodes[0].visible.value"
95-
:dot-color="false"
95+
:dot-color="undefined"
9696
glow-color="#FFE358"
9797
/>
9898

@@ -105,7 +105,7 @@ const { startAnimation } = useCardAnimation(
105105
path="M195 50L69.295 47.754L-21 41.016"
106106
:position="nodes[1].position.value"
107107
:visible="nodes[1].visible.value"
108-
:dot-color="false"
108+
:dot-color="undefined"
109109
glow-color="#FFE358"
110110
/>
111111

@@ -118,7 +118,7 @@ const { startAnimation } = useCardAnimation(
118118
path="M195 68.5L-21 69.5642"
119119
:position="nodes[2].position.value"
120120
:visible="nodes[2].visible.value"
121-
:dot-color="false"
121+
:dot-color="undefined"
122122
glow-color="#FFE358"
123123
/>
124124

@@ -131,7 +131,7 @@ const { startAnimation } = useCardAnimation(
131131
path="M195 87L69.2951 89.2463L-21 96.1614"
132132
:position="nodes[3].position.value"
133133
:visible="nodes[3].visible.value"
134-
:dot-color="false"
134+
:dot-color="undefined"
135135
glow-color="#FFE358"
136136
/>
137137

@@ -144,7 +144,7 @@ const { startAnimation } = useCardAnimation(
144144
path="M195 105.5L89.8055 106.623C76.1575 106.623 62.535 107.924 49.0906 110.511L-21 124"
145145
:position="nodes[4].position.value"
146146
:visible="nodes[4].visible.value"
147-
:dot-color="false"
147+
:dot-color="undefined"
148148
glow-color="#FFE358"
149149
/>
150150

@@ -182,7 +182,7 @@ const { startAnimation } = useCardAnimation(
182182
path="M0 93.5L105.194 94.623C118.843 94.623 132.465 95.924 145.909 98.5114L216 112"
183183
:position="nodes[5].position.value"
184184
:visible="nodes[5].visible.value"
185-
:dot-color="false"
185+
:dot-color="undefined"
186186
glow-color="#FFE358"
187187
/>
188188

@@ -195,7 +195,7 @@ const { startAnimation } = useCardAnimation(
195195
path="M0 75L125.705 77.246L216 83.984"
196196
:position="nodes[6].position.value"
197197
:visible="nodes[6].visible.value"
198-
:dot-color="false"
198+
:dot-color="undefined"
199199
glow-color="#FFE358"
200200
/>
201201

@@ -208,7 +208,7 @@ const { startAnimation } = useCardAnimation(
208208
path="M4.65162e-08 56.5L216 55.4358"
209209
:position="nodes[7].position.value"
210210
:visible="nodes[7].visible.value"
211-
:dot-color="false"
211+
:dot-color="undefined"
212212
glow-color="#FFE358"
213213
/>
214214

@@ -221,7 +221,7 @@ const { startAnimation } = useCardAnimation(
221221
path="M4.00455e-07 38L125.705 35.7537L216 28.8386"
222222
:position="nodes[8].position.value"
223223
:visible="nodes[8].visible.value"
224-
:dot-color="false"
224+
:dot-color="undefined"
225225
glow-color="#FFE358"
226226
/>
227227

@@ -234,7 +234,7 @@ const { startAnimation } = useCardAnimation(
234234
path="M8.0866e-07 19.5L105.194 18.377C118.843 18.377 132.465 17.076 145.909 14.4887L216 1"
235235
:position="nodes[9].position.value"
236236
:visible="nodes[9].visible.value"
237-
:dot-color="false"
237+
:dot-color="undefined"
238238
glow-color="#FFE358"
239239
/>
240240

‎docs/.vitepress/theme/components/landing/2. feature-section/FeatureRichFeatures.vue

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<script setup>
1+
<script setup lang="ts">
22
import logoJSON from './images/json.svg'
33
import logoCSS from './images/css3.svg'
44
import logoJS from './images/js.svg'
@@ -18,7 +18,7 @@ useSlideIn('#rich-features-card')
1818
*/
1919
const { isCardActive, startAnimation } = useCardAnimation(
2020
'#rich-features-card',
21-
null,
21+
undefined,
2222
{
2323
once: true,
2424
},
@@ -39,7 +39,6 @@ const { isCardActive, startAnimation } = useCardAnimation(
3939
width="658"
4040
height="275"
4141
viewBox="0 0 658 275"
42-
d
4342
xmlns="http://www.w3.org/2000/svg"
4443
>
4544
<path

‎docs/.vitepress/theme/components/landing/2. feature-section/FeatureSection.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const startAnimation = () => {
5151
() => {
5252
animationVisible.value = true
5353
},
54-
null,
54+
undefined,
5555
0,
5656
)
5757
.to(

0 commit comments

Comments
 (0)