Skip to content

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.

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*”.

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.

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.

  • 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.

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 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.

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

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.

Burin is ready for more languages: see Languages.

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).

  • AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
  • /llms.txt lists your pages, events, prints and notes for AI assistants, in every language.
  • Pages carry JSON-LD: the publisher as an EducationalOrganization with its walks and packages as offers, events as Articles about an Event, prints as VisualArtworks, how a walk goes as a HowTo, questions as a FAQPage, and each note as a BlogPosting.
Terminal window
pnpm dev # local site, editor at /keystatic
pnpm build # production build
pnpm map -- fetch # draw the map round map.config.json from OpenStreetMap
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).