Skip to content

Commit 1582363

Browse files
Mazizovaclaude
Mazizova
and
claude
committed
Add Webinars section under Community
New nested section at /community/webinars/ with an Upcoming/Past list page and a shared single-webinar template, plus a nav link under the Community dropdown. Kept separate from the existing "Webinars" facet under Resources > Events, which catalogs external community events — this is the Foundation's own hosted webinar series (banner, speakers, registration link), a different concept that happens to share a name. Speaker names link to their Member Directory profile when one exists (Daniel Guzmán Burgos, Alkin Tezuysal), falling back to their LinkedIn otherwise (René Cannaò, who doesn't have a profile yet). Seeded with the two announced webinars: - MySQL Time Travel: Practical Row-Level Recovery With Open Source Tools (Oct 15) - Beyond the Proxy: The Expanding ProxySQL Ecosystem (Nov 3) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1 parent b236ef2 commit 1582363

12 files changed

Lines changed: 423 additions & 0 deletions

File tree

‎assets/scss/_light-theme.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -675,6 +675,37 @@
675675
}
676676
}
677677

678+
// Webinars (Community)
679+
.webinar-empty-state {
680+
background: #ffffff;
681+
border-color: #dde3ed;
682+
p { color: #64748b; a { color: #0272a5; } }
683+
}
684+
685+
.webinar-card {
686+
background: #ffffff;
687+
border-color: #dde3ed;
688+
689+
&:hover { border-color: rgba(0, 200, 255, 0.3); }
690+
}
691+
.webinar-card-image-wrap { background: #eef2f7; border-bottom-color: #dde3ed; }
692+
.webinar-card-status { background: #0f172a; }
693+
.webinar-card-date { color: #0272a5; }
694+
.webinar-card-title { color: #0f172a; }
695+
.webinar-card-speakers { color: #64748b; }
696+
697+
.webinar-hero-image-wrap { border-color: #dde3ed; }
698+
.webinar-header h1 { color: #0f172a; }
699+
.webinar-meta-badge {
700+
color: #0272a5;
701+
background: rgba(0, 200, 255, 0.08);
702+
border-color: rgba(0, 200, 255, 0.3);
703+
}
704+
.webinar-meta-date { color: #64748b; }
705+
.webinar-speaker-name { color: #0f172a; }
706+
a.webinar-speaker-name { color: #0272a5; }
707+
.webinar-speaker-role { color: #64748b; }
708+
678709
// Contribute page
679710
.contribute-method {
680711
background: #ffffff;

‎assets/scss/_webinars.scss‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
// Community > Webinars — list grid + single-page hero, built from the
2+
// site's existing component language (about-page, resources-breadcrumb,
3+
// resources-category-eyebrow, status-chip, post-content) so this reads as
4+
// the same site rather than a bolted-on section.
5+
6+
.webinar-grid {
7+
display: grid;
8+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
9+
gap: 1.25rem;
10+
margin-top: 1rem;
11+
}
12+
13+
.webinar-empty-state {
14+
margin-top: 1rem;
15+
background: $dark-surface;
16+
border: 1px solid $dark-border;
17+
border-radius: 10px;
18+
padding: 1.5rem 1.75rem;
19+
20+
p {
21+
font-size: 0.9375rem;
22+
color: $muted;
23+
line-height: 1.6;
24+
margin: 0;
25+
26+
a { color: $accent; text-decoration: none; &:hover { text-decoration: underline; } }
27+
}
28+
}
29+
30+
// ── Card (list page) ──
31+
.webinar-card {
32+
display: flex;
33+
flex-direction: column;
34+
background: $dark-card;
35+
border: 1px solid $dark-border;
36+
border-radius: 12px;
37+
overflow: hidden;
38+
text-decoration: none;
39+
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
40+
41+
&:hover {
42+
border-color: rgba($accent, 0.3);
43+
box-shadow: 0 6px 24px rgba($accent, 0.07);
44+
transform: translateY(-2px);
45+
}
46+
}
47+
48+
.webinar-card-image-wrap {
49+
position: relative;
50+
border-bottom: 1px solid $dark-border;
51+
background: $dark-surface;
52+
}
53+
54+
.webinar-card-image {
55+
display: block;
56+
width: 100%;
57+
height: auto;
58+
aspect-ratio: 1200 / 627;
59+
object-fit: cover;
60+
}
61+
62+
.webinar-card-status {
63+
position: absolute;
64+
top: 0.75rem;
65+
right: 0.75rem;
66+
background: $dark-bg;
67+
}
68+
69+
.webinar-card-body {
70+
padding: 1.25rem 1.25rem 1.5rem;
71+
}
72+
73+
.webinar-card-date {
74+
display: block;
75+
font-size: 0.75rem;
76+
font-weight: 600;
77+
letter-spacing: 0.03em;
78+
color: $accent;
79+
margin-bottom: 0.5rem;
80+
}
81+
82+
.webinar-card-title {
83+
font-size: 1.0625rem;
84+
font-weight: 700;
85+
color: $off-white;
86+
line-height: 1.4;
87+
margin: 0 0 0.5rem;
88+
}
89+
90+
.webinar-card-speakers {
91+
font-size: 0.875rem;
92+
color: $muted;
93+
margin: 0;
94+
}
95+
96+
// ── Single webinar page ──
97+
.webinar-hero-image-wrap {
98+
margin: 1.5rem 0 2rem;
99+
border-radius: 14px;
100+
overflow: hidden;
101+
border: 1px solid $dark-border;
102+
}
103+
104+
.webinar-hero-image {
105+
display: block;
106+
width: 100%;
107+
height: auto;
108+
}
109+
110+
.webinar-header {
111+
max-width: 720px;
112+
margin-bottom: 2.5rem;
113+
114+
h1 {
115+
font-size: clamp(1.625rem, 4vw, 2.25rem);
116+
font-weight: 700;
117+
line-height: 1.3;
118+
color: $off-white;
119+
margin: 0 0 1.25rem;
120+
}
121+
}
122+
123+
.webinar-meta-row {
124+
display: flex;
125+
align-items: center;
126+
flex-wrap: wrap;
127+
gap: 0.75rem;
128+
margin-bottom: 1rem;
129+
}
130+
131+
.webinar-meta-badge {
132+
display: inline-flex;
133+
align-items: center;
134+
font-size: 0.75rem;
135+
font-weight: 700;
136+
letter-spacing: 0.05em;
137+
text-transform: uppercase;
138+
color: $accent;
139+
background: $accent-glow;
140+
border: 1px solid rgba($accent, 0.3);
141+
border-radius: 100px;
142+
padding: 0.25rem 0.7rem;
143+
}
144+
145+
.webinar-meta-date {
146+
font-size: 0.875rem;
147+
color: $muted;
148+
font-variant-numeric: tabular-nums;
149+
}
150+
151+
.webinar-speakers {
152+
list-style: none;
153+
margin: 0 0 1.5rem;
154+
padding: 0;
155+
display: flex;
156+
flex-wrap: wrap;
157+
gap: 0.375rem 1.5rem;
158+
}
159+
160+
.webinar-speaker {
161+
display: flex;
162+
flex-direction: column;
163+
}
164+
165+
.webinar-speaker-name {
166+
font-size: 0.9375rem;
167+
font-weight: 600;
168+
color: $off-white;
169+
text-decoration: none;
170+
}
171+
172+
a.webinar-speaker-name {
173+
color: $accent;
174+
&:hover { text-decoration: underline; }
175+
}
176+
177+
.webinar-speaker-role {
178+
font-size: 0.8125rem;
179+
color: $muted;
180+
}
181+
182+
.webinar-content {
183+
max-width: 720px;
184+
}

‎assets/scss/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ img {
3333
@import "about";
3434
@import "news";
3535
@import "community";
36+
@import "webinars";
3637
@import "home";
3738
@import "showcase";
3839
@import "footer";

‎content/community/webinars/_index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: "Webinars"
3+
description: "Live sessions with MySQL ecosystem maintainers and practitioners — deep dives, demos, and Q&A, straight from the people who build the tools."
4+
---

‎content/community/webinars/beyond-the-proxy-proxysql-ecosystem/banner.jpg‎

156 KB
Loading

‎content/community/webinars/beyond-the-proxy-proxysql-ecosystem/index.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: "Beyond the Proxy: The Expanding ProxySQL Ecosystem"
3+
description: "ProxySQL has grown well beyond a proxy. René and Alkin cover MySQL and PostgreSQL support, the expansion toward DuckDB, deeper cloud integration, and where Orchestrator and dbdeployer fit in — tied together through real operational problems instead of a feature list."
4+
date: 2026-11-03
5+
time_display: "10:00 AM ET · 16:00 CET"
6+
talk_url: "https://perconalive.com/2026-amsterdam/talks/beyond-the-proxy-the-expanding-proxysql-ecosystem/"
7+
registration_url: "https://us06web.zoom.us/webinar/register/WN_AYk4qjMBTU2ofrY_hkpXvQ"
8+
images:
9+
- banner.jpg
10+
speakers:
11+
- name: "René Cannaò"
12+
role: "CEO, ProxySQL"
13+
linkedin: "https://www.linkedin.com/in/renecannao/"
14+
- name: "Alkin Tezuysal"
15+
role: "Chief Strategy Officer, ProxySQL"
16+
profile: "/resources/member-directory/alkin-tezuysal/"
17+
linkedin: "https://www.linkedin.com/in/askdba/"
18+
---
19+
20+
ProxySQL has grown well beyond a proxy. René and Alkin cover:
21+
22+
- MySQL and PostgreSQL support
23+
- the expansion toward DuckDB
24+
- deeper cloud integration
25+
- where Orchestrator and dbdeployer fit in
26+
27+
They tie it all together through real operational problems instead of a feature list.

‎content/community/webinars/mysql-time-travel-row-level-recovery/banner.jpg‎

150 KB
Loading

‎content/community/webinars/mysql-time-travel-row-level-recovery/index.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: "MySQL Time Travel: Practical Row-Level Recovery With Open Source Tools"
3+
description: "A bad UPDATE hit a handful of rows. Do you really need to restore a full backup and replay binlogs? In a mostly live demo, Daniel shows how to see exactly which rows changed, query any table as it looked at a past moment, and generate the exact statements to undo the damage."
4+
date: 2026-10-15
5+
time_display: "10:00 AM ET · 16:00 CEST"
6+
talk_url: "https://perconalive.com/2026-amsterdam/talks/mysql-time-travel-practical-row-level-recovery-with-open-source-tools/"
7+
registration_url: "https://us06web.zoom.us/webinar/register/WN_X82k7xu-STmLLTln6NjTHw"
8+
images:
9+
- banner.jpg
10+
speakers:
11+
- name: "Daniel Guzmán Burgos"
12+
role: "Creator of dbtrail"
13+
profile: "/resources/member-directory/daniel-guzman-burgos/"
14+
linkedin: "https://www.linkedin.com/in/danielmauricioguzman/"
15+
---
16+
17+
A bad `UPDATE` hit a handful of rows. Do you really need to restore a full backup and replay binlogs? In a mostly live demo, Daniel shows how to:
18+
19+
- see exactly which rows changed and when
20+
- query any table as it looked at a past moment, using plain SQL
21+
- generate the exact statements to undo the damage, including FK cascades that manual binlog parsing tends to miss
22+
23+
The same setup works on-prem and on RDS or Aurora.

‎layouts/community/webinars/list.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{{ define "main" }}
2+
{{ $now := now }}
3+
{{ $upcoming := where .Pages "Date" ">=" $now }}
4+
{{ $past := where .Pages "Date" "<" $now }}
5+
{{ $upcoming = $upcoming.ByDate }}
6+
{{ $past = $past.ByDate.Reverse }}
7+
8+
<div class="about-page">
9+
10+
<nav class="resources-breadcrumb" aria-label="Breadcrumb">
11+
<a href="/community/">Community</a>
12+
<span class="breadcrumb-sep" aria-hidden="true">/</span>
13+
<span>Webinars</span>
14+
</nav>
15+
16+
<div class="about-hero about-prose">
17+
<h1>{{ .Title }}</h1>
18+
<p class="about-hero-sub">{{ .Description }}</p>
19+
</div>
20+
21+
<div class="about-block">
22+
<span class="resources-category-eyebrow">Upcoming</span>
23+
{{ if $upcoming }}
24+
<div class="webinar-grid">
25+
{{ range $upcoming }}{{ partial "webinars/card.html" . }}{{ end }}
26+
</div>
27+
{{ else }}
28+
<div class="webinar-empty-state">
29+
<p>No upcoming webinars scheduled right now — check back soon, or follow {{ with $.Site.Params.social.slack }}<a href="{{ . }}" target="_blank" rel="noopener">Slack</a>{{ else }}our Slack{{ end }} for announcements.</p>
30+
</div>
31+
{{ end }}
32+
</div>
33+
34+
<div class="about-block">
35+
<span class="resources-category-eyebrow">Past</span>
36+
{{ if $past }}
37+
<div class="webinar-grid">
38+
{{ range $past }}{{ partial "webinars/card.html" . }}{{ end }}
39+
</div>
40+
{{ else }}
41+
<div class="webinar-empty-state">
42+
<p>No past webinars yet — this is a new series, and recordings will show up here after each session.</p>
43+
</div>
44+
{{ end }}
45+
</div>
46+
47+
</div>
48+
{{ end }}

0 commit comments

Comments
 (0)