feat(docs): Generate hardware support page

docs/.gitignore

@@ -7,6 +7,7 @@
 # Generated files
 .docusaurus
 .cache-loader
+/src/data/hardware.json
 
 # Misc
 .DS_Store

docs/docs/hardware.md

@@ -1,56 +0,0 @@
----
-title: Supported Hardware
-sidebar_label: Supported Hardware
----
-
-:::warning
-
-ZMK Firmware is still an early stage project. Many features are still waiting to be implemented, and only a select few keyboards
-have had their hardware details codified in boards/shields for ZMK.
-
-:::
-
-With the solid technical foundation of Zephyr™ RTOS, ZMK can support a wide diversity of hardware targets.
-That being said, there are currently only a few specific [boards](/docs/faq#what-is-a-board)/[shields](/docs/faq#what-is-a-shield) that have been written and tested by the ZMK contributors.
-
-## Boards
-
-- [nice!nano](https://nicekeyboards.com/products/nice-nano-v1-0) (`nice_nano`)
-- [nrfMicro](https://github.com/joric/nrfmicro) (`nrfmicro_13`, `nrfmicro_11`, `nrfmicro_11_flipped`)
-- [BlueMicro840](https://store.jpconstantineau.com/#/group/bluemicro) (`bluemicro840_v1`)
-- [QMK Proton-C](https://qmk.fm/proton-c/) (`proton_c`)
-- [BDN9 Rev2](https://keeb.io/products/bdn9-rev-2-3x3-9-key-macropad-rotary-encoder-and-rgb) (`bdn9_rev2`)
-
-## Keyboard Shields
-
-- [Kyria](https://splitkb.com/products/kyria-pcb-kit) (`kyria_left` and `kyria_right`)
-- [Corne](https://github.com/foostan/crkbd) (`corne_left` and `corne_right`)
-- [Helix](https://github.com/mcmadhatter/helix) (`helix_left` and `helix_right`)
-- [Lily58](https://github.com/kata0510/Lily58) (`lily58_left` and `lily58_right`)
-- [Sofle](https://github.com/josefadamcik/SofleKeyboard) (`sofle_left` and `sofle_right`)
-- [Splitreus62](https://github.com/Na-Cly/splitreus62) (`splitreus62_left` and `splitreus62_right`)
-- [Jorne](https://github.com/joric/jorne) (`jorne_left` and `jorne_right`)
-- [Jian](https://github.com/KGOH/Jian-Info) (`jian_left` and `jian_right`)
-- [Reviung41](https://github.com/gtips/reviung/tree/master/reviung41) (`reviung41`)
-- [RoMac+ v4](https://www.littlekeyboards.com/products/romac) (`romac_plus`)
-- [RoMac v2](https://mechboards.co.uk/shop/kits/romac-macro-pad/) (`romac`)
-- [Boardsource 3x4 Macro](https://boardsource.xyz/store/5ecc2008eee64242946c98c1) (`boardsource3x4`)
-- [QAZ](https://www.cbkbd.com/product/qaz-keyboard-kit) (`qaz`)
-- [CRBN](https://keygem.store/collections/group-buys/products/group-buy-featherlight-40-kit) (`crbn`)
-- [tidbit](https://nullbits.co/tidbit/) (`tidbit`)
-- [Eek!](https://www.cbkbd.com/product/eek-keyboard) (`eek`)
-- [BFO-9000](https://keeb.io/products/bfo-9000-keyboard-customizable-full-size-split-ortholinear) (`bfo9000_left` and `bfo9000_right`)
-
-## Other Hardware
-
-In addition to the basic keyboard functionality, there is some initial support for additional keyboard hardware:
-
-- Encoders
-- OLEDs
-- RGB Underglow
-
-Until detailed documentation is available, feel free to ask questions about how these are supported in the [Discord server](https://zmkfirmware.dev/community/discord/invite).
-
-## Contributing
-
-If you'd like to add support for a new keyboard shield, head over to the [New Keyboard Shield](development/new-shield) documentation.

docs/docs/hardware.mdx

@@ -0,0 +1,32 @@
+---
+title: Supported Hardware
+sidebar_label: Supported Hardware
+---
+
+import HardwareList from "@site/src/components/hardware-list";
+
+:::warning
+
+ZMK Firmware is still an early stage project. Many features are still waiting to be implemented, and only a select few keyboards
+have had their hardware details codified in boards/shields for ZMK.
+
+:::
+
+With the solid technical foundation of Zephyr™ RTOS, ZMK can support a wide diversity of hardware targets.
+That being said, there are currently only a few specific [boards](/docs/faq#what-is-a-board)/[shields](/docs/faq#what-is-a-shield) that have been written and tested by the ZMK contributors.
+
+<HardwareList />
+
+## Other Hardware
+
+In addition to the basic keyboard functionality, there is some initial support for additional keyboard hardware:
+
+- Encoders
+- OLEDs
+- RGB Underglow
+
+Until detailed documentation is available, feel free to ask questions about how these are supported in the [Discord server](https://zmkfirmware.dev/community/discord/invite).
+
+## Contributing
+
+If you'd like to add support for a new keyboard shield, head over to the [New Keyboard Shield](development/new-shield) documentation.

docs/docusaurus.config.js

@@ -8,7 +8,10 @@ module.exports = {
   favicon: "img/favicon.ico",
   organizationName: "zmkfirmware", // Usually your GitHub org/user name.
   projectName: "zmk", // Usually your repo name.
-  plugins: [path.resolve(__dirname, "src/docusaurus-tree-sitter-plugin")],
+  plugins: [
+    path.resolve(__dirname, "src/docusaurus-tree-sitter-plugin"),
+    path.resolve(__dirname, "src/zmk-hardware-metadata-plugin"),
+  ],
   themeConfig: {
     googleAnalytics: {
       trackingID: "UA-145201102-2",

docs/package.json

@@ -20,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "classnames": "^2.2.6",
+    "prebuild-webpack-plugin": "^1.1.1",
     "react": "^16.8.4",
     "react-async": "^10.0.1",
     "react-copy-to-clipboard": "^5.0.2",

docs/src/components/hardware-list.js

@@ -0,0 +1,61 @@
+import React from "react";
+import hardware from "../data/hardware.json";
+
+const compatibleLookUp = {
+  pro_micro: "Pro Micro",
+  proton_c: "Proton-C",
+  makerdiary_m2: "makerdiary M.2",
+};
+
+export default function HardwareList() {
+  return (
+    <>
+      <h3>Standalone Boards</h3>
+      <ul>
+        {hardware.standalone.map((p) => (
+          <li key={p.identifier}>
+            <a href={p.url}>{p.name}</a> (<code>{p.identifier}</code>)
+          </li>
+        ))}
+      </ul>
+      <span />
+      {hardware.compatible.map((h) => (
+        <React.Fragment key={h.name}>
+          <span />
+          <h3>{compatibleLookUp[h.name] || h.name}</h3>
+
+          <h4>Boards</h4>
+          <ul>
+            {h.boards.map((p) => (
+              <li key={p.identifier}>
+                <a href={p.url}>{p.name}</a> (<code>{p.identifier}</code>)
+              </li>
+            ))}
+          </ul>
+
+          <h4>Shields</h4>
+          <ul>
+            {h.shields.map((p) => (
+              <li key={p.identifier}>
+                <a href={p.url}>{p.name}</a> (
+                {p.components ? (
+                  p.components.map((c, i) => (
+                    <span key={p.identifier + p.name + c}>
+                      <code>
+                        {p.identifier}_{c}
+                      </code>
+                      <span>{i !== p.components.length - 1 ? ", " : null}</span>
+                    </span>
+                  ))
+                ) : (
+                  <code>{p.identifier}</code>
+                )}
+                )
+              </li>
+            ))}
+          </ul>
+        </React.Fragment>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+var PrebuildPlugin = require("prebuild-webpack-plugin");
+const fs = require("fs");
+const yaml = require("js-yaml");
+const glob = require("glob");
+
+function checkCompatible(hardware, compatibleItem) {
+  let compatible = false;
+
+  if (hardware.compatible) {
+    if (
+      hardware.compatible === compatibleItem ||
+      hardware.compatible.includes(compatibleItem)
+    ) {
+      compatible = true;
+    }
+  }
+
+  // Check if compatibility is direct
+  if (hardware.identifier === compatibleItem) {
+    compatible = true;
+  }
+
+  return compatible;
+}
+
+function generateHardwareJson() {
+  glob("../app/boards/**/*.yaml", (error, files) => {
+    let hardwareList = [];
+
+    files.forEach((filename) => {
+      const contents = yaml.safeLoadAll(fs.readFileSync(filename, "utf8"));
+      hardwareList = [...hardwareList, ...contents];
+    });
+
+    hardwareList = hardwareList.filter((h) => !h.hidden);
+
+    let hardware = {
+      standalone: hardwareList.filter((h) => h.standalone),
+      compatible: [],
+    };
+
+    let compatibles = new Set(
+      hardwareList
+        .filter((h) => h.compatible)
+        .map((h) => h.compatible)
+        .flat()
+    );
+
+    for (let compatible of compatibles) {
+      hardware.compatible.push({
+        name: compatible,
+        boards: hardwareList.filter(
+          (h) => checkCompatible(h, compatible) && h.type === "mcu"
+        ),
+        shields: hardwareList.filter(
+          (h) => checkCompatible(h, compatible) && h.type === "shield"
+        ),
+      });
+    }
+
+    fs.writeFileSync("src/data/hardware.json", JSON.stringify(hardware));
+  });
+}
+
+module.exports = function () {
+  return {
+    name: "zmk-hardware-metadata-plugin",
+    configureWebpack() {
+      return {
+        plugins: [
+          new PrebuildPlugin({
+            build: generateHardwareJson,
+          }),
+        ],
+      };
+    },
+  };
+};