Merge branch 'main' into feature/added-navigation-to-allies

package.json

@@ -16,17 +16,17 @@
     "prepare": "husky install && bash -c 'chmod ug+x .husky/*'"
   },
   "dependencies": {
-    "@astrojs/db": "0.11.2",
+    "@astrojs/db": "0.11.3",
     "@auth/core": "0.18.6",
     "@fontsource-variable/jost": "5.0.19",
     "@vercel/analytics": "1.2.2",
-    "astro": "4.8.4",
+    "astro": "4.8.6",
     "auth-astro": "4.1.1",
     "valibot": "0.30.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "0.43.1",
-    "@astrojs/check": "0.6.0",
+    "@astrojs/check": "0.7.0",
     "@astrojs/sitemap": "3.1.4",
     "@astrojs/tailwind": "5.1.0",
     "@astrojs/vercel": "7.6.0",
@@ -38,7 +38,7 @@
     "eslint-plugin-astro": "1.2.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "husky": "9.0.11",
-    "lightningcss": "1.24.1",
+    "lightningcss": "1.25.0",
     "lint-staged": "15.2.2",
     "postcss-import": "16.1.0",
     "postcss-nesting": "12.1.4",

src/components/ClipsModal.astro

@@ -63,15 +63,27 @@
 		const $clipContainer = $$(".clip-container")
 		const $clipDialog = $(".clip-dialog") as HTMLDialogElement
 		const $closeButton = $(".close-dialog")
-		const $ytFrame = $(".yt-iframe")
+		let $ytFrame = $(".yt-iframe")
+		const ytFrameCopy = $ytFrame
 
 		if (!$clipDialog) return
 
 		$clipDialog.addEventListener("close", () => {
-			$ytFrame?.setAttribute("src", "")
+			if ($ytFrame !== null) {
+				$ytFrame.setAttribute("src", "")
+			} else {
+				ytFrameCopy?.setAttribute("src", "")
+			}
 		})
 
-		$closeButton?.addEventListener("click", () => $clipDialog.close())
+		$closeButton?.addEventListener("click", () => {
+			$clipDialog.close()
+			if ($ytFrame !== null) {
+				$ytFrame.remove()
+			} else {
+				ytFrameCopy?.remove()
+			}
+		})
 
 		$clipDialog.addEventListener("click", (event) => {
 			const target = event.target as HTMLElement
@@ -83,7 +95,15 @@
 				const currentTarget = event.currentTarget as HTMLElement
 				const { url } = currentTarget.dataset
 				if (!url) return
-				$ytFrame?.setAttribute("src", `${url}&autoplay=1`)
+				$ytFrame = $(".yt-iframe") as HTMLIFrameElement
+				if ($ytFrame !== null) {
+					$ytFrame.setAttribute("src", `${url}&autoplay=1`)
+				} else {
+					if (ytFrameCopy) {
+						$clipDialog?.querySelector("div")?.prepend(ytFrameCopy)
+						ytFrameCopy.setAttribute("src", `${url}&autoplay=1`)
+					}
+				}
 				$clipDialog.showModal()
 			})
 		})

src/components/Combates/BackgroundVideo.astro

@@ -4,29 +4,28 @@ interface Props {
 }
 
 const { id } = Astro.props
+
+const url = `https://cdn.lavelada.dev/${id}-corto.mp4`
 ---
 
 <div class="fixed left-0 top-0 -z-10 aspect-video h-[100vh] w-screen" id="bg-video">
 	<video
+		id="video-player"
+		autoplay
 		muted
 		loop
 		class="aspect-video size-full overflow-hidden object-cover opacity-0 transition-opacity duration-500"
 		style="mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, transparent);"
 		oncanplay="this.classList.add('opacity-70')"
+		playsinline
+		src={url}
 	>
-		<source type="video/mp4" src={`https://cdn.lavelada.dev/${id}-corto.mp4`} />
+		<source type="video/mp4" src={url} />
 	</video>
 </div>
 
-<script>
+<script is:inline>
 	import { $ } from "@/lib/dom-selector"
 
-	const $bgVideoDiv = $("#bg-video")
-
-	const playVideo = () => {
-		if ($bgVideoDiv) $bgVideoDiv.querySelector("video")?.play()
-		else document.removeEventListener("astro:page-load", playVideo)
-	}
-
-	document.addEventListener("astro:page-load", playVideo)
+	$("#video-player").load()
 </script>

src/components/Header.astro

@@ -16,9 +16,8 @@ const pages = [
 	{ name: "Combates", href: "/combates", active: normalizedPathName.startsWith("/combates") },
 	{ name: "Pronósticos", href: "/pronosticos" },
 	{
-		name: "Entradas",
-		href: "https://www.entradas.com/artist/la-velada-del-ano/?affiliate=LVL",
-		soonDate: "¡Agotadas!",
+		name: "Tienda",
+		href: "https://lavelada.store/",
 		disabled: true,
 		target: "_blank",
 	},
@@ -33,7 +32,7 @@ const isCombatIntern = normalizedPathName.startsWith("/combates/")
 <header class="mb-10 h-16 max-w-[100vw] lg:h-24">
 	<nav class="group flex h-full w-full items-center justify-between px-10 lg:justify-center">
 		{
-			pages.map(({ name, href, active, soonDate, target }, key) => (
+			pages.map(({ name, href, active, target }, key) => (
 				<>
 					<a
 						href={href}
@@ -47,9 +46,6 @@ const isCombatIntern = normalizedPathName.startsWith("/combates/")
 						id={`nav-link-${key}`}
 					>
 						<span class="z-10">{name}</span>
-						{soonDate && (
-							<span class="absolute z-10 mt-10 -skew-x-6 text-xs text-accent">{soonDate}</span>
-						)}
 						<div class="background absolute -z-10 h-full w-full" />
 					</a>
 					{key === 1 && <div class:list={"hidden w-64 lg:block"} />}
@@ -84,7 +80,7 @@ const isCombatIntern = normalizedPathName.startsWith("/combates/")
 					style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
 				/>
 				{
-					pages.map(({ name, href, active, soonDate }, key) => (
+					pages.map(({ name, href, active }, key) => (
 						<>
 							<a
 								href={href}
@@ -95,7 +91,6 @@ const isCombatIntern = normalizedPathName.startsWith("/combates/")
 								id={`navmob-link-${key}`}
 							>
 								<span class="z-10 uppercase text-primary">{name}</span>
-								{soonDate && <span class="text-accent">{soonDate}</span>}
 							</a>
 							<hr
 								class="h-[2px] w-full border-t-0"
@@ -122,7 +117,7 @@ const isCombatIntern = normalizedPathName.startsWith("/combates/")
 			</div>
 			<div class="focus-within-ring -ml-[8px] -mr-[4px]">
 				<a href="/" class="focus-visible:!ring-0">
-					<HeroLogo class:list={"h-auto w-full"} id="hero-logo-header" noEffect />
+					<HeroLogo class:list={"h-auto w-full"} id="hero-logo-header" animated={false} />
 				</a>
 			</div>
 			<div

src/components/HeroLogo.astro

@@ -3,9 +3,10 @@ interface Props {
 	id: string
 	class?: string
 	noEffect?: boolean
+	animated?: boolean
 }
 
-const { id, class: classList, noEffect } = Astro.props as Props
+const { id, class: classList, noEffect, animated = true } = Astro.props as Props
 ---
 
 <svg
@@ -22,17 +23,26 @@ const { id, class: classList, noEffect } = Astro.props as Props
 			fill="currentColor"
 			stroke="currentColor"
 			d="M363.933 2.427h13.752c-.194 22.247-.391 44.491-.585 66.738 3.93-.33 7.865-.584 11.804-.759-.015 3.17-.031 6.337-.044 9.507a260.26 260.26 0 0 0-25.908 2.608zm27.126 75.386c5.26-25.343 10.382-50.319 15.354-75.383h14.68c5.195 25.3 10.53 50.99 15.956 77.529a262.327 262.327 0 0 0-13.035-1.44 19513.85 19513.85 0 0 1-10.089-58.489 7672.546 7672.546 0 0 1-9.582 57.565"
-			class="animate-fade-in-up"
+			class:list={[{ "animate-fade-in-up": animated }]}
 		>
 		</path>
 		<path
 			fill="currentColor"
 			stroke="currentColor"
 			d="M188.451 584.028V415.951c9.227-.036 18.453-.08 27.68-.116 9.563-.035 17.024 1.67 22.347 4.955 5.332 3.286 9.094 8.276 11.303 14.98 2.2 6.714 3.247 15.203 3.14 25.583-.177 17.875-.354 35.741-.541 53.617-.106 10.629-1.33 19.686-3.646 27.34-2.324 7.646-6.104 13.951-11.329 19.012-5.225 5.062-12.34 9.111-21.301 12.237a557 557 0 0 0-27.662 10.46zm20.831-28.362c2.12-.675 4.249-1.332 6.379-1.98 4.826-1.475 8.295-3.632 10.406-6.501 2.111-2.868 3.416-6.526 3.93-10.993.506-4.466.79-9.839.843-16.143l.452-58.554c.045-6.171-.248-11.117-.896-14.856-.647-3.738-2.022-6.438-4.125-8.116-2.111-1.669-5.527-2.424-10.247-2.193-2.067.098-4.143.195-6.21.302-.177 39.675-.346 79.359-.523 119.034zm49.779 4.848c.505-48.271 1.011-96.55 1.525-144.821 16.431-.044 32.861-.089 49.291-.115l-.186 17.262c-9.29.213-18.576.462-27.857.746l-.452 40.199c7.301-.675 14.611-1.288 21.93-1.838l-.186 17.227a950.984 950.984 0 0 0-21.948 2.388c-.178 15.416-.346 30.822-.515 46.238a634.993 634.993 0 0 1 28.256-4.751c-.062 5.639-.115 11.277-.177 16.925a557 557 0 0 0-49.681 10.558zm56.956-11.704c.452-44.416.905-88.824 1.348-133.241 7.151-.009 14.31-.018 21.461-.036-.32 37.997-.63 75.994-.95 113.982 9.59-.944 19.2-1.667 28.824-2.167l-.08 16.117a558 558 0 0 0-50.612 5.345zm102.76-6.02a546.992 546.992 0 0 0-20.538-.311c7.994-42.348 15.836-84.5 23.528-126.972 7.638 0 15.268 0 22.906.017 8.109 42.943 16.342 86.525 24.672 131.262a568.993 568.993 0 0 0-20.156-2.149c-5.287-33.441-10.513-66.474-15.676-99.259a17809.8 17809.8 0 0 1-14.727 97.412zm57.985 4.973c-.426-44.071-.852-88.132-1.269-132.203 4.977 0 9.954.018 14.931.027 9.794 25.582 19.633 52.071 29.454 79.9-.302-26.613-.594-53.225-.896-79.838 5.9.018 11.79.026 17.69.044.516 48.04 1.028 96.08 1.535 144.12a564.02 564.02 0 0 0-14.168-3.419c-9.883-30.209-19.802-58.873-29.694-86.454.293 26.897.577 53.794.87 80.691a561.983 561.983 0 0 0-18.453-2.868m101.9 26.124c-8.127-2.779-14.665-6.837-19.562-12.192-4.906-5.354-8.455-11.846-10.638-19.598-2.183-7.752-3.326-16.481-3.433-26.337l-.559-54.62c-.106-9.848.879-18.212 2.928-25.201 2.049-6.988 5.527-12.343 10.415-16.117 4.888-3.765 11.498-5.727 19.811-5.736 8.507 0 15.206 2.007 20.094 6.234 4.879 4.217 8.419 10.424 10.584 18.585 2.173 8.152 3.247 17.999 3.247 29.339v63.082c0 11.206-1.065 20.619-3.159 28.06-2.093 7.451-5.5 12.459-10.211 15.061-4.72 2.619-11.205 2.291-19.517-.56m-.134-20.983c3.505 1.039 6.078.799 7.719-.79 1.641-1.59 2.741-4.138 3.291-7.655.55-3.516.816-7.459.799-11.81-.107-24.57-.222-49.141-.329-73.702-.017-4.476-.328-8.525-.922-12.121-.595-3.595-1.74-6.448-3.434-8.56-1.694-2.114-4.329-3.233-7.895-3.384-3.38-.15-5.918.738-7.639 2.611-1.721 1.873-2.857 4.484-3.407 7.832-.55 3.348-.807 7.149-.771 11.402.186 23.354.381 46.708.567 70.07.036 4.131.329 8.018.879 11.66.55 3.64 1.694 6.704 3.424 9.19 1.73 2.493 4.303 4.246 7.718 5.257M48.803 425.212C33.163 323.299 17.069 214.752 0 98.009h41.156c10.734 78.16 21.14 152.91 31.37 224.713 11.01-77.797 22.276-152.565 33.668-224.713h42.095c-18.532 97.394-36.977 199.947-54.933 309.24a887.007 887.007 0 0 0-44.553 17.954zm102.583-37.259 4.418-289.944h106.823l-.452 34.08c-20.157.427-40.304.942-60.425 1.564-.417 26.621-.825 53.234-1.242 79.856 15.862-1.563 31.76-2.94 47.685-4.129-.16 11.348-.319 22.687-.47 34.036a1558.978 1558.978 0 0 0-47.756 5.39c-.479 30.618-.949 61.235-1.429 91.844a989.994 989.994 0 0 1 61.676-10.7c-.142 11.135-.293 22.279-.435 33.414a881.001 881.001 0 0 0-108.384 24.589zm116.706-25.894 3.327-264.05h46.496c-.657 75.22-1.322 150.433-1.978 225.654a1014.998 1014.998 0 0 1 39.913-2.566c-.053 10.717-.106 21.427-.151 32.144a880.001 880.001 0 0 0-87.598 8.818zm139.959-9.892a882.002 882.002 0 0 0-44.917.737c17.787-85.69 35.105-170.137 51.917-254.886h49.636c17.566 85.548 35.602 172.41 53.949 262.141a886.994 886.994 0 0 0-44.074-4.866c-11.587-66.688-22.969-132.452-34.112-197.763-10.566 65.072-21.363 129.788-32.399 194.637m118.454 9.093-3.22-263.251h49.849c20.733 0 36.968 3.037 48.688 9.457 11.728 6.393 20.147 16.41 25.266 30.014 5.119 13.595 7.834 30.91 8.145 51.636l1.596 107.01c.32 21.223-1.872 38.326-6.565 51.059-4.693 12.761-12.677 20.859-24.015 24.562-11.338 3.73-27.023 2.975-47.162-1.225a885 885 0 0 0-52.6-9.271zm46.78-26.329c1.34.24 2.679.48 4.028.72 10.797 1.953 18.471 1.482 23.048-1.705 4.569-3.179 7.32-8.64 8.251-16.366.932-7.734 1.304-17.369 1.127-28.886-.559-35.697-1.118-71.385-1.668-107.082-.178-11.286-1.056-20.432-2.626-27.394-1.579-6.97-4.702-12.139-9.36-15.495-4.666-3.357-12.136-5.16-22.409-5.426-1.118-.026-2.236-.062-3.354-.088l2.981 201.731zm122.881 68.499a879 879 0 0 0-43.196-14.19c15.428-92.012 30.803-188.572 46.496-291.24h49.637A10360.005 10360.005 0 0 1 800 448.238a874.997 874.997 0 0 0-40.952-19.571 14400.99 14400.99 0 0 0-33.712-256.6c-9.901 80.131-19.58 157.092-29.179 231.363zm-178.648 2.46c-2.608 0-4.933-.862-6.955-2.593a976.906 976.906 0 0 1-5.802-4.982c-1.837-1.589-3.771-2.388-5.802-2.388-2.032 0-3.265.728-3.984 2.175-.727 1.457-1.091 3.561-1.091 6.332h-10.149c0-4.982.364-9.44 1.091-13.382.728-3.943 2.005-7.06 3.841-9.342 1.836-2.282 4.303-3.428 7.391-3.428 2.413 0 4.586.8 6.52 2.389a669.125 669.125 0 0 1 5.722 4.769c1.881 1.589 3.842 2.388 5.873 2.388 1.642 0 2.831-.692 3.549-2.078.728-1.385 1.091-3.454 1.091-6.224h9.573c0 4.289-.24 8.435-.728 12.449-.488 4.014-1.526 7.335-3.114 9.963-1.595 2.629-3.94 3.943-7.035 3.943zM406.29 587.948l7.193 3.538c2.103 1.03 3.312 3.31 3.032 5.632l-4.599 36.65-11.018-41.99-17.591-2.395 1.538 4.966-26.617 7.953 6.339 3.365c2.551 1.361 4.158 4.025 4.135 6.902l-.11 45.003a23.68 23.68 0 0 1-6.672 16.382l-2.912 3.016 31.365-9.472-2.083.124c-2.109.151-3.894-1.524-3.912-3.638l-.486-55.658a3.19 3.19 0 0 1 1.797-2.917l2.244-1.086 18.129 58.541 21.824-6.505c-1.812-.138-3.067-.925-3.889-1.755-.966-.979-1.382-2.526-1.148-3.889l10.076-57.079a26.1 26.1 0 0 1 3.958-9.916l4.119-6.233-34.703 10.452z"
-			class="animate-fade-in-up"
 		>
 		</path>
 	</symbol>
-	{noEffect && <use href="#hero-logo-header" class="text-[#f1ffaa]/70 blur-xl md:blur-md" />}
-	<use href="#hero-logo-header" class:list={noEffect ? "text-white" : "text-primary"}></use>
+	{
+		noEffect && (
+			<use
+				href="#hero-logo-header"
+				class:list={["text-[#f1ffaa]/70 blur-xl md:blur-md", animated ? "animate-fade-in-up" : ""]}
+			/>
+		)
+	}
+	<use
+		href="#hero-logo-header"
+		class:list={[noEffect ? "text-white" : "text-primary", animated ? "animate-fade-in-up" : ""]}
+	></use>
 </svg>

src/layouts/Layout.astro

@@ -125,28 +125,30 @@ const { title, description, preload, canonical, image } = Astro.props
 			}
 
 			@supports selector(::-webkit-scrollbar) {
-				::-webkit-scrollbar {
-					width: 10px;
-					border-radius: 10px;
-				}
-
-				::-webkit-scrollbar-thumb {
-					border-radius: 10px;
-					background-color: theme("colors.primary");
-					border: 2px solid transparent;
-					background-clip: content-box;
-				}
-
-				::-webkit-scrollbar-thumb:active {
-					background-color: #666;
-				}
-
-				::-webkit-scrollbar-track {
-					background: var(--background-image);
-				}
-
-				::-webkit-scrollbar-corner {
-					background: var(--background-image);
+				@media (hover: hover) {
+					::-webkit-scrollbar {
+						width: 10px;
+						border-radius: 10px;
+					}
+
+					::-webkit-scrollbar-thumb {
+						border-radius: 10px;
+						background-color: theme("colors.primary");
+						border: 2px solid transparent;
+						background-clip: content-box;
+					}
+
+					::-webkit-scrollbar-thumb:active {
+						background-color: #666;
+					}
+
+					::-webkit-scrollbar-track {
+						background: var(--background-image);
+					}
+
+					::-webkit-scrollbar-corner {
+						background: var(--background-image);
+					}
 				}
 			}
 

src/pages/combates/index.astro

@@ -155,7 +155,7 @@ export const prerender = true
 									<Image
 										width={combatData.titleSize[0]}
 										height={combatData.titleSize[1]}
-										transition:name={`title-image-${combat.id}`}
+										transition:name={`title-image-${combatData.id}`}
 										loading={index < 2 ? "eager" : "lazy"}
 										class:list={[
 											"group-hover:saturate-15 absolute  left-1/2 h-auto max-h-[15rem] w-auto -translate-x-1/2 transform-gpu transition-all duration-300 ease-in-out group-hover:scale-75",

src/sections/Hero.astro

@@ -34,7 +34,7 @@ import HeroLogo from "@/components/HeroLogo.astro"
 			class="absolute inset-0 -z-10 m-auto w-full rounded-full bg-black/50 blur-2xl md:size-[400px]"
 		>
 		</div>
-		<HeroLogo class="h-auto w-[250px] overflow-visible md:w-[500px]" id="hero-logo-main" />
+		<HeroLogo class="h-auto w-[250px] overflow-visible md:w-[500px]" id="hero-logo-main" noEffect />
 	</div>
 </section>
 <style>