Switch playground and content links to clean /play routes

Author: a-baran-orhan

scratch_capture_deadlift.js

@@ -34,7 +34,7 @@ async function capture() {
   const page = await browser.newPage({ viewport: { width: 1024, height: 768 } });
 
   console.log("Navigating to Deadlift...");
-  await page.goto(`${origin}/play.html#doc=deadlift`, { waitUntil: "load" });
+  await page.goto(`${origin}/play/deadlift`, { waitUntil: "load" });
   await page.reload({ waitUntil: "load" });
   await page.waitForFunction(() => window.__posecodeViewer?.duration > 0, null, { timeout: 30000 });
   await page.waitForTimeout(2000); // let auto-camera settle

scripts/capture-gifs.mjs

@@ -66,7 +66,7 @@ page.on("pageerror", (e) => console.error("[page]", e.message));
 
 for (const t of targets) {
   const [w, h] = t.size;
-  await page.goto(`${origin}/play.html#doc=${t.id}`, { waitUntil: "load" });
+  await page.goto(`${origin}/play/${t.id}`, { waitUntil: "load" });
   await page.reload({ waitUntil: "load" });
   await page.waitForFunction(() => window.__posecodeViewer?.duration > 0, null, {
     timeout: 60000,

scripts/generate-content-pages.mjs

@@ -87,7 +87,6 @@ async function main() {
     const steps = parseSteps(p.source);
     const repeat = parseRepeat(p.source);
     const name = slugTitle(p.label);
-    const hash = `#doc=${p.id}`;
     const url = `/moves/${p.id}.html`;
 
     const stepsHtml = steps
@@ -129,7 +128,7 @@ async function main() {
         that LLMs like ChatGPT, Claude, and Gemini can write to describe human movement as text.
         Every joint angle below is hard-clamped to a safe range of motion.</p>
 
-      <a class="btn" href="/play.html${hash}">▶ Open ${esc(name)} in the playground →</a>
+      <a class="btn" href="/play/${p.id}">▶ Open ${esc(name)} in the playground →</a>
 
       <h2>How to do it</h2>
       <ol class="steps">
@@ -189,7 +188,7 @@ ${stepsHtml}
       <p>Every example in the Posecode library, grouped by practice. Each page shows the phases,
         coaching cues, and the exact <code>.posecode</code> source, plus a live 3D playback.
         Prefer to search and filter interactively? Use the
-        <a href="/play.html">playground's movement library</a> instead.</p>
+        <a href="/play">playground's movement library</a> instead.</p>
       ${groupsHtml}
     `,
   });

scripts/lib/shell.mjs

@@ -140,7 +140,7 @@ export function pageShell({ title, description, canonicalPath, jsonLd, bodyHtml,
       <div class="wrap">
         <a class="brand" href="/"><svg class="logo" aria-hidden="true" viewBox="0 0 100 100" width="18" height="18" fill="none"><g stroke="currentColor" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"><path d="M50 34V55"/><path d="M50 35L34 26L23 15"/><path d="M50 35L66 26L77 15"/><path d="M50 54L36 72L28 88"/><path d="M50 54L64 72L72 88"/></g><circle cx="50" cy="20" r="10" fill="currentColor"/></svg> Posecode</a>
         <nav class="links" aria-label="Primary">
-          <a href="/play.html">Playground</a>
+          <a href="/play">Playground</a>
           <a href="/moves/">Movement library</a>
           <a href="/spec.html">Language spec</a>
           <a href="/llm-guide.html">LLM guide</a>

vercel.json

@@ -4,5 +4,12 @@
   "installCommand": "npm install",
   "buildCommand": "npm run build -w playground",
   "outputDirectory": "playground/dist",
-  "rewrites": [{ "source": "/play", "destination": "/play.html" }]
+  "redirects": [
+    { "source": "/index.html", "destination": "/", "permanent": true },
+    { "source": "/play.html", "destination": "/play", "permanent": true }
+  ],
+  "rewrites": [
+    { "source": "/play", "destination": "/play.html" },
+    { "source": "/play/:movement", "destination": "/play.html" }
+  ]
 }