Programa: añadir página con widget de Pretalx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "2026.es.pycon.org",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@astrojs/check": "0.9.9",
-    "@commitlint/cli": "21.2.0",
+    "@commitlint/cli": "21.2.1",
     "@commitlint/config-conventional": "21.2.0",
     "husky": "9.1.7",
     "lint-staged": "17.0.8",

src/components/ProgramaPage.astro

@@ -0,0 +1,39 @@
+---
+import { programaTexts } from '@/i18n/programa'
+import { menuTexts } from '@/i18n/menu'
+
+interface Props {
+  lang: string
+}
+const { lang } = Astro.props
+const t = programaTexts[lang as keyof typeof programaTexts]
+const menuT = menuTexts[lang as keyof typeof menuTexts]
+---
+
+<section class="py-8">
+  <h1 class="text-3xl md:text-5xl font-bold text-center mb-6">{t.title}</h1>
+  <p class="text-center text-base md:text-lg mb-10 max-w-2xl mx-auto opacity-80">{t.intro}</p>
+
+  <pretalx-schedule
+    event-url="https://pretalx.com/pycones-2026/"
+    locale={t.locale}
+    format="grid"
+    style="--pretalx-clr-primary: #03004b"></pretalx-schedule>
+
+  <noscript>
+    <div class="pretalx-widget">
+      <div class="pretalx-widget-info-message">
+        {t.noscript}{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`${t.noscriptLink} ${menuT.new_tab}`}
+          href="https://pretalx.com/pycones-2026/schedule/"
+        >
+          {t.noscriptLink}
+        </a>
+        .
+      </div>
+    </div>
+  </noscript>
+</section>

src/i18n/menu/ca.ts

@@ -4,6 +4,10 @@ export const ca = {
       label: 'Inici',
       href: '/',
     },
+    {
+      label: 'Programa',
+      href: '/programa',
+    },
     {
       label: 'Informació',
       children: [

src/i18n/menu/en.ts

@@ -4,6 +4,10 @@ export const en = {
       label: 'Home',
       href: '/',
     },
+    {
+      label: 'Programme',
+      href: '/programa',
+    },
     {
       label: 'Information',
       children: [

src/i18n/menu/es.ts

@@ -4,6 +4,10 @@ export const es = {
       label: 'Inicio',
       href: '/',
     },
+    {
+      label: 'Programa',
+      href: '/programa',
+    },
     {
       label: 'Información',
       children: [

src/i18n/programa/ca.ts

@@ -0,0 +1,8 @@
+export const ca = {
+  title: 'Programa',
+  seoDescription: 'Consulta el cronograma complet de xerrades, tallers i activitats de la PyConES 2026.',
+  intro: 'Explora totes les xerrades, tallers i activitats de la PyConES 2026.',
+  locale: 'ca',
+  noscript: 'JavaScript està desactivat al teu navegador. Per veure el programa sense JavaScript,',
+  noscriptLink: 'fes clic aquí',
+} as const

src/i18n/programa/en.ts

@@ -0,0 +1,8 @@
+export const en = {
+  title: 'Programme',
+  seoDescription: 'Check out the full schedule of talks, workshops and activities at PyConES 2026.',
+  intro: 'Explore all the talks, workshops and activities at PyConES 2026.',
+  locale: 'en',
+  noscript: 'JavaScript is disabled in your browser. To view the schedule without JavaScript,',
+  noscriptLink: 'click here',
+} as const

src/i18n/programa/es.ts

@@ -0,0 +1,8 @@
+export const es = {
+  title: 'Programa',
+  seoDescription: 'Consulta el cronograma completo de charlas, talleres y actividades de la PyConES 2026.',
+  intro: 'Explora todas las charlas, talleres y actividades de la PyConES 2026.',
+  locale: 'es',
+  noscript: 'JavaScript está deshabilitado en tu navegador. Para ver el programa sin JavaScript,',
+  noscriptLink: 'haz click aquí',
+} as const

src/i18n/programa/index.ts

@@ -0,0 +1,5 @@
+import { es } from './es'
+import { en } from './en'
+import { ca } from './ca'
+
+export const programaTexts = { es, en, ca }

src/layouts/Layout.astro

@@ -9,9 +9,10 @@ import { ClientRouter } from 'astro:transitions'
 interface Props {
   title: string
   description?: string // Optional (?)
+  fullWidth?: boolean
 }
 const { lang = 'es' } = Astro.params
-const { title, description = 'PyconES 2026' } = Astro.props
+const { title, description = 'PyconES 2026', fullWidth = false } = Astro.props
 
 const siteUrl = Astro.site ? Astro.site.origin : 'https://2026.es.pycon.org'
 const canonicalURL = new URL(Astro.url.pathname, siteUrl)
@@ -121,7 +122,12 @@ const alternates = [
     </div>
     <Header lang={lang as string} />
 
-    <main class="relative grow z-10 flex flex-col justify-center container mx-auto p-4 md:p-8">
+    <main
+      class:list={[
+        'relative grow z-10 flex flex-col justify-center',
+        fullWidth ? 'px-4 md:px-8' : 'container mx-auto p-4 md:p-8',
+      ]}
+    >
       <slot />
     </main>
     <Footer lang={lang as string} />

src/pages/[lang]/programa.astro

@@ -0,0 +1,42 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import ProgramaPage from '../../components/ProgramaPage.astro'
+import { programaTexts } from '../../i18n/programa'
+
+export function getStaticPaths() {
+  return [{ params: { lang: 'es' } }, { params: { lang: 'en' } }, { params: { lang: 'ca' } }]
+}
+
+const { lang } = Astro.params
+const t = programaTexts[(lang || 'es') as keyof typeof programaTexts]
+---
+
+<Layout title={t.title} description={t.seoDescription} fullWidth>
+  <div class="grow w-full md:mt-24 mt-12">
+    <ProgramaPage lang={lang || 'es'} />
+  </div>
+  <script is:inline src="https://pretalx.com/pycones-2026/widgets/schedule.js"></script>
+  <script is:inline>
+    function injectPretalxDialogStyles() {
+      const schedule = document.querySelector('pretalx-schedule')
+      if (!schedule?.shadowRoot) return
+      if (schedule.shadowRoot.querySelector('#pycones-dialog-fix')) return
+      const style = document.createElement('style')
+      style.id = 'pycones-dialog-fix'
+      style.textContent = `
+        #filter-bottom-sheet-dialog,
+        #filter-bottom-sheet-dialog .dialog-inner {
+          background: #fff !important;
+          color: #0d0f10 !important;
+        }
+      `
+      schedule.shadowRoot.appendChild(style)
+    }
+    customElements.whenDefined('pretalx-schedule').then(injectPretalxDialogStyles)
+    new MutationObserver(injectPretalxDialogStyles).observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+    document.addEventListener('astro:page-load', injectPretalxDialogStyles)
+  </script>
+</Layout>