The Harbor Ledger: a local news site with sections, bylines, a breaking banner, live updates and feeds

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

1. 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.
2. 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.
3. 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.
4. The feeds are two Raytha Functions with HTTP triggers at /feeds/latest.rss and /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

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 raytha CLI. 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 check passes 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.