Fold

Fold is a site for a children’s bookshop, a children’s brand or toy maker, a story café or puppet theatre, a library or a school’s reading project. It’s made like a cut-paper pop-up book: the page is a thick page of a book, pictures are cut out of paper and taped down, buttons are pull-tabs, and on the home page a pop-up book stays on screen while each chapter of the story makes its paper scene fold up out of the pages. Books by age to order, events, school visits, a journal and a visit page complete it.

Fold comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Books, events, schools, journal, visit, 404	Pages → the page’s own entry
Books (author, ages, format, price, cover, bookplate, ordering)	Content → Books
Journal posts	Content → Journal
Name, description, email, phone, address, navigation, header button, profiles, social picture	Pages → Site settings
Buttons, labels, chat, search, emails, game texts	Content → Interface texts
Privacy, terms	Pages → Legal

In headlines, words wrapped in *stars* are cut out of yellow paper and stuck on, as in “Stories that *pop out* of the page”.

The pop-up book

The pop-up story section keeps an open book on screen while its chapters (two to four) scroll past. Each chapter picks one of four scenes, a castle on a hill, the woods and an owl, the sea and a boat, or home under the moon, and as the chapter comes into view the scene’s paper layers fold up out of the pages one after another, then fold away for the next. The scenes are drawn in code (src/components/PopUpScene.astro) in the brand’s colours, so they follow any palette. Visitors who prefer reduced motion see the last scene standing.

Books and ordering

• A book has an author, an illustrator, a tagline, a summary, the ages it suits, its format, length and price, a cover (4:5), a bookplate and a colour.
• Ordering: turn on “Sell with Stripe Checkout” and put a one-time Price id there; the book’s page gets a working button. Buyers come back to the books page, and the Stripe webhook (/api/stripe/webhook) emails them, where you can add your own steps.
• Shelves (home page): age bands, each with what it holds.
• Quotes on the home page: only real quotes with their source.

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Ordering books	Each book’s page	Stripe
Class visits	Schools page; a preview of the calendar until it’s connected	Cal.com
Newsletter and the events list	Home, journal and events pages, with a welcome email	Supabase
Contact form	Visit page; messages go to the email in Site settings	Resend
AI chat	On every page, answers from your books, shelves, events, school visits, visit page and journal	Claude
Search	⌘K or the search button: books, journal, events, schools, visit	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics

Sections

The home page is built from these sections, in any order: The opening, Shelves, The pop-up story, Books, Feature (a picture and a text, e.g. story time or schools), Numbers, Quotes, From the journal, Newsletter sign-up and Closing call.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (buttons, links and the red paper), the second (sky and sea) and the third (sun, moon and warm fills). Buttons are darkened until their white text is readable, the second and third are lightened until dark text on them is; a color that can’t get there stops the build with a message. The site opens in the day theme whatever the visitor’s system is set to; the night theme, a deep blue bedtime sky, comes on with the toggle (pictures stay on paper). Brand also sets the fonts (a rounded storybook face for headings, the text font and the label font) and the corners.

Languages

Fold is ready for more languages: see Languages.

The 404 page

A small game, Tangram: seven paper pieces and a shadow to fill, a cat, a house and a boat. Drag a piece and it settles onto the grid, tap it to turn it, or use Tab, the arrow keys, R to turn and F to flip. Any arrangement that fills the shadow counts. The best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, books and journal for AI assistants, in every language.
• Pages carry JSON-LD: the shop as a BookStore, books as Books, events as Events, the visit questions as a FAQPage, and each post.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).