fix: serve playground index.html as 404 fallback for OG tags

rbbydotdev · rbbydotdev · commit bc1aa2cd27f5 · 2026-04-10T03:19:00.000+07:00
Crawlers don't execute JS, so the old 404.html redirect meant they
never saw OG meta tags. Now the 404.html is a copy of the playground's
built index.html, which contains the OG tags directly.
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
@@ -55,19 +55,10 @@ jobs:
           mkdir -p _site/playground
           cp -r packages/playground/dist/* _site/playground/
 
-          # SPA fallback for playground client-side routes
-          cat > _site/404.html << 'FOUROHFOUR'
-          <!DOCTYPE html><html><head><meta charset="utf-8"><script>
-          var p = window.location.pathname;
-          if (p.startsWith('/spac/playground')) {
-            var base = '/spac/playground/';
-            var route = p.slice(base.length).split('?')[0];
-            var search = window.location.search;
-            var sep = search ? search + '&' : '?';
-            window.location.replace(base + sep + '__route=' + encodeURIComponent(route) + window.location.hash);
-          }
-          </script></head><body></body></html>
-          FOUROHFOUR
+          # SPA fallback — use the playground's index.html as 404 page.
+          # This gives crawlers the OG meta tags, and browsers get the SPA
+          # which reads the example from the URL path client-side.
+          cp _site/playground/index.html _site/404.html
 
       - uses: actions/upload-pages-artifact@v3
         with:
diff --git a/packages/playground/index.html b/packages/playground/index.html
@@ -13,7 +13,7 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="spac playground" />
     <meta name="twitter:description" content="Interactive TypeScript → OpenAPI explorer with hover docs and source maps" />
-    <meta name="twitter:image" content="__OG_IMAGE__" />
+    <meta name="twitter:image" content="/og/playground.png" />
   </head>
   <body>
     <style>html { color-scheme: dark; }</style>
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
@@ -16,18 +16,6 @@ const EXAMPLE_OPTIONS: Record<string, ExampleOption> = {
 }
 
 function getExampleFromPath(): string | null {
-  // Check for SPA fallback redirect (GitHub Pages 404.html sets __route param)
-  const params = new URLSearchParams(window.location.search)
-  const route = params.get('__route')
-  if (route) {
-    // Clean up the __route param from the URL
-    params.delete('__route')
-    const clean = params.toString()
-    const newUrl = `${baseUrl}${route}${clean ? '?' + clean : ''}${window.location.hash}`
-    window.history.replaceState({}, '', newUrl)
-    return route.split('/')[0] || null
-  }
-
   // Strip the Vite base URL before parsing
   const path = window.location.pathname.replace(baseUrl.replace(/\/$/, ''), '')
   const seg = path.split('/').filter(Boolean)[0]
