fix: fix code blocks

[ptlc8]

• prevent duplicate code snippets before hydration, see /docs/adk/quickstart for example
• some first line of snippets when moved as title, see /docs/integrations/sdk/cli-reference#chat for example
• some expandable code blocks had "expandable" as title, see /docs/integrations/sdk/integration/concepts#provide-multiple-schemas for example (or where empty with a title, /docs/integrations/sdk/installation)
• some code blocks selection where wrong, see /docs/adk/conversations/setup#channel-matching for example
• some code blocks had wrong type, see /docs/webchat/integrations/wix#copy-the-script-url for example

[greptile-apps]

Greptile Summary

This PR fixes several code block rendering issues across the docs — preventing duplicate snippets before React hydration, correcting CLI commands that were incorrectly placed as code block titles, fixing the [expandable] directive syntax, and correcting wrong language specifiers (uri → js).

• Hydration fix (CodeGroup.tsx + global.css): adds a data-ready attribute post-hydration and a CSS rule to hide non-first pre elements until React has taken control, preventing the flash of all stacked code snippets during SSR.
• MDX content fixes (12 files): moves CLI commands out of title=\"\" attributes and into code block bodies; normalises [expandable] directive syntax; fixes the Mermaid sequenceDiagram keyword placement; and corrects uri to js as the language for script-URL code blocks.

Confidence Score: 5/5

Safe to merge — all changes are targeted display fixes with no logic regressions.

The hydration guard in CodeGroup.tsx correctly sequences the DOM mutations (pre.hidden) before the React re-render that removes the CSS hiding, so there is no intermediate flash of multiple code blocks. All MDX edits are mechanical content corrections — moving commands out of title attributes, normalising [expandable] directive syntax, and fixing the mermaid fence — with no structural or logic changes.

No files require special attention.

Important Files Changed

Filename	Overview
src/components/CodeGroup.tsx	Adds data-ready='true' to the wrapper div once tabs are populated by the useEffect, signalling that React has hydrated and is managing snippet visibility.
src/styles/global.css	Adds a pre-hydration CSS rule that hides all but the first pre.astro-code inside .code-group until data-ready='true' is set, preventing duplicate snippet display before React takes over.
src/content/docs/integrations/sdk/cli-reference.mdx	Moves every CLI command from the title attribute into the code block body; the first line of each block was silently swallowed as a title rather than displayed as runnable code.
src/content/docs/integrations/sdk/integration/concepts.mdx	Corrects title="expandable" to [expandable] directive so the code block is treated as collapsible rather than displaying 'expandable' as a tab title.
src/content/docs/integrations/sdk/integration/messaging.mdx	Fixes the Mermaid diagram by moving sequenceDiagram from the fence's title attribute into the first line of the code block, where the Mermaid renderer expects it.
src/content/docs/webchat/integrations/wix.mdx	Replaces the non-standard uri language specifier with js and moves the script URL to the title attribute, fixing both syntax highlighting and the expandable directive.
src/content/docs/webchat/get-started/embedding-webchat.mdx	Same uri → js language fix as wix.mdx, with the URL promoted to the title attribute.
src/content/docs/webchat/interact/webchat-notification.mdx	Adds square brackets to expandable → [expandable] in two code fences, aligning with the project's directive syntax.
src/content/docs/integrations/sdk/bots-as-code.mdx	Same command-from-title fix as cli-reference.mdx across five bash snippets.
src/content/docs/integrations/sdk/installation.mdx	Moves bp --help from the fence title into the code block body.
src/content/docs/integrations/sdk/integration/getting-started.mdx	Moves three CLI commands (bp --help, bp login, bp deploy) from fence titles into code block bodies.
src/content/docs/adk/conversations/setup.mdx	Reformats a single-line array literal to multi-line for correct highlight-line rendering.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant Astro as Astro SSR
    participant CSS as global.css
    participant React as CodeGroup (React)

    Astro->>Browser: Render HTML with all pre.astro-code visible
    Note over Browser,CSS: data-ready attr absent — CSS hides non-first pre elements
    CSS->>Browser: display:none on :not(:first-of-type) pre
    React->>Browser: Hydrate — useEffect runs
    React->>Browser: "pre.hidden = true for non-active tabs (sync DOM mutation)"
    React->>Browser: setTabs(...) triggers re-render
    React->>Browser: "Re-render sets data-ready=true"
    Note over Browser,CSS: CSS selector no longer matches — hidden attr manages visibility

Loading

_{Reviews (1): Last reviewed commit: "fix: normalize code block metadata" | Re-trigger Greptile}