From 35b7829e2d0f5f758161b020f11477fb5f7eefde Mon Sep 17 00:00:00 2001
From: Whipstickgostop <8366326+Whipstickgostop@users.noreply.github.com>
Date: Sun, 3 Mar 2024 11:06:02 -0500
Subject: [PATCH] use field group

---
 .../2.guide/22.integrations/speakerbot.md     | 30 ++++++++++++-------
 streamerbot/2.guide/7.MIDI.md                 |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/streamerbot/2.guide/22.integrations/speakerbot.md b/streamerbot/2.guide/22.integrations/speakerbot.md
index 8a64a92a..15cd70a7 100644
--- a/streamerbot/2.guide/22.integrations/speakerbot.md
+++ b/streamerbot/2.guide/22.integrations/speakerbot.md
@@ -16,19 +16,29 @@ Navigate to **Integrations > Speaker.bot**
 
 ![Speaker.bot Configuration](assets/speakerbot.png)
 
-### `Auto Connect`
-Enable to automatically connect to Speaker.bot when Streamer.bot starts up
+::field-group
+  ::field{name="Auto Connect" type=Toggle}
+    Automatically connect to Speaker.bot when Streamer.bot starts up
+  ::
 
-### `Auto Reconnect`
-Enable to automatically reconnect to Speaker.bot when the connection is disrupted
+  ::field{name="Auto Reconnect" type=Toggle}
+    Automatically reconnect to Speaker.bot when the connection is disrupted
+  ::
 
-### `Address`
-The IP address where Speaker.bot is hosted.
-* Defaults to `127.0.0.1`
+  ::field{name="Address" type=Text default="127.0.0.1"}
+    Enter the host address of the PC running Speaker.bot
 
-### `Port`
-The port Speaker.bot is listening for connections from Streamer.bot.
-* Defaults to `7580`
+    If Speaker.bot and Streamer.bot are on the same machine, keep `127.0.0.1`
+
+    For multi-pc setups you can configure this with another LAN IP address, e.g. `192.168.1.10`
+  ::
+
+  ::field{name="Port" type=Number default=7580}
+    Enter the port of the Speaker.bot WebSocket server.
+
+    This is should match the configuration at `Settings > WebSocket Server` in Speaker.bot
+  ::
+::
 
 ## Usage
 :api-reference-cards{path=speakerbot manifest-path="speaker.bot"}
diff --git a/streamerbot/2.guide/7.MIDI.md b/streamerbot/2.guide/7.MIDI.md
index 7becb7a6..0774eec2 100644
--- a/streamerbot/2.guide/7.MIDI.md
+++ b/streamerbot/2.guide/7.MIDI.md
@@ -17,7 +17,7 @@ Streamer.bot ships with full MIDI input & output support, allowing you to execut
 
 To add a new device, :shortcut{value="Right-Click"} anywhere in the device pane and select `Add`
 
-![Add Device Context Menu](assets/midi-add-device.png)
+![Add Device Context Menu](assets/midi-add-device.png)f
 
 This will open the add device dialog: