mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-07-15 03:37:48 +00:00
7d3d8ce63f
## Summary Adds the `/drops` landing page in English and Simplified Chinese, ahead of the 2026-06-24 livestream. The page is composed of a livestream-gated hero, a 10-card drops grid, a subscribe banner, and a closing CTA. Production media for the hero and several cards is wired in; the rest fall back to placeholders. ## Changes - **New `/drops` page** (`pages/drops.astro`, `pages/zh-CN/drops.astro`) plus en/zh-CN translations. - **`HeroLivestream01` block** — renders the rotating-logo video before the stream window, swaps to a YouTube nocookie iframe between `startDateTime` and `endDateTime`. SSR stays deterministic on the logo and only flips to the embed after client hydration. Takes `youtubeVideoId` directly (no URL parsing). - **Drops grid** — `data/drops.ts` defines the 10 cards with `imageFor` / `videoFor` media helpers, badges, and per-locale title/description/href. `DropCard.vue` renders an image or autoplaying muted video inside the new `Card` primitive set (`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`). - **Supporting blocks** — `SubscribeBanner` uses the Button `link` variant with an animated hover underline; closing `CtaCenter01` is extended with a terms link. `resolveRel` is shared from `utils/cta.ts` instead of duplicated per block. - **Visual extension to `HeroLivestream01.visual`** — discriminated `image | video` union so the hero can render a looping video. - **E2E** — `e2e/drops.spec.ts` covers both locales (hero + grid render, locale-correct links). ## Review Focus - `youtubeVideoId` is currently a `nlLZfNIqF8M` placeholder; `startDateTime`/`endDateTime` are placeholders too — see TODO in `HeroSection.vue`. These need to be swapped to the production stream + window before launch. - Several drop cards still point at placeholder destinations (e.g. Comfy MCP at `/mcp`) — TODO noted in `drops.ts`. - Drop card media is a mix of images and short MP4s served from `media.comfy.org`. The videos autoplay muted/looped with `preload="metadata"`. ## Test plan - [ ] `pnpm --filter website dev` → visit `/drops` and `/zh-CN/drops`; confirm hero video plays, grid renders all 10 cards, video cards loop, subscribe banner link styled correctly - [ ] Temporarily set `startDateTime` to the past and `endDateTime` to the future; confirm hero swaps to the YouTube iframe after hydration - [ ] `pnpm --filter website test:e2e drops.spec.ts` - [ ] `pnpm typecheck:website` 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>