The Harbor Ledger: a local news site with sections, bylines, a breaking banner, live updates and feeds
The website for a fictional local newsroom: a newspaper-style front page, section fronts, reporter pages, a breaking news banner switched...
For each Raytha use case we take a realistic brief, hand it to an AI agent with the raytha CLI, and publish what
comes out: the site, the files behind it, and a kit you can use to rebuild it yourself. This one is a website for
a surprise travel agency, the kind of company where you pick your dates and a budget and only find out where you
are going when you open an envelope at the airport.
The agent built it on a fresh Raytha 2.0.1 instance. Nobody opened the admin. Every template, content type, trip, review, page, form handler and menu went in through the CLI, from files in a directory.
What was built
Postmark Trips is a fictional surprise travel company in Chicago. Its site has:
- A home page with a sealed airmail envelope. Click it and it opens to show a real clue from a past trip ("Mountains straight out of a film, a lake as clear as glass..."). Click again to see where that clue led, and again to deal a new one. Below it: how it works in four steps, the trip tiers as stamps, three clue cards that flip over to reveal the destination, recent reviews and a gift call to action.
- A how it works page that walks through the whole process, from the questions you answer to the envelope you open at the gate, with what is and is not included.
- A trips and prices page with four tiers: Weekender, Classic, Long Haul and Wildcard. Each is a perforated postage stamp with its guide price per person, the number of nights, where it can take you and what is included, followed by a side-by-side comparison table. Prices are information only. Every trip is quoted by email, and nothing is bought on the site.
- A page for each tier with the full details and the past trips that were taken at that tier.
- Past reveals: 14 trips shown as postcards, with the clue that was in the envelope, who travelled, when, and how they reacted. You can narrow them by region (the Americas, Europe, Asia, Africa, Oceania), and each postcard opens a destination story.
- A reviews page with the average rating, a breakdown by stars and how many of the trips were gifts, all worked out from the reviews themselves.
- An FAQ grouped by topic: the basics, the surprise, prices and changes, gifts and life on the trip.
- A gift page that explains how giving a mystery trip works: a printed envelope with a clue and a planning code, and the person who receives it picks their own dates. It is described only, and links to the planner with the gift option already ticked.
- A trip planner form: who is travelling, the home airport, the month, the tier, the things you love and the places you have already been. Requests are checked on the server and saved as private drafts that only the agency can read. There are no payments anywhere on the site.
The design is airmail: warm paper, navy ink, red and blue chevron borders, mustard accents, wavy postmark lines behind the page titles, perforated stamp cards and postcards with a white border and a slight tilt. Headlines are set in Young Serif, a sturdy, friendly serif, the text is Manrope and labels and dates use Space Mono, like a franked stamp. The postcards and destination artwork are drawn by a script, so every image is license-free and no real people are shown. On a 390px phone the menu folds away, the stamps and postcards stack and the envelope still opens.
How the clue envelope works
The envelope is a few lines of JavaScript on the home page and a Raytha Function at clue.json. Raytha Functions
are small JavaScript programs that answer HTTP requests at a path you choose. This one reads the past reveals,
picks one at random and returns its clue, the destination, the country, when it was and a link to its story. So
the clues on the home page are always real ones from the reveals list, and when the agency adds a new trip in the
admin, its clue joins the pool on the next click. ?n= returns a particular clue, so one can be shared.
How the trip planner works
Raytha does not have a form builder, but Functions make one easy. The planner is an ordinary HTML form that posts to
a function at forms/plan. The function:
- Ignores the submission if a hidden "website" field is filled in. People never see that field; spam bots fill it.
- Trims every value to a sensible length and checks that there is a name, a valid email address and a home airport, that the tier is one of the four, that the number of travellers is between one and eight and, for a gift, that there is a recipient.
- Keeps only the interests it knows about from the checkboxes, and saves the request as a draft in a trip requests content type that has no public pages.
- Sends the visitor to a thank-you page that greets them by first name, with different wording for a gift, or back to the form with a short explanation of what to fix.
Features, and the Raytha features behind them
| Feature | How it is built |
|---|---|
| Tiers, reveals, reviews, FAQs and trip requests | Five content types from one schema document. Tiers have a checkbox for the most popular one and a color for their stamp; reveals use a dropdown for the region, a one-to-one relationship to their tier and an attachment for the postcard; reviews have a number rating and a checkbox for gifts. |
| 42 seed items | Content import from JSON Lines, with the postcards uploaded during the import and each reveal linked to its tier by name. |
| Trips and prices | A list view of tiers with a Liquid template that draws the stamps and builds the comparison table from the same items. |
| Past reveals and the region filter | A list view whose template reads ?region= and checks it against the known regions. |
| Rating and breakdown | The reviews list view template adds up the ratings and gifts in Liquid as the page renders. |
| FAQ by topic | A list view grouped by its topic dropdown. |
| The clue envelope | A Raytha Function at clue.json that reads the reveals through API_V1.GetContentItems. |
| Trip requests and gifts | A plain HTML form that posts to a Raytha Function, which checks the fields and calls API_V1.CreateContentItem to save a draft. The trip requests list view is not published. |
| Tier and reveal pages | Detail templates for each content type. A tier's page lists the reveals that point to it through the relationship. |
| Home, How it works, Gift, Plan and Thank you | Site pages built from 10 custom widget templates (hero with the envelope, steps, tier stamps, clue cards, reviews strip, split feature, call to action, page header, planner form, thank-you). |
| Navigation | Two menus: the main menu and a footer menu. |
The brief
This is the brief, as given to the agent.
Build a website for a surprise travel agency on a fresh Raytha instance with the
raythaCLI. No clicking around the admin. Use a fictional brand.
Look and feel
- A distinct design of its own. Display type that is well proportioned, not overly wide or squished.
- Responsive. It has to look good on a phone as well as a desktop.
Content and pages
- How it works, trip tiers and price ranges as information only, with no checkout.
- Past reveals and destination stories, reviews and an FAQ.
- A gift option, described. No payments.
Done means
raytha checkpasses with no broken routes.- Screenshots of the result on desktop and mobile.
- A kit in the examples repository that rebuilds the site on a fresh install.
How long it took
About 50 minutes of agent time, from an empty install to raytha check passing on every route, including the
visual design, the generated postcards, the two functions and writing all of the content.
Rebuild it yourself
The theme, schema, seed content, the artwork script, page definitions, functions and menus are in the
raytha-examples repository,
with a build.sh that rebuilds the whole site into any Raytha 2.x instance. Point it at your site with
RAYTHA_URL and RAYTHA_API_KEY and run it.
