docs: landing scenario finder + mobile polish + CLS fixes#276
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a ChangesDocs App UI: Mobile Sidebar Drawer and ScenarioFinder
Interactive Demos Micro-App
Node SDK Examples Documentation
Sequence Diagram(s)sequenceDiagram
participant User
participant home.tsx as Home Page
participant ScenarioFinder
participant DemoModal
participant iframe as interactive.html (iframe)
User->>home.tsx: visits homepage
home.tsx->>ScenarioFinder: renders component
User->>ScenarioFinder: selects scenario via tab/keyboard
ScenarioFinder->>ScenarioFinder: updates selected state, animates card
User->>ScenarioFinder: clicks primary CTA (Live demo)
ScenarioFinder->>DemoModal: setActiveDemo(scenario.demoTarget)
DemoModal->>DemoModal: lock scroll, trap focus, start enter transition
DemoModal->>iframe: src = BASE_URL/demos/interactive.html?embed=demoId&theme&accent
iframe-->>DemoModal: onLoad → hide loading indicator
User->>DemoModal: presses Escape or clicks backdrop
DemoModal->>ScenarioFinder: onClose → setActiveDemo(null)
DemoModal->>DemoModal: restore focus, unlock scroll
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
68cc639 to
0988680
Compare
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (3)
docs/public/demos/demo-ratelimit.js (1)
286-289: ⚡ Quick winMake lazy-start actually lazy (and pause offscreen).
Line 288 starts the RAF loop unconditionally, so the IntersectionObserver does not gate work. This undermines the “start when visible” behavior and adds avoidable background animation cost.
Suggested fix
- var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ start(); } else { /* keep running */ } }); },{threshold:0.05}); + var io=new IntersectionObserver(function(es){ + es.forEach(function(e){ + if(e.isIntersecting) start(); + else stop(); + }); + },{threshold:0.05}); io.observe(root); - start();🤖 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 `@docs/public/demos/demo-ratelimit.js` around lines 286 - 289, The `start()` function call on line 288 executes unconditionally immediately after the IntersectionObserver is set up, which defeats the lazy-start behavior intended by the observer. Move the `start()` call from outside the observer callback to inside the callback, executing it only when `e.isIntersecting` is true so that the RAF loop only begins when the observed root element becomes visible. Consider also pausing or stopping the animation in the else branch when the element is no longer visible to avoid unnecessary background work.docs/app/components/ui/site-nav.tsx (1)
41-46: ⚡ Quick winExpose drawer state semantics on the menu button.
The menu trigger would be more accessible if it also announces state (
aria-expanded) and target (aria-controls). That likely means passingnavOpendown and wiring it here.🤖 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 `@docs/app/components/ui/site-nav.tsx` around lines 41 - 46, The menu button in the site-nav component lacks proper ARIA attributes for accessibility. Add the aria-expanded attribute to the button element to reflect the menu's open/closed state (it should be true when the menu is open and false when closed), and add the aria-controls attribute to associate the button with the navigation drawer it controls by referencing the drawer's id. You will need to ensure the navOpen state is passed as a prop to this component and use it to set the aria-expanded value dynamically.docs/content/docs/node/more/examples/bulk-emails.mdx (1)
39-39: 💤 Low valueConsider removing weak intensifier "very".
Line 39 uses "very large list" which is stylistically weak. Alternatives: "Chunk a large list" or "Chunk the list into smaller batches" convey the same meaning more directly.
🤖 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 `@docs/content/docs/node/more/examples/bulk-emails.mdx` at line 39, The sentence describing the enqueueMany function contains the weak intensifier "very" in the phrase "very large list". Remove the word "very" from the description and use more direct language such as "Chunk a large list" or restructure it to "Chunk the list into smaller batches" to make the sentence more concise and impactful while maintaining the same meaning.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 `@docs/app/components/landing/demo-modal.tsx`:
- Around line 89-113: The modal is missing a focus trap for keyboard navigation,
which allows Tab/Shift+Tab to move focus into background content despite
aria-modal="true" being declared. Add focus trapping logic to the existing
keydown event handler in the first useEffect: when Tab is pressed on the last
focusable element within the `.dm-dialog` element, move focus to the first
focusable element, and when Shift+Tab is pressed on the first focusable element,
move focus to the last focusable element. This ensures keyboard users remain
within the modal when using Tab navigation while the dialog is open (when
current is truthy).
In `@docs/app/styles/docs.css`:
- Around line 1113-1133: The sidebar is currently translated off-screen when
closed but remains keyboard-focusable because CSS alone cannot prevent keyboard
focus. Add `pointer-events: none;` to the `.sidebar` rule (the default closed
state) to prevent interaction with off-canvas sidebar elements, then add
`pointer-events: auto;` to the `.sidebar.open` rule to re-enable interactions
when the sidebar is open. This ensures keyboard users cannot tab into hidden
sidebar links and buttons.
In `@docs/content/docs/node/more/examples/index.mdx`:
- Line 19: In the Benchmark row of the table in this documentation file, the
phrase "latency throughput" reads as unclear. Add a conjunction to separate
these two metrics so they parse as distinct items in the measurement list.
Change the description in the Benchmark row to clarify that both latency and
throughput are being measured as separate metrics by inserting "and" between
them.
In `@docs/content/docs/node/more/examples/notifications.mdx`:
- Around line 84-91: The documentation text states the periodic digest runs at
"08:00 UTC" but the code configuration explicitly sets timezone to
"America/New_York", which means the digest actually runs at 08:00 New York time,
not UTC. Update the text in the paragraph before the code block to reflect the
correct timezone, changing "08:00 UTC" to "08:00 America/New_York" to match the
timezone parameter in the registerPeriodic call.
In `@docs/content/docs/node/more/examples/web-scraper.mdx`:
- Around line 47-50: The aggregate task definition expects pages as a string[][]
parameter, but the chord workflow primitive being used does not pass child
results to callback functions, creating a type mismatch that will cause
pages.flat() to fail at runtime. Either refactor the example to use a
fan-out/fan-in pattern (such as map/reduce) that actually collects and passes
child results to the aggregate task, ensuring it receives the expected
string[][] data structure, or redefine the aggregate task to accept only
explicit callback parameters without expecting child results and update the
documentation accordingly. This issue appears in multiple locations in the file
(including the section at lines 82-97), so ensure the fix is applied
consistently throughout.
In `@docs/public/demos/demo-worksteal.js`:
- Around line 249-252: The motion function wrapper does not update the pause
button label when resuming animation. When off is false, the code sets
paused=false and calls start() to resume the animation loop, but the `#ws-pause`
button label can remain as "Resume" from a previous pause state, leaving the UI
out of sync with the actual animation state. After the paused=false and start()
calls in the else branch, add code to update the `#ws-pause` button label to
"Pause" to reflect that the animation is now actively running.
In `@docs/public/demos/interactive.html`:
- Line 7: Update the user-facing copy to accurately reflect the number of demos
on the page. In the meta description content attribute on line 7, change "Three
runnable simulations" to "Seven runnable simulations" to match the actual number
of demos available. Additionally, update the similar text on line 46 that
currently says "Four runnable simulations" to also say "Seven runnable
simulations" to ensure consistency across both locations.
- Around line 336-344: The code uses postMessage with origin wildcard '*' for
all cross-window communications and accepts incoming messages without validating
their origin or source. Replace the '*' wildcard in all postMessage calls (in
the persist function, the close button handler, and the initial availability
message) with a specific trusted origin. Additionally, add origin validation to
the window.addEventListener('message') handler that processes
'__activate_edit_mode' and '__deactivate_edit_mode' messages by checking the
event.origin property against an expected trusted origin before executing show()
or hide() based on the message type.
In `@docs/public/demos/README.md`:
- Around line 8-10: The fenced code block containing the interactive.html URL
pattern is missing a language identifier, which violates the MD040 linting rule.
Add `text` as the language identifier to the opening triple backticks of the
fenced code block that contains the
`/demos/interactive.html?embed=<demoId>&theme=<light|dark>&accent=brand#<demoId>`
URL pattern. This will satisfy the linting requirements and ensure consistency
with documentation standards.
---
Nitpick comments:
In `@docs/app/components/ui/site-nav.tsx`:
- Around line 41-46: The menu button in the site-nav component lacks proper ARIA
attributes for accessibility. Add the aria-expanded attribute to the button
element to reflect the menu's open/closed state (it should be true when the menu
is open and false when closed), and add the aria-controls attribute to associate
the button with the navigation drawer it controls by referencing the drawer's
id. You will need to ensure the navOpen state is passed as a prop to this
component and use it to set the aria-expanded value dynamically.
In `@docs/content/docs/node/more/examples/bulk-emails.mdx`:
- Line 39: The sentence describing the enqueueMany function contains the weak
intensifier "very" in the phrase "very large list". Remove the word "very" from
the description and use more direct language such as "Chunk a large list" or
restructure it to "Chunk the list into smaller batches" to make the sentence
more concise and impactful while maintaining the same meaning.
In `@docs/public/demos/demo-ratelimit.js`:
- Around line 286-289: The `start()` function call on line 288 executes
unconditionally immediately after the IntersectionObserver is set up, which
defeats the lazy-start behavior intended by the observer. Move the `start()`
call from outside the observer callback to inside the callback, executing it
only when `e.isIntersecting` is true so that the RAF loop only begins when the
observed root element becomes visible. Consider also pausing or stopping the
animation in the else branch when the element is no longer visible to avoid
unnecessary background work.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0099a2df-da3b-4870-9df0-166bc1f84e26
⛔ Files ignored due to path filters (1)
docs/public/demos/favicon.svgis excluded by!**/*.svg
📒 Files selected for processing (35)
docs/app/components/docs/sidebar.tsxdocs/app/components/landing/demo-modal.tsxdocs/app/components/landing/index.tsdocs/app/components/landing/scenario-finder.tsxdocs/app/components/ui/site-nav.tsxdocs/app/lib/nav.tsdocs/app/root.tsxdocs/app/routes/docs-layout.tsxdocs/app/routes/docs.$.tsxdocs/app/routes/home.tsxdocs/app/styles/docs.cssdocs/app/styles/landing.cssdocs/biome.jsondocs/content/docs/node/more/examples/benchmark.mdxdocs/content/docs/node/more/examples/bulk-emails.mdxdocs/content/docs/node/more/examples/data-pipeline.mdxdocs/content/docs/node/more/examples/express-service.mdxdocs/content/docs/node/more/examples/index.mdxdocs/content/docs/node/more/examples/meta.jsondocs/content/docs/node/more/examples/notifications.mdxdocs/content/docs/node/more/examples/predicate-gated-jobs.mdxdocs/content/docs/node/more/examples/saga-checkout.mdxdocs/content/docs/node/more/examples/web-scraper.mdxdocs/content/docs/node/more/examples/workflows.mdxdocs/public/demos/README.mddocs/public/demos/demo-mesh.jsdocs/public/demos/demo-playground.jsdocs/public/demos/demo-ratelimit.jsdocs/public/demos/demo-recovery.jsdocs/public/demos/demo-saga.jsdocs/public/demos/demo-workflow.jsdocs/public/demos/demo-worksteal.jsdocs/public/demos/interactive.cssdocs/public/demos/interactive.htmldocs/public/demos/theme.css
0988680 to
a79bfdc
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (1)
docs/public/demos/README.md (1)
8-10:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd a language identifier to the fenced code block.
Line 8 should specify a fence language (e.g.,
text) to satisfy markdownlint MD040.Suggested fix
-``` +```text /demos/interactive.html?embed=<demoId>&theme=<light|dark>&accent=brand#<demoId></details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.In
@docs/public/demos/README.mdaround lines 8 - 10, The fenced code block
starting at line 8 is missing a language identifier after the opening triple
backticks, which violates markdownlint rule MD040. Add a language identifier
like "text" to the opening fence by changing the opening triple backticks from
totext to properly declare the code block language and satisfy the
linter requirement.</details> <!-- cr-comment:v1:a5050d54bec50231479b8df1 --> _Source: Linters/SAST tools_ </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>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@docs/public/demos/demo-ratelimit.js:
- Around line 258-264: The staticRender() function only lays out tokens from
queuedList() but does not process new burst tokens that were added to toqueue by
spawn(8), causing them to remain invisible in the queue visualization until
animation resumes. Before the forEach loop that positions queued tokens, ensure
that any pending tokens in toqueue are moved into the queued state (likely by
iterating through toqueue and calling queueToken() or similar function for each
pending token) so that all burst tokens are included in the layout calculation
and display in the static frame.In
@docs/public/demos/demo-workflow.js:
- Around line 162-168: The
rafvariable maintains stale state from previous
animation frames, causing the motion hook to incorrectly detect an active run
even after animations complete or are cancelled. In the start function, after
calling reset(false) and before requesting the new animation frame with
requestAnimationFrame(tick), explicitly set raf to null or 0 to clear any
previous stale value. This ensures raf is properly reset before beginning a new
animation cycle. Apply the same fix to the other locations mentioned (around
lines 184-185, 210-214, and 264-269) where similar state clearing is needed.In
@docs/public/demos/interactive.html:
- Around line 31-34: The theme toggle button with id "theme" is not wired with
an event handler, making it non-functional. Add a click event listener to the
button element with id "theme" that toggles the theme between light and dark
modes by updating the appropriate CSS class or data attribute on the document
root or body element. Also apply the same handler logic to any other theme
toggle buttons in the file (around lines 165-174) to ensure all instances are
properly functional.- Line 10: The Google Fonts link element loading multiple font families (IBM
Plex Sans, IBM Plex Mono, JetBrains Mono, Fira Code, and Shantell Sans)
currently uses the display=swap parameter at the end of the href URL, which
causes layout shift when fonts load. Change the display parameter from swap to
optional in the Google Fonts URL to prevent Cumulative Layout Shift (CLS) in the
standalone iframe shell, ensuring consistent visual stability when fonts are
loaded.In
@docs/public/demos/theme.css:
- Around line 33-34: The font family names SFMono-Regular in both the --mono and
--code CSS custom property definitions are unquoted, which triggers Stylelint's
value-keyword-case linting error for mixed-case family names. Fix this by adding
single quotes around 'SFMono-Regular' in both the --mono and --code variable
declarations to ensure the font fallback chain is preserved while satisfying the
linter rules.
Duplicate comments:
In@docs/public/demos/README.md:
- Around line 8-10: The fenced code block starting at line 8 is missing a
language identifier after the opening triple backticks, which violates
markdownlint rule MD040. Add a language identifier like "text" to the opening
fence by changing the opening triple backticks fromtotext to properly
declare the code block language and satisfy the linter requirement.</details> <details> <summary>🪄 Autofix (Beta)</summary> Fix all unresolved CodeRabbit comments on this PR: - [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended) - [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: defaults **Review profile**: CHILL **Plan**: Pro **Run ID**: `2c92cdd8-1be3-4ffb-9f49-b608bc892be1` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 68cc6394609cbf0139593cc66cee0fd83eaa3e44 and 09886801854ca89960c4dd3d48a3ac141192dfaa. </details> <details> <summary>⛔ Files ignored due to path filters (1)</summary> * `docs/public/demos/favicon.svg` is excluded by `!**/*.svg` </details> <details> <summary>📒 Files selected for processing (35)</summary> * `docs/app/components/docs/sidebar.tsx` * `docs/app/components/landing/demo-modal.tsx` * `docs/app/components/landing/index.ts` * `docs/app/components/landing/scenario-finder.tsx` * `docs/app/components/ui/site-nav.tsx` * `docs/app/lib/nav.ts` * `docs/app/root.tsx` * `docs/app/routes/docs-layout.tsx` * `docs/app/routes/docs.$.tsx` * `docs/app/routes/home.tsx` * `docs/app/styles/docs.css` * `docs/app/styles/landing.css` * `docs/biome.json` * `docs/content/docs/node/more/examples/benchmark.mdx` * `docs/content/docs/node/more/examples/bulk-emails.mdx` * `docs/content/docs/node/more/examples/data-pipeline.mdx` * `docs/content/docs/node/more/examples/express-service.mdx` * `docs/content/docs/node/more/examples/index.mdx` * `docs/content/docs/node/more/examples/meta.json` * `docs/content/docs/node/more/examples/notifications.mdx` * `docs/content/docs/node/more/examples/predicate-gated-jobs.mdx` * `docs/content/docs/node/more/examples/saga-checkout.mdx` * `docs/content/docs/node/more/examples/web-scraper.mdx` * `docs/content/docs/node/more/examples/workflows.mdx` * `docs/public/demos/README.md` * `docs/public/demos/demo-mesh.js` * `docs/public/demos/demo-playground.js` * `docs/public/demos/demo-ratelimit.js` * `docs/public/demos/demo-recovery.js` * `docs/public/demos/demo-saga.js` * `docs/public/demos/demo-workflow.js` * `docs/public/demos/demo-worksteal.js` * `docs/public/demos/interactive.css` * `docs/public/demos/interactive.html` * `docs/public/demos/theme.css` </details> <details> <summary>✅ Files skipped from review due to trivial changes (10)</summary> * docs/app/components/landing/index.ts * docs/biome.json * docs/content/docs/node/more/examples/meta.json * docs/content/docs/node/more/examples/index.mdx * docs/content/docs/node/more/examples/web-scraper.mdx * docs/content/docs/node/more/examples/predicate-gated-jobs.mdx * docs/app/root.tsx * docs/content/docs/node/more/examples/saga-checkout.mdx * docs/content/docs/node/more/examples/express-service.mdx * docs/content/docs/node/more/examples/workflows.mdx </details> <details> <summary>🚧 Files skipped from review as they are similar to previous changes (12)</summary> * docs/app/routes/docs.$.tsx * docs/app/routes/home.tsx * docs/content/docs/node/more/examples/benchmark.mdx * docs/app/components/landing/demo-modal.tsx * docs/app/lib/nav.ts * docs/app/routes/docs-layout.tsx * docs/content/docs/node/more/examples/notifications.mdx * docs/content/docs/node/more/examples/data-pipeline.mdx * docs/app/components/docs/sidebar.tsx * docs/app/styles/docs.css * docs/app/styles/landing.css * docs/public/demos/interactive.css </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
a79bfdc to
ac45fe8
Compare
There was a problem hiding this comment.
♻️ Duplicate comments (1)
docs/public/demos/demo-worksteal.js (1)
229-234:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winMake Burst rebalance in static mode too.
When
motionOff()is true, Line 234 only repaints after increasing the hot queue;trySteal()andmoveTokens()never run, so Burst does not show any work-stealing response for reduced-motion users.Proposed static-mode settlement
- function staticRender(){ var now=performance.now(); REG.forEach(function(r){ r.busy=[now+1,0]; }); paint(now); } + function finishStaticTokens(){ + tokens.forEach(function(t){ + if(!t.done){ + t.done=true; + t.dst.q+=t.batch; + moved+=t.batch; + } + if(t.g.parentNode) t.g.parentNode.removeChild(t.g); + }); + tokens=[]; + } + + function staticRender(){ + var now=performance.now(); + REG.forEach(function(r){ r.busy=[now+1,0]; }); + trySteal(now, STEAL_INT/1000); + finishStaticTokens(); + paint(now); + }🤖 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 `@docs/public/demos/demo-worksteal.js` around lines 229 - 234, The Burst button click handler does not trigger work-stealing rebalancing in static mode. When motionOff() is true and the hot queue is increased by 7, the code calls staticRender() which only repaints without running the trySteal() and moveTokens() functions that perform the actual load rebalancing. Modify the staticRender function to include the work-stealing logic (calling trySteal() and moveTokens()) so that work-stealing rebalancing occurs in both animation and static modes after the burst queue manipulation.
🤖 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.
Duplicate comments:
In `@docs/public/demos/demo-worksteal.js`:
- Around line 229-234: The Burst button click handler does not trigger
work-stealing rebalancing in static mode. When motionOff() is true and the hot
queue is increased by 7, the code calls staticRender() which only repaints
without running the trySteal() and moveTokens() functions that perform the
actual load rebalancing. Modify the staticRender function to include the
work-stealing logic (calling trySteal() and moveTokens()) so that work-stealing
rebalancing occurs in both animation and static modes after the burst queue
manipulation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 39034808-3f9f-459f-8379-e2d77cd6bedf
⛔ Files ignored due to path filters (1)
docs/public/demos/favicon.svgis excluded by!**/*.svg
📒 Files selected for processing (35)
docs/app/components/docs/sidebar.tsxdocs/app/components/landing/demo-modal.tsxdocs/app/components/landing/index.tsdocs/app/components/landing/scenario-finder.tsxdocs/app/components/ui/site-nav.tsxdocs/app/lib/nav.tsdocs/app/root.tsxdocs/app/routes/docs-layout.tsxdocs/app/routes/docs.$.tsxdocs/app/routes/home.tsxdocs/app/styles/docs.cssdocs/app/styles/landing.cssdocs/biome.jsondocs/content/docs/node/more/examples/benchmark.mdxdocs/content/docs/node/more/examples/bulk-emails.mdxdocs/content/docs/node/more/examples/data-pipeline.mdxdocs/content/docs/node/more/examples/express-service.mdxdocs/content/docs/node/more/examples/index.mdxdocs/content/docs/node/more/examples/meta.jsondocs/content/docs/node/more/examples/notifications.mdxdocs/content/docs/node/more/examples/predicate-gated-jobs.mdxdocs/content/docs/node/more/examples/saga-checkout.mdxdocs/content/docs/node/more/examples/web-scraper.mdxdocs/content/docs/node/more/examples/workflows.mdxdocs/public/demos/README.mddocs/public/demos/demo-mesh.jsdocs/public/demos/demo-playground.jsdocs/public/demos/demo-ratelimit.jsdocs/public/demos/demo-recovery.jsdocs/public/demos/demo-saga.jsdocs/public/demos/demo-workflow.jsdocs/public/demos/demo-worksteal.jsdocs/public/demos/interactive.cssdocs/public/demos/interactive.htmldocs/public/demos/theme.css
✅ Files skipped from review due to trivial changes (9)
- docs/app/components/landing/index.ts
- docs/content/docs/node/more/examples/index.mdx
- docs/content/docs/node/more/examples/meta.json
- docs/content/docs/node/more/examples/web-scraper.mdx
- docs/content/docs/node/more/examples/saga-checkout.mdx
- docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
- docs/content/docs/node/more/examples/workflows.mdx
- docs/content/docs/node/more/examples/data-pipeline.mdx
- docs/content/docs/node/more/examples/notifications.mdx
🚧 Files skipped from review as they are similar to previous changes (16)
- docs/app/lib/nav.ts
- docs/app/components/ui/site-nav.tsx
- docs/app/root.tsx
- docs/biome.json
- docs/app/routes/docs.$.tsx
- docs/app/routes/home.tsx
- docs/app/routes/docs-layout.tsx
- docs/public/demos/README.md
- docs/app/components/docs/sidebar.tsx
- docs/public/demos/interactive.css
- docs/app/styles/docs.css
- docs/app/styles/landing.css
- docs/app/components/landing/scenario-finder.tsx
- docs/app/components/landing/demo-modal.tsx
- docs/content/docs/node/more/examples/benchmark.mdx
- docs/content/docs/node/more/examples/express-service.mdx
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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 `@docs/content/docs/node/more/examples/bulk-emails.mdx`:
- Line 90: The node command in the Terminal 2 Send section references the
undefined variable `list` in the sendCampaign call, which will throw an error
before the function executes. Fix this by either defining the `list` variable
within the -e command string (importing it from the send.ts module or loading it
from the email list source) before calling sendCampaign, or by modifying the
command to properly initialize the list variable so it is available when the
sendCampaign function is invoked.
In `@docs/public/demos/demo-mesh.js`:
- Line 82: The worker toggle button element g lacks the aria-pressed attribute
needed to communicate its online/offline state to assistive technology users.
Add an aria-pressed attribute to the setAttribute calls for element g, setting
its value based on whether the worker is currently online (aria-pressed='false'
for offline, aria-pressed='true' for online) to accurately reflect the toggle
state. Update this aria-pressed value whenever the worker state changes, and
consider updating the aria-label to be more dynamic by including the current
state (online or offline) rather than only saying 'click to toggle offline'.
Apply this fix to all locations where worker nodes are rendered, including both
the initial setAttribute calls and any state update handlers.
In `@docs/public/demos/demo-recovery.js`:
- Around line 49-50: The buttons with data-v="recover" and data-v="dlq" track
their selected state using the custom data-on attribute, but assistive
technologies cannot detect this state. Add the standard aria-pressed attribute
to both button elements to properly communicate the selection state to
accessibility tools: set aria-pressed to "true" for the recover button (which
has data-on="1") and aria-pressed to "false" for the dlq button (which has
data-on="0"). Apply this same fix to both button occurrences in the file
(including the instance at line 225).
In `@docs/public/demos/demo-saga.js`:
- Around line 29-31: The fail-mode toggle buttons are missing the `aria-pressed`
attribute which is needed for proper accessibility announcements of the selected
state. Add `aria-pressed` attribute to all three buttons (the ones with data-on
attributes for "charge fails", "hotel fails", and "all succeed") and ensure that
whenever the `data-on` attribute is updated to reflect the active fail-mode, the
corresponding button's `aria-pressed` is also set to "true" for the active
option and "false" for inactive options. This applies to both the initial button
markup and any event handler that changes the selected fail-mode state.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro
Run ID: a61cdcc0-0d19-4d77-8d75-9d025db612e7
⛔ Files ignored due to path filters (1)
docs/public/demos/favicon.svgis excluded by!**/*.svg
📒 Files selected for processing (35)
docs/app/components/docs/sidebar.tsxdocs/app/components/landing/demo-modal.tsxdocs/app/components/landing/index.tsdocs/app/components/landing/scenario-finder.tsxdocs/app/components/ui/site-nav.tsxdocs/app/lib/nav.tsdocs/app/root.tsxdocs/app/routes/docs-layout.tsxdocs/app/routes/docs.$.tsxdocs/app/routes/home.tsxdocs/app/styles/docs.cssdocs/app/styles/landing.cssdocs/biome.jsondocs/content/docs/node/more/examples/benchmark.mdxdocs/content/docs/node/more/examples/bulk-emails.mdxdocs/content/docs/node/more/examples/data-pipeline.mdxdocs/content/docs/node/more/examples/express-service.mdxdocs/content/docs/node/more/examples/index.mdxdocs/content/docs/node/more/examples/meta.jsondocs/content/docs/node/more/examples/notifications.mdxdocs/content/docs/node/more/examples/predicate-gated-jobs.mdxdocs/content/docs/node/more/examples/saga-checkout.mdxdocs/content/docs/node/more/examples/web-scraper.mdxdocs/content/docs/node/more/examples/workflows.mdxdocs/public/demos/README.mddocs/public/demos/demo-mesh.jsdocs/public/demos/demo-playground.jsdocs/public/demos/demo-ratelimit.jsdocs/public/demos/demo-recovery.jsdocs/public/demos/demo-saga.jsdocs/public/demos/demo-workflow.jsdocs/public/demos/demo-worksteal.jsdocs/public/demos/interactive.cssdocs/public/demos/interactive.htmldocs/public/demos/theme.css
✅ Files skipped from review due to trivial changes (10)
- docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
- docs/content/docs/node/more/examples/index.mdx
- docs/app/root.tsx
- docs/content/docs/node/more/examples/meta.json
- docs/content/docs/node/more/examples/data-pipeline.mdx
- docs/content/docs/node/more/examples/saga-checkout.mdx
- docs/content/docs/node/more/examples/benchmark.mdx
- docs/public/demos/README.md
- docs/content/docs/node/more/examples/workflows.mdx
- docs/app/lib/nav.ts
🚧 Files skipped from review as they are similar to previous changes (15)
- docs/app/routes/docs.$.tsx
- docs/biome.json
- docs/app/routes/docs-layout.tsx
- docs/app/components/ui/site-nav.tsx
- docs/content/docs/node/more/examples/express-service.mdx
- docs/app/styles/docs.css
- docs/content/docs/node/more/examples/notifications.mdx
- docs/app/components/landing/scenario-finder.tsx
- docs/app/components/docs/sidebar.tsx
- docs/content/docs/node/more/examples/web-scraper.mdx
- docs/app/routes/home.tsx
- docs/app/components/landing/demo-modal.tsx
- docs/public/demos/interactive.css
- docs/app/styles/landing.css
- docs/public/demos/theme.css
ac45fe8 to
6f42dd5
Compare
Static demo micro-app served in embed mode by the homepage finder. Adapted on import: dropped chrome scripts, reveal in embed, polished ratelimit/workflow/worksteal rendering.
Two-pane problem-picker with a live-demo modal, ported to React over the existing design tokens.
6f42dd5 to
7141ce4
Compare
Highlights
font-display: optional, reserved height for lazy page chunks.Verify
pnpm typecheck+pnpm build+pnpm lint(72 files) green.Notes
feat/sdks-nodebranch.Summary by CodeRabbit
Release Notes
New Features
Documentation
Improvements