feat(docs): Generate new shield interconnect docs.

* Add to metadata schema for interconnects.
* New conventional location for pinout diagrams/pics.
* New component to generate the tabs for the new shield
  doc section on interconnects.
* Add XIAO and arduino uno pinout diagram.

Co-authored-by: Cem Aksoylar <caksoylar@users.noreply.github.com>

docs/docs/development/boards-shields-keymaps.md

@@ -34,7 +34,7 @@ in the `app/boards/${arch}/${board_name}` directory, e.g. `app/boards/arm/planck
 
 ## Pro Micro Compatible Keyboard
 
-![Labelled Pro Micro pins](../assets/pro-micro/pro-micro-pins-labelled.jpg)
+![Labelled Pro Micro pins](../assets/interconnects/pro_micro/pinout.png)
 
 For keyboards that require a (usually Pro Micro compatible) add-on board to operate, the ZMK integration pieces are places
 in the _shield_ definition for that keyboard, allowing users to

docs/docs/development/new-shield.md

@@ -6,6 +6,9 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import KeymapExampleFile from '../keymap-example-file.md';
 
+import InterconnectTabs from "@site/src/components/interconnect-tabs";
+import Metadata from "@site/src/data/hardware-metadata.json";
+
 ## Overview
 
 This guide will walk through the steps necessary to add ZMK support for a keyboard the uses a (Pro Micro compatible) addon MCU board to provide the microprocessor.
@@ -115,33 +118,7 @@ endif
 
 ## Shield Overlays
 
-<Tabs
-defaultValue="pro_micro"
-values={[
-{label: 'Pro Micro Shields', value: 'pro_micro'},
-{label: 'BlackPill Shields', value: 'blackpill'},
-]}>
-
-<TabItem value="pro_micro">
-
-### Pro Micro Shields
-
-![Labelled Pro Micro pins](../assets/pro-micro/pro-micro-pins-labelled.jpg)
-
-ZMK uses the blue color coded pin names to generate devicetree node references. For example, to refer to the node `0` in the devicetree files, use `&pro_micro 0`.
-
-</TabItem>
-
-<TabItem value="blackpill">
-
-### BlackPill Shields
-
-![Labelled BlackPill pins](../assets/blackpill/blackpill-pins-labelled.png)
-
-ZMK uses the blue color coded pin names to generate devicetree node references. For example, to refer to the node `17` in the devicetree files, use `&blackpill 17`.
-
-</TabItem>
-</Tabs>
+<InterconnectTabs items={Metadata}/>
 
 <Tabs
 defaultValue="unibody"