Repository navigation
feat(www): hobby mode with a media log, ASCII stage and avatar mode switch - #3215
Merged
Merged
Conversation
A mode is a URL space with its own frame. Tech pages move into the `(tech)` route group; `/hobby` gets its own frame, palette (`@chia/themes/hobby.css`, keyed off `data-site-mode`) and a mode switch in the header, the tech footer and the command menu. The reader palette applies to the tech mode only. The hobby pages read a new media log: `chia_media_entry`, catalogue clients for TMDB, AniList and IGDB, a `media` oRPC module that snapshots a work and copies its cover into storage, and a dash page to manage it. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
The hobby frame drops its header and column. Every work is one full-width line; the line in focus hands its key art and cover colour to a fixed field of glyphs behind the page, and every hobby token derives from that colour through `--media-color`. The field pauses when the reader is idle and draws at no more than 1.5 pixels per CSS pixel. Media entries gain a backdrop and a colour, copied and extracted when a work is logged. The mode switch is removed until the mode is finished. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
A logged work has its own URL, `/hobby/[kind]/[slug]`. From the list it opens as a sheet over it through the `@modal` slot; opened directly it is a page. Both show the key art across the whole surface under a translucent wash of the work's colour, the cover as a card lit by a WebGL overlay, the rating as five stars and, for a game, playtime and achievements. Entries gain a slug and play stats. A game logged from IGDB takes its Steam app id from the store link and reads its stats from Steam; `media.sync` refreshes them. Image copies are limited to the catalogue CDNs with a streamed size cap, and catalogue titles and colours are validated before they are stored. The stage stops behind a sheet and is not mounted under a page whose art covers the viewport. The mode switch is back in both frames. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
The portrait is now the mode switch: the tech home's avatar and a small one beside the hobby wordmark. Hovering wipes in the other mode's face and a click switches behind a full-viewport curtain of glyphs that spreads from the avatar, draws the destination face while the route changes, and opens from the new page's avatar. The segmented switch is gone from the header, the footer and the hobby cluster; the command menu entry runs the same transition. - @chia/shaders/ascii-curtain: canvas 2D wipe that redraws only changed cells and takes its colours from the theme at paint time - ModeTransitionProvider in the shared layout owns the cover, the navigation and the reveal; reduced motion navigates without the curtain - readableImageSourceOf: script reads of storage images use their own URL outside production, where a cached <img> response lacks CORS headers - meta.secondaryAvatar is the hobby face Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedToo many files! This PR contains 131 files, which is 31 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.
 |
This branch had an error being deployed
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
wwwgets a second face. The tech mode (articles, career) stays the default; a hobby mode under/hobbyshows films, series, anime and games with its own frame and palette.(tech)route group withTechFrame;hobby/hasHobbyFrame. The locale layout keeps the document, providers and chat dock. The hobby frame marks itself withdata-site-mode;@chia/themes/hobby.csskeys off it through:root:has(), and the reader palette steps aside there.chia_media_entrywithMediaKind/MediaStatus/MediaSource, a repo in@chia/db, and amediamodule in@chia/services(listandgetpublic;search,create,update,sync,removeadmin). Entries are logged by hand from dash/media: search a catalogue, pick a work, and the service snapshots titles, copies poster and backdrop to storage and takes a cover colour. Writes end instartSiteRevalidation(WwwCacheTag.Media).@chia/integrations/{tmdb,anilist,igdb,steam}. Anime searches both AniList and TMDB. IGDB supplies the Steam app id; Steam supplies playtime and achievements, on create and from a dash button.@chia/shaders/ascii-field) that draws the focused work's key art. Every hobby token derives from--media-color, the focused work's cover colour. A work opens at/hobby/[kind]/[slug], intercepted into acovermodal when reached from inside the site; both render the same component, with status, five-star rating, dates and game stats, and the cover in a reflective card (@chia/shaders/reflective-card, adapted from React Bits).@chia/shaders/ascii-curtain) that spreads from the avatar, draws the destination face while the route changes, and opens from the new page's avatar. The command menu entry runs the same transition. Reduced motion navigates without it.Before deploy
service:TMDB_ACCESS_TOKEN,IGDB_CLIENT_ID,IGDB_CLIENT_SECRET,STEAM_API_KEY,STEAM_ID. Not added to.railway/resources.ts, becausepreserve()needs an existing value.20261114172203_media_entry,20261114180924_media_entry_backdrop_color,20261114184737_media_entry_slug_play_stats(the last backfillsslugbefore setting itNOT NULL).contact/moved into(tech), which gives itsopengraph-imageURL a route-group hash suffix; check any Cloudflare cache rule keyed on that path.Notes
--media-coloris not transitioned: it is inherited, so easing it restyled the whole document every frame.sharpin the Alpine image build (traced throughtraceDeps), the no-WebGPU fallback, the dash UI behind login, and the production image path (/cdn-cgi/image) for the curtain's portrait.Verification
pnpm turbo run lint type:check testpasses for the touched workspaces.www+service: hobby list, work page and sheet, and the mode switch round trip on desktop, phone width and reduced motion. The curtain holds 60fps and takes about 1.9s end to end.🤖 Generated with Claude Code