docs: AI agent-loop video on landing + AI docs, media optimization - #310
Merged
Conversation
Landing (HomePage.vue): new "Your agent writes tests. TWD makes them run." section placed after the ecosystem/thesis block. Muted loop is deferred (preload=none, no autoplay) and played via IntersectionObserver when it scrolls into view, with a reduced-motion poster fallback and pause control. AI docs (ai-overview.md): "Watch the loop" click-to-play YouTube facade via a new reusable YouTubeEmbed component (loads youtube-nocookie only on click). SEO (config.mts): VideoObject JSON-LD for the narrated walkthrough. Performance/CLS: reserve aspect-ratio on the loop video and the flagged step screenshot; re-encode the poster from a 289KB PNG to a 91KB JPEG sized to the video. Also optimize existing PNG assets (icons, screenshots, manifest icons). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Puts the AI agent-loop demo video to work in the docs, and trims media weight.
What's added
HomePage.vue) — new "Your agent writes tests. TWD makes them run." section, placed after the ecosystem/thesis block so it follows the pitch rather than interrupting it. Muted loop of the silent cut, matching the hero's accessibility contract (reduced-motion poster fallback + play/pause control).ai-overview.md) — a "Watch the loop" click-to-play YouTube embed via a new reusableYouTubeEmbedcomponent. It shows the poster and only loads theyoutube-nocookie.comiframe on click (no YouTube JS/cookies on page load).config.mts) —VideoObjectJSON-LD for the walkthrough.Performance
aspect-ratioon the loop video + the step screenshot Lighthouse flagged as unsized.preload="none"with no autoplay; it plays viaIntersectionObserverwhen scrolled into view, keeping ~0.65MB off the initial load.web-app-manifest-512x512.png208KB to 50KB.Notes
npm run docs:build && npm run docs:preview.🤖 Generated with Claude Code