2026.es.pycon.org/src/layouts/Layout.astro at 9f5abcd4c6e8397a3a33f33ae17ffcc30111b43a · python-spain/2026.es.pycon.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
---
import Header from './components/Header/Header.astro'
import Footer from './components/Footer.astro'
import '@/style/global.css'
import '@fontsource-variable/jetbrains-mono'
import '@fontsource-variable/outfit'
import { ClientRouter } from 'astro:transitions'
import { menuTexts } from '@/i18n/menu'

interface Props {
  title: string
  description?: string // Optional (?)
  fullWidth?: boolean
}
const { lang = 'es' } = Astro.params
const { title, description = 'PyconES 2026', fullWidth = false } = Astro.props
const skipT = menuTexts[lang as keyof typeof menuTexts].skipToContent

const siteUrl = Astro.site ? Astro.site.origin : 'https://2026.es.pycon.org'
const canonicalURL = new URL(Astro.url.pathname, siteUrl)
const socialImageURL = new URL('/images/logo-vertical-alt-color-dark.png', siteUrl) // I should check if PNG exists or generate it later

const alternates = [
  { href: new URL('/es/', siteUrl), hreflang: 'es' },
  { href: new URL('/en/', siteUrl), hreflang: 'en' },
  { href: new URL('/ca/', siteUrl), hreflang: 'ca' },
]
---

<!doctype html>
<html lang={lang as string}>
  <head>
    <!-- Analytics (Optional: set PUBLIC_GA_ID in .env) -->
    {
      import.meta.env.PUBLIC_GA_ID && (
        <>
          <script
            is:inline
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_GA_ID}`}
          />
          <script is:inline define:vars={{ id: import.meta.env.PUBLIC_GA_ID }}>
            window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments)}; gtag('js',
            new Date()); gtag('config', id);
          </script>
        </>
      )
    }
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="manifest" href="/favicon/site.webmanifest" />
    <meta name="generator" content={Astro.generator} />

    <!-- SEO Meta Tags -->
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonicalURL} />
    <link rel="sitemap" href="/sitemap-index.xml" />

    <!-- i18n SEO (hreflang) -->
    {
      alternates.map(({ href, hreflang }) => (
        <link rel="alternate" hreflang={hreflang} href={href.toString()} />
      ))
    }
    <link rel="alternate" hreflang="x-default" href={alternates[0].href.toString()} />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content={Astro.url} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={socialImageURL} />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={Astro.url} />
    <meta property="twitter:title" content={title} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={socialImageURL} />

    <!-- Structured Data (JSON-LD) -->
    <script type="application/ld+json" is:inline>
      {
        "@context": "https://schema.org",
        "@type": "Event",
        "name": "PyConES 2026",
        "startDate": "2026-11-06",
        "endDate": "2026-11-08",
        "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
        "eventStatus": "https://schema.org/EventScheduled",
        "location": {
          "@type": "Place",
          "name": "UB Barcelona",
          "address": {
            "@type": "PostalAddress",
            "addressLocality": "Barcelona",
            "addressRegion": "Catalonia",
            "addressCountry": "Spain"
          }
        },
        "description": "The largest national Python conference in Spain, bringing together enthusiasts, professionals, and companies to share knowledge, experiences, and opportunities.",
        "organizer": {
          "@type": "Organization",
          "name": "Python España",
          "url": "https://es.python.org"
        }
      }
    </script>

    <ClientRouter />
  </head>

  <body
    class="bg-pycon-black font-outfit text-pycon-white antialiased min-h-screen relative flex flex-col transition-colors duration-300"
  >
    <a href="#main-content" class="skip-link">{skipT}</a>
    <div
      class="fixed inset-0 bg-no-repeat bg-size-[80vh] bg-position-[140%_120%] opacity-5 pointer-events-none blur transition-all duration-300"
      style="background-image: var(--bg-symbol);"
    >
    </div>
    <Header lang={lang as string} />

    <main
      id="main-content"
      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} />
  </body>
</html>

<style is:global>
  /* Global CSS styles (Vanilla CSS) */

  html {
    font-family: 'Outfit Variable', sans-serif;
    scroll-behavior: smooth; /* Smooth scroll when navigating by anchors (#) */
  }

  /* Scrollbar customization (optional, Midudev style) */
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-color);
  }
  ::-webkit-scrollbar-thumb {
    background: #c6c6c6;
    border-radius: 5px;
  }
  .dark ::-webkit-scrollbar-thumb {
    background: #555554;
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    background: #8e8e8d;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #8e8e8d;
  }

  /* Skip link (visible on focus) */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #03004b;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: top 0.2s ease;
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    top: 1rem;
    outline: 2px solid #03004b;
    outline-offset: 2px;
  }

  /* Screen reader only utility */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>