feat: full multilingual (EN+ES) support with i18n, language switcher, and browser detection

assets/js/code-copy.js

@@ -5,6 +5,12 @@
 (function () {
   'use strict';
 
+  var i18n = (window.wavecast && window.wavecast.i18n) || {};
+  var CODE_COPY_TITLE = i18n.code_copy_title || 'Copy code';
+  var CODE_COPY_LABEL = i18n.code_copy_label || 'Copy code to clipboard';
+  var CODE_COPIED = i18n.code_copied || 'Copied!';
+  var CODE_COPIED_LABEL = i18n.code_copied_label || 'Code copied';
+
   // Collect both .highlight wrappers and standalone <pre> elements.
   // Filter out <pre> that are already inside .highlight (they get a button
   // via the parent).  Also skip <pre> that are empty or inside the
@@ -31,8 +37,8 @@
     var btn = document.createElement('button');
     btn.className = 'code-copy-btn';
     btn.type = 'button';
-    btn.title = 'Copy code';
-    btn.setAttribute('aria-label', 'Copy code to clipboard');
+    btn.title = CODE_COPY_TITLE;
+    btn.setAttribute('aria-label', CODE_COPY_LABEL);
     btn.innerHTML =
       '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
       '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>' +
@@ -70,12 +76,12 @@
 
   function showCopied(btn) {
     btn.classList.add('copied');
-    btn.title = 'Copied!';
-    btn.setAttribute('aria-label', 'Code copied');
+    btn.title = CODE_COPIED;
+    btn.setAttribute('aria-label', CODE_COPIED_LABEL);
     setTimeout(function () {
       btn.classList.remove('copied');
-      btn.title = 'Copy code';
-      btn.setAttribute('aria-label', 'Copy code to clipboard');
+      btn.title = CODE_COPY_TITLE;
+      btn.setAttribute('aria-label', CODE_COPY_LABEL);
     }, 2000);
   }
 

exampleSite/content/es/_index.md

@@ -0,0 +1,19 @@
+---
+title: Wavecast Radio
+tagline: Sintoniza la tecnología
+description: "Bienvenido a Wavecast Radio: una estación de radio demo creada con el tema Hugo Wavecast. Sintoniza nuestros programas, explora los episodios y descubre cómo funciona el reproductor de audio persistente."
+featured_episode: "episodes/cr-620-cloudflare-sunil-pai"
+layout: "index"
+buttons:
+  - text: "Explorar Programas"
+    url: "/es/programs/"
+    class: "nav-button-primary"
+  - text: "Horario"
+    url: "/es/schedule/"
+    class: ""
+  - text: "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"currentColor\" style=\"vertical-align:middle;margin-right:2px\"><path d=\"M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z\"/></svg>Feed RSS"
+    url: "/es/index.xml"
+    class: ""
+---
+
+{{< podcast-player src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" title="Episodio de ejemplo" poster="/wavecast/logo.png" chapters="00:00:00-Introducción,00:00:30-Medio" persistent="true" >}}

exampleSite/content/es/about.md

@@ -0,0 +1,4 @@
+---
+title: "Acerca de"
+layout: "about"
+---

exampleSite/content/es/contact.md

@@ -0,0 +1,34 @@
+---
+title: "Contacto"
+---
+
+¿Tienes una pregunta, sugerencia o quieres ser invitado en uno de nuestros programas? Nos encantaría saber de ti.
+
+<div class="demo-player">
+  <div class="info-card" style="margin-bottom:1rem;background:var(--pp-surface);border:none">
+    <p style="font-size:0.85rem;margin:0;color:var(--text-muted)">
+      <strong>Nota:</strong> Este es un sitio de demostración. El formulario siguiente es solo para demostración y no envía mensajes reales. Para contacto real, abre un issue o discusión en <a href="https://github.com/adurrr/wavecast" target="_blank" rel="noopener">GitHub</a>.
+    </p>
+  </div>
+  <h3 style="margin-bottom:1rem">Ponte en Contacto</h3>
+  <form style="display:flex;flex-direction:column;gap:1rem;max-width:500px" onsubmit="event.preventDefault();this.innerHTML='<div class=info-card style=text-align:center><p><strong>¡Mensaje recibido!</strong></p><p style=font-size:0.85rem;color:var(--text-muted)>Este es un formulario de demostración. No se enviaron datos. Para consultas reales, visita nuestro <a href=https://github.com/adurrr/wavecast>repositorio de GitHub</a>.</p></div>'" novalidate>
+    <div>
+      <label for="name" style="display:block;font-size:0.9rem;font-weight:600;margin-bottom:0.25rem">Nombre</label>
+      <input type="text" id="name" placeholder="Tu nombre" required style="width:100%;padding:0.55rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:0.9rem">
+    </div>
+    <div>
+      <label for="email" style="display:block;font-size:0.9rem;font-weight:600;margin-bottom:0.25rem">Correo electrónico</label>
+      <input type="email" id="email" placeholder="tu@ejemplo.com" required style="width:100%;padding:0.55rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:0.9rem">
+    </div>
+    <div>
+      <label for="message" style="display:block;font-size:0.9rem;font-weight:600;margin-bottom:0.25rem">Mensaje</label>
+      <textarea id="message" rows="5" placeholder="Tu mensaje" required style="width:100%;padding:0.55rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:0.9rem;resize:vertical"></textarea>
+    </div>
+    <button type="submit" class="nav-button nav-button-primary" style="align-self:flex-start;border:none;font-size:0.9rem">Enviar Mensaje</button>
+  </form>
+</div>
+
+## Otras Formas de Contactarnos
+
+- [**GitHub**](https://github.com/adurrr/wavecast) :  código fuente, issues, solicitudes de funciones y pull requests
+- [**README**](https://github.com/adurrr/wavecast#readme) :  documentación completa con instalación, temas y referencia de API

exampleSite/content/es/docs/shortcodes.md

@@ -0,0 +1,191 @@
+---
+title: "Shortcodes de Utilidad"
+description: "Advertencias, botones, figuras, videos, pestañas, galerías y carruseles: todo incluido con Wavecast."
+---
+
+Wavecast incluye un conjunto de shortcodes de utilidad para crear páginas de contenido enriquecido sin HTML personalizado.
+Todos son compatibles con el modo oscuro, responsivos y accesibles.
+
+---
+
+## Advertencias / Llamadas
+
+Cuatro variantes: `note`, `tip`, `warning`, `danger`. Acepta un `title` opcional.
+
+### Nota
+
+```
+{{</* admonition type="note" title="Atención" */>}}
+Esto es una **nota** con soporte de markdown.
+{{</* /admonition */>}}
+```
+
+{{< admonition type="note" title="Atención" >}}
+Esto es una **nota** con soporte de markdown.
+{{< /admonition >}}
+
+### Consejo
+
+```
+{{</* admonition type="tip" */>}}
+Consejo: usa `hugo serve --disableFastRender` durante el desarrollo.
+{{</* /admonition */>}}
+```
+
+{{< admonition type="tip" >}}
+Consejo: usa `hugo serve --disableFastRender` durante el desarrollo.
+{{< /admonition >}}
+
+### Advertencia
+
+```
+{{</* admonition type="warning" title="Aviso de Obsolescencia" */>}}
+Esta API será eliminada en la próxima versión principal.
+{{</* /admonition */>}}
+```
+
+{{< admonition type="warning" title="Aviso de Obsolescencia" >}}
+Esta API será eliminada en la próxima versión principal.
+{{< /admonition >}}
+
+### Peligro
+
+```
+{{</* admonition type="danger" */>}}
+**No ejecutes** esto en producción sin una copia de seguridad.
+{{</* /admonition */>}}
+```
+
+{{< admonition type="danger" >}}
+**No ejecutes** esto en producción sin una copia de seguridad.
+{{< /admonition >}}
+
+---
+
+## Botones
+
+Tres variantes: `primary`, `secondary`, `outline`. Las URLs externas se abren en una nueva pestaña.
+
+| Variante | Código |
+|---|---|
+| Primario | `{{</* button url="/" variant="primary" */>}}Inicio{{</* /button */>}}` |
+| Secundario | `{{</* button url="/" variant="secondary" */>}}Docs{{</* /button */>}}` |
+| Contorno | `{{</* button url="/" variant="outline" */>}}Saber Más{{</* /button */>}}` |
+| Con icono | `{{</* button url="https://github.com/adurrr/wavecast" icon="→" */>}}Ver en GitHub{{</* /button */>}}` |
+
+{{< button url="/" variant="primary" >}}Inicio{{< /button >}}
+{{< button url="/" variant="secondary" >}}Docs{{< /button >}}
+{{< button url="/" variant="outline" >}}Saber Más{{< /button >}}
+{{< button url="https://github.com/adurrr/wavecast" icon="→" variant="outline" >}}Ver en GitHub{{< /button >}}
+
+---
+
+## Figure
+
+Elemento `<figure>` HTML5 mejorado con caption opcional, carga diferida y soporte de recursos.
+
+```
+{{</* figure src="https://picsum.photos/800/400" caption="Una imagen aleatoria de Lorem Picsum." alt="Foto aleatoria" */>}}
+```
+
+{{< figure src="https://picsum.photos/800/400" caption="Una imagen aleatoria de Lorem Picsum." alt="Foto aleatoria" >}}
+
+---
+
+## Video
+
+`<video>` HTML5 con póster y caption opcionales.
+
+```
+{{</* video src="https://www.w3schools.com/html/mov_bbb.mp4" poster="https://picsum.photos/800/450" caption="Video de muestra Big Buck Bunny." */>}}
+```
+
+{{< video src="https://www.w3schools.com/html/mov_bbb.mp4" poster="https://picsum.photos/800/450" caption="Video de muestra Big Buck Bunny." >}}
+
+---
+
+## Pestañas
+
+Pestañas solo con CSS (botones de radio). Útiles para ejemplos de código en múltiples lenguajes o cualquier contenido con pestañas.
+
+~~~
+{{</* tabs */>}}
+{{</* tab name="HTML" */>}}
+```html
+<button class="btn">Click me</button>
+```
+{{</* /tab */>}}
+{{</* tab name="CSS" */>}}
+```css
+.btn { padding: 0.5rem 1rem; border-radius: 8px; }
+```
+{{</* /tab */>}}
+{{</* tab name="JavaScript" */>}}
+```js
+document.querySelector('.btn').addEventListener('click', () => alert('Hola'));
+```
+{{</* /tab */>}}
+{{</* /tabs */>}}
+~~~
+
+{{< tabs >}}
+{{< tab name="HTML" >}}
+```html
+<button class="btn">Click me</button>
+```
+{{< /tab >}}
+{{< tab name="CSS" >}}
+```css
+.btn { padding: 0.5rem 1rem; border-radius: 8px; }
+```
+{{< /tab >}}
+{{< tab name="JavaScript" >}}
+```js
+document.querySelector('.btn').addEventListener('click', () => alert('Hola'));
+```
+{{< /tab >}}
+{{< /tabs >}}
+
+---
+
+## Galería
+
+Cuadrícula CSS de miniaturas. Envuelve imágenes en Markdown. Las imágenes con enlace son cliqueables.
+
+```
+{{</* gallery */>}}
+![Foto 1](https://picsum.photos/400/300?1)
+![Foto 2](https://picsum.photos/400/300?2)
+![Foto 3](https://picsum.photos/400/300?3)
+![Foto 4](https://picsum.photos/400/300?4)
+![Foto 5](https://picsum.photos/400/300?5)
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+![Foto 1](https://picsum.photos/400/300?1)
+![Foto 2](https://picsum.photos/400/300?2)
+![Foto 3](https://picsum.photos/400/300?3)
+![Foto 4](https://picsum.photos/400/300?4)
+![Foto 5](https://picsum.photos/400/300?5)
+{{< /gallery >}}
+
+---
+
+## Carrusel
+
+Carrusel CSS scroll-snap con botones anterior/siguiente. Cada imagen se convierte en una diapositiva.
+
+```
+{{</* carousel */>}}
+![Diapositiva 1](https://picsum.photos/800/400?10)
+![Diapositiva 2](https://picsum.photos/800/400?20)
+![Diapositiva 3](https://picsum.photos/800/400?30)
+{{</* /carousel */>}}
+```
+
+{{< carousel >}}
+![Diapositiva 1](https://picsum.photos/800/400?10)
+![Diapositiva 2](https://picsum.photos/800/400?20)
+![Diapositiva 3](https://picsum.photos/800/400?30)
+{{< /carousel >}}

exampleSite/content/es/episodes/cr-598-no-code.md

@@ -0,0 +1,22 @@
+---
+title: "El No-Código es solo el Código de Otras Personas"
+program: "Code & Circuit"
+episode: "S1E1"
+duration: "45 min"
+date: 2026-05-19
+tags: [Programming, No-Code, Abstraction]
+podcast:
+  src: "https://aphid.fireside.fm/d/1437767933/b44de5fa-47c1-4e94-bf9e-c72f8d1c8f5d/1e6cfee6-871d-4eff-ba4c-d4be994753d5.mp3"
+  poster: "https://picsum.photos/seed/code-circuit-598/400/400"
+  chapters: "00:00:00-Intro,00:04:00-The No-Code Promise,00:12:00-Abstraction Layers,00:20:00-When No-Code Breaks,00:28:00-The Developer's Dilemma,00:35:00-Future of Programming,00:40:00-Wrap Up"
+attribution:
+  text: "Coder Radio 598: Jupiter Broadcasting"
+  url: "https://coder.show/598"
+description: "Una exploración de cómo las plataformas sin código siguen dependiendo de programadores y por qué la abstracción tiene un costo."
+show_notes:
+  - La historia de la abstracción en el software
+  - Por qué las plataformas sin código todavía necesitan programadores
+  - El impuesto de complejidad de la programación visual
+  - Cuando el low-code alcanza su techo
+  - El futuro de las herramientas de programación
+---

exampleSite/content/es/episodes/cr-620-cloudflare-sunil-pai.md

@@ -0,0 +1,23 @@
+---
+title: "Sunil Pai de Cloudflare"
+program: "Code & Circuit"
+episode: "S1E2"
+duration: "41 min"
+date: 2026-05-26
+tags: [AI, Cloud, Rust]
+podcast:
+  src: "https://aphid.fireside.fm/d/1437767933/b44de5fa-47c1-4e94-bf9e-c72f8d1c8f5d/8e63b44a-1634-4422-907c-4b96173a0fbd.mp3"
+  poster: "https://picsum.photos/seed/code-circuit-620/400/400"
+  chapters: "00:00:00-Intro,00:03:00-Cloudflare AI at the Edge,00:10:00-Vibe Coding,00:18:00-Rust & Ruby Ecosystems,00:25:00-Platform Engineering,00:33:00-Developer Experience,00:38:00-Wrap Up"
+attribution:
+  text: "Coder Radio 620: Jupiter Broadcasting"
+  url: "https://coder.show/620"
+description: "Conversamos con Sunil Pai sobre la plataforma de inferencia de IA de Cloudflare y cómo Rust y Ruby encajan en su infraestructura."
+show_notes:
+  - "La plataforma de inferencia de IA de Cloudflare: ejecutando modelos en el edge"
+  - El auge y la realidad del vibe coding
+  - Rust en el stack de Cloudflare
+  - El lugar de Ruby en la infraestructura moderna
+  - Ingeniería de plataforma a escala de Cloudflare
+  - Experiencia del desarrollador y flujos de trabajo asistidos por IA
+---

exampleSite/content/es/episodes/demo-iac.md

@@ -0,0 +1,19 @@
+---
+title: "Infraestructura como Código: Una Guía Práctica"
+program: "Deploy Friday"
+episode: "S1E1"
+duration: "30 min"
+date: 2026-04-21
+tags: [IaC, Kubernetes, Terraform]
+podcast:
+  src: "demo/demo-audio.wav"
+  poster: "https://picsum.photos/seed/deploy-friday-iac/400/400"
+  chapters: "00:00:00-Intro,00:03:00-What is IaC?,00:08:00-Terraform Basics,00:14:00-Pulumi vs CloudFormation,00:19:00-Live Demo: K8s Cluster,00:25:00-Pipeline Design,00:28:00-Wrap Up"
+description: "Una introducción práctica a la infraestructura como código, comparando Terraform, Pulumi y CloudFormation."
+show_notes:
+  - Conceptos fundamentales de la infraestructura como código
+  - Comparación de Terraform, Pulumi y CloudFormation
+  - Errores comunes y cómo evitarlos
+  - Diseñando pipelines de IaC que escalan
+  - "Demo en vivo: Kubernetes multi-región con configuración declarativa"
+---

exampleSite/content/es/episodes/devsecops-97-supply-chain.md

@@ -0,0 +1,22 @@
+---
+title: "Shift Left, Te Hackean: Los Ataques a la Cadena de Suministro Afectan a los Desarrolladores"
+program: "The Security Brief"
+episode: "S1E1"
+duration: "35 min"
+date: 2026-04-15
+tags: [Supply Chain, DevSecOps, Python]
+podcast:
+  src: "https://mcdn.podbean.com/mf/web/zn4j9tz222sfwytw/097-shift-left-get-hacked-supply-chain-attacks-hit-devs.mp3"
+  poster: "https://picsum.photos/seed/security-brief-97/400/400"
+  chapters: "00:00:00-Intro,00:03:00-March 2026 Incidents,00:08:00-Compromised Credentials,00:15:00-Post-Install Scripts,00:22:00-Detection & Response,00:28:00-Making Dev Environments Safer,00:32:00-Wrap Up"
+attribution:
+  text: "DevSecOps Talks #97"
+  url: "https://devsecops.fm/episodes/097-shift-left-get-hacked-supply-chain-attacks-hit-devs/"
+description: "Analizamos los ataques a la cadena de suministro de marzo de 2026 y las medidas de mitigación para entornos de desarrollo."
+show_notes:
+  - "Línea de tiempo de ataques a la cadena de suministro: marzo de 2026"
+  - Cómo funcionan las credenciales de publicación comprometidas
+  - Ganchos de ejecución automática (scripts post-instalación, archivos .pth)
+  - Cómo las herramientas detectaron las versiones maliciosas
+  - Mitigaciones concretas para entornos de desarrollo
+---