docs: Add query strings to tabs (#2840)

Author: caksoylar

Diff for: 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" },

Diff for: 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'},

Diff for: 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">

Diff for: 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:

Diff for: 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'},

Diff for: 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" },

Diff for: 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,15 +99,25 @@ 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>
   <TabItem value="matrix" label="Matrix Integrated Pin">
     <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>

Diff for: 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'}

Diff for: 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'},

Diff for: 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`:

Diff for: 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'},

Diff for: 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'},

Diff for: 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'},

Diff for: 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" },

Diff for: 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">
 

Diff for: 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>
   );