DuckDB × MySQL Day: share cover, Roman's talk title, registration widget pop-up (#110)

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

Author: Mazizova

assets/scss/_event-landing.scss

@@ -376,3 +376,56 @@
 .dmd-landing .dmd-hero-original .dmd-hero-desc{max-width:100%}
 .dmd-landing .dmd-hero-original .dmd-hero-art{margin-top:10px}}
 [data-theme="light"] .dmd-landing .dmd-hero-original .dmd-hero-desc{color:#64748b}
+
+// Registration pop-up that embeds the external registration widget.
+.dmd-landing dialog.dmd-dialog-widget {
+  width: #{"min(760px, calc(100% - 24px))"};
+  max-width: none;
+  max-height: #{"calc(100vh - 24px)"};
+  padding: 0;
+  overflow: hidden;
+}
+
+.dmd-landing dialog.dmd-dialog-widget .dmd-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  line-height: 30px;
+  font-size: 22px;
+  color: #ffffff;
+  background: rgba(21, 27, 43, 0.85);
+  border-radius: 50%;
+}
+
+.dmd-landing .dmd-hopin-container {
+  height: #{"min(82vh, 820px)"};
+  background: #ffffff;
+}
+
+.dmd-landing .dmd-hopin-container iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+// On phones the registration form gets the whole screen.
+@media (max-width: 640px) {
+  .dmd-landing dialog.dmd-dialog-widget {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: 0;
+    border-radius: 0;
+    border: 0;
+  }
+
+  .dmd-landing dialog.dmd-dialog-widget .dmd-hopin-container {
+    height: 100%;
+  }
+}

content/events/duckdb-mysql-day/cover.jpg

@@ -5,8 +5,13 @@ hero_description: "A one-day online conference on bringing fast analytics to MyS
 date: 2026-11-17
 url: "/events/duckdb-mysql-day/"
 layout: "duckdb-mysql-day"
-# Set this to the real registration link when it exists; until then the
-# Register buttons open a "details coming soon" dialog.
+# Image used when the page is shared on social networks.
+images:
+  - cover.jpg
+# Registration widget (RingCentral Events). Every Register button opens it in a
+# pop-up. If it is ever empty, registration_url is used as a plain link, and if
+# that is empty too the buttons open a "details coming soon" dialog.
+registration_widget: "https://registration.events.ringcentral.com/widgets/registration/duckdb-x-mysql-day?widget_id=TWGSBGd5cEk7rk05fmBYgD7SA"
 registration_url: ""
 strip:
   - {icon: "↗", label: "SAVE THE DATE", value: "November 17, 2026"}
@@ -31,7 +36,7 @@ schedule:
   - {est: "10:00–10:45", cet: "16:00–16:45", track: "Opening talk", title: "Twenty Years of Bolting Analytics onto MySQL: Will DuckDB Finally Make It HTAP?", speaker: "Vadim Tkachenko"}
   - {est: "10:45–11:30", cet: "16:45–17:30", track: "Columnar engines", title: "When MySQL meets DuckDB: Best practices for columnar engines on MySQL", speaker: "Zongzhi Chen"}
   - {est: "11:30–12:15", cet: "17:30–18:15", track: "Analytical replication", title: "MySQL analytical replication with DuckDB and Parquet files", speaker: "Daniel Guzmán Burgos"}
-  - {est: "12:15–13:00", cet: "18:15–19:00", track: "More to come", title: "Talk title to be announced", speaker: "Roman Nozdrin"}
+  - {est: "12:15–13:00", cet: "18:15–19:00", track: "Storage engines", title: "When the Sea Lion Learns to Quack: DuckDB as a MariaDB Storage Engine", speaker: "Roman Nozdrin"}
 schedule_note: "Tentative timings; subject to change. Register to get the final schedule as soon as it’s published."
 topic_tags: ["DuckDB", "MySQL", "HTAP", "Parquet", "Columnar engines", "Open source analytics"]
 register:

content/events/duckdb-mysql-day/index.md

@@ -3,11 +3,14 @@
   its styles live in assets/scss/_event-landing.scss, scoped under
   .dmd-landing (and every class prefixed dmd-) so nothing leaks into the rest
   of the site. Text, speakers and the schedule come from the page's front
-  matter. While registration_url is empty, every Register button opens the
-  "coming soon" dialog; set it and they become plain links.
+  matter. Every Register button opens a pop-up with the registration widget
+  (registration_widget in front matter, loaded on first open). Without a
+  widget, registration_url turns them into plain links, and without that they
+  open a "coming soon" dialog.
 */}}
 {{ define "main" }}
 {{ $reg := .Params.registration_url }}
+{{ if .Params.registration_widget }}{{ $reg = "" }}{{ end }}
 {{ $page := . }}
 <div class="dmd-landing">
 
@@ -99,7 +102,34 @@ <h1>DuckDB <span class="dmd-cross">×</span><br>MySQL <span class="dmd-gradient"
     </div>
   </section>
 
-  {{ if not $reg }}
+  {{ $widget := .Params.registration_widget }}
+  {{ if $widget }}
+  <dialog id="registration" class="dmd-dialog-widget" aria-label="Register for {{ .Title }}">
+    <button class="dmd-close" aria-label="Close registration form">×</button>
+    <div class="dmd-hopin-container" id="registration-widget" data-src="{{ $widget }}"></div>
+  </dialog>
+  <script>
+  (function () {
+    var dialog = document.getElementById('registration');
+    var box = document.getElementById('registration-widget');
+    if (!dialog || !dialog.showModal) return;
+    function load() {
+      if (box.firstChild) return;
+      // Load the registration form on first open only, and pass any query
+      // string (e.g. UTM tags) through to it.
+      var iframe = document.createElement('iframe');
+      iframe.src = box.getAttribute('data-src') + window.location.search.replace('?', '&');
+      iframe.title = 'Registration form';
+      box.appendChild(iframe);
+    }
+    document.querySelectorAll('[data-register]').forEach(function (b) {
+      b.addEventListener('click', function () { load(); dialog.showModal(); });
+    });
+    dialog.querySelector('.dmd-close').addEventListener('click', function () { dialog.close(); });
+    dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close(); });
+  })();
+  </script>
+  {{ else if not $reg }}
   <dialog id="registration">
     <button class="dmd-close" aria-label="Close registration information">×</button>
     <p class="dmd-eyebrow">DUCKDB × MYSQL DAY</p>