|
1 | | -import {Raw} from "@b9g/crank/standalone"; |
| 1 | +import {jsx, Raw} from "@b9g/crank/standalone"; |
2 | 2 | import {getColorSchemeScript} from "../utils/color-scheme.js"; |
3 | 3 |
|
4 | 4 | /** |
5 | 5 | * Minimal server-rendered view for playground preview iframes. |
6 | 6 | * This loads as a clean HTML page with critical scripts, |
7 | 7 | * then receives and executes user code via postMessage. |
8 | 8 | */ |
9 | | -export default function PlaygroundPreview() { |
| 9 | +export default function* PlaygroundPreview() { |
10 | 10 | const colorSchemeScript = getColorSchemeScript(); |
11 | 11 |
|
12 | 12 | const scriptContent = ` |
@@ -99,38 +99,38 @@ export default function PlaygroundPreview() { |
99 | 99 | ); |
100 | 100 | `; |
101 | 101 |
|
102 | | - return ` |
103 | | - <!DOCTYPE html> |
104 | | - <html lang="en"> |
105 | | - <head> |
106 | | - <meta charset="utf-8"> |
107 | | - <meta name="viewport" content="width=device-width,initial-scale=1"> |
108 | | - <script>${colorSchemeScript}</script> |
109 | | - <style> |
110 | | - html, body { |
111 | | - background-color: #0a0e1f; |
112 | | - color: #f5f9ff; |
113 | | - margin: 0; |
114 | | - padding: 0; |
115 | | - font-family: sans-serif; |
116 | | - } |
117 | | - html.color-scheme-light, html.color-scheme-light body { |
118 | | - background-color: #e7f4f5; |
119 | | - color: #0a0e1f; |
120 | | - } |
121 | | - :root { |
122 | | - --bg-color: #0a0e1f; |
123 | | - --text-color: #f5f9ff; |
124 | | - } |
125 | | - .color-scheme-light { |
126 | | - --bg-color: #e7f4f5; |
127 | | - --text-color: #0a0e1f; |
128 | | - } |
129 | | - </style> |
130 | | - </head> |
131 | | - <body> |
132 | | - <script type="module">${scriptContent}</script> |
133 | | - </body> |
134 | | - </html> |
135 | | - `; |
| 102 | + const html = `<!DOCTYPE html> |
| 103 | +<html lang="en"> |
| 104 | +<head> |
| 105 | + <meta charset="utf-8"> |
| 106 | + <meta name="viewport" content="width=device-width,initial-scale=1"> |
| 107 | + <script>${colorSchemeScript}</script> |
| 108 | + <style> |
| 109 | + html, body { |
| 110 | + background-color: #0a0e1f; |
| 111 | + color: #f5f9ff; |
| 112 | + margin: 0; |
| 113 | + padding: 0; |
| 114 | + font-family: sans-serif; |
| 115 | + } |
| 116 | + html.color-scheme-light, html.color-scheme-light body { |
| 117 | + background-color: #e7f4f5; |
| 118 | + color: #0a0e1f; |
| 119 | + } |
| 120 | + :root { |
| 121 | + --bg-color: #0a0e1f; |
| 122 | + --text-color: #f5f9ff; |
| 123 | + } |
| 124 | + .color-scheme-light { |
| 125 | + --bg-color: #e7f4f5; |
| 126 | + --text-color: #0a0e1f; |
| 127 | + } |
| 128 | + </style> |
| 129 | +</head> |
| 130 | +<body> |
| 131 | + <script type="module">${scriptContent}</script> |
| 132 | +</body> |
| 133 | +</html>`; |
| 134 | + |
| 135 | + yield jsx`<${Raw} value=${html} />`; |
136 | 136 | } |
0 commit comments