|
49 | 49 |
|
50 | 50 | {{ $slack := .Site.Params.social.slack }} |
51 | 51 |
|
52 | | -<!-- Hero --> |
53 | | -<section class="hero hero--minimal"> |
54 | | - <h1 class="hero-title">The Future of the <span class="gradient-text">MySQL Ecosystem</span></h1> |
55 | | - <p class="hero-description">A vendor-neutral nonprofit bringing together the MySQL ecosystem to share knowledge, collaborate openly, and build a strong, sustainable future.</p> |
56 | | - <div class="hero-actions"> |
57 | | - <a href="/community/get-involved/" class="btn btn-primary">Join the Foundation</a> |
58 | | - <a href="/resources/" class="btn btn-outline">Explore the ecosystem →</a> |
| 52 | +<!-- Hero carousel: the upcoming-event announcement first (when a page is flagged |
| 53 | + home_featured and still ahead), then the mission statement. With only one slide it |
| 54 | + renders as a plain hero, without controls. --> |
| 55 | +{{ $slideCount := 1 }}{{ if $featured }}{{ $slideCount = 2 }}{{ end }} |
| 56 | +<section class="hero hero--minimal hero-carousel" data-count="{{ $slideCount }}" aria-roledescription="carousel" aria-label="Featured"> |
| 57 | + <div class="hero-slides"> |
| 58 | + {{ with $featured }} |
| 59 | + {{ $art := .Resources.Get "hero-illustration.svg" }} |
| 60 | + <div class="hero-slide hero-slide--event is-active" role="group" aria-roledescription="slide" aria-label="1 of 2"> |
| 61 | + <div class="hero-event-copy"> |
| 62 | + <span class="hero-event-kicker">Upcoming event · {{ .Date.Format "January 2, 2006" }}{{ with .Params.home_meta }} · {{ . }}{{ end }}</span> |
| 63 | + <h2 class="hero-event-title">DuckDB <span class="hero-event-x">×</span> MySQL <span class="gradient-text">Day</span><span class="hero-event-dot">.</span></h2> |
| 64 | + <p class="hero-event-desc">{{ .Params.hero_description | default .Description }}</p> |
| 65 | + <div class="hero-actions hero-actions--left"> |
| 66 | + <a href="{{ .RelPermalink }}#register" class="btn btn-primary">Register for free</a> |
| 67 | + <a href="{{ .RelPermalink }}#schedule" class="btn btn-outline">See the schedule →</a> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + {{ with $art }} |
| 71 | + <div class="hero-event-art"><img src="{{ .RelPermalink }}" alt="MySQL and DuckDB cards connected by data flows" width="800" height="790" decoding="async"></div> |
| 72 | + {{ end }} |
| 73 | + </div> |
| 74 | + {{ end }} |
| 75 | + <div class="hero-slide hero-slide--mission{{ if not $featured }} is-active{{ end }}"{{ if $featured }} role="group" aria-roledescription="slide" aria-label="2 of 2"{{ end }}> |
| 76 | + <h1 class="hero-title">The Future of the <span class="gradient-text">MySQL Ecosystem</span></h1> |
| 77 | + <p class="hero-description">A vendor-neutral nonprofit bringing together the MySQL ecosystem to share knowledge, collaborate openly, and build a strong, sustainable future.</p> |
| 78 | + <div class="hero-actions"> |
| 79 | + <a href="/community/get-involved/" class="btn btn-primary">Join the Foundation</a> |
| 80 | + <a href="/resources/" class="btn btn-outline">Explore the ecosystem →</a> |
| 81 | + </div> |
| 82 | + </div> |
59 | 83 | </div> |
| 84 | + {{ if $featured }} |
| 85 | + <div class="hero-controls"> |
| 86 | + <button type="button" class="hero-ctrl hero-ctrl--prev" aria-label="Previous slide" hidden>‹</button> |
| 87 | + <div class="hero-dots" role="tablist" aria-label="Choose a slide"></div> |
| 88 | + <button type="button" class="hero-ctrl hero-ctrl--next" aria-label="Next slide" hidden>›</button> |
| 89 | + <button type="button" class="hero-ctrl hero-ctrl--pause" aria-label="Pause automatic slide change" hidden>❚❚</button> |
| 90 | + </div> |
| 91 | + <script> |
| 92 | + (function () { |
| 93 | + var root = document.querySelector('.hero-carousel'); |
| 94 | + if (!root) return; |
| 95 | + var slides = [].slice.call(root.querySelectorAll('.hero-slide')); |
| 96 | + if (slides.length < 2) return; |
| 97 | + var dots = root.querySelector('.hero-dots'); |
| 98 | + var prev = root.querySelector('.hero-ctrl--prev'), next = root.querySelector('.hero-ctrl--next'), pause = root.querySelector('.hero-ctrl--pause'); |
| 99 | + var i = 0, timer = null, userPaused = false, hovering = false; |
| 100 | + var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
| 101 | + var buttons = slides.map(function (s, k) { |
| 102 | + var b = document.createElement('button'); |
| 103 | + b.type = 'button'; b.className = 'hero-dot'; b.setAttribute('role', 'tab'); |
| 104 | + b.setAttribute('aria-label', 'Slide ' + (k + 1) + ' of ' + slides.length); |
| 105 | + b.addEventListener('click', function () { show(k); restart(); }); |
| 106 | + dots.appendChild(b); return b; |
| 107 | + }); |
| 108 | + function show(k) { |
| 109 | + i = (k + slides.length) % slides.length; |
| 110 | + slides.forEach(function (s, n) { |
| 111 | + var on = n === i; |
| 112 | + s.classList.toggle('is-active', on); |
| 113 | + s.setAttribute('aria-hidden', on ? 'false' : 'true'); |
| 114 | + [].forEach.call(s.querySelectorAll('a, button'), function (el) { el.tabIndex = on ? 0 : -1; }); |
| 115 | + buttons[n].setAttribute('aria-selected', on ? 'true' : 'false'); |
| 116 | + buttons[n].classList.toggle('is-active', on); |
| 117 | + }); |
| 118 | + } |
| 119 | + function stop() { if (timer) { clearInterval(timer); timer = null; } } |
| 120 | + function start() { stop(); if (!reduce && !userPaused && !hovering && !document.hidden) timer = setInterval(function () { show(i + 1); }, 8000); } |
| 121 | + function restart() { start(); } |
| 122 | + prev.hidden = next.hidden = false; |
| 123 | + prev.addEventListener('click', function () { show(i - 1); restart(); }); |
| 124 | + next.addEventListener('click', function () { show(i + 1); restart(); }); |
| 125 | + if (!reduce) { |
| 126 | + pause.hidden = false; |
| 127 | + pause.addEventListener('click', function () { |
| 128 | + userPaused = !userPaused; |
| 129 | + pause.textContent = userPaused ? '▶' : '❚❚'; |
| 130 | + pause.setAttribute('aria-label', userPaused ? 'Resume automatic slide change' : 'Pause automatic slide change'); |
| 131 | + start(); |
| 132 | + }); |
| 133 | + } |
| 134 | + root.addEventListener('mouseenter', function () { hovering = true; stop(); }); |
| 135 | + root.addEventListener('mouseleave', function () { hovering = false; start(); }); |
| 136 | + root.addEventListener('focusin', function () { hovering = true; stop(); }); |
| 137 | + root.addEventListener('focusout', function () { hovering = false; start(); }); |
| 138 | + document.addEventListener('visibilitychange', start); |
| 139 | + var x0 = null; |
| 140 | + root.addEventListener('touchstart', function (e) { x0 = e.touches[0].clientX; }, { passive: true }); |
| 141 | + root.addEventListener('touchend', function (e) { |
| 142 | + if (x0 === null) return; |
| 143 | + var dx = e.changedTouches[0].clientX - x0; |
| 144 | + if (Math.abs(dx) > 50) { show(i + (dx < 0 ? 1 : -1)); restart(); } |
| 145 | + x0 = null; |
| 146 | + }); |
| 147 | + root.classList.add('is-ready'); |
| 148 | + show(0); |
| 149 | + start(); |
| 150 | + })(); |
| 151 | + </script> |
| 152 | + {{ end }} |
60 | 153 | </section> |
61 | 154 |
|
62 | 155 | <!-- What We Do --> |
|
0 commit comments