Skip to content

Commit 15793eb

Browse files
mrcegomrcego
committed
feat: add live page to docs (fix: #1755)
1 parent 8a6cd34 commit 15793eb

16 files changed

Lines changed: 398 additions & 1 deletion

‎docs/.vitepress/config.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -268,7 +268,14 @@ const config = defineConfig({
268268
{ text: 'Equipo', link: '/team' },
269269
{ text: 'Blog', link: '/blog' },
270270
{ text: 'Lanzamientos', link: '/releases' },
271-
{ text: 'Agradecimientos', link: '/acknowledgements' },
271+
{
272+
text: 'Agradecimientos',
273+
link: '/acknowledgements',
274+
},
275+
{
276+
text: 'Escenario en Vivo',
277+
link: '/live',
278+
},
272279
{
273280
text: 'El Documental',
274281
link: 'https://www.youtube.com/watch?v=bmWQqAKLgT4',

‎docs/.vitepress/theme/live/Events.vue‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<script setup lang="ts">
2+
import background from '@voidzero-dev/vitepress-theme/src/assets/vite/footer-background.jpg'
3+
import event1 from '../../../images/events/viteconf_2022.jpg'
4+
import event2 from '../../../images/events/viteconf_2023.jpg'
5+
import event3 from '../../../images/events/viteconf_2024.jpg'
6+
import event4 from '../../../images/events/viteconf_2025.jpg'
7+
8+
const EVENTS = [
9+
{
10+
date: '2025',
11+
title: 'ViteConf 2025',
12+
image: event4,
13+
url: 'https://www.youtube.com/watch?v=x7Jsmt_o9ek&list=PLqGQbXn_GDmkJaoykvHCUmXUPjhgH2bVr',
14+
},
15+
{
16+
date: '2024',
17+
title: 'ViteConf 2024',
18+
image: event3,
19+
url: 'https://www.youtube.com/watch?v=mWK3Y_1kmaM&list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp',
20+
},
21+
{
22+
date: '2023',
23+
title: 'ViteConf 2023',
24+
image: event2,
25+
url: 'https://www.youtube.com/watch?v=veCxKeLl35A&list=PLqGQbXn_GDmkOsHI7-Wrbv1GgAA4tJZhg',
26+
},
27+
{
28+
date: '2022',
29+
title: 'ViteConf 2022',
30+
image: event1,
31+
url: 'https://www.youtube.com/watch?v=Znd11rVHQOE&list=PLqGQbXn_GDmkI_lwbq5LsVYMEoX2ilKfI',
32+
},
33+
]
34+
</script>
35+
36+
<template>
37+
<div class="wrapper wrapper--ticks w-full text-center md:text-left">
38+
<h2
39+
class="text-white text-2xl px-10 py-5 text-pretty border-nickel border-y"
40+
>
41+
Eventos anteriores
42+
</h2>
43+
<div class="relative grid md:grid-cols-2 xl:grid-cols-4 wrapper--ticks">
44+
<a
45+
v-for="event in EVENTS"
46+
:key="event.date"
47+
class="group event-card block p-0.5"
48+
:style="`background-image: url(${background});`"
49+
:href="event.url"
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
>
53+
<img
54+
:src="event.image"
55+
:alt="event.title"
56+
class="w-full aspect-video object-cover"
57+
/>
58+
<div class="bg-primary group-hover:bg-primary/95 bg-blur-lg">
59+
<h3 class="text-white text-xl px-10 py-3 text-pretty">
60+
{{ event.title }}
61+
</h3>
62+
</div>
63+
</a>
64+
</div>
65+
</div>
66+
</template>
67+
68+
<style>
69+
.event-card {
70+
background-size: 200% 200%;
71+
background-position: 100% 200%;
72+
background-blend-mode: overlay;
73+
background-color: rgba(0, 0, 0, 0.5);
74+
}
75+
.event-card:hover {
76+
animation: event-card-hover 10s ease-in-out infinite;
77+
background-color: transparent;
78+
}
79+
@keyframes event-card-hover {
80+
0% {
81+
background-position: 100% 200%;
82+
}
83+
50% {
84+
background-position: -100% 200%;
85+
}
86+
100% {
87+
background-position: 100% 200%;
88+
}
89+
}
90+
</style>

‎docs/.vitepress/theme/live/Hero.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div
3+
class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel md:divide-x"
4+
>
5+
<div
6+
class="flex flex-col items-center text-center md:text-left md:items-start p-10 gap-5 justify-center"
7+
>
8+
<h1 class="text-white text-pretty max-w-[35rem]">
9+
5º aniversario de la creación del equipo de Vite
10+
</h1>
11+
<p class="text-white text-3xl text-pretty max-w-[35rem]">
12+
Reestreno de Vite: The Documentary
13+
</p>
14+
<p class="text-white/70 md:text-lg max-w-[35rem] text-pretty">
15+
Únete al ecosistema este 19 de marzo a las 3 PM UTC para recordar la historia que
16+
escribimos juntos. Y participa en el escenario en vivo para discutir nuestro pasado,
17+
presente y futuro. ¡Te estaremos esperando!
18+
</p>
19+
<div class="flex items-start justify-between w-full gap-5 mt-8">
20+
<div class="flex items-center gap-5">
21+
<a
22+
href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=Vite.%20The%20documentary&dates=20260319T180000/20260319T190000&ctz=Europe/Paris&details=5th%20anniversary%20Community%20time%0A%0AJoin%20on%20Discord:%20https%3A%2F%2Fdiscord.gg%2FPsQ3SfhhDQ"
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
class="button button--primary inline-block w-fit"
26+
>
27+
Añadir al calendario
28+
</a>
29+
<a
30+
href="https://chat.vite.dev"
31+
target="_blank"
32+
rel="noopener noreferrer"
33+
class="button inline-block w-fit"
34+
>
35+
Únete a la comunidad
36+
</a>
37+
</div>
38+
<a
39+
href="https://www.cultrepo.com/"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
class="inline-block w-fit grayscale hover:grayscale-0 hover:scale-105 transition-all duration-100"
43+
>
44+
<img
45+
src="../../../images/cultrepo-tv.svg"
46+
width="60"
47+
height="44"
48+
class="block"
49+
inert
50+
loading="lazy"
51+
alt="Cult.Repo"
52+
/>
53+
</a>
54+
</div>
55+
</div>
56+
<div class="flex items-center justify-center p-10 md:min-h-[30rem]">
57+
<img
58+
src="../../../images/vite-live-community.webp"
59+
width="1832"
60+
height="1388"
61+
class="block sm:max-w-[80%] lg:max-w-[70%]"
62+
inert
63+
loading="lazy"
64+
alt="Comunidad de Vite: Evan You, Matias Capeletto, Bjorn Lu, Anthony Fu, Sapphi Red, Dominik Göpel, Vladimir Sheremet, Ryan Carniato, Pedro Cattori, Mark Dalgleish, Rich Harris, Fred Schott, Eric Simons, Theo Browne, David Cramer, Misko Hevery"
65+
/>
66+
</div>
67+
</div>
68+
</template>

‎docs/.vitepress/theme/live/Layout.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup>
2+
import Hero from './Hero.vue'
3+
import Timer from './Timer.vue'
4+
import TimeoutSwitcher from './TimeoutSwitcher.vue'
5+
import VideoIframe from './VideoIframe.vue'
6+
import Events from './Events.vue'
7+
import Footer from '@components/oss/Footer.vue'
8+
</script>
9+
10+
<template>
11+
<TimeoutSwitcher at="2026-03-19T15:00:00.000Z">
12+
<template #default>
13+
<Hero />
14+
<Timer at="2026-03-19T15:00:00.000Z" />
15+
</template>
16+
<template #timeout>
17+
<VideoIframe />
18+
</template>
19+
</TimeoutSwitcher>
20+
<Events />
21+
<Footer
22+
heading="Empieza a construir con Vite"
23+
subheading="Prepárate para un entorno de desarrollo que por fin pueda mantener el ritmo de tu mente."
24+
button-text="Empezar"
25+
button-link="/guide/"
26+
/>
27+
</template>

‎docs/.vitepress/theme/live/TimeoutSwitcher.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script setup>
2+
import { computed, onMounted, onUnmounted, ref } from 'vue'
3+
4+
const props = defineProps({
5+
at: {
6+
type: String,
7+
required: true,
8+
},
9+
})
10+
11+
const timeoutTimestamp = computed(() => new Date(props.at).getTime())
12+
const now = ref(0)
13+
let intervalId
14+
15+
const isTimedOut = computed(() => {
16+
return now.value >= timeoutTimestamp.value
17+
})
18+
19+
onMounted(() => {
20+
now.value = Date.now()
21+
intervalId = window.setInterval(() => {
22+
now.value = Date.now()
23+
}, 1000)
24+
})
25+
26+
onUnmounted(() => {
27+
if (intervalId) {
28+
window.clearInterval(intervalId)
29+
}
30+
})
31+
</script>
32+
33+
<template>
34+
<slot v-if="isTimedOut" name="timeout" />
35+
<slot v-else />
36+
</template>

‎docs/.vitepress/theme/live/Timer.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup>
2+
import { computed, onMounted, onUnmounted, ref } from 'vue'
3+
4+
const props = defineProps({
5+
at: {
6+
type: String,
7+
required: true,
8+
},
9+
})
10+
11+
const targetTimestamp = computed(() => new Date(props.at).getTime())
12+
13+
const getRemainingMs = () => Math.max(0, targetTimestamp.value - Date.now())
14+
15+
const remainingMs = ref(0)
16+
let intervalId
17+
18+
const pad = (value) => String(value).padStart(2, '0')
19+
20+
const formattedCountdown = computed(() => {
21+
if (typeof window === 'undefined' || !remainingMs.value) return '00:00:00:00'
22+
23+
const totalSeconds = Math.floor(remainingMs.value / 1000)
24+
const days = Math.floor(totalSeconds / (24 * 60 * 60))
25+
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60))
26+
const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)
27+
const seconds = totalSeconds % 60
28+
29+
return `${days}:${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
30+
})
31+
32+
onMounted(() => {
33+
remainingMs.value = getRemainingMs()
34+
intervalId = window.setInterval(() => {
35+
remainingMs.value = getRemainingMs()
36+
}, 1000)
37+
})
38+
39+
onUnmounted(() => {
40+
if (intervalId) {
41+
window.clearInterval(intervalId)
42+
}
43+
})
44+
</script>
45+
46+
<template>
47+
<div
48+
class="wrapper wrapper--ticks grid md:grid-cols-3 w-full border-nickel border-t md:divide-x"
49+
>
50+
<div
51+
class="flex flex-col md:col-span-2 p-10 gap-5 justify-center text-center md:text-left"
52+
>
53+
<h2
54+
class="text-white text-[10vw] md:text-[min(8vw,7rem)] xxl:text-8xl font-semibold font-mono tracking-tight"
55+
>
56+
{{ formattedCountdown }}
57+
</h2>
58+
</div>
59+
<div class="flex items-center justify-center md:min-h-[30rem] p-10">
60+
<img
61+
src="../../../images/vite-play.webp"
62+
width="600"
63+
height="660"
64+
class="block max-w-[40%] md:max-w-[60%]"
65+
inert
66+
loading="lazy"
67+
alt=""
68+
/>
69+
</div>
70+
</div>
71+
</template>

‎docs/.vitepress/theme/live/VideoIframe.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="wrapper wrapper--ticks w-full border-nickel border-t md:divide-x">
3+
<iframe
4+
width="560"
5+
height="315"
6+
class="w-full h-auto max-h-[calc(100vh-5rem-var(--vp-banner-height,0px))] aspect-video"
7+
src="https://www.youtube-nocookie.com/embed/bmWQqAKLgT4?si=hhgR4fwkRw9zQ0yx&amp;controls=0&amp;start=0&amp;disablekb=1&amp;rel=0&amp;autoplay=1"
8+
title="YouTube video player"
9+
frameborder="0"
10+
allow="
11+
accelerometer;
12+
autoplay;
13+
clipboard-write;
14+
encrypted-media;
15+
gyroscope;
16+
picture-in-picture;
17+
web-share;
18+
"
19+
referrerpolicy="strict-origin-when-cross-origin"
20+
allowfullscreen
21+
/>
22+
</div>
23+
</template>

0 commit comments

Comments
 (0)