Redesign the playground with shared glass controls - #2
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3e35c7f2f3
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| return `'use client';\n\n${clickable ? "import { useState } from 'react';\n" : ""}import { LiquidGlass } from 'react-glaze';\n\nexport function GlassExample() {\n${clickable ? " const [clicks, setClicks] = useState(0);\n" : ""} return (\n <>\n <LiquidGlass\n ${props.join("\n ")}\n style={{\n${styleCode}\n }}${clickable ? "\n onClick={() => setClicks(n => n + 1)}" : ""}\n >\n ${content}\n </LiquidGlass>${clickable ? '\n <p aria-live="polite">Clicks: {clicks}</p>' : ""}\n </>\n );\n}`; | ||
| const presentation = | ||
| state.example === "landing-pill" | ||
| ? `\n <style>{${JSON.stringify('@font-face { font-family: "Glaze Inter"; src: url("https://react-glaze.app/fonts/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }\n' + pillResponsiveCss)}}</style>` |
There was a problem hiding this comment.
When this generated JSX is pasted into an application hosted anywhere other than react-glaze.app, the @font-face request is cross-origin and browsers require the font response to grant CORS access. The repository's Next headers only cover the two historical HTML routes and do not add Access-Control-Allow-Origin for /fonts, so the request is rejected and the exported pill falls back to Helvetica instead of reproducing the advertised landing presentation. Export a consumer-owned font path or configure the font response for cross-origin use.
Useful? React with 👍 / 👎.
This branch was successfully deployed
1 participant
The playground now follows the landing page's typography, neutral palette and material artwork. Soft forms, Hard light and Small world share their definitions with the landing, and the landing pill is both the fresh default and a reusable preset.
Shared glass buttons and native disclosure controls add subtle press and copy feedback. The editor preserves existing configuration URLs, manual save/load/delete, uploads, comparison tools, dragging and JSX/JSON export. Accessibility refinements cover keyboard focus, selected-state checks, persistent announcements, solid preference fallbacks and enlarged-text layouts.
Validation: 74 package tests and 27 demo tests, public/workspace type checks, lint and production builds passed. Browser checks covered the editing/export/persistence flows, all three scenes, light/dark and accessibility preferences, 320px reflow and 200% text sizing. The demo continues to consume react-glaze 0.1.2.