Merge branch 'main' into fix-first-impresion-v2

.github/workflows/_studio.yml

@@ -0,0 +1,26 @@
+name: Astro Studio
+
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{secrets.ASTRO_STUDIO_APP_TOKEN }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  DB:
+    permissions:
+      contents: read
+      actions: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: jaid/[email protected]
+      - uses: withastro/action-studio@main

.nvmrc

@@ -1 +1 @@
-18.14.1
+18

README.md

@@ -14,7 +14,7 @@
 ## Web oficial de La Velada IV
 
 La Velada IV es una competición de boxeo que enfrenta a streamers, creadores de contenido y otras celebridades sobre un ring.\
-[Reportar error](https://github.com/midudev/la-velada-web-oficial/issues) · [Sugerir algo](https://github.com/midudev/la-velada-web-oficial/issues)
+[Diseño de Figma](https://www.figma.com/file/7uUHCJ7YhJEoB24EZ00lXC/240405-LVDA-IV?type=design&node-id=0-1&mode=design&t=CUK9cH8DXhKXx31U-0) · [Reportar error](https://github.com/midudev/la-velada-web-oficial/issues) · [Sugerir algo](https://github.com/midudev/la-velada-web-oficial/issues)
 
 </div>
 
@@ -57,9 +57,41 @@ La Velada IV es una competición de boxeo que enfrenta a streamers, creadores de
   # o
   nvm use <version>
   ```
-
 > Si quieres automatizar el proceso, puedes crear un script siguiendo la [documentación oficial](https://github.com/nvm-sh/nvm?tab=readme-ov-file#calling-nvm-use-automatically-in-a-directory-with-a-nvmrc-file)
 
+<details>
+	<summary>Pequeño script de automatización</summary>
+
+- For Linux/MacOS:
+	```sh
+	# .bashrc | .zshrc | cualquier archivo de configuración
+	# pequeño script para cambiar de version al entrar al directorio
+	cd() {
+  builtin cd "$@"
+		if [[ -f .nvmrc ]]; then
+			nvm use > /dev/null
+			# Si quieres que te diga la versión
+			nvm use
+		fi
+	}
+	```
+
+- For Windows:
+	```powershell
+	# $PROFILE
+	function Change-Node-Version {
+		param($path)
+		& Set-Location $path
+		$pwd = pwd
+		if ( Test-Path "$pwd\\.nvmrc" ) {
+			$version = Get-Content .nvmrc
+			nvm use $version
+		}
+	}
+	New-Alias -Name cd -Value Change-Node-Version -Force -Option AllScope
+	```
+ </details>
+
 - PNPM (es nuestra recomendación por su eficiencia y rapidez)
 
   ```sh

package.json

@@ -18,12 +18,12 @@
   "dependencies": {
     "@fontsource-variable/jost": "5.0.18",
     "@vercel/analytics": "1.2.2",
-    "astro": "4.5.1"
+    "astro": "4.3.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "0.43.1",
-    "@astrojs/check": "0.5.7",
-    "@astrojs/sitemap": "^3.1.1",
+    "@astrojs/check": "0.5.9",
+    "@astrojs/sitemap": "3.1.1",
     "@astrojs/tailwind": "5.1.0",
     "@astrojs/vercel": "7.3.6",
     "@midudev/tailwind-animations": "0.0.7",
@@ -40,6 +40,6 @@
     "prettier-plugin-tailwindcss": "0.5.12",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
-    "vite-plugin-pwa": "^0.19.2"
+    "vite-plugin-pwa": "0.19.2"
   }
 }

src/components/Action.astro

@@ -6,12 +6,12 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>
 const { as: Tag, class: className, ...props } = Astro.props
 ---
 
-<Tag class:list={["button-style *:duration-500 motion-reduce:*:duration-0", className]} {...props}>
+<Tag class:list={["action *:duration-500 motion-reduce:*:duration-0", className]} {...props}>
 	<span><slot /></span>
 </Tag>
 
 <style>
-	.button-style {
+	.action {
 		padding: 10px 20px;
 		display: inline-block;
 		font-weight: 600;
@@ -22,19 +22,19 @@ const { as: Tag, class: className, ...props } = Astro.props
 		border: 2px solid var(--color-primary);
 	}
 
-	.button-style[aria-disabled="true"] {
+	.action[aria-disabled="true"] {
 		background: #666;
 		color: #111;
 		pointer-events: none;
 		border-color: #666;
 	}
 
-	.button-style > span {
+	.action > span {
 		display: inline-block;
 		transform: skew(21deg);
 	}
 
-	.button-style::before {
+	.action::before {
 		content: "";
 		position: absolute;
 		inset: -2px;
@@ -43,35 +43,35 @@ const { as: Tag, class: className, ...props } = Astro.props
 		transform-origin: right; /* To end from left to right */
 	}
 
-	.button-style:hover {
+	.action:hover {
 		color: var(--color-secondary);
 		scale: 1.1;
 	}
 
-	.button-style:hover::before {
+	.action:hover::before {
 		transform: scaleX(1);
 		transform-origin: left; /* To start from left to right */
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
-		.button-style {
+		.action {
 			transition:
 				color 0.15s ease-in,
 				scale 0.15s ease-in;
 		}
-		.button-style::before {
+		.action::before {
 			transition: transform 0.3s ease-in;
 		}
 
 		/* Added delay to simulate a hover attempt */
-		.button-style:hover {
+		.action:hover {
 			transition:
 				color 0.15s ease-out 0.1s,
 				scale 0.15s ease-out 0.1s;
 		}
 
 		/* Added delay to simulate a hover attempt */
-		.button-style:hover::before {
+		.action:hover::before {
 			transition: transform 0.3s ease-out 0.1s;
 		}
 	}

src/components/ButtonUp.astro

@@ -1,4 +1,4 @@
-<div class="fixed bottom-2 right-2 opacity-0 transition-opacity">
+<div id="button-up" class="fixed bottom-2 right-2 opacity-0 transition-opacity">
 	<button
 		id="scroll-to-top"
 		aria-label="Volver al inicio de la página"
@@ -20,30 +20,34 @@
 
 <script>
 	let timeout: number = 0 // Identificador para clearTimeout
-	const $button = document.getElementById("scroll-to-top")
+	const $button = document.getElementById("scroll-to-top") as HTMLButtonElement
+
+	const DISPLAY = { BLOCK: "block", NONE: "none" } as const
 
 	// Función para mostrar u ocultar el botón
 	function toggleScrollToTop() {
 		const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
-		const display = scrollTop > 20 ? "block" : "none"
+		const display = scrollTop > 20 ? DISPLAY.BLOCK : DISPLAY.NONE
+
 		if ($button) {
-			$button.parentElement?.classList.toggle("opacity-0", display === "none")
-			$button.classList.toggle("cursor-default", display === "none")
+			const parent = $button.closest("#button-up")
+			parent?.classList.toggle("opacity-0", display === DISPLAY.NONE)
+			$button.classList.toggle("cursor-default", display === DISPLAY.NONE)
 		}
 	}
 
 	function throttledScrollHandler() {
-		if (timeout === 0) {
-			timeout = setTimeout(() => {
+		if (!timeout) {
+			timeout = requestAnimationFrame(() => {
 				toggleScrollToTop()
 				timeout = 0
-			}, 100)
+			})
 		}
 	}
 
 	window.addEventListener("scroll", throttledScrollHandler)
 
-	$button?.addEventListener("click", () => {
+	$button.addEventListener("click", () => {
 		window.scrollTo({ top: 0, behavior: "smooth" })
 	})
 </script>

src/components/CalendarButton.astro

@@ -3,7 +3,7 @@ import Action from "./Action.astro"
 ---
 
 <Action
-	class="!w-full !text-base xs:!text-xl"
+	class="w-full text-base"
 	as="button"
 	id="add-to-calendar"
 	aria-label="agregar al calendario se abrirá ventana flotante"
@@ -12,48 +12,53 @@ import Action from "./Action.astro"
 </Action>
 
 <script is:inline>
-	const config = {
-		name: "🥊 La Velada del Año 4 - El Evento del Año",
-		description:
-			"¡Arranca la Velada del Año!<br><br>Entra a Twitch y no te lo pierdas → [url]https://twitch.tv/ibai[/url]",
-		startDate: "2024-07-13",
-		endDate: "2024-07-13",
-		startTime: "19:00",
-		endTime: "22:00",
-		options: ["Google", "Apple", "Microsoft365", "MicrosoftTeams"],
-		timeZone: "Europe/Madrid",
-		trigger: "click",
-		iCalFileName: "Reminder-Event",
-	}
-
-	let status
-
-	function loadStyle(src) {
-		return new Promise((resolve, reject) => {
-			const link = document.createElement("link")
-			link.href = src
-			link.rel = "stylesheet"
-
-			link.onload = () => resolve(link)
-			link.onerror = () => reject(new Error(`Style load error for ${src}`))
-
-			document.head.append(link)
-		})
-	}
-
-	const button = document.querySelector("#add-to-calendar")
-	button?.addEventListener("click", async () => {
-		if (status === "loading") return
-
-		if (!status) {
-			const text = button.innerHTML
-			button.innerHTML = "Cargando..."
-			status = "loading"
-			await Promise.all([import("/js/add-to-calendar.js"), loadStyle("/css/add-to-calendar.css")])
-			status = "loaded"
-			button.innerHTML = text
+	document.addEventListener("astro:page-load", () => {
+		const config = {
+			name: "🥊 La Velada del Año 4 - El Evento del Año",
+			description:
+				"¡Arranca la Velada del Año!<br><br>Entra a Twitch y no te lo pierdas → [url]https://twitch.tv/ibai[/url]",
+			startDate: "2024-07-13",
+			endDate: "2024-07-13",
+			startTime: "19:00",
+			endTime: "22:00",
+			options: ["Google", "Apple", "Microsoft365", "MicrosoftTeams"],
+			timeZone: "Europe/Madrid",
+			trigger: "click",
+			iCalFileName: "Reminder-Event",
 		}
 
-		window.atcb_action(config, button)
+		let status
+
+		function loadStyle(src) {
+			return new Promise((resolve, reject) => {
+				const link = document.createElement("link")
+				link.href = src
+				link.rel = "stylesheet"
+
+				link.onload = () => resolve(link)
+				link.onerror = () => reject(new Error(`Style load error for ${src}`))
+
+				document.head.append(link)
+			})
+		}
+
+		const button = document.querySelector("#add-to-calendar")
+
+		const handleClick = async () => {
+			if (status === "loading") return
+
+			if (!status) {
+				const text = button.innerHTML
+				button.innerHTML = "Cargando..."
+				status = "loading"
+				await Promise.all([import("/js/add-to-calendar.js"), loadStyle("/css/add-to-calendar.css")])
+				status = "loaded"
+				button.innerHTML = text
+			}
+
+			window.atcb_action(config, button)
+		}
+
+		button?.addEventListener("click", handleClick)
 	})
 </script>