The big idea: the page you see is assembled from two separate sources that meet at the last second in the visitor's browser. The words come from an author's document. The ships come from a data feed. A small piece of code called a "block" fetches both and glues them together.
The players — who does what
📝 The Document
Where an author types the page heading & settings. Lives in an online editor (da.live) — like Google Docs for the website.
🧩 The "Cruise Ships" Block
Reusable code that knows how to draw a grid of ship cards. Holds no ships itself — it's the machine, not the data.
🚢 The Ship Feed
A data file listing every ship — name, class, photo, link. The single source of truth for the fleet.
🖥️ The Visitor's Browser
Where the words and the ships are combined into the finished page people actually see.
How the pieces connect
The steps, start to finish
-
Build the "Cruise Ships" block Developer · done
The code that turns raw ship data into a grid of cards. It's just the machine — it contains no ships.
-
Point it at a data file Developer · done
Today it reads a sample file (
sample-ships.json) with all 11 ships. Later we swap in the real feed — the block doesn't care where the data comes from. -
Register the block so authors can find it Developer · done
"Cruise Ships" now appears in the author's menu of blocks, with a form for the heading, subheading, and (optional) feed URL.
-
Create the actual page
In da.live, someone creates the page at
/en/us/cruise-ships, drops in the block, types the heading, and hits Publish. No developer needed. -
A visitor opens the page — everything connects Automatic
EDS grabs the author's words, runs the block, the block fetches the ship feed, merges the two, and draws the finished page — all in a fraction of a second.
Why this approach is nice
✏️ Authors stay independent
Change wording anytime without calling a developer.
🔄 The fleet updates itself
New ship or new photo? Update the feed once — every page using it updates automatically.
➕ Easy to add more sources
Live pricing from the booking system can plug in later the same way, no rebuild.
See it yourself
Run nvm use then aem up --html-folder drafts, and open
http://localhost:3000/en/us/cruise-ships. You'll see the heading (from the
document) above the grid of 11 ships (from the feed) — the two sources connected into one page.