Remove Root component from playground-preview - return minimal HTML

claude · claude · commit c21a824d8bf4 · 2025-10-25T05:55:10.000Z
The previous approach was completely wrong - it loaded the full Root component with Navbar, causing a nested website in the iframe and module resolution errors. Now returns a minimal HTML string directly: - No Root, no Navbar, no unnecessary components - Just critical color scheme script - Basic inline styles for dark/light mode - postMessage listener script - Clean preview area for user code This is what it should have been from the start. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/website/src/views/playground-preview.ts b/website/src/views/playground-preview.ts
@@ -1,13 +1,14 @@
-import {jsx, Raw} from "@b9g/crank/standalone";
-import {Root} from "../components/root.js";
-import type {ViewProps} from "../router.js";
+import {Raw} from "@b9g/crank/standalone";
+import {getColorSchemeScript} from "../utils/color-scheme.js";
 
 /**
- * Server-rendered view for playground preview iframes.
- * This loads as a proper server route with critical scripts,
+ * Minimal server-rendered view for playground preview iframes.
+ * This loads as a clean HTML page with critical scripts,
  * then receives and executes user code via postMessage.
  */
-export default function* PlaygroundPreview({context: {storage}}: ViewProps) {
+export default function PlaygroundPreview() {
+	const colorSchemeScript = getColorSchemeScript();
+
 	const scriptContent = `
 		// Listen for code from parent window
 		window.addEventListener("message", async (ev) => {
@@ -98,17 +99,38 @@ export default function* PlaygroundPreview({context: {storage}}: ViewProps) {
 		);
 	`;
 
-	yield jsx`
-		<${Root}
-			title="Playground Preview"
-			description="Preview iframe for Crank.js playground"
-			storage=${storage}
-			url="/playground-preview"
-		>
-			<div id="preview-root"></div>
-			<script type="module">
-				<${Raw} value=${scriptContent} />
-			</script>
-		<//>
+	return `
+		<!DOCTYPE html>
+		<html lang="en">
+		<head>
+			<meta charset="utf-8">
+			<meta name="viewport" content="width=device-width,initial-scale=1">
+			<script>${colorSchemeScript}</script>
+			<style>
+				html, body {
+					background-color: #0a0e1f;
+					color: #f5f9ff;
+					margin: 0;
+					padding: 0;
+					font-family: sans-serif;
+				}
+				html.color-scheme-light, html.color-scheme-light body {
+					background-color: #e7f4f5;
+					color: #0a0e1f;
+				}
+				:root {
+					--bg-color: #0a0e1f;
+					--text-color: #f5f9ff;
+				}
+				.color-scheme-light {
+					--bg-color: #e7f4f5;
+					--text-color: #0a0e1f;
+				}
+			</style>
+		</head>
+		<body>
+			<script type="module">${scriptContent}</script>
+		</body>
+		</html>
 	`;
 }
