The Alder Foundation: a foundation site with grant programs, grantees, impact stories and annual reports
The website for a fictional grantmaking foundation: grant programs with deadlines, a grantee database you can filter by program, year and...
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 the website for
a local newsroom: a front page, section fronts, reporter pages, a breaking news banner, live updates on a developing
story, a most-read list and RSS and JSON feeds.
The agent built it on a fresh Raytha 2.0.1 instance. Nobody opened the admin. Every template, content type, item, page, menu and function went in through the CLI, from files in a directory.
What was built
The Harbor Ledger is a fictional nonprofit newsroom covering Port Merrow, a coastal city on the night a nor'easter floods the waterfront. The site has:
- A front page laid out like a newspaper: a column of the latest headlines, the top story with its three newest live updates, two secondary stories, rows for City Hall, Harbor & Climate and Business, a dark most-read band, columns for Schools, Sports and Arts & Life, an opinion row and a box with the feeds.
- A red breaking banner across the top of every page. It appears when an editor ticks "Breaking" on any story, links to it, and shows a pulsing "Live" marker when the story has live updates.
- Article pages with the section, story type, headline, summary, a byline with the reporter's role, the date and time, minutes to read, a lead image with a caption, a dateline, a correction note when there is one, an author box, most read and more from the same section.
- Live updates on the storm story: ten timestamped posts, newest first, marked as key developments, official statements or corrections, each with its source. A "Key developments" button hides everything else. Corrections are posted as their own update instead of silently editing the earlier one.
- Section fronts for seven sections, and a latest news page that filters by section and story type
together (
/news?section=harbor-climate&type=news), grouped by day. - A page for every reporter, with their beat, bio, email and stories, and a masthead page listing the newsroom.
- A most-read page ranking the top ten stories with bars, and an honest note about where the numbers come from.
- An RSS feed and a JSON Feed of the latest stories, each with an optional
?section=filter. - An About page with the newsroom's standards and staff.
The design is a modern broadsheet: newsprint background, ink black, one signal red, thin column rules and a double rule under the masthead. Headlines and story text are set in Source Serif 4 and the interface in Inter. The 20 story illustrations are generated as SVG, so every image is license-free. On a 390px phone the section bar scrolls sideways, the front page becomes one column and the live updates stack.
How the breaking banner, live updates and most-read work
- Each article has a checkbox for "Breaking", another for "Has live updates" and one for "Top story". The
base layout asks for
get_content_items(ContentType="articles", Filter="breaking eq 'true'")on every page, so ticking the box puts the banner on the whole site and unticking it takes it down. There is nothing to deploy. - A live update is its own content type, with a relationship field to its story, a time stamp, an order number and a dropdown for its type. The article template pulls the updates for that story, newest first, and the front page shows the latest three under the top story. An editor posts an update by adding one content item.
- Most read is a list view sorted by a number field, "Reads in the last 7 days". Raytha does not count page views, so in this demo the numbers are seeded by hand. A real newsroom would have a nightly job copy them from its analytics into the field through the Raytha API. The page says so.
- The feeds are two Raytha Functions with HTTP triggers at
/feeds/latest.rssand/feeds/latest.json. They read the newest stories with the API, sort them by date and time stamp, and filter by section when the URL asks for one.
Features, and the Raytha features behind them
| Feature | How it is built |
|---|---|
| Sections, staff, articles and live updates | Four content types from one schema document. Articles use relationship fields to their section and author, a dropdown for story type, checkboxes for breaking, live and top story, a number field for reads, a date, an attachment for the lead image and rich text for the story. Live updates relate to their article. |
| 45 seed items | Content import from JSON Lines. Articles point at their section and author by name, and the illustrations are uploaded during the import. |
| Breaking banner | The base layout queries for a story with the breaking checkbox ticked, on every page. |
| Latest news with filters | A list view with a Liquid template that combines ?section= and ?type=. |
| Most read | A second list view on the same content type, sorted by the reads field. |
| Article, section, reporter and live update pages | Detail templates per content type that pull related items with get_content_items. |
| RSS and JSON Feed | Two Functions (JavaScript) with HTTP triggers at their own routes. |
| Front page and About | Site pages built from 10 custom widget templates (lead, section row, section columns, most read, opinion, feeds, text, page heading, standards, staff). |
| Navigation | Two menus: the section bar and a footer menu. The footer also lists the sections straight from the content. |
The brief
This is the brief, as given to the agent.
Build a website for a local news publication on a fresh Raytha instance with the
raythaCLI. No clicking around the admin.
Look and feel
- Visually impressive, with a design of its own. No wide display fonts.
- Responsive. It has to look good on a phone as well as a desktop.
Content and pages
- A front page with the top story, the latest headlines and section rows.
- Sections, each with its own front page, and a way to filter stories by section and story type.
- Bylines that link to a page for each reporter.
- A breaking news banner the newsroom can switch on for any story.
- Live updates on a developing story.
- A most-read list.
- RSS and JSON feeds.
Done means
raytha checkpasses with no broken routes.- Screenshots of the result on desktop and mobile, and a walkthrough video.
- A kit in the examples repository that rebuilds the site on a fresh install.
How long it took
About an hour of agent time, from an empty install to raytha check passing on every route, including the visual
design, the generated illustrations, the live updates, the feeds and writing all 45 items.
Rebuild it yourself
The theme, schema, seed content, illustration generator, functions, page definitions 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.
