Merge branch 'main' into refactor-toast

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,97 @@
+name: Reportar problema
+description: Reporta un problema
+title: "[Bug]: "
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: "# Pre-requisitos"
+  - type: checkboxes
+    id: pre-requisitos
+    attributes:
+      label: Señala los requisitos cumplidos
+      description: |
+        Asegúrate de cumplir estos requisitos antes de reportar un problema
+      options:
+        - label: Estoy corriendo la última versión.
+          required: true
+        - label: |
+            He revisado si ya hay un issue creado con características similares.
+          required: true
+  - type: markdown
+    attributes:
+      value: "# Comportamiento"
+  - type: textarea
+    id: comportamiento-esperado
+    attributes:
+      label: Comportamiento esperado
+      description: Describe el comportamiento esperado de la issue
+      placeholder: Esta feature debería hacer ...
+  - type: textarea
+    id: comportamiento-actual
+    attributes:
+      label: Comportamiento actual
+      description: Describe el comportamiento actual de la issue
+      placeholder: Esta feature hace ...
+  - type: markdown
+    attributes:
+      value: "# Información"
+  - type: textarea
+    id: informacion-bug
+    attributes:
+      label: Información del bug
+      description: Aporta información sobre el bug
+      placeholder: Este bug ocurre cuando ...
+  - type: textarea
+    id: pasos-reproducir
+    attributes:
+      label: Pasos para reproducirlo
+      description: Pasos necesarios para reproducir el bug
+      placeholder: |
+        1. Paso1
+        2. Paso2
+  - type: markdown
+    attributes:
+      value: "# Contexto"
+  - type: dropdown
+    id: navegadores
+    attributes:
+      label: ¿En qué navegadores encuentras el problema?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+        - Opera
+        - Todos los navegadores
+  - type: input
+    id: version-navegador
+    attributes:
+      label: Versión del navegador
+      description: Versión del navegador en el cuál encuentras el problema
+      placeholder: Chrome v124.0.6367.92 ...
+  - type: dropdown
+    id: sistema-operativo
+    attributes:
+      label: Sistema operativo
+      description: Sistema operativo en el cuál encuentras el problema
+      multiple: true
+      options:
+        - Windows
+        - MacOS
+        - Linux
+        - Android
+        - Todos los sistemas
+  - type: markdown
+    attributes:
+      value: "# Información adicional"
+  - type: textarea
+    attributes:
+      label: Añade información adicional si fuese necesario
+      description: Imágenes, link del código, fragmento de código ...
+      placeholder: |
+        ```typescript
+        const variable = "..."
+        ```
+        ...

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,20 @@
+name: Propuesta de mejora
+description: Sugerir una mejora o feature para el proyecto
+title: "[Feat]: "
+labels: ["enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: "## Pre-requisitos"
+  - type: markdown
+    attributes:
+      value: |
+        Antes de sugerir una feature, busca [features existentes](https://github.com/midudev/la-velada-web-oficial/issues)
+  - type: textarea
+    attributes:
+      label: Descripción
+      description: Descripción de la feature que quieres que se añada
+      placeholder: |
+        Estaría bien que el proyecto tuviese ...
+    validations:
+      required: true

package.json

@@ -16,11 +16,11 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@astrojs/db": "0.10.5",
+    "@astrojs/db": "0.10.6",
     "@auth/core": "0.18.6",
     "@fontsource-variable/jost": "5.0.19",
     "@vercel/analytics": "1.2.2",
-    "astro": "4.6.3",
+    "astro": "4.7.0",
     "auth-astro": "4.1.1",
     "valibot": "0.30.0"
   },
@@ -29,7 +29,7 @@
     "@astrojs/check": "0.5.10",
     "@astrojs/sitemap": "3.1.4",
     "@astrojs/tailwind": "5.1.0",
-    "@astrojs/vercel": "7.5.3",
+    "@astrojs/vercel": "7.5.4",
     "@midudev/tailwind-animations": "0.0.7",
     "@types/dom-view-transitions": "1.0.4",
     "@typescript-eslint/parser": "7.7.1",

src/components/AnimatedX.astro

@@ -141,6 +141,8 @@
 	>
 </span>
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	let intervalId: NodeJS.Timeout
 	type AnimatedXElement = SVGGElement | null
 
@@ -152,9 +154,9 @@
 		if (prefersReducedMotion) return
 
 		intervalId && clearInterval(intervalId)
-		const $svgGroup1 = document.getElementById("layer1") as AnimatedXElement
-		const $svgGroup2 = document.getElementById("layer2") as AnimatedXElement
-		const $svgGroup3 = document.getElementById("layer3") as AnimatedXElement
+		const $svgGroup1 = $("#layer1") as AnimatedXElement
+		const $svgGroup2 = $("#layer2") as AnimatedXElement
+		const $svgGroup3 = $("#layer3") as AnimatedXElement
 
 		intervalId = setInterval(() => drawGroup([$svgGroup1, $svgGroup2, $svgGroup3]), INTERVAL_TIME)
 	})

src/components/BoxerClips.astro

@@ -18,7 +18,7 @@ const hasClips = clips.length > 0
 		<section class="z-20 mx-auto mt-2 max-w-96 overflow-x-hidden py-5 md:mt-0">
 			<ClipsModal />
 			<div class="carousel flex select-none flex-row flex-nowrap items-center transition duration-700 md:max-w-none md:!translate-x-0 md:flex-wrap md:place-content-center md:gap-4">
-				{clips.map(({ text, url }, index) => (
+				{clips.map(({ text, url }) => (
 					<button
 						data-url={url}
 						class:list={`clip-container group flex min-w-full flex-col justify-between hover:saturate-150 md:min-w-0 ${"block"} cursor-pointer md:block`}
@@ -68,6 +68,7 @@ const hasClips = clips.length > 0
 		</section>
 	)
 }
+
 <script>
 	import { $ } from "@/lib/dom-selector"
 

src/components/Boxers/Gallery.astro

@@ -99,9 +99,11 @@ const { id, name } = Astro.props
 </style>
 
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
-		const $lightbox = document.getElementById("lightbox") as HTMLDialogElement
-		const $gallery = document.getElementById("boxer-gallery") as HTMLElement
+		const $lightbox = $("#lightbox") as HTMLDialogElement
+		const $gallery = $("#boxer-gallery") as HTMLElement
 		if (!$gallery) return
 
 		const $links = $gallery?.querySelectorAll("a")
@@ -167,7 +169,7 @@ const { id, name } = Astro.props
 		$close?.addEventListener("click", close)
 
 		$lightbox?.addEventListener("click", (event) => {
-			const $dialogBg = document.querySelector("[data-dialog-bg]") as HTMLDivElement
+			const $dialogBg = $("[data-dialog-bg]") as HTMLDivElement
 			const canClose = event.target === $dialogBg || event.target === $lightbox
 			if (canClose) close()
 		})

src/components/ButtonUp.astro

@@ -19,9 +19,11 @@
 </div>
 
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
 		let timeout: number = 0 // Identificador para clearTimeout
-		const $button = document.getElementById("scroll-to-top") as HTMLButtonElement
+		const $button = $("#scroll-to-top") as HTMLButtonElement
 
 		const DISPLAY = { BLOCK: "block", NONE: "none" } as const
 

src/components/CalendarButton.astro

@@ -12,6 +12,8 @@ import Action from "@/components/Action.astro"
 </Action>
 
 <script is:inline>
+	import { $ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
 		const config = {
 			name: "🥊 La Velada del Año 4 - El Evento del Año",
@@ -42,7 +44,7 @@ import Action from "@/components/Action.astro"
 			})
 		}
 
-		const button = document.querySelector("#add-to-calendar")
+		const button = $("#add-to-calendar")
 
 		const handleClick = async () => {
 			if (status === "loading") return

src/components/ClipsModal.astro

@@ -57,11 +57,13 @@
 </style>
 
 <script>
+	import { $, $$ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
-		const $clipContainer = document.querySelectorAll(".clip-container")
-		const $clipDialog = document.querySelector(".clip-dialog") as HTMLDialogElement
-		const $closeButton = document.querySelector(".close-dialog")
-		const $ytFrame = document.querySelector(".yt-iframe")
+		const $clipContainer = $$(".clip-container")
+		const $clipDialog = $(".clip-dialog") as HTMLDialogElement
+		const $closeButton = $(".close-dialog")
+		const $ytFrame = $(".yt-iframe")
 
 		if (!$clipDialog) return
 

src/components/ForecastBoxer.astro

@@ -2,12 +2,12 @@
 interface Props {
 	image: string
 	imageAlt: string
+	boxerId: string
 	boxerName: string
 	boxerHref: string
-	percentage: number
 }
 
-const { image, imageAlt, boxerName, boxerHref, percentage } = Astro.props
+const { image, imageAlt, boxerId, boxerName, boxerHref } = Astro.props
 ---
 
 <a
@@ -23,16 +23,16 @@ const { image, imageAlt, boxerName, boxerHref, percentage } = Astro.props
 			{boxerName}
 		</h3>
 		<h4
-			class="mt-1 text-center text-6xl font-semibold text-accent transition-transform group-hover:scale-75"
+			data-id={boxerId}
+			class="boxer-forecast mt-1 text-center text-6xl font-semibold text-accent transition-transform group-hover:scale-75"
 		>
-			{percentage}%
+			&nbsp;
 		</h4>
 	</article>
 </a>
 
 <style>
 	.image {
-		filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
 		mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
 	}
 </style>

src/components/SmokeBackground.astro

@@ -3,8 +3,10 @@
 </div>
 
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	const NUM_PARTICLES = 50 // Número de partículas
-	const canvas = document.getElementById("smoke-canvas") as HTMLCanvasElement
+	const canvas = $("#smoke-canvas") as HTMLCanvasElement
 	const ctx = canvas.getContext("2d") as CanvasRenderingContext2D
 	let raf: number
 

src/components/TwitchLiveBox.astro

@@ -40,20 +40,22 @@ const { streamer = "ibai" } = Astro.props
 </div>
 
 <script is:inline>
+	import { $ } from "@/lib/dom-selector"
+
 	const CONFIG = {
 		MIDU_API_UPTIME_WORKER: "https://midudev-apis.midudev.workers.dev/uptime",
 		VELADA_DATE: "2024-07-13 19:00:00 GMT+0100",
 		TWITCH_PLAYER_URL: "https://player.twitch.tv",
 	}
-	const streamer = document.querySelector("#streamer").value
+	const streamer = $("#streamer").value
 	const isVeladaTime = new Date().getTime() >= new Date(CONFIG.VELADA_DATE).getTime()
 	if (isVeladaTime) {
 		fetch(`${CONFIG.MIDU_API_UPTIME_WORKER}/${streamer}`)
 			.then((res) => res.json())
 			.then(({ online }) => {
 				if (online) {
-					document.querySelector("#live").style.display = "block"
-					document.querySelector("#live-frame").innerHTML =
+					$("#live").style.display = "block"
+					$("#live-frame").innerHTML =
 						`<iframe src="${CONFIG.TWITCH_PLAYER_URL}/?channel=${streamer}&parent=${document.location.hostname}" frameborder="0" width="380" height="200" allowfullscreen="true" scrolling="no"></iframe>`
 				}
 			})
@@ -62,9 +64,9 @@ const { streamer = "ibai" } = Astro.props
 			})
 	}
 
-	const closeButton = document.querySelector("#live-close")
+	const closeButton = $("#live-close")
 	closeButton?.addEventListener("click", () => {
-		document.querySelector("#live").style.display = "none"
-		document.querySelector("#live").innerHTML = ""
+		$("#live").style.display = "none"
+		$("#live").innerHTML = ""
 	})
 </script>