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/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)