Repository navigation
feat(web): new-copy homepage, what-is-baml at /, live explorers, techdocs - #4351
Merged
Merged
Conversation
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Co-Authored-By: Claude Opus 4.7 <[email protected]>
Co-Authored-By: Claude Opus 4.7 <[email protected]>
# Conflicts: # .vscode/settings.json # pnpm-lock.yaml # typescript2/pnpm-lock.yaml
Replaces the inline ~870-LOC BamlPlayground hero embed with a worker-hosted
runtime + ExecutionPanel from @b/pkg-playground (matching the pattern in
app-promptfiddle). Picks up the Run/Graph/Prompt/cURL tabs, function/test
sidebar, pluggable result renderers, and the API-keys dialog for free.
- Worker (app-website/playground/baml-worker.ts): adapts promptfiddle's
worker minus the LSP MessagePort path; the website doesn't host Monaco,
so the runtime LSP handshake is driven directly. Stubs input/exec/shell
callbacks (canary additions for read_input + shell stdlib) so they fail
fast — the marketing playground intentionally doesn't expose them.
- BamlPlayground.tsx (~150 LOC): spawns the worker, waits for ready,
wraps in WorkerRuntimePort, hands to <ExecutionPanel>. Auto-respawns
the worker on error so a runtime panic doesn't kill the page; ExecutionPanel
remounts cleanly via connectionVersion. Debounces filesChanged 200ms to
coalesce keystrokes.
- BamlEditor.tsx: simplified to read-only Shiki-highlighted view by default
with a floating "Remove Training Wheels" toggle to enable the full
textarea-overlay edit mode. Drops the inline editable-region machinery.
- Hero (variant-home.tsx): inline expanded playground for desktop only
(lg+); mobile shows a static screenshot CTA so phones don't ship the
worker + WASM + ELKjs bundle.
- Replaces local proto/{encode,decode,types,generated} with @b/pkg-proto.
- Replaces gitignored public/wasm/* with workspace @b/bridge_wasm link.
- Drops EditorTerminalSplit + PlaygroundTerminal (no longer used).
- Globals.css: registers vsc-* Tailwind tokens and a .baml-playground-root
scope that overrides shadcn tokens to dark values for the playground
subtree only — no theme bleed into the cream marketing site.
pkg-playground tweaks:
- Add 'use client' at the index entry (Next 15 RSC compat).
- ExecutionPanel: fix sub-function call separator (`Fn.render_prompt` →
`Fn$render_prompt`) so the Prompt/cURL tabs hit the actual runtime names.
- Add initialArgsJson prop so consumers can pre-fill the args input.
- Update worker-protocol doc to reflect $ separator.
Notes:
- Default BAML uses new-style `test "name" { Fn(...) }` blocks; old-style
`test Name { functions [...] args {...} }` parses but the runtime never
registers them into $init_test_<file_id>, so collection returns Null.
- @b/bridge_wasm is rebuilt from baml_language/crates/bridge_wasm and
picks up the canary fix for collect_tests returning BexExternalValue::Null
(no-tests case) cleanly instead of corrupting WASM memory.
`pnpm install` reconciles the lockfile against the package.json updates brought in by the canary merge (nodemon, just-bash, vitest, jotai in pkg-playground deps) plus the website's new @b/pkg-playground / @b/pkg-proto / @b/bridge_wasm workspace deps.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
typescript2/app-website/app/baml-intro/_components/TryBaml.tsx (1)
205-352: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winMove bridge setup configuration to
app/_lib/config.tsx.
BRIDGES,BRIDGE_TARGETS, andPROMPTare static site configuration. Export them fromapp/_lib/config.tsx. Keep component-specific rendering helpers such asbridgeLinesin this module.As per coding guidelines, keep site configuration and constants in
/app/_lib/config.tsx.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/baml-intro/_components/TryBaml.tsx` around lines 205 - 352, Move the static bridge configuration constants BRIDGES, BRIDGE_TARGETS, and PROMPT from TryBaml.tsx into app/_lib/config.tsx and export them for reuse. Keep the component-specific bridgeLines helper in TryBaml.tsx, and update its imports or references to use the relocated configuration without changing behavior.Source: Coding guidelines
🧹 Nitpick comments (13)
typescript2/app-website/app/baml-intro/_components/try-baml.module.css (1)
141-178: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse theme properties for the new colors.
Move the
.nextand.outcolor values to CSS custom properties. Override those properties through the existingnext-themesdark-mode selector. The hard-coded values do not adapt when the visitor changes theme.As per coding guidelines, use TailwindCSS v4 and CSS custom properties for theming; support dark mode through
next-themes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/baml-intro/_components/try-baml.module.css` around lines 141 - 178, Update the .next and .out color declarations to use CSS custom properties, define suitable light-theme defaults, and override those properties in the existing next-themes dark-mode selector. Keep the current visual colors for light mode and ensure both selectors respond when the visitor switches themes, following the project’s TailwindCSS v4 theming conventions.Source: Coding guidelines
typescript2/app-website/app/what-is-baml/_components/room-rebus.tsx (1)
53-66: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win
aria-labelon a<p>is not reliably exposed.A
<p>maps to theparagraphrole, and ARIA prohibits naming that role. Browsers and screen readers may drop thearia-label. The decorative letters are inside anaria-hiddenspan, so the accessible output can reduce to the caption text alone.Add
role="img"so the label applies to a role that supports naming.🐛 Proposed fix
- <p aria-label="Elephant in the room" className={className} ref={ref}> + <p + aria-label="Elephants in the room" + className={className} + ref={ref} + role="img" + >Note that
role="img"hides descendant content from assistive technology. If you want the caption announced separately, move it outside the labelled element.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/room-rebus.tsx` around lines 53 - 66, Add role="img" to the paragraph element in the room-rebus component so its existing aria-label is reliably exposed to assistive technology. Keep the decorative aria-hidden content and current caption structure unchanged.typescript2/app-website/app/what-is-baml/page.tsx (3)
15-17: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUpdate the stale copy-source reference.
The comment names
EXPLORE_COPY_DRAFT.md. This PR addstypescript2/app-website/EXAMPLES_SPEC.mdas the brief. The comment also states that every explorer is a placeholder, butCodeExplorerandLostEventsnow render real content. Update both statements so the next reader is not misdirected.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 15 - 17, Update the staging-page comment to reference EXAMPLES_SPEC.md as the copy/spec source instead of EXPLORE_COPY_DRAFT.md, and revise the explorer description to distinguish the real CodeExplorer and LostEvents content from remaining placeholders.
624-704: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRemove the unused placeholder components and the data they consume.
MatrixPlaceholderandPlaceholderare both unreachable. Each one carries abiome-ignore lint/correctness/noUnusedVariablessuppression. The coding guidelines prohibit unused variables. The suppression hides the violation instead of resolving it.Two data members become dead with them:
Section['matrix']and thematrixblock on theadoptingsection (Lines 275-288) are read only byMatrixPlaceholder.Section['num']is never read by any renderer.Git history preserves the parked code, so deletion is safe. If you want to keep the matrix design in the tree, move it to
EXAMPLES_SPEC.mdinstead.As per coding guidelines: "Do not leave unused imports or variables; Biome treats them as errors."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 624 - 704, Delete the unreachable MatrixPlaceholder and Placeholder components, including their Biome suppressions. Remove the Section['matrix'] and Section['num'] members and the adopting section’s matrix block, along with any data or imports left unused by these deletions. Do not retain placeholder rendering code or unused-variable exceptions.Source: Coding guidelines
709-710: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRender the CSS as
<style>children and drop the ESLint directive.
CSSis a static template literal built from local constants, so there is no injection path. The app uses React 19 (19.2.3), so<style>{CSS}</style>is acceptable and avoids thedangerouslySetInnerHTMLcall and unused ESLint directive.♻️ Proposed change
- {/* eslint-disable-next-line react/no-danger */} - <style dangerouslySetInnerHTML={{ __html: CSS }} /> + <style>{CSS}</style>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 709 - 710, Update the style element in the what-is-baml page to render the static CSS value through normal React children as `<style>{CSS}</style>`, and remove the adjacent react/no-danger ESLint directive.Source: Linters/SAST tools
typescript2/app-website/EXAMPLES_SPEC.md (1)
347-358: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueReplace machine-local reference paths and confirm the route names.
Lines 355-356 point to
~/Downloads/all-beps 3/.... Other contributors cannot resolve these paths. Move the BEP documents into the repository or link to a shared location.Also, the PR description states that
/explorenow redirects to/and the legacy article lives at/explore-legacy. Line 348 still refers to the playground on/explore. Update the route references so the spec matches the shipped routes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/EXAMPLES_SPEC.md` around lines 347 - 358, Replace the machine-local BEP references in EXAMPLES_SPEC.md with repository-relative or shared links, moving the documents into the repository if needed. Update the playground route reference from /explore to the shipped route, and ensure any legacy article reference uses /explore-legacy, matching the current redirect behavior.typescript2/app-website/app/what-is-baml/_components/acquirer.tsx (1)
13-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winStop the name cycle under
prefers-reduced-motion: reduce.The CSS in
page.tsx(Lines 509-512) disables the fade transition for reduced motion, but the text still changes every 1.8 s indefinitely. WCAG 2.2.2 asks for a way to stop automatically updating content that runs longer than five seconds.Read the media query in the effect and skip scheduling the timers when the visitor requests reduced motion.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/acquirer.tsx` around lines 13 - 28, Update the useEffect in Acquirer to check the prefers-reduced-motion media query before scheduling HOLD_MS and FADE_MS timers; when reduced motion is requested, skip the name-cycle timers and preserve the current name. Keep the existing timer cleanup and cycling behavior unchanged for visitors without that preference.typescript2/app-website/app/what-is-baml/_components/lost-events.tsx (1)
50-78: 🚀 Performance & Scalability | 🔵 Trivial | 🏗️ Heavy liftPause the ripple animation when the field is off screen.
stepruns every 110 ms and callssetFrame. Each frame re-renders 162<span>elements with a new inlinestyleobject. The page mounts twoFieldinstances, so React reconciles about 324 elements roughly nine times per second. The timer starts at mount and never stops, even when the section is scrolled out of view or the tab is hidden.The observability section now leads the page, so this cost applies on first paint. Gate the interval on an
IntersectionObserver, and clear it ondocument.visibilitychange.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/lost-events.tsx` around lines 50 - 78, Update the effect containing the step function and timerRef interval to start the animation only while the Field element is intersecting the viewport, using an IntersectionObserver. Also stop and clear the interval when document.visibilityState is hidden via document.visibilitychange, restarting it only when the field is visible again; ensure observers, listeners, and timers are cleaned up on unmount.typescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsx (1)
12-35: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winThrottle the scroll handler and hide the inactive link from assistive technology.
Two points:
updateruns on everyscrollevent. It callsgetElementByIdandgetBoundingClientRect, which forces a synchronous layout each time. The page also mounts Monaco editors and an animated dot field, so this adds measurable scroll jank. Coalesce the work withrequestAnimationFrame, or replace the whole handler with anIntersectionObserveron#try-baml.- When
onisfalsethe link is invisible and unfocusable, but it stays in the accessibility tree. A screen reader still announces a "Try BAML" link. Addaria-hidden={!on}.♻️ Proposed change
useEffect(() => { + let frame = 0; const update = () => { const target = document.getElementById('try-baml'); const targetInView = target ? target.getBoundingClientRect().top < window.innerHeight : false; setOn(window.scrollY > 700 && !targetInView); }; + const schedule = () => { + if (frame) return; + frame = requestAnimationFrame(() => { + frame = 0; + update(); + }); + }; update(); - window.addEventListener('scroll', update, { passive: true }); - window.addEventListener('resize', update, { passive: true }); + window.addEventListener('scroll', schedule, { passive: true }); + window.addEventListener('resize', schedule, { passive: true }); return () => { - window.removeEventListener('scroll', update); - window.removeEventListener('resize', update); + if (frame) cancelAnimationFrame(frame); + window.removeEventListener('scroll', schedule); + window.removeEventListener('resize', schedule); }; }, []);<a + aria-hidden={!on} className={`wib-fab${on ? ' is-on' : ''}`} href="`#try-baml`" tabIndex={on ? undefined : -1} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsx` around lines 12 - 35, Update the useEffect scroll/resize handling to coalesce update work with requestAnimationFrame, ensuring pending animation frames are canceled during cleanup while preserving the existing visibility calculation. Add aria-hidden={!on} to the FAB anchor so the inactive link is excluded from assistive technology.typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx (3)
443-457: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winComplete the tablist semantics.
The tab row declares
role="tablist"androle="tab", but the panel container on Line 457 has norole="tabpanel". The tabs also have noid/aria-controlspairing and no arrow-key navigation. Screen readers announce a tab list that controls nothing.Add
idandaria-controlson each tab, give.wib-x-bodyrole="tabpanel"with a matchingaria-labelledby, and settabIndex={i === active ? 0 : -1}with arrow-key handling. If full tab semantics are not wanted, remove theroleattributes and keep plain buttons.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 443 - 457, Complete the tab semantics in the panels map and .wib-x-body: assign stable matching ids, aria-controls, and aria-labelledby values, add role="tabpanel", and set tabIndex so only the active tab is focusable. Implement ArrowLeft and ArrowRight keyboard handling to move the active tab with appropriate wraparound; otherwise remove the tab roles instead of leaving incomplete semantics.
312-334: 🚀 Performance & Scalability | 🔵 Trivial | 🏗️ Heavy liftDefer off-screen Monaco editor mounts.
BamlEditorLazywithssr: falseonly defers client-side loading; it still mountsBamlEditorwhen the block renders. Since everyfnblock becomes a separate Monaco editor with isolated projects/workers, gate the mount on visibility so off-screen sections do not create editors unless needed.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 312 - 334, Update the editor rendering in the component containing the expand handler and BamlEditor instance to use visibility-based lazy mounting: observe the wib-x-editorframe or its containing block and render BamlEditor only after that block enters or approaches the viewport. Preserve the existing code, codeLens, maxHeight, and expand behavior, while ensuring off-screen blocks do not create Monaco editors or isolated workers.
241-275: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winShare one Shiki highlighter across explorers.
Each
CodeExplorermounts a separateuseTokenizedhook, and this page renders one explorer for each tabbed section.createHighlightertherefore creates a new highlighter each time, loading the Shiki engine and the required grammars again. Cache a module-level promise, or use Shiki’s singleton helper if the project bundle supports it.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 241 - 275, Update the useTokenized hook to reuse a module-level promise or supported Shiki singleton for the createHighlighter call, so all CodeExplorer instances share one highlighter and grammar-loading operation. Preserve the existing tokenization, cancellation guard, and fallback behavior.typescript2/app-website/app/what-is-baml/_components/dropped-store.ts (1)
34-40: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winStop the interval when the last listener unsubscribes.
subscribeDroppedstarts the interval but the returned cleanup only removes the listener. After the visitor navigates to another route, both widgets unmount and the interval keeps running and callingnotify()on an empty set for the rest of the session.The header comment justifies keeping the timer while a widget is off screen. That case is covered by React keeping the subscription alive. It does not require the timer to survive unmount of every listener.
♻️ Proposed change
export function subscribeDropped(fn: () => void) { listeners.add(fn); if (!timer) timer = setInterval(tick, EVERY_MS); return () => { listeners.delete(fn); + if (listeners.size === 0 && timer) { + clearInterval(timer); + timer = null; + } }; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/dropped-store.ts` around lines 34 - 40, Update the cleanup function returned by subscribeDropped to stop and clear the interval when listeners becomes empty after deleting the unsubscribed callback. Preserve the existing timer behavior while at least one listener remains, and ensure future subscriptions can start a new interval.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@typescript2/app-website/app/what-is-baml/_components/acquirer.tsx`:
- Around line 17-28: Update the useEffect timeout lifecycle so the inner swap
timeout is stored in a scope accessible to the effect cleanup, then clear it
alongside hold on dependency changes or unmount; do not rely on the setTimeout
callback’s return value, while preserving the existing fade and index-update
timing.
In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx`:
- Around line 335-366: Update the expanded playground flow in the component
rendering LivePlayground to support Escape dismissal, dialog semantics, and
modal focus behavior: add role="dialog" and aria-modal="true" to the overlay,
move focus into it when expanded, restore focus to the expand button on close
using refs, and lock background scrolling while expanded. Remove the overlay
from the background tab order while open, and ensure Escape calls
setExpanded(false) without affecting the existing collapsed rendering.
In `@typescript2/app-website/app/what-is-baml/_components/lost-events.tsx`:
- Around line 183-186: Update the dropped-count interpolation in the lev-note
paragraph to format dropped with the same en-US toLocaleString behavior used by
DroppedFootnote, keeping the surrounding message unchanged.
In `@typescript2/app-website/components/footer-section.tsx`:
- Line 31: Update the footer text near “Basically a made up language” to use the
approved spelling and capitalization “Basically a Made-up Language,” unless the
variant is intentionally required.
In `@typescript2/app-website/vercel.json`:
- Line 6: Update the git.deploymentEnabled configuration in vercel.json to
explicitly enable the production branch, such as main, master, or the configured
production branch, while preserving the existing dhilan/website-v1 rule;
alternatively remove the catch-all "**": false rule so production merges
continue to create Vercel deployments.
---
Outside diff comments:
In `@typescript2/app-website/app/baml-intro/_components/TryBaml.tsx`:
- Around line 205-352: Move the static bridge configuration constants BRIDGES,
BRIDGE_TARGETS, and PROMPT from TryBaml.tsx into app/_lib/config.tsx and export
them for reuse. Keep the component-specific bridgeLines helper in TryBaml.tsx,
and update its imports or references to use the relocated configuration without
changing behavior.
---
Nitpick comments:
In `@typescript2/app-website/app/baml-intro/_components/try-baml.module.css`:
- Around line 141-178: Update the .next and .out color declarations to use CSS
custom properties, define suitable light-theme defaults, and override those
properties in the existing next-themes dark-mode selector. Keep the current
visual colors for light mode and ensure both selectors respond when the visitor
switches themes, following the project’s TailwindCSS v4 theming conventions.
In `@typescript2/app-website/app/what-is-baml/_components/acquirer.tsx`:
- Around line 13-28: Update the useEffect in Acquirer to check the
prefers-reduced-motion media query before scheduling HOLD_MS and FADE_MS timers;
when reduced motion is requested, skip the name-cycle timers and preserve the
current name. Keep the existing timer cleanup and cycling behavior unchanged for
visitors without that preference.
In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx`:
- Around line 443-457: Complete the tab semantics in the panels map and
.wib-x-body: assign stable matching ids, aria-controls, and aria-labelledby
values, add role="tabpanel", and set tabIndex so only the active tab is
focusable. Implement ArrowLeft and ArrowRight keyboard handling to move the
active tab with appropriate wraparound; otherwise remove the tab roles instead
of leaving incomplete semantics.
- Around line 312-334: Update the editor rendering in the component containing
the expand handler and BamlEditor instance to use visibility-based lazy
mounting: observe the wib-x-editorframe or its containing block and render
BamlEditor only after that block enters or approaches the viewport. Preserve the
existing code, codeLens, maxHeight, and expand behavior, while ensuring
off-screen blocks do not create Monaco editors or isolated workers.
- Around line 241-275: Update the useTokenized hook to reuse a module-level
promise or supported Shiki singleton for the createHighlighter call, so all
CodeExplorer instances share one highlighter and grammar-loading operation.
Preserve the existing tokenization, cancellation guard, and fallback behavior.
In `@typescript2/app-website/app/what-is-baml/_components/dropped-store.ts`:
- Around line 34-40: Update the cleanup function returned by subscribeDropped to
stop and clear the interval when listeners becomes empty after deleting the
unsubscribed callback. Preserve the existing timer behavior while at least one
listener remains, and ensure future subscriptions can start a new interval.
In `@typescript2/app-website/app/what-is-baml/_components/lost-events.tsx`:
- Around line 50-78: Update the effect containing the step function and timerRef
interval to start the animation only while the Field element is intersecting the
viewport, using an IntersectionObserver. Also stop and clear the interval when
document.visibilityState is hidden via document.visibilitychange, restarting it
only when the field is visible again; ensure observers, listeners, and timers
are cleaned up on unmount.
In `@typescript2/app-website/app/what-is-baml/_components/room-rebus.tsx`:
- Around line 53-66: Add role="img" to the paragraph element in the room-rebus
component so its existing aria-label is reliably exposed to assistive
technology. Keep the decorative aria-hidden content and current caption
structure unchanged.
In `@typescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsx`:
- Around line 12-35: Update the useEffect scroll/resize handling to coalesce
update work with requestAnimationFrame, ensuring pending animation frames are
canceled during cleanup while preserving the existing visibility calculation.
Add aria-hidden={!on} to the FAB anchor so the inactive link is excluded from
assistive technology.
In `@typescript2/app-website/app/what-is-baml/page.tsx`:
- Around line 15-17: Update the staging-page comment to reference
EXAMPLES_SPEC.md as the copy/spec source instead of EXPLORE_COPY_DRAFT.md, and
revise the explorer description to distinguish the real CodeExplorer and
LostEvents content from remaining placeholders.
- Around line 624-704: Delete the unreachable MatrixPlaceholder and Placeholder
components, including their Biome suppressions. Remove the Section['matrix'] and
Section['num'] members and the adopting section’s matrix block, along with any
data or imports left unused by these deletions. Do not retain placeholder
rendering code or unused-variable exceptions.
- Around line 709-710: Update the style element in the what-is-baml page to
render the static CSS value through normal React children as
`<style>{CSS}</style>`, and remove the adjacent react/no-danger ESLint
directive.
In `@typescript2/app-website/EXAMPLES_SPEC.md`:
- Around line 347-358: Replace the machine-local BEP references in
EXAMPLES_SPEC.md with repository-relative or shared links, moving the documents
into the repository if needed. Update the playground route reference from
/explore to the shipped route, and ensure any legacy article reference uses
/explore-legacy, matching the current redirect behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: fb157b6d-3698-4f80-b297-47e296441ae4
⛔ Files ignored due to path filters (21)
typescript2/app-website/public/elephants/elephant-adoption.pngis excluded by!**/*.pngtypescript2/app-website/public/elephants/elephant-models.pngis excluded by!**/*.pngtypescript2/app-website/public/elephants/elephant-money.pngis excluded by!**/*.pngtypescript2/app-website/public/elephants/elephant-packages.pngis excluded by!**/*.pngtypescript2/app-website/public/logos/apple.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/cplusplus.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/csharp.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/dotnet.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/go.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/java.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/kotlin.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/linux.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/nodejs.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/php.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/python.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/ruby.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/rust.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/swift.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/typescript.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/wasm.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/windows.svgis excluded by!**/*.svg
📒 Files selected for processing (26)
README.mdtypescript2/app-website/EXAMPLES_SPEC.mdtypescript2/app-website/app/baml-intro/_components/TryBaml.tsxtypescript2/app-website/app/baml-intro/_components/snippets.tstypescript2/app-website/app/baml-intro/_components/try-baml.module.csstypescript2/app-website/app/eap/eap.csstypescript2/app-website/app/explore-legacy/page.tsxtypescript2/app-website/app/layout.tsxtypescript2/app-website/app/learn2/_editor/BamlEditor.tsxtypescript2/app-website/app/learn3/_deck/slides.tsxtypescript2/app-website/app/learn4/_components/Story.tsxtypescript2/app-website/app/page.tsxtypescript2/app-website/app/quickstart/page.tsxtypescript2/app-website/app/techdocs/page.tsxtypescript2/app-website/app/what-is-baml/_components/acquirer.tsxtypescript2/app-website/app/what-is-baml/_components/code-explorer.tsxtypescript2/app-website/app/what-is-baml/_components/dropped-footnote.tsxtypescript2/app-website/app/what-is-baml/_components/dropped-store.tstypescript2/app-website/app/what-is-baml/_components/lost-events.tsxtypescript2/app-website/app/what-is-baml/_components/room-rebus.tsxtypescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsxtypescript2/app-website/app/what-is-baml/page.tsxtypescript2/app-website/components/cta.module.csstypescript2/app-website/components/footer-section.tsxtypescript2/app-website/next.config.mjstypescript2/app-website/vercel.json
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
♻️ Duplicate comments (1)
typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx (1)
335-366: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winThe expanded playground still lacks keyboard dismissal and dialog semantics.
A previous review raised this and the thread is marked addressed, but the code in this revision still has the gaps. The overlay is a fixed container at
z-index: 60that covers the page:
Escapedoes not close it.- The container has no
role="dialog"and noaria-modal="true".- Focus does not move into the overlay, and it is not restored to the expand button on close.
- Background scrolling is not locked, and the content behind the overlay stays in the tab order.
MatrixPlaceholderinpage.tsxline 665 states "escape to zoom back out", soEscapesupport is the documented behavior.🐛 Proposed fix for keyboard dismissal and dialog semantics
const [expanded, setExpanded] = useState(false); + useEffect(() => { + if (!expanded) return; + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') setExpanded(false); + }; + document.addEventListener('keydown', onKey); + const prev = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + return () => { + document.removeEventListener('keydown', onKey); + document.body.style.overflow = prev; + }; + }, [expanded]);- <div className="wib-x-live ex"> + <div aria-modal="true" className="wib-x-live ex" role="dialog">Focus movement and focus restore still need a ref on the expand button.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 335 - 366, Update the expanded-playground flow around setExpanded and LivePlayground to implement Escape dismissal, dialog semantics (role="dialog" and aria-modal="true"), and focus management. Add a ref to the expand trigger, move focus into the overlay when opened, restore it when closed, lock background scrolling, and remove the background from the tab order while expanded.
🧹 Nitpick comments (5)
typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx (3)
501-502: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRemove the duplicate
.wib-x-termrule.Line 502 re-declares
background,border-color, andcolorwith the same values already set on line 501. The rule has no effect.♻️ Proposed change
.wib-x-term { background: `#1A1612`; border: 1px solid `#1A1612`; border-radius: 8px; color: `#E8E3D8`; font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; margin: 0; max-height: 480px; overflow: auto; padding: 13px 15px; } - .wib-x-term { background: `#1A1612`; border-color: `#1A1612`; color: `#E8E3D8`; } .wib-x-term .cmd { color: `#C4B5FD`; font-weight: 600; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 501 - 502, Remove the redundant second `.wib-x-term` CSS rule, preserving the existing `background`, border, and `color` declarations in the primary rule.
484-520: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winDeduplicate the injected
<style>acrossCodeExplorerinstances.
page.tsxrenders one<CodeExplorer>for each section that definestabs, so this per-instance<style>is inserted multiple times. Addhrefandprecedenceto let React hoist and deduplicate it under the document head.♻️ Proposed change
- <style>{` + <style href="wib-code-explorer" precedence="default">{`🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 484 - 520, Update the injected style element in CodeExplorer to include a stable href and precedence value so React hoists it to the document head and deduplicates it across multiple CodeExplorer instances. Keep the existing CSS unchanged.
241-272: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winShare one Shiki highlighter across the page.
useTokenizedcreates a highlighter on every mount, and eachCodeExplorermounts there. Shiki highlighters are resource-heavy and need disposal when not reused, so cache one module-level promise and reuse it instead of loading the TypeScript grammar, both BAML grammars, andgithub-lightrepeatedly. Also surface errors in the highlightingcatch, so grammar/theme loading failures do not silently fall back to unhighlighted text.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx` around lines 241 - 272, Update useTokenized to reuse a module-level promise for a single shared Shiki highlighter, initialized with the TypeScript language, both BAML grammars, and the github-light theme, instead of creating one per mount. Await that shared promise in the effect and preserve the existing cancellation guard; in the highlighting catch, report the caught error through the component’s established error-reporting mechanism before retaining the plain-text fallback.typescript2/app-website/EXAMPLES_SPEC.md (1)
352-358: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueReplace the local
~/DownloadsBEP paths with resolvable references.Lines 355 and 356 point to files in a personal home directory. Other contributors cannot open them. Add the BEP documents to the repository, or link their canonical location.
♻️ Proposed change
- `EXAMPLES_SPEC.md` (this file) -- BEP-023 — test and asserts: `~/Downloads/all-beps 3/BEP-023-test-and-asserts/README.md` -- BEP-034 — concurrency via spawn/await: `~/Downloads/all-beps 3/BEP-034-concurrency-via-spawn-await/README.md` +- BEP-023 — test and asserts (add a repo-relative path or canonical link) +- BEP-034 — concurrency via spawn/await (add a repo-relative path or canonical link) - effect.website interactive catalog:🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/EXAMPLES_SPEC.md` around lines 352 - 358, Replace the personal ~/Downloads references for BEP-023 and BEP-034 in the Reference material section with resolvable repository paths or canonical public URLs, preserving the existing document titles and links.typescript2/app-website/app/what-is-baml/page.tsx (1)
709-710: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse a
biome-ignorecomment instead ofeslint-disable-next-line.The rest of this file uses
biome-ignorecomments. Biome does not readeslint-disable-next-line, so this line has no effect. The injected CSS is a build-time constant with no external input, so there is no XSS risk here; only the suppression syntax is wrong.♻️ Proposed change
- {/* eslint-disable-next-line react/no-danger */} + {/* biome-ignore lint/security/noDangerouslySetInnerHtml: build-time constant CSS, no external input */} <style dangerouslySetInnerHTML={{ __html: CSS }} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 709 - 710, Replace the ineffective eslint-disable-next-line comment immediately before the dangerouslySetInnerHTML style in the page component with the repository’s biome-ignore suppression syntax, preserving the existing suppression target and injected CSS behavior.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx`:
- Around line 329-334: Update the CodeExplorer rendering around BamlEditor and
LivePlayground so the collapsed BamlEditor mounts only when its block is in
view, and is unmounted while expanded to avoid simultaneous editors. Reuse the
existing visibility and expanded-state logic, preserving LivePlayground’s
expanded-only behavior and ensuring the editor is not mounted for every inactive
offscreen explorer.
- Around line 183-214: The tooling tab labels do not match their configured
snippets. Update the `tooling` entries so `PACK_BENCH_TEXT` is associated with
`Ship Anywhere`, and `RUN_E_EVENTS` is associated with `Run Directly`; assign
the remaining snippets to the labels defined by `EXAMPLES_SPEC.md`, preserving
each snippet’s existing content and metadata.
- Around line 443-457: Complete the ARIA tabs association in the panels map by
assigning each tab a stable id and matching aria-controls, and update the
wib-x-body container to role="tabpanel" with the corresponding id and
aria-labelledby. If full tab semantics are retained, also implement roving
tabIndex and ArrowLeft/ArrowRight navigation; otherwise remove role="tablist",
role="tab", and aria-selected and keep the controls as plain buttons.
- Around line 80-90: Export the catalog section keys from code-explorer.tsx as
EXAMPLE_SECTIONS and use them as the source of truth for section gating. In
page.tsx, replace the s.tabs?.length check with a lookup against
EXAMPLE_SECTIONS, remove tabs from the Section type, and delete the tabs field
from every SECTIONS entry.
In `@typescript2/app-website/app/what-is-baml/page.tsx`:
- Around line 833-839: Update the Section type and SECTIONS data in page.tsx to
include per-section readMoreHref values, replace the slug-like readMore label
with matching prose, and render the fallback URL only when no destination is
provided. In code-explorer.tsx, accept readMoreHref alongside readMore and use
it for the link; pass the section value from page.tsx into the CodeExplorer
render site. Apply the corresponding changes at page.tsx lines 833-839 and 844,
and code-explorer.tsx lines 479-483.
- Line 314: Update the section title string near the title entry for “Are you
trying to get bought by {acquirer}” to end with a question mark, matching the
punctuation used by the other question section titles.
- Around line 19-25: Remove or relocate the `/what-is-baml` redirect in the
Next.js configuration so it no longer overrides the route served by the `page`
component and its canonical metadata. Preserve the existing `metadata`
declaration in the `what-is-baml` page and ensure the route continues rendering
the intended homepage content.
---
Duplicate comments:
In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx`:
- Around line 335-366: Update the expanded-playground flow around setExpanded
and LivePlayground to implement Escape dismissal, dialog semantics
(role="dialog" and aria-modal="true"), and focus management. Add a ref to the
expand trigger, move focus into the overlay when opened, restore it when closed,
lock background scrolling, and remove the background from the tab order while
expanded.
---
Nitpick comments:
In `@typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx`:
- Around line 501-502: Remove the redundant second `.wib-x-term` CSS rule,
preserving the existing `background`, border, and `color` declarations in the
primary rule.
- Around line 484-520: Update the injected style element in CodeExplorer to
include a stable href and precedence value so React hoists it to the document
head and deduplicates it across multiple CodeExplorer instances. Keep the
existing CSS unchanged.
- Around line 241-272: Update useTokenized to reuse a module-level promise for a
single shared Shiki highlighter, initialized with the TypeScript language, both
BAML grammars, and the github-light theme, instead of creating one per mount.
Await that shared promise in the effect and preserve the existing cancellation
guard; in the highlighting catch, report the caught error through the
component’s established error-reporting mechanism before retaining the
plain-text fallback.
In `@typescript2/app-website/app/what-is-baml/page.tsx`:
- Around line 709-710: Replace the ineffective eslint-disable-next-line comment
immediately before the dangerouslySetInnerHTML style in the page component with
the repository’s biome-ignore suppression syntax, preserving the existing
suppression target and injected CSS behavior.
In `@typescript2/app-website/EXAMPLES_SPEC.md`:
- Around line 352-358: Replace the personal ~/Downloads references for BEP-023
and BEP-034 in the Reference material section with resolvable repository paths
or canonical public URLs, preserving the existing document titles and links.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5749b21d-cc8c-4c29-93ca-4f0eac1fdc6c
⛔ Files ignored due to path filters (21)
typescript2/app-website/public/elephants/elephant-adoption.pngis excluded by!**/*.pngtypescript2/app-website/public/elephants/elephant-models.pngis excluded by!**/*.pngtypescript2/app-website/public/elephants/elephant-money.pngis excluded by!**/*.pngtypescript2/app-website/public/elephants/elephant-packages.pngis excluded by!**/*.pngtypescript2/app-website/public/logos/apple.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/cplusplus.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/csharp.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/dotnet.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/go.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/java.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/kotlin.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/linux.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/nodejs.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/php.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/python.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/ruby.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/rust.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/swift.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/typescript.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/wasm.svgis excluded by!**/*.svgtypescript2/app-website/public/logos/windows.svgis excluded by!**/*.svg
📒 Files selected for processing (26)
README.mdtypescript2/app-website/EXAMPLES_SPEC.mdtypescript2/app-website/app/baml-intro/_components/TryBaml.tsxtypescript2/app-website/app/baml-intro/_components/snippets.tstypescript2/app-website/app/baml-intro/_components/try-baml.module.csstypescript2/app-website/app/eap/eap.csstypescript2/app-website/app/explore-legacy/page.tsxtypescript2/app-website/app/layout.tsxtypescript2/app-website/app/learn2/_editor/BamlEditor.tsxtypescript2/app-website/app/learn3/_deck/slides.tsxtypescript2/app-website/app/learn4/_components/Story.tsxtypescript2/app-website/app/page.tsxtypescript2/app-website/app/quickstart/page.tsxtypescript2/app-website/app/techdocs/page.tsxtypescript2/app-website/app/what-is-baml/_components/acquirer.tsxtypescript2/app-website/app/what-is-baml/_components/code-explorer.tsxtypescript2/app-website/app/what-is-baml/_components/dropped-footnote.tsxtypescript2/app-website/app/what-is-baml/_components/dropped-store.tstypescript2/app-website/app/what-is-baml/_components/lost-events.tsxtypescript2/app-website/app/what-is-baml/_components/room-rebus.tsxtypescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsxtypescript2/app-website/app/what-is-baml/page.tsxtypescript2/app-website/components/cta.module.csstypescript2/app-website/components/footer-section.tsxtypescript2/app-website/next.config.mjstypescript2/app-website/vercel.json
🚧 Files skipped from review as they are similar to previous changes (22)
- typescript2/app-website/app/baml-intro/_components/snippets.ts
- typescript2/app-website/components/footer-section.tsx
- typescript2/app-website/app/explore-legacy/page.tsx
- typescript2/app-website/app/learn2/_editor/BamlEditor.tsx
- typescript2/app-website/app/what-is-baml/_components/lost-events.tsx
- typescript2/app-website/vercel.json
- README.md
- typescript2/app-website/app/baml-intro/_components/try-baml.module.css
- typescript2/app-website/app/what-is-baml/_components/dropped-footnote.tsx
- typescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsx
- typescript2/app-website/app/what-is-baml/_components/room-rebus.tsx
- typescript2/app-website/app/learn4/_components/Story.tsx
- typescript2/app-website/app/quickstart/page.tsx
- typescript2/app-website/app/learn3/_deck/slides.tsx
- typescript2/app-website/app/layout.tsx
- typescript2/app-website/next.config.mjs
- typescript2/app-website/app/what-is-baml/_components/acquirer.tsx
- typescript2/app-website/app/baml-intro/_components/TryBaml.tsx
- typescript2/app-website/app/what-is-baml/_components/dropped-store.ts
- typescript2/app-website/components/cta.module.css
- typescript2/app-website/app/eap/eap.css
- typescript2/app-website/app/page.tsx
Removes the "used by some of the world's largest companies" line and the Google/AWS/SAP marks under it, plus the .wib-users styles that only served that row. The logo assets stay, since company-showcase and variant-home still use them. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
Address the PR review: the expanded playground gains Escape dismissal, dialog semantics, and a background scroll lock, and is hidden entirely on touch/small screens; the explorer tabs get the tabpanel wiring their ARIA roles promised; the pack size table moves under Ship Anywhere where its content belongs; the acquirer cycler clears its inner fade timeout on unmount; the dropped counter formats with toLocaleString like its sibling; and the agent-tries-baml read-more label becomes prose. Co-Authored-By: Claude Fable 5 <[email protected]>
The Biome CI job lints every file the PR touches against the stricter typescript2 config, which this branch's files had never been held to. Rename TryBaml/BamlEditor/Story to kebab-case and update importers, apply the sorted-keys/attributes and organize-imports fixes across the touched learn decks and editor, fix the real findings (unused webpack param and parked posthog import in next.config, assign-in-expression and at(-1) in the editor, descending specificity in the install unit's css, aria-label without a role on the rebus), and add reasoned suppressions where the pattern is deliberate (static <img> marks, static page CSS injection, effect dependency choices). Co-Authored-By: Claude Fable 5 <[email protected]>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
typescript2/app-website/app/what-is-baml/page.tsx (3)
659-692: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winRemove the unused
Placeholdercomponent.No call site references
Placeholder; the page rendersCodeExplorerfor tabbed sections. ThenoUnusedVariablessuppression hides dead code. Delete the component and its suppression, or add a real call site.As per coding guidelines, do not leave unused imports or variables; Biome treats them as errors.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 659 - 692, Remove the unused Placeholder component and its noUnusedVariables suppression. Verify that no imports or variables become unused after deleting it, while preserving the existing CodeExplorer rendering for tabbed sections.Source: Coding guidelines
28-29: 📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy liftMove site configuration out of the page module.
INK,MUTED,CARDS,BORROWS,PLATFORMS,HOSTS, andSECTIONSare site content and configuration constants. Move them toapp/_lib/config.tsxand import them into this page.As per coding guidelines, keep site configuration and constants in
/app/_lib/config.tsx.Also applies to: 87-168, 193-317
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 28 - 29, Move the site configuration constants INK, MUTED, CARDS, BORROWS, PLATFORMS, HOSTS, and SECTIONS from the page module into app/_lib/config.tsx, preserving their values and exports. Update the page to import these symbols from the shared configuration module and remove their local definitions.Source: Coding guidelines
815-817: 🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy liftRender the adoption explorer.
SECTIONSincludesmatrixforadopting, but Lines 815-817 only checks.tabs?.length. The adoption section therefore has no explorer, andMatrixPlaceholderis never mounted. The placeholder cells are also non-interactive<span>elements even though the copy promises click and zoom behavior. Replace this placeholder with the live explorer contract before merge.Also applies to: 612-657
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/what-is-baml/page.tsx` around lines 815 - 817, Update the section rendering around SECTIONS and the adopting entry so the adoption matrix mounts its live explorer instead of relying only on s.tabs?.length. Replace MatrixPlaceholder with the intended interactive explorer contract, including clickable/zoomable cells rather than static span elements, while preserving the existing CodeExplorer behavior for tabbed sections.typescript2/app-website/app/baml-intro/_components/try-baml.tsx (3)
355-358: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winReport clipboard success only after the copy succeeds.
done()runs beforenavigator.clipboard.writeText()resolves. The UI can show “copied” when permission is denied or the API is unavailable. Await the write and show success only after it resolves.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx` around lines 355 - 358, Update copyNow to handle the Promise returned by navigator.clipboard.writeText and invoke done only after it resolves successfully. Ensure the unavailable clipboard API or rejected write does not report success.
186-353: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winMove bridge setup configuration into the shared app config.
Move
Bridge,BRIDGES, and the prompt data or derivation intoapp/_lib/config.tsx. Keep this component focused on rendering and state management. As per coding guidelines, keep site configuration and constants in/app/_lib/config.tsx.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx` around lines 186 - 353, Move the bridge configuration and prompt-generation symbols—Bridge, BRIDGES, BRIDGE_TARGETS, bridgeLines, and PROMPT—into the shared app/_lib/config.tsx module. Update try-baml.tsx to import and use those exported symbols, leaving it responsible only for rendering and state management while preserving the current bridge data and derivation behavior.Source: Coding guidelines
374-389: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse valid semantics for the selection controls.
OptRowandHeaddeclare tablists and tabs, but they do not connect tabs to tabpanels.Headalso lacks the required keyboard model. Use a radiogroup for option pickers, and connect the humans/agents tabs to arole="tabpanel"with IDs andaria-controls.Also applies to: 451-482
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx` around lines 374 - 389, Update OptRow to use radiogroup/radio semantics instead of tablist/tab, including the appropriate selected state. In Head, implement the required keyboard behavior for the humans/agents tabs, assign stable IDs, add aria-controls to each tab, and connect them to the corresponding role="tabpanel" with matching aria-labelledby and visibility state.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@typescript2/app-website/app/baml-intro/_components/article.tsx`:
- Line 15: Replace the relative BamlEditor imports with the project-root
`@/app/learn2/_components/baml-editor-lazy` alias in
typescript2/app-website/app/baml-intro/_components/article.tsx:15-15,
typescript2/app-website/app/learn3/_deck/slides.tsx:5-5, and
typescript2/app-website/app/learn4/_components/story.tsx:6-6.
In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx`:
- Around line 568-577: Update the humansText construction in the try-BAML
component so envLines commands are included only when compact is false. Preserve
the existing base commands and bridgeLines behavior, while ensuring compact-mode
copied text excludes editor commands.
---
Outside diff comments:
In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx`:
- Around line 355-358: Update copyNow to handle the Promise returned by
navigator.clipboard.writeText and invoke done only after it resolves
successfully. Ensure the unavailable clipboard API or rejected write does not
report success.
- Around line 186-353: Move the bridge configuration and prompt-generation
symbols—Bridge, BRIDGES, BRIDGE_TARGETS, bridgeLines, and PROMPT—into the shared
app/_lib/config.tsx module. Update try-baml.tsx to import and use those exported
symbols, leaving it responsible only for rendering and state management while
preserving the current bridge data and derivation behavior.
- Around line 374-389: Update OptRow to use radiogroup/radio semantics instead
of tablist/tab, including the appropriate selected state. In Head, implement the
required keyboard behavior for the humans/agents tabs, assign stable IDs, add
aria-controls to each tab, and connect them to the corresponding role="tabpanel"
with matching aria-labelledby and visibility state.
In `@typescript2/app-website/app/what-is-baml/page.tsx`:
- Around line 659-692: Remove the unused Placeholder component and its
noUnusedVariables suppression. Verify that no imports or variables become unused
after deleting it, while preserving the existing CodeExplorer rendering for
tabbed sections.
- Around line 28-29: Move the site configuration constants INK, MUTED, CARDS,
BORROWS, PLATFORMS, HOSTS, and SECTIONS from the page module into
app/_lib/config.tsx, preserving their values and exports. Update the page to
import these symbols from the shared configuration module and remove their local
definitions.
- Around line 815-817: Update the section rendering around SECTIONS and the
adopting entry so the adoption matrix mounts its live explorer instead of
relying only on s.tabs?.length. Replace MatrixPlaceholder with the intended
interactive explorer contract, including clickable/zoomable cells rather than
static span elements, while preserving the existing CodeExplorer behavior for
tabbed sections.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: afae3d0b-c11e-41bb-96d3-6fee53de047d
📒 Files selected for processing (19)
typescript2/app-website/app/baml-intro/_components/article.tsxtypescript2/app-website/app/baml-intro/_components/try-baml.module.csstypescript2/app-website/app/baml-intro/_components/try-baml.tsxtypescript2/app-website/app/explore-legacy/page.tsxtypescript2/app-website/app/learn2/_components/baml-editor-lazy.tsxtypescript2/app-website/app/learn2/_deck/slides.tsxtypescript2/app-website/app/learn2/_editor/baml-editor.tsxtypescript2/app-website/app/learn3/_deck/slides.tsxtypescript2/app-website/app/learn4/_components/story.tsxtypescript2/app-website/app/quickstart/page.tsxtypescript2/app-website/app/techdocs/page.tsxtypescript2/app-website/app/what-is-baml/_components/acquirer.tsxtypescript2/app-website/app/what-is-baml/_components/code-explorer.tsxtypescript2/app-website/app/what-is-baml/_components/lost-events.tsxtypescript2/app-website/app/what-is-baml/_components/room-rebus.tsxtypescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsxtypescript2/app-website/app/what-is-baml/page.tsxtypescript2/app-website/next.config.mjstypescript2/app-website/vercel.json
🚧 Files skipped from review as they are similar to previous changes (9)
- typescript2/app-website/app/explore-legacy/page.tsx
- typescript2/app-website/app/what-is-baml/_components/try-baml-fab.tsx
- typescript2/app-website/app/techdocs/page.tsx
- typescript2/app-website/app/what-is-baml/_components/acquirer.tsx
- typescript2/app-website/app/baml-intro/_components/try-baml.module.css
- typescript2/app-website/vercel.json
- typescript2/app-website/app/what-is-baml/_components/lost-events.tsx
- typescript2/app-website/app/what-is-baml/_components/code-explorer.tsx
- typescript2/app-website/app/what-is-baml/_components/room-rebus.tsx
… gate The deck entered the lint set via the baml-editor-lazy import rename; this is the same autofix pass the learn3 deck already got.
The renamed baml-editor-lazy imports use the @/app alias instead of deep relative paths, and the Try BAML compact variant no longer copies the editor-setup command it does not show.
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
typescript2/app-website/app/baml-intro/_components/try-baml.tsx (1)
186-333: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winMove static bridge metadata to the shared configuration module.
BRIDGESand the related host-language metadata are site constants. Move them totypescript2/app-website/app/_lib/config.tsx, then import them here. KeepbridgeLineslocal if it only formats configured data.As per coding guidelines: Keep site configuration and constants in
/app/_lib/config.tsx.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx` around lines 186 - 333, Move the Bridge type, BRIDGES constant, and derived BRIDGE_TARGETS metadata from this component into app/_lib/config.tsx, then import and reuse them here. Keep bridgeLines local because it formats the configured data, and preserve the existing bridge values and target-generation behavior.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@typescript2/app-website/app/baml-intro/_components/try-baml.tsx`:
- Around line 186-333: Move the Bridge type, BRIDGES constant, and derived
BRIDGE_TARGETS metadata from this component into app/_lib/config.tsx, then
import and reuse them here. Keep bridgeLines local because it formats the
configured data, and preserve the existing bridge values and target-generation
behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 52fc0788-0992-4394-813e-5de1a42a84e8
📒 Files selected for processing (4)
typescript2/app-website/app/baml-intro/_components/article.tsxtypescript2/app-website/app/baml-intro/_components/try-baml.tsxtypescript2/app-website/app/learn3/_deck/slides.tsxtypescript2/app-website/app/learn4/_components/story.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- typescript2/app-website/app/baml-intro/_components/article.tsx
- typescript2/app-website/app/learn3/_deck/slides.tsx
- typescript2/app-website/app/learn4/_components/story.tsx
astrowq
pushed a commit
to astrowq/baml
that referenced
this pull request
Aug 9, 2026
…BoundaryML#4353) Follow-up to BoundaryML#4351, which merged just before this landed. - The quickstart page becomes one flex column with a uniform 44px gap and zeroed child margins, so section spacing cannot collapse or compound. Headings pair with their content in section groups: Handy links with its card grid, Keeping BAML updated with its note. - The techdocs page heading becomes "Tech Docs Coming Soon". One commit, app-website only, lint and typecheck clean. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved Quickstart page spacing and section layout for a cleaner, more consistent presentation. * Grouped related content into clearer sections. * Adjusted grid spacing and refined update guidance placement. * **Content** * Updated the Tech Docs heading to “Tech Docs Coming Soon.” <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Dhilan Shah <[email protected]> Co-authored-by: Anish Palakurthi <[email protected]> Co-authored-by: Claude Sonnet 4.6 <[email protected]> Co-authored-by: Dhilan Shah <[email protected]> Co-authored-by: Aaron Villalpando <[email protected]> Co-authored-by: hellovai <[email protected]> Co-authored-by: rossirpaulo <[email protected]> Co-authored-by: Avery Townsend <[email protected]>
This branch was previously deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this does
Ships the new homepage copy and interactivity from the what-is-baml staging page:
/now serves the what-is-baml page (the explore redesign)./what-is-bamland/exploreredirect home; the old explore article stays at/explore-legacy. Homepage tab title is "Basically a Made-up Language"; site-wide default titles drop the em dash.baml checkclean; every snippet with tests passesbaml test; one real fix:BENCH_BAML's spawn annotation is nowFuture<int, never>).Notes for review
next buildfails prerendering/atb/buildsfor lack of Convex env vars on the build machine;/atbis untouched by this diff./explore(now redirecting to/); intentional for now, may relabel later.Summary by CodeRabbit
New Features
/what-is-bamlexperience with interactive code examples, embedded playgrounds, visual explanations, and Try BAML access.Improvements
brew install baml.Bug Fixes