Merge branch 'main' into new-const-items

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/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

@@ -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>

src/components/Date.astro

@@ -25,14 +25,21 @@ const thirdDigitHeight = (1 / (maxThird + 1)) * 100
 <div
 	class:list=`relative w-full ${position} flex flex-col items-center justify-center text-center before:absolute before:inset-x-[-5px] before:inset-y-0 before:bg-gradient-to-b before:from-white/5 before:via-transparent before:to-transparent before:[clip-path:polygon(3.5%_0,100%_0%,97.5%_100%,0%_100%)] before:pointer-events-none`
 >
-	<div class:list={["relative flex -skew-x-6 overflow-hidden font-atomic", wrapperClassName]} {...attribute}>
+	<div
+		class:list={["relative flex -skew-x-6 overflow-hidden font-atomic", wrapperClassName]}
+		{...attribute}
+	>
 		<div class:list={`float-left block ${height} overflow-hidden`} data-first-group>
 			<div class="" data-wrapper>
 				{
 					Array.from({ length: maxFirst + 1 }, () => 0).map((_, index) => (
 						// + 1 porque hay que tener en cuenta el 0 para las transiciones
 						<div data-num={index} style={`height: ${firstDigitHeight}%`}>
-							<span class:list={`tabular-nums ${className} block h-fit overflow-hidden`}>{index}</span>
+							<span
+								class:list={`tabular-nums ${className} block h-fit select-none overflow-hidden`}
+							>
+								{index}
+							</span>
 						</div>
 					))
 				}
@@ -50,7 +57,11 @@ const thirdDigitHeight = (1 / (maxThird + 1)) * 100
 					Array.from({ length: maxSecond + 1 }, () => 0).map((_, index) => (
 						// + 1 porque hay que tener en cuenta el 0 para las transiciones
 						<div data-num={index} style={`height: ${secondDigitHeight}%`}>
-							<span class:list={`tabular-nums ${className} block h-fit overflow-hidden`}>{index}</span>
+							<span
+								class:list={`tabular-nums ${className} block h-fit select-none overflow-hidden`}
+							>
+								{index}
+							</span>
 						</div>
 					))
 				}
@@ -72,7 +83,11 @@ const thirdDigitHeight = (1 / (maxThird + 1)) * 100
 						{Array.from({ length: maxThird + 1 }, () => 0).map((_, index) => (
 							// + 1 porque hay que tener en cuenta el 0 para las transiciones
 							<div data-num={index} style={`height: ${thirdDigitHeight}%`}>
-								<span class:list={`tabular-nums ${className} block h-fit overflow-hidden`}>{index}</span>
+								<span
+									class:list={`tabular-nums ${className} block h-fit select-none overflow-hidden`}
+								>
+									{index}
+								</span>
 							</div>
 						))}
 						<div

src/components/FooterContent.astro

@@ -0,0 +1,10 @@
+---
+import Typography from "@/components/Typography.astro"
+---
+
+<Typography as="span" variant="body" color="neutral" class:list={"text-center"}>
+	&copy; {new Date().getFullYear()} La Velada del Año <span
+		aria-hidden="true"
+		class="hidden md:inline">|</span
+	><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados.
+</Typography>

src/components/HamburgerButton.astro

@@ -0,0 +1,38 @@
+---
+const width = "w-6"
+const genericHamburgerLine = `h-[2px] ${width} bg-gray-300 transition ease transform duration-300`
+---
+
+<button
+	id={Astro.props.id}
+	class:list={[
+		`hamburgerButton group relative flex h-[20px] flex-col items-center justify-between lg:hidden`,
+		width,
+	]}
+	aria-label="hamburguer menu button"
+>
+	<div class:list={[`group-[.open]:translate-y-2 group-[.open]:rotate-45`, genericHamburgerLine]}>
+	</div>
+	<div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div>
+	<div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div>
+	<div
+		class:list={[
+			`group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45 `,
+			genericHamburgerLine,
+		]}
+	>
+	</div>
+</button>
+
+<script>
+	import { $, $$ } from "@/consts/dom-selector"
+	document.addEventListener("astro:page-load", () => {
+		$$(".hamburgerButton").forEach((button) => {
+			button.addEventListener("click", () => {
+				const hamburgerButton = $(".hamburgerButton")
+				hamburgerButton?.classList.toggle("open")
+				hamburgerButton?.dispatchEvent(new CustomEvent("hamburgerButtonClicked"))
+			})
+		})
+	})
+</script>