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"

docs/src/components/interconnect-tabs.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+import { HardwareMetadata, Interconnect } from "../hardware-metadata";
+import { groupedMetadata, InterconnectDetails } from "./hardware-utils";
+
+interface InterconnectTabsProps {
+  items: HardwareMetadata[];
+}
+
+function mapInterconnect(interconnect: Interconnect) {
+  let content = require(`@site/src/data/interconnects/${interconnect.id}/design_guideline.md`);
+  let imageUrl = require(`@site/docs/assets/interconnects/${interconnect.id}/pinout.png`);
+
+  return (
+    <TabItem value={interconnect.id}>
+      <img src={imageUrl.default} />
+
+      <content.default />
+
+      {interconnect.node_labels && (
+        <>
+          The following node labels are available:
+          <ul>
+            <li>
+              GPIO: <code>&{interconnect.node_labels.gpio}</code>
+            </li>
+            {interconnect.node_labels.i2c && (
+              <li>
+                I2C bus: <code>&{interconnect.node_labels.i2c}</code>
+              </li>
+            )}
+            {interconnect.node_labels.spi && (
+              <li>
+                SPI bus: <code>&{interconnect.node_labels.spi}</code>
+              </li>
+            )}
+            {interconnect.node_labels.uart && (
+              <li>
+                UART: <code>&{interconnect.node_labels.uart}</code>
+              </li>
+            )}
+            {interconnect.node_labels.adc && (
+              <li>
+                ADC: <code>&{interconnect.node_labels.adc}</code>
+              </li>
+            )}
+          </ul>
+        </>
+      )}
+    </TabItem>
+  );
+}
+
+function mapInterconnectValue(interconnect: Interconnect) {
+  return { label: `${interconnect.name} Shields`, value: interconnect.id };
+}
+
+function InterconnectTabs({ items }: InterconnectTabsProps) {
+  let grouped = Object.values(groupedMetadata(items).interconnects)
+    .map((i) => i?.interconnect as Interconnect)
+    .filter((i) => i?.design_guideline)
+    .sort((a, b) => a.id.localeCompare(b.id));
+
+  return (
+    <Tabs defaultValue={"pro_micro"} values={grouped.map(mapInterconnectValue)}>
+      {grouped.map(mapInterconnect)}
+    </Tabs>
+  );
+}
+
+export default InterconnectTabs;

docs/src/data/interconnects/.gitignore

@@ -0,0 +1 @@
+*/

docs/src/hardware-metadata-collection-plugin/index.js

@@ -14,6 +14,22 @@ function generateHardwareMetadataAggregate() {
     const aggregated = files.flatMap((f) =>
       yaml.loadAll(fs.readFileSync(f, "utf8"))
     );
+
+    aggregated
+      .filter((agg) => agg.type === "interconnect")
+      .forEach((agg) => {
+        let baseDir = `src/data/interconnects/${agg.id}`;
+        if (!fs.existsSync(baseDir)) {
+          fs.mkdirSync(baseDir);
+        }
+
+        if (agg.design_guideline) {
+          fs.writeFileSync(
+            `${baseDir}/design_guideline.md`,
+            agg.design_guideline
+          );
+        }
+      });
     fs.writeFileSync(
       "src/data/hardware-metadata.json",
       JSON.stringify(aggregated)