# Multi-page site with shared header and nav A small business site with several pages — Home, About, Services, Contact — that share a header and navigation. The content is mostly static, so most pages don't need metadata. The trick is keeping the nav and footer consistent without server-side templating. This is the right pattern when: - The user wants more than one page but doesn't need data-driven content - They want a "real website" feel with a sticky nav - Each page is mostly hand-written content For one-page sites, see `simple-page.md`. For data-driven listings, see `property-listings.md`. ## Strategy: shared markup as a JS snippet There's no server-side templating, so each page contains its own copy of the header and nav. To make this manageable, define them once as a JS snippet in `/assets/layout.js` and call it from each page. When you update the layout, you update one file. ## The script ```python import requests import time API = "https://api.uat-beam.page" TOKEN = "" H = {"Authorization": f"Bearer {TOKEN}", "Content-Type": "application/json"} slug = "north-coast-bakery" # 1. Create the project requests.post(f"{API}/projects", headers=H, json={ "slug": slug, "context": "A small bakery in Cornwall with several pages: home, about, what we bake, find us. Static content, no daily updates.", }) time.sleep(2) # 2. Brand it requests.put(f"{API}/projects/{slug}/assets/tailwind-config.js", headers=H, json={ "content": ( 'tailwind.config = { theme: { extend: { ' 'colors: { brand: "#3a5a40", cream: "#fbf6ec" }, ' 'fontFamily: { serif: ["Lora", "serif"] } ' '} } }' ), }) requests.put(f"{API}/projects/{slug}/assets/styles.css", headers=H, json={ "content": "@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');", }) # 3. Define the shared header + footer as a JS snippet. Each page # loads /assets/layout.js and calls window.beamLayout.render(). layout_js = """ window.beamLayout = { render() { const path = window.location.pathname.replace(/\\/$/, ''); const linkClass = (href) => 'hover:text-cream transition' + (path === href ? ' text-cream font-bold' : ' text-white/80'); document.body.insertAdjacentHTML('afterbegin', `
North Coast Bakery
`); document.body.insertAdjacentHTML('beforeend', ` `); } }; window.addEventListener('DOMContentLoaded', () => window.beamLayout.render()); """ requests.put( f"{API}/projects/{slug}/assets/layout.js", headers=H, json={"content": layout_js}, ) # 4. A page-builder helper that wraps the unique content in a # consistent shell. The shell loads Tailwind, the brand config, the # shared layout JS, and styles.css. def page(title, body_html, page_slug=None): base_tag = f' \n' if page_slug else '' return f""" {base_tag} {title} — North Coast Bakery
{body_html}
""" # 5. Build each page # Home home_html = page("Home", '''

Real bread, by the sea.

A small bakery in the heart of Padstow, baking sourdough, pastries, and pies from local Cornish flour. Open Tuesday to Sunday from 7am.

See what we bake ''') requests.put(f"{API}/projects/{slug}/pages/_root/files/index.html", headers=H, json={"content": home_html}) # About about_html = page("About", '''

About us

We started baking in a converted fisherman's cottage in 2018. Two of us, one wood-fired oven, no plan beyond making bread we wanted to eat.

Eight years later, we're still in the same cottage, still using the same oven. We bake six days a week, from flour milled by a friend twenty miles inland.

''', page_slug="about") # About page needs to be created first requests.post(f"{API}/projects/{slug}/pages", headers=H, json={"slug": "about", "notes": "About us"}) time.sleep(1) requests.put(f"{API}/projects/{slug}/pages/about/files/index.html", headers=H, json={"content": about_html}) # What we bake bake_html = page("What we bake", '''

What we bake

We bake fresh every morning. When it's gone, it's gone — turn up early.

''', page_slug="what-we-bake") requests.post(f"{API}/projects/{slug}/pages", headers=H, json={"slug": "what-we-bake", "notes": "Bread and pastries"}) time.sleep(1) requests.put(f"{API}/projects/{slug}/pages/what-we-bake/files/index.html", headers=H, json={"content": bake_html}) # Find us find_html = page("Find us", '''

Find us

The Square, Padstow, Cornwall PL28 8AT

Open Tuesday to Sunday, 7am–4pm. Closed Monday.

Getting here

''', page_slug="find-us") requests.post(f"{API}/projects/{slug}/pages", headers=H, json={"slug": "find-us", "notes": "Address and directions"}) time.sleep(1) requests.put(f"{API}/projects/{slug}/pages/find-us/files/index.html", headers=H, json={"content": find_html}) print(f"Done. Live at https://{slug}.uat-beam.page") ``` ## Why a JS snippet for the layout? The simplest alternative is to copy-paste the header and footer into every page. That works but creates a maintenance problem — change the nav and you have to update every file. The JS snippet approach: - One source of truth at `/assets/layout.js` - Every page loads it via `