[website] Fix code example tabs

website/lib/mdx-content.tsx

@@ -7,6 +7,7 @@ import { BlockQuote } from "@/components/mdx/block-quote";
 import { CodeBlock } from "@/components/mdx/code-block";
 import {
   Code,
+  ExampleCode,
   ExampleTabs,
   Implementation,
   Schema,
@@ -26,6 +27,7 @@ const mdxComponents = {
   blockquote: BlockQuote,
   ExampleTabs,
   Code,
+  ExampleCode,
   Implementation,
   Schema,
   PackageInstallation,
@@ -47,6 +49,7 @@ const mdxComponents = {
   // tag names per the HTML spec, so <Video> becomes <video>, etc.
   video: Video,
   exampletabs: ExampleTabs,
+  examplecode: ExampleCode,
   implementation: Implementation,
   schema: Schema,
   packageinstallation: PackageInstallation,

website/lib/mdx.ts

@@ -306,6 +306,18 @@ function replaceDottedComponents(source: string): string {
   return result;
 }
 
+// Rename <Code> to <ExampleCode> to avoid conflict with the HTML <code> element.
+// When using format:"md" with rehype-raw, tag names are lowercased per the HTML spec,
+// so <Code> becomes <code>. Since <code> is a standard inline HTML element, the parser
+// cannot nest block content inside it, causing tab content to spill out.
+function renameCodeComponent(source: string): string {
+  return source
+    .replaceAll("<Code>", "<ExampleCode>")
+    .replaceAll("</Code>", "</ExampleCode>")
+    .replaceAll("<Code ", "<ExampleCode ")
+    .replaceAll("<Code/>", "<ExampleCode/>");
+}
+
 export function extractHeadings(
   source: string
 ): Array<{ depth: number; value: string }> {
@@ -373,7 +385,9 @@ function resolveImagePaths(source: string, originPath: string): string {
 export async function compileMdxContent(source: string, originPath = "") {
   const cleaned = resolveImagePaths(
     fixJsxAttributes(
-      expandSelfClosingTags(replaceDottedComponents(stripImports(source)))
+      expandSelfClosingTags(
+        renameCodeComponent(replaceDottedComponents(stripImports(source)))
+      )
     ),
     originPath
   );

website/src/components/mdx/example-tabs.tsx

@@ -1,14 +1,39 @@
-import React, { FC } from "react";
+"use client";
 
-import { List, Panel, Tab, Tabs } from "./tabs";
+import React, { FC, useEffect } from "react";
+import { usePathname } from "next/navigation";
+
+import { List, Panel, Tab, Tabs, useTabs } from "./tabs";
+
+/**
+ * Resets the active tab to the default if the current tab is not in the
+ * allowed set (e.g. "schema" tab hidden on v16 but stored in localStorage).
+ */
+const ResetDisallowedTab: FC<{ allowed: string[] }> = ({ allowed }) => {
+  const { activeTab, setActiveTab } = useTabs();
+
+  useEffect(() => {
+    if (!allowed.includes(activeTab)) {
+      setActiveTab(allowed[0]);
+    }
+  }, [activeTab, allowed, setActiveTab]);
+
+  return null;
+};
 
 export const ExampleTabs: FC = ({ children }) => {
+  const pathname = usePathname();
+  const showSchema = !pathname?.includes("/v16/");
+
   return (
     <Tabs defaultValue={"implementation"} groupId="code-style">
+      {!showSchema && (
+        <ResetDisallowedTab allowed={["implementation", "code"]} />
+      )}
       <List>
         <Tab value="implementation">Implementation-first</Tab>
         <Tab value="code">Code-first</Tab>
-        <Tab value="schema">Schema-first</Tab>
+        {showSchema && <Tab value="schema">Schema-first</Tab>}
       </List>
       {children}
     </Tabs>
@@ -23,6 +48,12 @@ export const Code: FC = ({ children }) => (
   <Panel value="code">{children}</Panel>
 );
 
-export const Schema: FC = ({ children }) => (
-  <Panel value="schema">{children}</Panel>
+export const ExampleCode: FC = ({ children }) => (
+  <Panel value="code">{children}</Panel>
 );
+
+export const Schema: FC = ({ children }) => {
+  const pathname = usePathname();
+  if (pathname?.includes("/v16/")) return null;
+  return <Panel value="schema">{children}</Panel>;
+};