fix(website): fix code group

[NathanFlurry]

No description provided.

[NathanFlurry]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• fix(website): fix code group #3914 👈 (View in Graphite)
• doc: auto-generate docs for engine config and registry config #3902
• doc: document version upgrades #3901
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

Merge activity

• Jan 15, 5:08 AM UTC: NathanFlurry added this pull request to the Graphite merge queue.
• Jan 15, 5:09 AM UTC: CI is running for this pull request on a draft pull request (#3916) due to your merge queue CI optimization settings.
• Jan 15, 5:09 AM UTC: Merged by the Graphite merge queue via draft PR: #3916.

[claude]

Pull Request Review: fix(website): fix code group

Overview

This PR refactors the CodeGroup component to move tab initialization logic from React (client-side) to vanilla JavaScript in TabsScript.astro. This appears to fix hydration or rendering issues with code groups in MDX content.

Code Quality ✅

Strengths:

• Clean separation of concerns: React handles structure, vanilla JS handles interactivity
• Follows existing pattern established by the Tabs component in TabsScript.astro
• Reduces React bundle size by moving DOM manipulation to vanilla JS
• Comments clearly explain the architectural approach

Best Practices ✅

Follows Rivet conventions:

• Uses data attributes for DOM queries (consistent with existing patterns)
• Event delegation pattern for performance
• Proper initialization on astro:after-swap for view transitions
• Comments are written as complete sentences per CLAUDE.md guidelines

Potential Bugs ⚠️

1. Duplicate initialization guard may not be sufficient (TabsScript.astro:59-60): If someone manually adds children to tabsList outside this script, initialization would be skipped. Consider using a data attribute like data-initialized="true" for more explicit tracking.

2. Missing cleanup on view transitions: The astro:after-swap event re-runs initialization, but there is no cleanup of old event listeners or DOM nodes. Since you are using event delegation at the document level, this is likely fine.

3. Tab ID collision potential (Code.tsx:97): If multiple code blocks in the same CodeGroup have the same language and no file/title, they will get the same tabId, causing only one tab to appear. Consider adding a unique suffix or using the block index within the group.

Performance Considerations ✅

Optimizations:

• Event delegation prevents adding listeners to every button
• Initialization only runs once per container via guard clause
• Uses querySelectorAll efficiently with specific selectors

No concerns identified - the refactoring actually improves performance by reducing React overhead.

Security Concerns ✅

No issues found:

• No dynamic HTML injection
• Proper use of cloneNode instead of innerHTML
• Data attributes are read-only operations

Test Coverage ⚠️

Missing automated tests - Consider adding Playwright or similar E2E tests for this interactive functionality.

Architecture Concerns 🤔

1. React-to-vanilla-JS transition state: The component renders empty containers in React, then JavaScript fills them. If JavaScript fails to load, users see empty tabs. Consider a noscript fallback.

2. Tight coupling: The data attributes create an implicit contract between Code.tsx and TabsScript.astro. Consider documenting this contract.

Summary

Verdict: ✅ Approve with suggestions

This is a solid refactoring that follows existing patterns. Main concerns:

• Potential tab ID collisions in edge cases
• Missing test coverage
• No fallback for JavaScript-disabled scenarios

Risk Level: Low
Breaking Changes: None apparent
Recommendations: Fix tab ID collision, add tests in follow-up PR