docs: Add query strings to tabs (#2840)

2025-02-25 16:31:57 -08:00 · 2025-02-25 16:31:57 -08:00 · d2eb6de7ad
parent 209085da73
commit d2eb6de7ad
16 changed files with 62 additions and 18 deletions
--- a/docs/docs/development/hardware-integration/dongle.mdx
+++ b/docs/docs/development/hardware-integration/dongle.mdx
@ -146,6 +146,7 @@ If your keyboard is not Studio-ready or you have no interest in using ZMK Studio

 <Tabs
    groupId="studio-ready"
+    queryString
    defaultValue="studio"
    values={[
      { label: "Dongle with Studio", value: "studio" },
@ -164,6 +165,7 @@ There are three commonly found possibilities:

 <Tabs
    groupId="layout-locations"
+    queryString
    defaultValue="layouts"
    values={[
      { label: "Layouts File", value: "layouts" },
--- a/docs/docs/development/hardware-integration/index.mdx
+++ b/docs/docs/development/hardware-integration/index.mdx
@ -58,6 +58,7 @@ In ZMK, these have no shield, only a board.
 ## Organization Overview

 <Tabs
+queryString="keyboard-type"
 defaultValue="self-contained"
 values={[
 {label: 'Self-contained keyboards', value: 'self-contained'},
--- a/docs/docs/development/hardware-integration/lighting/backlight.mdx
+++ b/docs/docs/development/hardware-integration/lighting/backlight.mdx
@ -11,8 +11,9 @@ Please see [lighting feature page](../../../features/lighting.md#backlight) for

 <Tabs
  defaultValue="shieldpin"
+  queryString="part-type"
  values={[
-  {label: 'Adding to a board', value: 'boardpin'},{label: 'Adding to a shield', value: 'shieldpin'},
+  {label: 'Adding to a board', value: 'boardpin'}, {label: 'Adding to a shield', value: 'shieldpin'},
 ]}>

 <TabItem value="boardpin">
--- a/docs/docs/development/hardware-integration/new-shield.mdx
+++ b/docs/docs/development/hardware-integration/new-shield.mdx
@ -10,6 +10,7 @@ import Metadata from "@site/src/data/hardware-metadata.json";
 export const SplitTabs = (props) => (
    <Tabs
    groupId="keyboard-type"
+    queryString
    defaultValue="unibody"
    values={[
      { label: "Unibody Keyboard", value: "unibody" },
@ -25,6 +26,7 @@ export const SplitTabs = (props) => (
 export const SplitInvisTabs = (props) => (
    <Tabs
    groupId="keyboard-type"
+    queryString
    defaultValue="unibody"
    className="secrettabs"
    values={[
@ -450,7 +452,7 @@ Also see the [matrix transform section](../../config/layout.md#matrix-transform)
 Your keyboard will need to have a physical layout defined.
 Physical layouts organize the matrix transform, kscan and optionally the physical description of key positions in a single entity.

-<Tabs groupId="physical-layouts" defaultValue="basic">
+<Tabs groupId="physical-layouts" queryString defaultValue="basic">
  <TabItem value="basic" label="Basic">

 If you are not planning to add support for [ZMK Studio](../../features/studio.md), you can add a `zmk,physical-layout`-compatible node for each physical layout your keyboard supports:
--- a/docs/docs/development/hardware-integration/pinctrl.mdx
+++ b/docs/docs/development/hardware-integration/pinctrl.mdx
@ -110,10 +110,12 @@ All of your configuration will happen by adjusting the `pinctrl` node. Changes a
 Within said node, you will configure one or more child nodes for the buses. You will want to define the child nodes according to the instructions in the `pinctrl.yaml` file.
 The child nodes that you define should be named appropriately. The common naming schema is `usageNumber_state`. For example, `uart0_default`.

-Child nodes are (generally, there are[exceptions](https://docs.zephyrproject.org/3.5.0/hardware/pinctrl/index.html#pin-configuration)) expected to contain one or more subnodes typically named "groupX". These are for grouping together pins that should be assigned the same state, such as enabling an internal pull-up.
+Child nodes are (generally, there are [exceptions](https://docs.zephyrproject.org/3.5.0/hardware/pinctrl/index.html#pin-configuration)) expected to contain one or more subnodes typically named "groupX". These are for grouping together pins that should be assigned the same state, such as enabling an internal pull-up.
 Below are some examples of SPI child nodes for the nRF52840 and the RP2040. Further examples are contained within the comments of the respecting `pinctrl.yaml` files.

 <Tabs
+groupId="controller-type"
+queryString
 defaultValue="nrf52840"
 values={[
 {label: 'nRF52840', value: 'nrf52840'},
@ -223,6 +225,8 @@ You'll want to identify the correct node for you to be changing. The nRF52840 ha
 Adjust the node like so:

 <Tabs
+groupId="controller-type"
+queryString
 defaultValue="nrf52840"
 values={[
 {label: 'nRF52840', value: 'nrf52840'},
--- a/docs/docs/development/hardware-integration/pointing.mdx
+++ b/docs/docs/development/hardware-integration/pointing.mdx
@ -15,6 +15,7 @@ The configuration details will thus vary depending on if you are adding a pointi
 export const SplitTabs = (props) => (
  <Tabs
    groupId="part-type"
+    queryString
    defaultValue="unibody"
    values={[
      { label: "Unibody", value: "unibody" },
--- a/docs/docs/development/hardware-integration/soft-off-setup.mdx
+++ b/docs/docs/development/hardware-integration/soft-off-setup.mdx
@ -18,14 +18,14 @@ import SidebandWakeupDirect from "./includes/_sideband-wakeup-direct.md";

 Advanced methods of adding [soft off](../../features/low-power-states.md#soft-off) to a keyboard are detailed below. The first two tabs describe methods involving hardware changes, while the last describes the firmware changes necessary to define a single specific key switch for waking up.

-<Tabs groupId="advanced-methods" defaultValue="direct">
+<Tabs groupId="advanced-methods" queryString defaultValue="direct">
  <TabItem value="direct" label="Direct Pin"></TabItem>
  <TabItem value="matrix" label="Matrix Integrated Pin"></TabItem>
  <TabItem value="wakeup" label="Wakeup-only Key Switch">
    The exact method of reusing a key switch to wake from the soft off state
    differs depending on whether said key switch is part of a direct GPIO kscan
    or part of a matrix kscan.
-    <Tabs groupId="kscan-type" defaultValue="mkscan">
+    <Tabs groupId="kscan-type" queryString defaultValue="mkscan">
      <TabItem value="dkscan" label="Direct GPIO kscan"></TabItem>
      <TabItem value="mkscan" label="Matrix kscan"></TabItem>
    </Tabs>
@ -34,7 +34,7 @@ Advanced methods of adding [soft off](../../features/low-power-states.md#soft-of

 ## Hardware Changes

-<Tabs groupId="advanced-methods" defaultValue="direct" className="secrettabs">
+<Tabs groupId="advanced-methods" queryString defaultValue="direct" className="secrettabs">
  <TabItem value="direct" label="Direct Pin">

    Add a direct push button between a GPIO pin and ground. This button will act as an on/off switch.
@ -57,7 +57,7 @@ Advanced methods of adding [soft off](../../features/low-power-states.md#soft-of

 Several items work together to make both triggering soft off properly, and setting up the device to _wake_ from soft off work as expected.

-<Tabs groupId="advanced-methods" defaultValue="direct" className="secrettabs">
+<Tabs groupId="advanced-methods" queryString defaultValue="direct" className="secrettabs">
  <TabItem value="direct" label="Direct Pin">
    <SoftOffBehavior />
  </TabItem>
@ -78,7 +78,12 @@ For this approach, you will need to make sure that the [soft off behavior](../..
 Zephyr's basic [GPIO Key](https://docs.zephyrproject.org/3.5.0/build/dts/api/bindings/input/gpio-keys.html) concept is used to configure the soft off GPIO pin.
 {/* secrettabs hides this tab selector. GPIO key changes its "orientation" between simple pin and matrix integrated. */}

-<Tabs groupId="advanced-methods" defaultValue="direct" className="secrettabs">
+<Tabs
+  groupId="advanced-methods"
+  queryString
+  defaultValue="direct"
+  className="secrettabs"
+>
  <TabItem value="direct" label="Direct Pin">
    <GpioKeyDirect />
  </TabItem>
@ -94,7 +99,12 @@ GPIO keys are defined using child nodes under the `gpio-keys` compatible node. E

 - The `gpios` property should be a [phandle-array](https://docs.zephyrproject.org/3.5.0/build/dts/phandles.html#zero-or-more-nodes-with-metadata-phandle-array-type) with a fully defined GPIO pin and with the correct pull up/down and active high/low flags set.

-<Tabs groupId="advanced-methods" defaultValue="direct" className="secrettabs">
+<Tabs
+  groupId="advanced-methods"
+  queryString
+  defaultValue="direct"
+  className="secrettabs"
+>
  <TabItem value="direct" label="Direct Pin">
    <SidebandDirect />
  </TabItem>
@ -102,7 +112,12 @@ GPIO keys are defined using child nodes under the `gpio-keys` compatible node. E
    <SidebandMatrix />
  </TabItem>
  <TabItem value="wakeup" label="Wakeup-only Key Switch">
-    <Tabs groupId="kscan-type" defaultValue="mkscan" className="secrettabs">
+    <Tabs
+      groupId="kscan-type"
+      queryString
+      defaultValue="mkscan"
+      className="secrettabs"
+    >
      <TabItem value="dkscan" label="Direct GPIO kscan">
        <SidebandWakeupDirect />
      </TabItem>
@ -111,7 +126,7 @@ GPIO keys are defined using child nodes under the `gpio-keys` compatible node. E
  </TabItem>
 </Tabs>

-<Tabs groupId="advanced-methods" defaultValue="direct" className="secrettabs">
+<Tabs groupId="advanced-methods" queryString defaultValue="direct" className="secrettabs">
  <TabItem value="direct" label="Direct Pin"></TabItem>
  <TabItem value="matrix" label="Matrix Integrated Pin">
    You also need to update the `zmk,kscan` chosen value to point to the new kscan instance:
@ -130,7 +145,7 @@ GPIO keys are defined using child nodes under the `gpio-keys` compatible node. E

  </TabItem>
  <TabItem value="wakeup" label="Wakeup-only Key Switch">
-    <Tabs groupId="kscan-type" defaultValue="mkscan" className="secrettabs">
+    <Tabs groupId="kscan-type" queryString defaultValue="mkscan" className="secrettabs">
        <TabItem value="dkscan" label="Direct GPIO kscan"></TabItem>
        <TabItem value="mkscan" label="Matrix kscan"><SoftOffWaker /></TabItem>
    </Tabs>
--- a/docs/docs/development/local-toolchain/build-flash.mdx
+++ b/docs/docs/development/local-toolchain/build-flash.mdx
@ -25,7 +25,7 @@ Building a particular keyboard is done using the
 command. Its usage slightly changes depending on if your build is for a keyboard
 with an onboard MCU or one that uses an MCU board add-on.

-<Tabs defaultValue="onboardMcu"
+<Tabs queryString="build-opts" defaultValue="onboardMcu"
      values={[
        {label: 'Onboard MCU', value: 'onboardMcu'},
        {label: 'Addon MCU', value: 'addonMcu'}
--- a/docs/docs/development/local-toolchain/setup/container.mdx
+++ b/docs/docs/development/local-toolchain/setup/container.mdx
@ -19,6 +19,7 @@ git clone https://github.com/zmkfirmware/zmk.git
 ## Installing Development Tools

 <Tabs groupId="container"
+      queryString
      defaultValue="vsCode"
      values={[
        {label: 'VS Code', value: 'vsCode'},
@ -64,6 +65,7 @@ first make them available by creating volumes.

 <Tabs
  groupId="container"
+  queryString
  defaultValue="vsCode"
  values={[
    { label: "Docker", value: "vsCode" },
@ -117,6 +119,7 @@ created and mounted. Accordingly, you first have to remove the old ones.

 <Tabs
  groupId="container"
+  queryString
  defaultValue="vsCode"
  values={[
    { label: "Docker", value: "vsCode" },
@ -153,6 +156,7 @@ created and mounted. Accordingly, you first have to remove the old ones.
 ## Initialize Container

 <Tabs groupId="container"
+      queryString
      defaultValue="vsCode"
      values={[
        {label: 'VS Code', value: 'vsCode'},
--- a/docs/docs/development/local-toolchain/setup/native.mdx
+++ b/docs/docs/development/local-toolchain/setup/native.mdx
@ -9,6 +9,7 @@ import TabItem from "@theme/TabItem";
 export const OsTabs = (props) => (
    <Tabs
    groupId="operating-system"
+    queryString
    defaultValue="ubuntu"
    values={[
      { label: "Ubuntu", value: "ubuntu" },
@ -25,6 +26,7 @@ export const OsTabs = (props) => (
 export const OsNoteTabs = (props) => (
    <Tabs
    groupId="operating-system"
+    queryString
    defaultValue="win"
    values={[
      { label: "Windows", value: "win" },
@ -40,6 +42,7 @@ export const OsNoteTabs = (props) => (
 export const EnvTabs = (props) => (
    <Tabs
    groupId="python-environment"
+    queryString
    defaultValue="venv"
    values={[
      { label: "Install within Virtual Environment", value: "venv" },
@ -55,6 +58,7 @@ export const EnvTabs = (props) => (
 export const WinTermTabs = (props) => (
    <Tabs
    groupId="windows-terminal-choice"
+    queryString
    defaultValue="cmd"
    values={[
      { label: "Command Prompt", value: "cmd" },
@ -100,7 +104,7 @@ These steps are very similar to Zephyr's [Get Zephyr and install Python dependen

 <EnvTabs>
 <TabItem value="venv">
-<Tabs groupId="operating-systems" defaultValue="ubuntu">
+<Tabs groupId="operating-systems" queryString defaultValue="ubuntu">
  <TabItem value="ubuntu" label="Ubuntu">

 1. Use `apt` to install Python `venv` package:
@ -201,7 +205,7 @@ pip install -r zephyr/scripts/requirements-base.txt

 </TabItem>
 <TabItem value="glob">
-<Tabs groupId="operating-systems" defaultValue="ubuntu">
+<Tabs groupId="operating-systems" queryString defaultValue="ubuntu">
  <TabItem value="ubuntu" label="Ubuntu">
 1. Install `west`:

@ -282,7 +286,7 @@ This step pulls down quite a bit of tooling, be patient!
 west zephyr-export
 ```

-<Tabs groupId="operating-systems" defaultValue="ubuntu" className="secrettabs">
+<Tabs groupId="operating-systems" queryString defaultValue="ubuntu" className="secrettabs">
  <TabItem value="ubuntu" label="Ubuntu">

 4. Install the additional dependencies found in Zephyr's `requirements-base.txt`:
--- a/docs/docs/development/usb-logging.mdx
+++ b/docs/docs/development/usb-logging.mdx
@ -50,6 +50,7 @@ boot, before you can connect to view the logs.
 After flashing the updated ZMK image, the board should expose a USB CDC ACM device that you can connect to and view the logs.

 <Tabs
+queryString="operating-system"
 defaultValue="linux"
 values={[
 {label: 'Linux', value: 'linux'},
--- a/docs/docs/keymaps/behaviors/hold-tap.mdx
+++ b/docs/docs/keymaps/behaviors/hold-tap.mdx
@ -162,6 +162,7 @@ One workaround is to create a [macro](macros.md) that invokes those behaviors an
 ### Example Use-Cases

 <Tabs
+queryString="examples"
 defaultValue="homerow_mods"
 values={[
 {label: 'Homerow Mods', value: 'homerow_mods'},
--- a/docs/docs/keymaps/behaviors/tap-dance.mdx
+++ b/docs/docs/keymaps/behaviors/tap-dance.mdx
@ -27,6 +27,7 @@ The number of bindings in this array also determines the tap-dance's maximum num
 ### Example Usage

 <Tabs
+queryString="examples"
 defaultValue="basic"
 values={[
 {label: 'Basic Example: Counter', value: 'basic'},
--- a/docs/docs/troubleshooting/hardware-issues.mdx
+++ b/docs/docs/troubleshooting/hardware-issues.mdx
@ -10,6 +10,7 @@ import TabItem from "@theme/TabItem";
 export const TesterTabs = (props) => (
    <Tabs
    groupId="testers"
+    queryString
    defaultValue="promicro"
    values={[
      { label: "Pro Micro Compatible Board", value: "promicro" },
@ -25,6 +26,7 @@ export const TesterTabs = (props) => (
 export const PinTabs = (props) => (
    <Tabs
    groupId="pin-approaches"
+    queryString
    defaultValue="shield"
    values={[
      { label: "Tester Shield", value: "shield" },
--- a/docs/docs/user-setup.mdx
+++ b/docs/docs/user-setup.mdx
@ -63,11 +63,12 @@ Before running the setup script, you will first need to create a new GitHub repo
 To start the setup process, run the following from your command line prompt:

 <Tabs
+queryString="command"
 defaultValue="curl"
 values={[
 {label: 'Using curl', value: 'curl'},
 {label: 'Using wget', value: 'wget'},
-{label: 'Using PowerShell', value: 'PowerShell'},
+{label: 'Using PowerShell', value: 'powershell'},
 ]}>
 <TabItem value="curl">

--- a/docs/src/components/interconnect-tabs.tsx
+++ b/docs/src/components/interconnect-tabs.tsx
@ -59,7 +59,11 @@ function InterconnectTabs({ items, gpio }: InterconnectTabsProps) {
    .sort((a, b) => a.id.localeCompare(b.id));

  return (
-    <Tabs defaultValue={"pro_micro"} values={grouped.map(mapInterconnectValue)}>
+    <Tabs
+      queryString="interconnect"
+      defaultValue={"pro_micro"}
+      values={grouped.map(mapInterconnectValue)}
+    >
      {grouped.map((items) => mapInterconnect(items, gpio))}
    </Tabs>
  );