Merge branch 'main' into main

midudev · Mar 8, 2024 · db15901 · db15901
2 parents f2360f7 + e240ddc
commit db15901
Show file tree

Hide file tree

Showing 30 changed files with 439 additions and 350 deletions.
diff --git a/.github/workflows/tag-conflicts.yml b/.github/workflows/tag-conflicts.yml
@@ -15,8 +15,8 @@ jobs:
       - name: check if prs are dirty
         uses: eps1lon/actions-label-merge-conflict@releases/2.x
         with:
-          dirtyLabel: "PR: no se puede revisar, tiene conflictos"
-          removeOnDirtyLabel: "PR: lista para revisar"
+          dirtyLabel: "conflictos"
+          removeOnDirtyLabel: "conflictos"
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
           commentOnDirty: "⚠️ Esta Pull Request tiene conflictos. Por favor, resuelvelos antes de que podamos evaluar los cambios."
           commentOnClean: "✅ ¡Los conflictos han sido resuletos! Un colaborador revisará pronto la Pull Request."
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -33,5 +33,6 @@
   },
   "prettier.documentSelectors": [
     "**/*.astro"
-  ]
+  ],
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list"]
 }
diff --git a/astro.config.ts b/astro.config.ts
@@ -8,6 +8,9 @@ export default defineConfig({
 	adapter: vercel({
 		webAnalytics: { enabled: true },
 	}),
+	build: {
+		inlineStylesheets: "always",
+	},
 	output: "hybrid",
 	vite: {
 		build: {

diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "eslint-plugin-jsx-a11y": "6.8.0",
     "husky": "9.0.11",
     "lightningcss": "1.24.0",
+    "postcss-nesting": "12.1.0",
     "prettier": "3.2.5",
     "prettier-plugin-astro": "0.13.0",
     "prettier-plugin-tailwindcss": "0.5.12",

diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -0,0 +1,8 @@
+export default {
+	plugins: {
+		"postcss-import": {},
+		"tailwindcss/nesting": "postcss-nesting",
+		"tailwindcss": {},
+		"autoprefixer": {},
+	},
+}
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/fonts/atomic.woff2 b/public/fonts/atomic.woff2
diff --git a/public/og.png b/public/og.png
diff --git a/src/components/Action.astro b/src/components/Action.astro
@@ -6,17 +6,15 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>
 const { as: Tag, class: className, ...props } = Astro.props
 ---
 
-<Tag class:list={["button-style", className]} {...props}><slot /></Tag>
+<Tag class:list={["button-style *:duration-500", className]} {...props}>
+	<span><slot /></span>
+</Tag>
 
 <style>
 	.button-style {
-		background: transparent;
-		border: none;
 		padding: 10px 20px;
 		display: inline-block;
-		font-size: 20px;
 		font-weight: 600;
-		width: 20rem;
 		text-transform: uppercase;
 		cursor: pointer;
 		transform: skew(-21deg);
@@ -39,26 +37,20 @@ const { as: Tag, class: className, ...props } = Astro.props
 	.button-style::before {
 		content: "";
 		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		left: 0;
+		inset: -2px;
 		background: var(--color-primary);
 		transform: scaleX(0);
 		transform-origin: right; /* To end from left to right */
-		z-index: -1;
 	}
 
 	.button-style:hover {
 		color: var(--color-secondary);
 		scale: 1.1;
-		transform: skew(-21deg);
 	}
 
 	.button-style:hover::before {
-		transform-origin: left; /* To start from left to right */
 		transform: scaleX(1);
-		opacity: 1;
+		transform-origin: left; /* To start from left to right */
 	}
 
 	@media (prefers-reduced-motion: no-preference) {

diff --git a/src/components/ButtonUp.astro b/src/components/ButtonUp.astro
@@ -2,15 +2,15 @@
 	<button
 		id="scroll-to-top"
 		aria-label="Volver al inicio de la página"
-		class="group flex size-12 cursor-default items-center justify-center rounded-lg border-2 border-primary bg-black/10 text-primary backdrop-blur hover:scale-105 motion-safe:transition"
+		class="group flex size-12 cursor-default items-center justify-center rounded-lg border-2 border-primary bg-black/10 text-primary backdrop-blur hover:scale-105 hover:border-accent motion-safe:transition"
 	>
 		<svg
 			aria-label="Subir al inicio de la página"
 			stroke-width="2"
 			stroke="currentColor"
 			viewBox="0 0 24 24"
 			fill="none"
-			class="h-6 w-6 -rotate-45 group-hover:-rotate-90 motion-safe:transition"
+			class="h-6 w-6 -rotate-45 group-hover:-rotate-90 group-hover:text-accent motion-safe:transition"
 			width="20px"
 		>
 			<path d="M14 5l7 7m0 0l-7 7m7-7H3" stroke-linejoin="round" stroke-linecap="round"></path>

diff --git a/src/components/CalendarButton.astro b/src/components/CalendarButton.astro
@@ -8,7 +8,7 @@ import Action from "./Action.astro"
 	id="add-to-calendar"
 	aria-label="agregar al calendario se abrirá ventana flotante"
 >
-	<span> Agregar al calendario</span>
+	Agregar al calendario
 </Action>
 
 <script is:inline>

diff --git a/src/components/HeroLogo.astro b/src/components/HeroLogo.astro
@@ -21,6 +21,6 @@
 		>
 		</path>
 	</symbol>
-	<use href="#hero-logo" style="opacity:1.0" class="text-[#f1ffaa]/70 blur-xl md:blur-md"></use>
-	<use href="#hero-logo" style="opacity:1.0" class="text-primary"></use>
+	<use href="#hero-logo" class="text-[#f1ffaa]/70 blur-xl md:blur-md"></use>
+	<use href="#hero-logo" class="text-primary"></use>
 </svg>
diff --git a/src/components/KonamiCode.astro b/src/components/KonamiCode.astro
@@ -1,5 +1,5 @@
-<script defer>
-	const container = document.querySelector("#main-content")
+<script>
+	const container = document.querySelector("#main-content") as HTMLDivElement
 
 	const konamiCode = [
 		"ArrowUp",

diff --git a/src/components/LiteYouTube.astro b/src/components/LiteYouTube.astro
@@ -5,16 +5,28 @@ interface Props {
 	backgroundImage?: string
 }
 
-const { videoId, title, backgroundImage } = Astro.props
+const {
+	videoId,
+	title = "Reproducir presentación de La Velada del Año",
+	backgroundImage,
+} = Astro.props
 ---
 
-<lite-youtube videoid={videoId} style={`background-image: url('${backgroundImage}')`}>
-	<a href={`https://youtube.com/watch?v=${videoId}`} class="lty-playbtn" title="Play Video">
+<lite-youtube
+	videoid={videoId}
+	style={`background-image: url('${backgroundImage}')`}
+	tabindex="0"
+	role="button"
+>
+	<a href={`https://youtube.com/watch?v=${videoId}`} class="lty-playbtn" title={title}>
 		<span class="lyt-visually-hidden">{title}</span>
 	</a>
 </lite-youtube>
 
 <script>
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-nocheck
+
 	/*
 	Component extracted from: https://github.com/paulirish/lite-youtube-embed/tree/master
 	*/
@@ -38,7 +50,9 @@ const { videoId, title, backgroundImage } = Astro.props
 			let playBtnEl = this.querySelector(".lty-playbtn")
 			// A label for the button takes priority over a [playlabel] attribute on the custom-element
 			this.playLabel =
-				(playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute("playlabel") || "Play"
+				(playBtnEl && playBtnEl.textContent.trim()) ||
+				this.getAttribute("playlabel") ||
+				"Reproducir presentación de La Velada del Año"
 
 			this.dataset.title = this.getAttribute("title") || ""
 
@@ -78,6 +92,9 @@ const { videoId, title, backgroundImage } = Astro.props
 			//   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
 			this.addEventListener("click", this.activate)
 
+			// For accessibility, handle keypresses as well
+			this.addEventListener("keydown", this.handleKeyPress)
+
 			// Chrome & Edge desktop have no problem with the basic YouTube Embed with ?autoplay=1
 			// However Safari desktop and most/all mobile browsers do not successfully track the user gesture of clicking through the creation/loading of the iframe,
 			// so they don't autoplay automatically. Instead we must load an additional 2 sequential JS files (1KB + 165KB) (un-br) for the YT Player API
@@ -205,6 +222,12 @@ const { videoId, title, backgroundImage } = Astro.props
 			iframeEl.focus()
 		}
 
+		handleKeyPress(event) {
+			if (event.key === "Enter") {
+				this.activate()
+			}
+		}
+
 		createBasicIframe() {
 			const iframeEl = document.createElement("iframe")
 			iframeEl.width = 560
@@ -337,6 +360,8 @@ const { videoId, title, backgroundImage } = Astro.props
 
 	lite-youtube:hover > .lty-playbtn,
 	lite-youtube .lty-playbtn:focus {
+		background-image: url('data:image/svg+xml;utf8,<svg stroke="white" fill="greenyellow" stroke-width="0" viewBox="0 0 1024 1024"  xmlns="http://www.w3.org/2000/svg"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M719.4 499.1l-296.1-215A15.9 15.9 0 0 0 398 297v430c0 13.1 14.8 20.5 25.3 12.9l296.1-215a15.9 15.9 0 0 0 0-25.8zm-257.6 134V390.9L628.5 512 461.8 633.1z"></path></svg>');
+		transition: .2s;
 		filter: none;
 	}
 

diff --git a/src/components/SEO.astro b/src/components/SEO.astro
@@ -0,0 +1,41 @@
+---
+interface Props {
+	title: string
+	description: string
+	jost: string
+}
+
+const { title, description, jost } = Astro.props
+---
+
+<title>{title}</title>
+
+<meta charset="UTF-8" />
+<meta name="description" content={description} />
+
+<link rel="preload" href={jost} as="font" type="font/woff2" crossorigin />
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="canonical" href="https://lavelada.es" />
+<meta name="viewport" content="width=device-width" />
+<meta name="theme-color" content="#d5ff00" />
+
+<meta name="keywords" content="velada, streamers, creadores, Ibai, boxeo, midudev" />
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@infoLaVelada" />
+<meta name="twitter:creator" content="@IbaiLlanos" />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content="https://lavelada.es/og.png" />
+
+<meta name="og:image" content="https://lavelada.es/og.png" />
+<meta name="og:title" content={title} />
+<meta name="og:description" content={description} />
+<meta name="og:url" content="https://lavelada.es" />
+<meta name="og:site_name" content="La Velada 4" />
+<meta name="og:type" content="website" />
+<meta name="og:locale" content="es_ES" />
+
+<meta name="robots" content="index, follow" />
+<meta name="googlebot" content="index, follow" />
diff --git a/src/components/TwitchLogo.astro b/src/components/TwitchLogo.astro
@@ -1,11 +1,4 @@
-<svg
-	width="78"
-	height="91"
-	fill="none"
-	viewBox="0 0 78 91"
-	role="img"
-	aria-label="Logotipo de Twitch"
->
+<svg fill="none" viewBox="0 0 78 91" role="img" aria-label="Logotipo de Twitch">
 	<path
 		class="stroke"
 		fill="var(--color-twitch)"
@@ -37,29 +30,5 @@
 				animation-timing-function: linear;
 			}
 		}
-
-		@keyframes showStroke {
-			0%,
-			30% {
-				fill: var(--background-twitch);
-			}
-
-			40%,
-			100% {
-				fill: var(--color-twitch);
-			}
-		}
-
-		@keyframes showFill {
-			0%,
-			40% {
-				fill: var(--color-secondary);
-			}
-
-			50%,
-			100% {
-				fill: var(--color-twitch-ice);
-			}
-		}
 	}
 </style>
diff --git a/src/components/Typography.astro b/src/components/Typography.astro
@@ -9,12 +9,14 @@ type Props<Tag extends HTMLTag> = Polymorphic<{
 
 const { as: Tag, class: className, variant, color, ...props } = Astro.props
 
-const variantClasses = {
+const variantClasses: { [key: string]: string } = {
 	"h2": "text-lg font-medium uppercase lg:text-2xl",
 	"h3": "text-2xl font-semibold uppercase",
 	"atomic-title": "text-5xl font-atomic",
 	"body": "text-xl",
 	"medium": "text-md",
+	"big": "text-6xl uppercase",
+	"bigger": "text-4xl sm:text-5xl md:text-7xl uppercase",
 }
 
 const colorClasses = {