feat(docs): synchronize code tab selections

docs/src/components/CodeTabs.tsx

@@ -1,5 +1,6 @@
-import { createSignal, For } from "solid-js";
+import { createEffect, createSignal, For } from "solid-js";
 import { CodeBlock } from "./CodeBlock";
+import { useCodeTabsSelection } from "./CodeTabsContext";
 
 export type Tab = {
   key: string;
@@ -15,18 +16,31 @@ type CodeTabsProps = {
 };
 
 export default function CodeTabs(props: CodeTabsProps) {
+  const sharedSelection = useCodeTabsSelection();
   const [active, setActive] = createSignal(
     props.defaultKey || props.tabs[0].key,
   );
   const current = () => props.tabs.find((tab) => tab.key === active());
 
+  createEffect(() => {
+    const selectedKey = sharedSelection?.selectedKey();
+    if (selectedKey && props.tabs.some((tab) => tab.key === selectedKey)) {
+      setActive(selectedKey);
+    }
+  });
+
+  const selectTab = (key: string) => {
+    setActive(key);
+    sharedSelection?.selectKey(key);
+  };
+
   return (
     <div>
       <For each={props.tabs}>
         {(tab) => (
           <button
             type="button"
-            onClick={() => setActive(tab.key)}
+            onClick={() => selectTab(tab.key)}
             class={`px-4 font-semibold text-base cursor-pointer bg-transparent border-0 relative transition-colors
                 ${
                   active() === tab.key

docs/src/components/CodeTabsContext.tsx

@@ -0,0 +1,44 @@
+import {
+  type Accessor,
+  createContext,
+  createSignal,
+  type ParentProps,
+  useContext,
+} from "solid-js";
+
+type CodeTabsSelection = {
+  scope: string;
+  key: string;
+};
+
+type CodeTabsContextValue = {
+  selectedKey: Accessor<string | undefined>;
+  selectKey: (key: string) => void;
+};
+
+const CodeTabsContext = createContext<CodeTabsContextValue>();
+
+export function CodeTabsProvider(props: ParentProps<{ scope: string }>) {
+  const [selection, setSelection] = createSignal<CodeTabsSelection>();
+  const selectedKey = () => {
+    const currentSelection = selection();
+    return currentSelection?.scope === props.scope
+      ? currentSelection.key
+      : undefined;
+  };
+
+  return (
+    <CodeTabsContext.Provider
+      value={{
+        selectedKey,
+        selectKey: (key) => setSelection({ scope: props.scope, key }),
+      }}
+    >
+      {props.children}
+    </CodeTabsContext.Provider>
+  );
+}
+
+export function useCodeTabsSelection() {
+  return useContext(CodeTabsContext);
+}

docs/src/routes/docs.tsx

@@ -1,6 +1,7 @@
 import type { RouteSectionProps } from "@solidjs/router";
 import { useLocation } from "@solidjs/router";
 import { createEffect, onCleanup, onMount } from "solid-js";
+import { CodeTabsProvider } from "~/components/CodeTabsContext";
 import { DocNavigation } from "~/components/DocNavigation";
 import { Sidebar } from "~/components/Sidebar";
 import { setupAnchorCopyHandling, setupAnchors } from "~/utils/anchor";
@@ -35,7 +36,9 @@ export default function DocumentationLayout(props: RouteSectionProps) {
         class="flex-1 min-w-0 p-4 mdx-content min-h-screen max-w-full outline-none"
       >
         <div class="max-w-full">
-          {props.children}
+          <CodeTabsProvider scope={location.pathname}>
+            {props.children}
+          </CodeTabsProvider>
           <DocNavigation />
         </div>
       </main>