Add books section with 3D shelf visualization - #163
Open
injoon5 wants to merge 2 commits into
Open
Conversation
Books work exactly like blog posts and projects: one markdown file per
book in books/books/{en,ko}, same bilingual resolution, same comments and
likes, same prerendered metadata API. Dropping a file in is the whole
workflow. Frontmatter adds author, rating, page count, binding cloth,
cover/spine artwork and a `reading` flag; the folder README documents it.
The section renders each book as an object rather than a card. A pile is
solved as a sequence, not per book, because that is what a pile is: every
book lies flat, since a book on a flat book is flat, and the only freedom
it has is how far it is turned about the vertical. The pile's perspective
turns that turn into what you actually see — the near end of a spine
taller, the far end shorter and riding up. Sizing is in container query
units, so a pile is one object that scales from a phone to a wide column
with no breakpoints, and the geometry comes off the slug hash so the
server and the client always agree.
Home gets two piles of the six most recent; /books gets the full pile
above the list, one pile on a phone and two on a wide screen. Reaching for
a book slides it out sideways and opens the pile around it, all from
sibling selectors. A book's own page shows it turned to face you, with the
same cloth, foil and grooves on its spine.
Also: /books/* joins the SSR language resolver, so Korean book pages are
no longer served declared as English, and books get their own OG cards
instead of borrowing the blog's.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jfaf9KteuRVWSi1iA3VPA7
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Probing the hover in a browser turned up two things. The top board of the top book is a 430x50 surface that looks like part of the book, but it is painted outside the anchor's own box and had pointer events off, so it was dead to the cursor — it is now part of the target. And the hover scale grew from the centre, so a book coming out of a pile crept leftwards by half the growth before moving right; the translate now pays that back, so the left edge holds still and the whole thing reads as one movement, outwards. That also stops a hover started near the left edge from dropping on the next twitch of the mouse: the edge used to slide 16px out from under the cursor, now 6. The pile opens further around the book you are reaching for, and the pull and the lift are in container units like everything else, so the gesture is the same size on a phone as on a desktop. On a book's own page the hero is bigger and grows with the viewport, its cover type scales with it and clamps instead of spilling, it is centred against the block of text beside it, and it lines up with the prose below. That last one needs the negative margin: the book is turned, so it paints its left edge inside its layout box, and aligning the box would have left it visibly indented. Verified with a browser: keyboard focus drives the same choreography, a tap on touch navigates without animating, and reduced motion holds the book still. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jfaf9KteuRVWSi1iA3VPA7
Deploying web with
|
| Latest commit: |
361c8fa
|
| Status: | 🚫 Build failed. |
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
2 participants
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.
Adds a complete books feature to the site, including a reading shelf with 3D book pile visualization, individual book pages with bilingual support, and integration into the home page.
Key Changes
BookVolume.svelte,BookPile.svelte,BookPiles.svelte): 3D rendered book spines with cloth textures, realistic shadows, and hover interactions that slide books out of the pile[slug]/+page.svelte): Full book pages with cover art, ratings, reading status, bilingual content switching (English/Korean), and comment sectionsbookStyle.js): Deterministic cloth color assignment from book slugs, spine thickness calculation from page count, and a palette of 12 muted binding colorsroutes/books/books/{en,ko}/with frontmatter for metadata (title, author, rating, pages, color, reading status)/api/booksfor fetching book metadata,/bookslisting page, and individual book routes/bookslistingbooksListTemplateandbookTemplatefor social media previewsImplementation Details
cqw) for responsive scaling without breakpointshttps://claude.ai/code/session_01Jfaf9KteuRVWSi1iA3VPA7