Repository navigation
Add a server-renderable Discover card set under ./discover - #149
prakashUXtech wants to merge 12 commits into
Conversation
|
Two follow-up commits:
Verified: vitest ssr project for src/lib/discover 8/8 green, bun run build emits dist/discover, svelte-check 0 errors 0 warnings. |
…adge without a poster, and only takes http(s) urls ItemArt derives its own labels from the title, so the placeholder says Preview of and never Video poster for. imageUrl and the DetailMedia poster route through httpUrl, making the item.ts invariant true. A failed load drops to the placeholder after hydration; the server frame is unchanged.
Consumers whose item pages are off-site pass target="_blank" rel="noopener" so a desktop webview does not navigate away from the app.
…ut of the Referer
…s a loading-frame wash
… and 1, a music tile, palette stability
|
Review findings addressed, one commit per row:
One prop change: Follow-ups, not in this PR: the typography drift (text-sm/text-xs vs the app's canon scale, rounded-xl vs 10px, font-display) and Verified from |
…/discover-export
Adds
@ripple-ui/svelte/discover, a card set for a public Discover catalogue that renders completely on the server. It ports DiscoverTile, DiscoverRow and the item art from paw-enterprise, plus a DetailMedia block (the video, audio or image a detail view plays, without the dialog), theDiscoverItemtypes, anditemHref(kind, idOrSlug).The components are pure: props in, markup out. There are no stores, no effects and no app imports. The
<img>,<video>and<audio>sources are in the server HTML, so a prerendered page shows the pictures before any JavaScript loads. Tile and Row take an optionalhref; when set, the art and the title become links. The art link is decorative (tabindex -1, hidden from assistive tech) since the title carries the name. The click callbacks (onremix,onreport,onopen) are optional, and each action button renders only when its callback is passed, so a static page gets just the links.What changed from the app versions: ItemArt takes
imageUrl,alt,mediaKind,tintandinitialdirectly and prints a lazy<img>or the tinted placeholder (no CardPreview, no thumbnail grant, no$effect). The item shape is flattened toid, slug?, kind, mediaKind, title, desc, imageUrl, mediaUrl?, liveUrl?, remixCount, featured; the studio flag, usage line, primary action and playable media are derived initem.tswith the same rules the app's adapter uses, including the http(s) guard on every url that becomes an href or src. The shared action cluster lives in one internal ItemActions component instead of being duplicated in Tile and Row. The placeholder palette is theme tokens (var(--ripple-*)) rather than hex, and the app'stext-body/text-footnote/text-caption-1utilities map totext-sm/text-xs, which is what ripple's sibling widgets use.discover.ssr.test.tsruns in thessrvitest project next to the marketing SSR test. It renders each component throughsvelte/serverand asserts the image, media and link markup, and covers the fouritemHrefbranches.Verified locally: the SSR test passes (8 tests),
svelte-checkreports 0 errors, andsvelte-packageemitsdist/discover. No docs list the export subpaths today, so none were updated.