Burin
Burin is a site for history: publishers and history magazines, museums and exhibitions, guided-walk companies, history podcasts and societies, school projects. It explains events through the prints made of them at the time, and it is set edge to edge on laid paper: the laid and chain lines of handmade paper, the plate mark round the window, printer’s black, rubric red, old gold and verdigris, headings in an old roman cut for print (IM Fell). On the home page a print of the event is read letter by letter as you scroll, the way old prints label their keys. The demo is a fictional publisher in Prague, Annals, and its home page is about a real morning: the execution of twenty-seven leaders of the Bohemian revolt on the Old Town Square on 21 June 1621.
Burin 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
Section titled “Pages and their content”| Page | Edit it in |
|---|---|
| Home | Pages → Home page (a list of sections) |
| Events, prints, notes, 404 | Pages → the page’s own entry |
| Walks and schools (the main offer, packages, how a walk goes, booking, lesson packs, questions) | Pages → Learn page |
| Contact (message form, map, hours, details, questions) | Pages → Contact page |
| Events (date, year, place, era, story, print, facts, timeline, who’s who, further reading, questions) | Content → Events |
| Prints (who made it, when, how, credit and licence, source, the event, how to read it) | Content → Prints |
| Notes | Content → Notes |
| Name, phone, address, navigation, header button, profiles | Pages → Site settings |
| Buttons, labels, chat, emails, game texts and cards | Content → Interface texts |
| Privacy, terms, image licences | Pages → Legal |
In headlines, words wrapped in *stars* are printed in rubric red with a fine rule drawn under them,
as in “The morning of the *twenty-seven*”.
Prints: one archive, used everywhere
Section titled “Prints: one archive, used everywhere”Every picture on the site is a print in Content → Prints, with its maker, date, technique, credit and
licence, and a page of its own (with “Look closer”, the print at full size to pan around). Events,
timeline moments, the people on the roll and the sections name a print by its file name
(the-scaffold), so a picture is uploaded once. Use prints you may publish: public domain (most
museums release their old prints under CC0) or your own. By day prints sit in the paper like ink.
Read the plate
Section titled “Read the plate”The home page opens with a print and its key: a few letters (A, B, C…), each with a title, a line, its place on the print (across and down, in %) and how close to look. The headline, lead and buttons sit above the print from the first frame. As you scroll the stage stays, the headline folds away and the print is magnified on each letter in turn while its explanation shows above; at the end the whole print returns with every letter on it. On load the print turns over like a sheet pulled off the copper plate. To place a letter, open the print, find the spot and note its position as a percentage of the width and height.
The other sections
Section titled “The other sections”- Timeline: moments with a date as it should read, a year and an optional print; the row slides sideways while you scroll, a ribbon unrolls under it, and a large year in the background counts from the first moment to the last. Mark one moment as the one the story is about.
- Hour by hour: parts of a day, each with the hour the clock’s hand points to.
- The roll: groups (lords, knights, burghers…) and the people in them, each with a line, how they died (a sword or a rope; change the words in Interface texts) and an optional portrait; a filter by group that needs no script, and a portrait beside the roll.
- A print and its story: a print, a text and up to four numbers stamped in old-gold seals.
- Where it happened: the map, with a label on the pin.
- More events, Walks and lesson packs, Notes, Newsletter and the Closing call over a long view of a city that pans as you scroll.
With reduced motion nothing moves: the print shows with all its letters and the key as a list, the timeline is a row you scroll yourself.
Walks, booking and payments
Section titled “Walks, booking and payments”The Learn page holds the main offer on a ticket with its small print, up to four packages (mark one as the popular one), how a walk goes as stops on a route, booking with Cal.com, and lesson packs and tickets you sell with Stripe: each one gets a one-time Price id. Without keys, the booking shows a preview of the calendar and the payment buttons explain how to switch them on.
The map
Section titled “The map”The map is drawn from OpenStreetMap in your colors, with a
pin and its label. It is part of the page (no embed, no cookies) and follows the theme and your
accent. To draw your own place, put its coordinates in map.config.json and run pnpm map -- fetch.
detail: "streets" (the default in Burin) draws the streets and buildings round one place; "area"
the main roads, railways, water and woods of a district.
Integrations
Section titled “Integrations”Everything works without keys; each feature switches on with its variables in .env.example.
| Feature | Where | Service |
|---|---|---|
| Book a walk or a talk | Learn page, loads on click; a preview of the calendar until connected | Cal.com |
| Lesson packs and tickets | Learn page (one-time Price ids) | Stripe |
| Newsletter | Home and notes pages, with a welcome email | Supabase |
| Message form | Contact page; messages go to the email in Site settings | Resend |
| AI chat | On every page, answers about the events, people, prints and walks from the site’s content only | Claude |
| Search | ⌘K or the search button: events, prints, notes, walks, contact | built in, or Algolia |
| Analytics | Every page; Google Analytics only after consent | Plausible, Umami, Google Analytics |
Colors and brand
Section titled “Colors and brand”src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent
(rubric red: buttons, initials, marked words, the letters of the key), the second (old gold: seals,
the ribbon, the ticket) and the third (verdigris). Buttons are darkened until their white text is
readable, the second and third are lightened until ink text on them is; a color that can’t get there
stops the build with a message. Brand also sets the fonts and the corners (square like a printed page,
or slightly rounded). The site opens in the day theme even when the visitor’s system is dark; the toggle
switches to the night, dark copper, and the browser remembers the choice.
Languages
Section titled “Languages”Burin is ready for more languages: see Languages.
The 404 page
Section titled “The 404 page”A small game, Out of order: a card names an event; put it in its place on the line of events already placed, earlier to the left, later to the right (tap a gap, or ← → and Enter). A card in the wrong gap costs a seal and goes where it belongs anyway, its year shown; three seals and the game ends. The events are in Interface texts → 404 game → cards (a year each, all different).
AI assistants and search engines
Section titled “AI assistants and search engines”AGENTS.mddescribes the project for coding assistants (Claude Code reads it throughCLAUDE.md, Cursor through.cursor/rules/)./llms.txtlists your pages, events, prints and notes for AI assistants, in every language.- Pages carry JSON-LD: the publisher as an
EducationalOrganizationwith its walks and packages as offers, events asArticles about anEvent, prints asVisualArtworks, how a walk goes as aHowTo, questions as aFAQPage, and each note as aBlogPosting.
Commands
Section titled “Commands”pnpm dev # local site, editor at /keystaticpnpm build # production buildpnpm map -- fetch # draw the map round map.config.json from OpenStreetMappnpm 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).