rw-spike · blank canvas

Blank Canvas

This theme is an empty shell with the look & feel of refined. Copy one of the prompts below into Claude Code to start building. The full playbook lives in docs/vibe-coding-rw-spike.md.

Short prompt

Leans on the guide file. Best when Claude can read the repo.

You are vibe-coding the "rw-spike" theme in this Astro + EmDash codebase.

First, read docs/vibe-coding-rw-spike.md end to end — it explains the theme system, the two
content models, how to add pages, and how to control the look. Then build only
what I describe, and only inside src/themes/rw-spike/ (you may add a new file
under src/pages/ for a brand-new route). Never touch the legacy or refined themes.

When you finish: commit, push to the git branch I am currently on (never main),
and tell me the URL to view it at with ?theme=rw-spike appended.

What I want:
<describe the page or change you want here>

Long prompt

Fully self-contained — all the context inline. Use when you can't rely on the guide file.

You are vibe-coding the "rw-spike" theme. Work carefully and stay in scope.

THE CODEBASE
- Astro (output: "server") + the EmDash CMS, deployed as a Cloudflare Worker
  (D1 database, R2 media, KV sessions).
- It ships multiple visual themes over the SAME content and the SAME URLs.
  Themes live in src/themes/<name>/ (legacy, refined, rw-spike).
- The active theme is chosen per request: ?theme=<name> > cookie
  gen10-active-theme > env SITE_THEME > legacy. Preview any theme on any URL by
  adding ?theme=rw-spike.
- Routes in src/pages/ are shared and theme-independent. Switching theme changes
  pixels only — never URLs or SEO. Do not fork routes per theme.

YOUR SANDBOX
- Work ONLY inside src/themes/rw-spike/ (plus, rarely, a new file in src/pages/
  for a new route). NEVER edit src/themes/legacy/ or src/themes/refined/.
- rw-spike has the look & feel of the "refined" theme via its OWN copies of
  tokens.css and Base.astro, so your edits here do not affect other themes.

TWO CONTENT MODELS
- Static-in-theme (use this for vibe pages): a page is an Astro component in
  src/themes/rw-spike/. Content lives in the theme's files, isolated to rw-spike,
  edited in code. This is the default for anything you build.
- Shared CMS content: the blog (and case studies) come from the EmDash database,
  shared across all themes. The blog is already wired (it reuses refined's blog
  views). Don't try to edit blog content in code — it lives in the CMS.

HOW THE THEME IS WIRED
- src/themes/rw-spike/index.ts exports { name, label, Base, routes }.
  routes = { home, page, post, caseStudy, blogList, caseStudyList }.
  home -> the Blank Canvas page; page/caseStudy/caseStudyList -> empty
  placeholder; post/blogList -> shared CMS blog (reused from refined).

HOW TO ADD A PAGE (theme-owned, isolated — do it this way)
- Replace the home: edit routes/BlankCanvas.astro, or point home at a new
  component in index.ts.
- A brand-new URL for rw-spike only: (1) create the component, e.g.
  src/themes/rw-spike/routes/Playground.astro; (2) register its slug in the
  staticPages map in src/themes/rw-spike/index.ts, e.g.
  staticPages: { "playground": Playground }  -> serves /playground; (3) optionally
  add a nav link in src/themes/rw-spike/Base.astro. The shared [...slug] route
  renders staticPages before any CMS lookup, with NO CMS entry and NO new file in
  src/pages/. Other themes 404 on that slug, so the page is rw-spike-only.
- Do NOT add files under src/pages/ for theme pages (that creates the URL for every
  theme), and don't edit the shared CMS "pages" collection (also all themes).

HOW TO CONTROL THE LOOK
- Tokens (colours --color-*, fonts --font-*, spacing --sp-*, type --text-*):
  src/themes/rw-spike/tokens.css.
- Header / nav / footer: src/themes/rw-spike/Base.astro.
- Per-component: scoped <style> blocks in each .astro file.

RULES
- Keep output: "server" (no getStaticPaths for CMS content).
- CMS images are { src, alt } objects — render with <Image image={...} /> from
  "emdash/ui".
- Call Astro.cache.set(cacheHint) on pages that query content.

RUN / VIEW / SHIP
- Local: npx emdash dev, then http://localhost:4321/?theme=rw-spike.
- Branch preview: push your branch; Cloudflare builds a preview URL — view it with
  ?theme=rw-spike appended (no Cloudflare account needed, just repo push access).
- When done: commit with a clear message, push to the branch I am currently on
  (NOT main — main is protected, PR-only), and tell me the URL to view it at with
  ?theme=rw-spike appended.

What I want:
<describe the page or change you want here>