Replace dashboard demo videos with a coverflow image carousel#1333
Open
IEvangelist wants to merge 2 commits into
Open
Replace dashboard demo videos with a coverflow image carousel#1333IEvangelist wants to merge 2 commits into
IEvangelist wants to merge 2 commits into
Conversation
Swap the heavy, hard-to-maintain dashboard demo MP4s (~93 MB) for a zero-dependency, theme-aware coverflow carousel of seven dashboard screenshots (resources graph, resources table, console logs, structured logs, traces, trace detail, metrics), each with light and dark variants via ThemeImage. The carousel borrows just the coverflow motion from Motion's Vue example (no runtime dependency): 3D per-distance scale/rotation/blur/opacity, autoplay that pauses on hover/focus/zoom, click-to-center, keyboard arrows, touch/pointer swipe with vertical-scroll passthrough, image zoom, and a soft edge mask. Migrate every localized landing page from <LoopingVideo> to <DashboardCarousel /> and delete the now-unused dashboard-demo MP4s. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Contributor
Frontend HTML artifact readyThe latest frontend build uploaded the This comment updates automatically when a new frontend build artifact is uploaded. |
The active view label used --aspire-color-secondary (#b9aaee), a light purple that only clears WCAG AA against the dark page background (~7.8:1). On the light theme's white background it dropped to ~2.1:1, failing the axe color-contrast rule and breaking the homepage WCAG AA e2e audit across all viewports. Keep the light-purple accent on dark and switch to the deeper brand purple --aspire-color-primary (#7455dd, ~5.1:1 on white) under html[data-theme='light']. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR prototypes replacing the landing page’s heavy dashboard demo videos with a new, zero-dependency DashboardCarousel component and updates all localized landing pages to use it.
Changes:
- Added
DashboardCarousel.astroimplementing a theme-aware coverflow screenshot carousel with autoplay, swipe, keyboard controls, and zoom integration. - Replaced
LoopingVideousage with<DashboardCarousel />across the landing page in all locales. - (Per PR description) removes the two large
dashboard-demo-*.mp4assets in favor of themed PNG screenshots.
Reviewed changes
Copilot reviewed 16 out of 32 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/frontend/src/components/DashboardCarousel.astro | Introduces the new coverflow carousel component and its client-side controller. |
| src/frontend/src/content/docs/index.mdx | Switches the English landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/da/index.mdx | Switches the Danish landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/de/index.mdx | Switches the German landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/es/index.mdx | Switches the Spanish landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/fr/index.mdx | Switches the French landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/hi/index.mdx | Switches the Hindi landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/id/index.mdx | Switches the Indonesian landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/it/index.mdx | Switches the Italian landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/ja/index.mdx | Switches the Japanese landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/ko/index.mdx | Switches the Korean landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/pt-br/index.mdx | Switches the Portuguese (Brazil) landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/ru/index.mdx | Switches the Russian landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/tr/index.mdx | Switches the Turkish landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/uk/index.mdx | Switches the Ukrainian landing page from LoopingVideo to DashboardCarousel. |
| src/frontend/src/content/docs/zh-cn/index.mdx | Switches the Chinese (Simplified) landing page from LoopingVideo to DashboardCarousel. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+94
to
+99
| data-slide | ||
| data-index={i} | ||
| role="group" | ||
| aria-roledescription="slide" | ||
| aria-label={`${i + 1} of ${slides.length}: ${s.label}`} | ||
| > |
Comment on lines
+164
to
+167
| // Cache each slide's caption once (derived from its aria-label). | ||
| const labels = slides.map( | ||
| (s) => (s.getAttribute('aria-label') || '').split(': ').pop() || '' | ||
| ); |
Comment on lines
+118
to
+129
| <div class="dots" role="tablist" aria-label="Choose a dashboard view"> | ||
| { | ||
| slides.map((s, i) => ( | ||
| <button | ||
| type="button" | ||
| class="dot" | ||
| data-dot | ||
| data-index={i} | ||
| role="tab" | ||
| aria-label={s.label} | ||
| aria-selected={i === 0 ? 'true' : 'false'} | ||
| /> |
| slide.removeAttribute('aria-current'); | ||
| } | ||
| } | ||
| dots.forEach((d, i) => d.setAttribute('aria-selected', i === active ? 'true' : 'false')); |
Comment on lines
+362
to
+386
| root.addEventListener('pointerenter', stopAuto); | ||
| root.addEventListener('pointerleave', startAuto); | ||
| root.addEventListener('focusin', stopAuto); | ||
| root.addEventListener('focusout', startAuto); | ||
| document.addEventListener('visibilitychange', () => | ||
| document.hidden ? stopAuto() : startAuto() | ||
| ); | ||
|
|
||
| // Pause autoplay while an image is zoomed open. starlight-image-zoom adds | ||
| // the `starlight-image-zoom-opened` class to <body> for the duration. | ||
| const body = document.body; | ||
| const zoomObserver = new MutationObserver(() => { | ||
| const open = body.classList.contains('starlight-image-zoom-opened'); | ||
| if (open === zoomOpen) return; | ||
| zoomOpen = open; | ||
| if (open) { | ||
| stopAuto(); | ||
| } else { | ||
| startAuto(); | ||
| } | ||
| }); | ||
| zoomObserver.observe(body, { attributes: true, attributeFilter: ['class'] }); | ||
|
|
||
| window.addEventListener('resize', measure); | ||
|
|
| }, | ||
| ]} | ||
| /> | ||
| <DashboardCarousel /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Prototype replacing the landing page's dashboard demo videos with a zero‑dependency, theme‑aware coverflow image carousel.
The two
dashboard-demo-{dark,light}.mp4files (~93 MB combined) are heavy, hard to maintain, and go stale as the dashboard evolves. This swaps them for seven high‑quality dashboard screenshots — each with a light and dark variant rendered through the existingThemeImagecomponent.What's included
DashboardCarousel.astro— a self‑contained CSS 3D coverflow with a tiny inline controller. No new runtime dependencies; it borrows only the motion idea from Motion's Vue coverflow example.prefers-reduced-motion.aspire-shoprun: resources graph, resources table, console logs, structured logs, traces, trace detail, metrics.index.mdxacross all locales) from<LoopingVideo>to<DashboardCarousel />.dashboard-demo-dark.mp4anddashboard-demo-light.mp4(~93 MB removed).LoopingVideo.astrois retained — it's still used by the AI coding agents page.Demo
aspire.dev.landing-dashboard.rewrite.mp4
Validation
prettier✓,astro sync✓,eslint .✓ (0 errors), component vitest suite ✓ (69 passed).astro devin both light and dark themes, including swipe, zoom, and coverflow depth.pnpm buildrun locally (left to CI).Notes
Opening as a draft for UX feedback on the interaction and image set before finalizing.