Docs refactor (#22703)

* add generation script

a script to read yaml code blocks from docs markdown files and generate corresponding "Frigate UI" tab instructions based on the json schema, i18n, section configs (hidden fields), and nav mappings

* first pass

* components

* add to gitignore

* second pass

* fix broken anchors

* fixes

* clean up tabs

* version bump

* tweaks

* remove role mapping config from ui

docs/docs/configuration/cameras.md

@@ -3,6 +3,10 @@ id: cameras
 title: Camera Configuration
 ---
 
+import ConfigTabs from "@site/src/components/ConfigTabs";
+import TabItem from "@theme/TabItem";
+import NavPath from "@site/src/components/NavPath";
+
 ## Setting Up Camera Inputs
 
 Several inputs can be configured for each camera and the role of each input can be mixed and matched based on your needs. This allows you to use a lower resolution stream for object detection, but create recordings from a higher resolution stream, or vice versa.
@@ -17,6 +21,25 @@ Each role can only be assigned to one input per camera. The options for roles ar
 | `record` | Saves segments of the video feed based on configuration settings. [docs](record.md) |
 | `audio`  | Feed for audio based detection. [docs](audio_detectors.md)                          |
 
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > Camera configuration > FFmpeg" />.
+
+| Field             | Description                                                         |
+| ----------------- | ------------------------------------------------------------------- |
+| **Camera inputs** | List of input stream definitions (paths and roles) for this camera. |
+
+Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
+
+| Field             | Description                                                                                            |
+| ----------------- | ------------------------------------------------------------------------------------------------------ |
+| **Detect width**  | Width (pixels) of frames used for the detect stream; leave empty to use the native stream resolution.  |
+| **Detect height** | Height (pixels) of frames used for the detect stream; leave empty to use the native stream resolution. |
+
+</TabItem>
+<TabItem value="yaml">
+
 ```yaml
 mqtt:
   host: mqtt.server.com
@@ -36,7 +59,18 @@ cameras:
       height: 720 # <- optional, by default Frigate tries to automatically detect resolution
 ```
 
-Additional cameras are simply added to the config under the `cameras` entry.
+</TabItem>
+</ConfigTabs>
+
+Additional cameras are simply added under the camera configuration section.
+
+<ConfigTabs>
+<TabItem value="ui">
+
+Navigate to <NavPath path="Settings > Camera configuration > Management" /> and use the add camera button to configure each additional camera.
+
+</TabItem>
+<TabItem value="yaml">
 
 ```yaml
 mqtt: ...
@@ -46,6 +80,9 @@ cameras:
   side: ...
 ```
 
+</TabItem>
+</ConfigTabs>
+
 :::note
 
 If you only define one stream in your `inputs` and do not assign a `detect` role to it, Frigate will automatically assign it the `detect` role. Frigate will always decode a stream to support motion detection, Birdseye, the API image endpoints, and other features, even if you have disabled object detection with `enabled: False` in your config's `detect` section.
@@ -64,7 +101,19 @@ Not every PTZ supports ONVIF, which is the standard protocol Frigate uses to com
 
 :::
 
-Add the onvif section to your camera in your configuration file:
+Configure the ONVIF connection for your camera to enable PTZ controls.
+
+<ConfigTabs>
+<TabItem value="ui">
+
+1. Navigate to <NavPath path="Settings > Camera configuration > ONVIF" /> and select your camera.
+   - Set **ONVIF host** to your camera's IP address, e.g.: `10.0.10.10`
+   - Set **ONVIF port** to your camera's ONVIF port, e.g.: `8000`
+   - Set **ONVIF username** to your camera's ONVIF username, e.g.: `admin`
+   - Set **ONVIF password** to your camera's ONVIF password, e.g.: `password`
+
+</TabItem>
+<TabItem value="yaml">
 
 ```yaml {4-8}
 cameras:
@@ -77,6 +126,9 @@ cameras:
       password: password
 ```
 
+</TabItem>
+</ConfigTabs>
+
 If the ONVIF connection is successful, PTZ controls will be available in the camera's WebUI.
 
 :::note
@@ -130,13 +182,15 @@ The FeatureList on the [ONVIF Conformant Products Database](https://www.onvif.or
 
 ## Setting up camera groups
 
-:::tip
+Camera groups let you organize cameras together with a shared name and icon, making it easier to review and filter them. A default group for all cameras is always available.
 
-It is recommended to set up camera groups using the UI.
+<ConfigTabs>
+<TabItem value="ui">
 
-:::
+On the Live dashboard, press the **+** icon in the main navigation to add a new camera group. Configure the group name, select which cameras to include, choose an icon, and set the display order.
 
-Cameras can be grouped together and assigned a name and icon, this allows them to be reviewed and filtered together. There will always be the default group for all cameras.
+</TabItem>
+<TabItem value="yaml">
 
 ```yaml
 camera_groups:
@@ -148,6 +202,9 @@ camera_groups:
     order: 0
 ```
 
+</TabItem>
+</ConfigTabs>
+
 ## Two-Way Audio
 
 See the guide [here](/configuration/live/#two-way-talk)