add preview links from CMS to website pages

[anareyna]

Associated issue

Part of #10
Closes #233

Description

This PR adds preview links to the DatoCMS sidebar so editors can click a link and immediately see the page they're working on: on localhost, the preview environment, or production. We are installing the Model Deployment Links plugin in DatoCMS which adds preview links to the sidebar. When an editor clicks one, it opens the page on the website.

This is a rebased and updated version of feat/preview-links, #233 updated with the current main branch

For Home and Not Found pages, the URL is simple and known (/{locale}/ and /{locale}/404). But for regular pages, the CMS only knows the page's slug (e.g. my-page), not the full url path, because pages can be nested (/en/parent/my-page/). To solve this, we added a reroute endpoint that looks up the page by slug and redirects to the correct url.

How it works

1. Editor clicks "Preview" in the CMS sidebar
2. Browser opens: /api/preview/enter/?secret=xxx&location=/api/reroute/page/en/my-page
3. Preview enter endpoint checks the secret, sets a preview cookie, redirects to location
4. Reroute endpoint looks up the page by slug, finds its full path
5. Redirects to: /en/parent/my-page/
6. Editor sees the page (including draft/unpublished content)

Changes from the original PR (feat/preview-links) #233

• Rebased onto current main (content layer, new routing, etc.)
• Changed reroute endpoint from query params (/api/reroute/page?locale=en&slug=foo) to path-based (/api/reroute/page/en/foo) — the query param approach had a bug where the DatoCMS plugin didn't URL-encode the location parameter, causing the slug to be lost
• Migration now creates the Preview API token automatically (no manual setup needed)
• Migration checks for existing plugin/token before creating duplicates
• Updated documentation

How to test

1. Create a new DatoCMS sandbox environment and run migrations (npm run cms:manage)

2. Start the dev server (npm run dev)

3. Open the CMS, go to the sandbox environment

4. Open a Page / Home / Not Found record and check the sidebar preview links:

   • Home > Opens /{locale}/ directly
   • Page > Opens /api/reroute/page/{locale}/{slug} : redirects to the full canonical URL (/en/parent/child/)
   • Not found > Opens /{locale}/404

5. Verify that:

   • Preview links work for all three models (via the Localhost build trigger)
   • Nested pages (with parent pages) resolve to the correct url

Note: Preview and Production sidebar links will only work once the code is deployed to those environments.

Checklist

• I have performed a self-review of my own code
• I have made sure that my PR is easy to review (not too big, includes comments)
• I have made updated relevant documentation files (in project README, docs/, etc)
• I have added a decision log entry if the change affects the architecture or changes a significant technology
• I have notified a reviewer

[cloudflare-workers-and-pages]

Deploying head-start with    Cloudflare Pages

Latest commit:	e9f24b0
Status:	✅  Deploy successful!
Preview URL:	https://e2bea9cb.head-start.pages.dev
Branch Preview URL:	https://feat-new-preview-links.head-start.pages.dev

View logs