docs(codes): Add (key) codes documentation

Create codes documentation for standardized keys. Closes #218. Fixes #308. Ref #21.
2020-11-06 19:42:54 +00:00 · 2020-11-06 19:42:54 +00:00 · ff638eb010
commit ff638eb010
parent 194854ff7b
44 changed files with 9578 additions and 3 deletions
--- a/docs/docs/codes/_applications.mdx
+++ b/docs/docs/codes/_applications.mdx
@ -0,0 +1,9 @@
+import Table from "@site/src/components/codes/Table";
+
+## Application Controls
+
+<Table group="application-controls" />
+
+## Applications (Launch)
+
+<Table group="applications" />
--- a/docs/docs/codes/_editing.mdx
+++ b/docs/docs/codes/_editing.mdx
@ -0,0 +1,9 @@
+import Table from "@site/src/components/codes/Table";
+
+## Cut, Copy, Paste
+
+<Table group="cut-copy-paste" />
+
+## Undo, Redo
+
+<Table group="undo-redo" />
--- a/docs/docs/codes/_footnotes/example.mdx
+++ b/docs/docs/codes/_footnotes/example.mdx
@ -0,0 +1,13 @@
+This is an _example_ footnote for **code** tables.
+
+- Footnotes are supported per row by each operating system column.
+- Footnotes support MDX syntax.
+- A footnote's `id` is its filename by convention (i.e. `example`).
+- Footnotes must be included and listed in `src/data/footnotes.js` because they're statically compiled.
+- Footnotes are assigned within `src/data/hid.js` using `column-id: footnote-id(s)` `K`:`V` pairs (case-sensitive), where:
+  - `K` is the column's `id`.
+  - `V` is the footnote's `id`.
+  - `V` can also be an array of footnote ids (_optional_).
+- The footnote system aims to prevent duplication of _sources_ (mdx).
+- Footnotes are listed under each table, so try to avoid multiline notes unless it's necessary!
+- Footnotes are automatically numbered.
--- a/docs/docs/codes/_input-assist.mdx
+++ b/docs/docs/codes/_input-assist.mdx
@ -0,0 +1,5 @@
+import Table from "@site/src/components/codes/Table";
+
+## Input Assist
+
+<Table group="input-assist" />
--- a/docs/docs/codes/_keyboard-keypad.mdx
+++ b/docs/docs/codes/_keyboard-keypad.mdx
@ -0,0 +1,59 @@
+import Table from "@site/src/components/codes/Table";
+
+## Keyboard
+
+### Letters
+
+<Table group="keyboard-letters" />
+
+### Numbers
+
+<Table group="keyboard-numbers" />
+
+### Symbols / Punctuation
+
+<Table group="keyboard-symbols" />
+
+### Control & Whitespace
+
+<Table group="keyboard-control-whitespace" />
+
+### Navigation
+
+<Table group="keyboard-navigation" />
+
+### Modifiers
+
+<Table group="keyboard-modifiers" />
+
+### Locks
+
+<Table group="keyboard-locks" />
+
+### F Keys
+
+<Table group="keyboard-fkeys" />
+
+### International
+
+<Table group="keyboard-international" />
+
+### Language
+
+<Table group="keyboard-language" />
+
+### Miscellaneous
+
+<Table group="keyboard-miscellaneous" />
+
+## Keypad
+
+<Table group="keypad" />
+
+### Numbers
+
+<Table group="keypad-numbers" />
+
+### Symbols / Operations
+
+<Table group="keypad-operations" />
--- a/docs/docs/codes/_media.mdx
+++ b/docs/docs/codes/_media.mdx
@ -0,0 +1,21 @@
+import Table from "@site/src/components/codes/Table";
+
+## Sound / Volume
+
+<Table group="sound" />
+
+## Display
+
+<Table group="display" />
+
+## Media Controls
+
+<Table group="media-controls" />
+
+## Consumer Menus
+
+<Table group="consumer-menus" />
+
+## Consumer Controls
+
+<Table group="consumer-controls" />
--- a/docs/docs/codes/_power.mdx
+++ b/docs/docs/codes/_power.mdx
@ -0,0 +1,5 @@
+import Table from "@site/src/components/codes/Table";
+
+## Power & Lock
+
+<Table group="power" />
--- a/docs/docs/codes/applications.mdx
+++ b/docs/docs/codes/applications.mdx
@ -0,0 +1,15 @@
+---
+title: Applications
+sidebar_label: Applications
+hide_title: true
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Content, { rightToc as contentToc } from "./_applications.mdx";
+
+export const rightToc = contentToc;
+
+<OsLegend />
+<ToastyContainer />
+<Content />
--- a/docs/docs/codes/editing.mdx
+++ b/docs/docs/codes/editing.mdx
@ -0,0 +1,15 @@
+---
+title: Editing
+sidebar_label: Editing
+hide_title: true
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Content, { rightToc as contentToc } from "./_editing.mdx";
+
+export const rightToc = contentToc;
+
+<OsLegend />
+<ToastyContainer />
+<Content />
--- a/docs/docs/codes/index.mdx
+++ b/docs/docs/codes/index.mdx
@ -0,0 +1,33 @@
+---
+title: Codes
+sidebar_label: Full List
+hide_title: true
+slug: ./
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Key, { rightToc as keyToc } from "./_keyboard-keypad.mdx";
+import Editing, { rightToc as editingToc } from "./_editing.mdx";
+import Media, { rightToc as mediaToc } from "./_media.mdx";
+import Applications, { rightToc as applicationsToc } from "./_applications.mdx";
+import InputAssist, { rightToc as inputAssistToc } from "./_input-assist.mdx";
+import Power, { rightToc as powerToc } from "./_power.mdx";
+
+export const rightToc = [
+  ...keyToc,
+  ...editingToc,
+  ...mediaToc,
+  ...applicationsToc,
+  ...inputAssistToc,
+  ...powerToc,
+];
+
+<OsLegend />
+<ToastyContainer />
+<Key />
+<Editing />
+<Media />
+<Applications />
+<InputAssist />
+<Power />
--- a/docs/docs/codes/input-assist.mdx
+++ b/docs/docs/codes/input-assist.mdx
@ -0,0 +1,15 @@
+---
+title: Input Assist
+sidebar_label: Input Assist
+hide_title: true
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Content, { rightToc as contentToc } from "./_input-assist.mdx";
+
+export const rightToc = contentToc;
+
+<OsLegend />
+<ToastyContainer />
+<Content />
--- a/docs/docs/codes/keyboard-keypad.mdx
+++ b/docs/docs/codes/keyboard-keypad.mdx
@ -0,0 +1,15 @@
+---
+title: Keyboard & Keypad
+sidebar_label: Keyboard & Keypad
+hide_title: true
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Content, { rightToc as contentToc } from "./_keyboard-keypad.mdx";
+
+export const rightToc = contentToc;
+
+<OsLegend />
+<ToastyContainer />
+<Content />
--- a/docs/docs/codes/media.mdx
+++ b/docs/docs/codes/media.mdx
@ -0,0 +1,15 @@
+---
+title: Media
+sidebar_label: Media
+hide_title: true
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Content, { rightToc as contentToc } from "./_media.mdx";
+
+export const rightToc = contentToc;
+
+<OsLegend />
+<ToastyContainer />
+<Content />
--- a/docs/docs/codes/power.mdx
+++ b/docs/docs/codes/power.mdx
@ -0,0 +1,15 @@
+---
+title: Power
+sidebar_label: Power
+hide_title: true
+---
+
+import OsLegend from "@site/src/components/codes/OsLegend";
+import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import Content, { rightToc as contentToc } from "./_power.mdx";
+
+export const rightToc = contentToc;
+
+<OsLegend />
+<ToastyContainer />
+<Content />
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@ -112,7 +112,10 @@ module.exports = {
          editUrl: "https://github.com/zmkfirmware/zmk/edit/main/docs/",
        },
        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: [
+            require.resolve("./src/css/custom.css"),
+            require.resolve("./src/css/codes.css"),
+          ],
        },
      },
    ],
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@ -9,9 +9,14 @@
      "dependencies": {
        "@docusaurus/core": "^2.0.0-alpha.66",
        "@docusaurus/preset-classic": "^2.0.0-alpha.66",
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "@fortawesome/free-solid-svg-icons": "^5.15.1",
+        "@fortawesome/react-fontawesome": "^0.1.12",
        "classnames": "^2.2.6",
        "react": "^16.8.4",
-        "react-dom": "^16.8.4"
+        "react-copy-to-clipboard": "^5.0.2",
+        "react-dom": "^16.8.4",
+        "react-toastify": "^6.0.9"
      },
      "devDependencies": {
        "eslint": "^7.12.0",
@ -2025,6 +2030,51 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.12.tgz",
+      "integrity": "sha512-kV6HtqotM3K4YIXlTVvomuIi6QgGCvYm++ImyEx2wwgmSppZ6kbbA29ASwjAUBD63j2OFU0yoxeXpZkjrrX0qQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.20",
+        "react": ">=16.x"
+      }
+    },
    "node_modules/@francoischalifour/autocomplete-core": {
      "version": "1.0.0-alpha.28",
      "resolved": "https://registry.npmjs.org/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.28.tgz",
@ -4513,6 +4563,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
    "node_modules/copy-webpack-plugin": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.2.1.tgz",
@ -5282,6 +5340,15 @@
        "utila": "0.4.0"
      }
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dom-serializer": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@ -11265,6 +11332,18 @@
        "pure-color": "^1.2.0"
      }
    },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==",
+      "dependencies": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "10.2.1",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@ -11792,6 +11871,19 @@
        "react": ">=0.14.0 <17.0.0"
      }
    },
+    "node_modules/react-toastify": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.0.9.tgz",
+      "integrity": "sha512-StHXv+4kezHUnPyoILlvygSptQ79bxVuvKcC05yXP0FlqQgPA1ue+80BqxZZiCw2jWDGiY2MHyqBfFKf5YzZbA==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
    "node_modules/react-toggle": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.1.tgz",
@ -11805,6 +11897,21 @@
        "react-dom": "^15.3.0 || ^16.0.0"
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@ -13891,6 +13998,11 @@
        "is-plain-object": "2.0.4"
      }
    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
    "node_modules/toidentifier": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@ -17682,6 +17794,35 @@
        }
      }
    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.12.tgz",
+      "integrity": "sha512-kV6HtqotM3K4YIXlTVvomuIi6QgGCvYm++ImyEx2wwgmSppZ6kbbA29ASwjAUBD63j2OFU0yoxeXpZkjrrX0qQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
    "@francoischalifour/autocomplete-core": {
      "version": "1.0.0-alpha.28",
      "resolved": "https://registry.npmjs.org/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.28.tgz",
@ -20118,6 +20259,14 @@
      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz",
      "integrity": "sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ=="
    },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
    "copy-webpack-plugin": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.2.1.tgz",
@ -20906,6 +21055,15 @@
        "utila": "0.4.0"
      }
    },
+    "dom-helpers": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz",
+      "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "dom-serializer": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@ -26753,6 +26911,15 @@
        "pure-color": "^1.2.0"
      }
    },
+    "react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-dev-utils": {
      "version": "10.2.1",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@ -27293,6 +27460,16 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-toastify": {
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.0.9.tgz",
+      "integrity": "sha512-StHXv+4kezHUnPyoILlvygSptQ79bxVuvKcC05yXP0FlqQgPA1ue+80BqxZZiCw2jWDGiY2MHyqBfFKf5YzZbA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react-transition-group": "^4.4.1"
+      }
+    },
    "react-toggle": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.1.tgz",
@ -27301,6 +27478,17 @@
        "classnames": "^2.2.5"
      }
    },
+    "react-transition-group": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
    "readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@ -29358,6 +29546,11 @@
        "is-number": "7.0.0"
      }
    },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
    "toidentifier": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
--- a/docs/package.json
+++ b/docs/package.json
@ -16,9 +16,14 @@
  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.66",
    "@docusaurus/preset-classic": "^2.0.0-alpha.66",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.12",
    "classnames": "^2.2.6",
    "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react-copy-to-clipboard": "^5.0.2",
+    "react-dom": "^16.8.4",
+    "react-toastify": "^6.0.9"
  },
  "browserslist": {
    "production": [
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@ -26,6 +26,15 @@ module.exports = {
      "behavior/lighting",
      "behavior/power",
    ],
+    Codes: [
+      "codes/index",
+      "codes/keyboard-keypad",
+      "codes/editing",
+      "codes/media",
+      "codes/applications",
+      "codes/input-assist",
+      "codes/power",
+    ],
    Development: [
      "dev-clean-room",
      "dev-setup",
--- a/docs/src/components/codes/Context.jsx
+++ b/docs/src/components/codes/Context.jsx
@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function Context({ children }) {
+  return <p className="context">{children}</p>;
+}
+
+Context.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+    .isRequired,
+};
--- a/docs/src/components/codes/Description.jsx
+++ b/docs/src/components/codes/Description.jsx
@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+const specialCharactersRegex = /(?:^|\s)((?:&(?:(?:\w+)|(?:#\d+));)|[_]|[^\w\s])(?:\s*\[([^[\]]+?)\])/g;
+
+function renderSpecialCharacters(description) {
+  const matches = Array.from(description.matchAll(specialCharactersRegex));
+  if (matches.length == 0) return description;
+  let lastIndex = 0;
+  const parts = matches.reduce((acc, match, i) => {
+    const { index } = match;
+    const str = match[0];
+    const chars = match[1];
+    const meaning = match[2];
+    if (index != lastIndex) {
+      acc.push(description.substring(lastIndex, index));
+    }
+    const pos = str.indexOf(chars);
+    if (pos > 0) {
+      acc.push(description.substr(index, pos));
+    }
+    acc.push(
+      <span key={i} className="symbol" title={meaning ?? ""}>
+        <code>{description.substr(index + pos, chars.length)}</code>
+        {meaning ? <span className="meaning">{meaning}</span> : undefined}
+      </span>
+    );
+    lastIndex = index + str.length;
+    return acc;
+  }, []);
+  if (lastIndex < description.length) {
+    parts.push(description.substr(lastIndex));
+  }
+  return parts;
+}
+
+export default function Description({ description = "" }) {
+  return (
+    <span className="description">{renderSpecialCharacters(description)}</span>
+  );
+}
+
+Description.propTypes = {
+  description: PropTypes.string.isRequired,
+};
--- a/docs/src/components/codes/Footnote.jsx
+++ b/docs/src/components/codes/Footnote.jsx
@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function Footnote({ children, symbol, id }) {
+  return (
+    <div className="footnote" id={id}>
+      <div className="symbol">{symbol}</div>
+      <div className="content">{children}</div>
+    </div>
+  );
+}
+
+Footnote.propTypes = {
+  children: PropTypes.element.isRequired,
+  symbol: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  id: PropTypes.string.isRequired,
+};
--- a/docs/src/components/codes/FootnoteRef.jsx
+++ b/docs/src/components/codes/FootnoteRef.jsx
@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function FootnoteRef({ children, anchor }) {
+  return (
+    <a href={"#" + anchor} className="footnoteRef">
+      {children}
+    </a>
+  );
+}
+
+FootnoteRef.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+  anchor: PropTypes.string.isRequired,
+};
--- a/docs/src/components/codes/FootnoteRefs.jsx
+++ b/docs/src/components/codes/FootnoteRefs.jsx
@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import FootnoteRef from "./FootnoteRef";
+
+function joinReactElements(arr, delimiter) {
+  return arr.reduce((acc, fragment) => {
+    if (acc === null) {
+      return fragment;
+    }
+    return (
+      <>
+        {acc}
+        {delimiter}
+        {fragment}
+      </>
+    );
+  }, null);
+}
+
+export default function FootnoteRefs({ footnotes }) {
+  return (
+    <span className="footnoteRefs">
+      {joinReactElements(
+        footnotes.map((footnote) => (
+          <FootnoteRef key={footnote.reference} {...footnote}>
+            {footnote.symbol}
+          </FootnoteRef>
+        )),
+        ", "
+      )}
+    </span>
+  );
+}
+
+FootnoteRefs.propTypes = {
+  footnotes: PropTypes.array.isRequired,
+};
--- a/docs/src/components/codes/Footnotes.jsx
+++ b/docs/src/components/codes/Footnotes.jsx
@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Footnote from "./Footnote";
+
+export default function Footnotes({ footnotes = [], id }) {
+  return (
+    <div className="footnotes">
+      <a id={id} className="anchor" />
+      <div className="label">Notes</div>
+      <div className="notes">
+        {footnotes.map((footnote) => (
+          <Footnote key={footnote.id} {...footnote}>
+            {footnote.value}
+          </Footnote>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+Footnotes.propTypes = {
+  footnotes: PropTypes.array.isRequired,
+  id: PropTypes.string.isRequired,
+};
--- a/docs/src/components/codes/LinkIcon.jsx
+++ b/docs/src/components/codes/LinkIcon.jsx
@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+export default function LinkIcon() {
+  return <FontAwesomeIcon className="icon" icon={faExternalLinkAlt} />;
+}
+
+LinkIcon.propTypes = {};
--- a/docs/src/components/codes/Name.jsx
+++ b/docs/src/components/codes/Name.jsx
@ -0,0 +1,25 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import ToastyCopyToClipboard from "./ToastyCopyToClipboard";
+
+export default function Name({ children, name }) {
+  return (
+    <ToastyCopyToClipboard text={name}>
+      <code className="name" title="Copy 📋">
+        {children}
+      </code>
+    </ToastyCopyToClipboard>
+  );
+}
+
+Name.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+    .isRequired,
+  name: PropTypes.string.isRequired,
+};
--- a/docs/src/components/codes/OsLegend.jsx
+++ b/docs/src/components/codes/OsLegend.jsx
@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import operatingSystems from "@site/src/data/operating-systems";
+
+export default function OsLegend() {
+  return (
+    <div className="codes os legend">
+      {operatingSystems.map(({ key, className, heading, title }) => (
+        <div key={key} className={"os " + className}>
+          <span className="heading">{heading}</span>
+          <span className="title">{title}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+OsLegend.propTypes = {};
--- a/docs/src/components/codes/OsSupport.jsx
+++ b/docs/src/components/codes/OsSupport.jsx
@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import OsSupportIcon from "./OsSupportIcon";
+import FootnoteRefs from "./FootnoteRefs";
+
+export default function OsSupport({ value, footnotes = [] }) {
+  return (
+    <>
+      <OsSupportIcon value={value} />
+      {footnotes.length > 0 ? (
+        <FootnoteRefs footnotes={footnotes} />
+      ) : undefined}
+    </>
+  );
+}
+
+OsSupport.propTypes = {
+  value: PropTypes.oneOf([true, false, null]),
+  footnotes: PropTypes.array.isRequired,
+};
--- a/docs/src/components/codes/OsSupportIcon.jsx
+++ b/docs/src/components/codes/OsSupportIcon.jsx
@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+const Icon = ({ children, className, title }) => (
+  <span className={className} title={title}>
+    {children}
+  </span>
+);
+
+Icon.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+    .isRequired,
+  className: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export const Supported = () => (
+  <Icon className="supported" title="Supported 😄">
+    ⭐
+  </Icon>
+);
+export const NotSupported = () => (
+  <Icon className="not-supported" title="Not Supported 😢">
+    ❌
+  </Icon>
+);
+export const NotTested = () => (
+  <Icon className="not-tested" title="Not Tested Yet - PR's welcomed! 🧐">
+    ❔
+  </Icon>
+);
+
+export default function OsSupportIcon({ value }) {
+  if (value === true) {
+    return <Supported />;
+  }
+  if (value === false) {
+    return <NotSupported />;
+  }
+  return <NotTested />;
+}
+
+OsSupportIcon.propTypes = {
+  value: PropTypes.oneOf([true, false, null]),
+};
--- a/docs/src/components/codes/Table.jsx
+++ b/docs/src/components/codes/Table.jsx
@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import TableRow from "./TableRow";
+import Footnotes from "./Footnotes";
+import LinkIcon from "./LinkIcon";
+import operatingSystems from "@site/src/data/operating-systems";
+import { getCodes } from "@site/src/hid";
+import { getGroup } from "@site/src/groups";
+import { getFootnote } from "@site/src/footnotes";
+
+function extractFootnoteIds(codes) {
+  return Array.from(
+    new Set(
+      codes
+        .flatMap(({ footnotes }) => Object.values(footnotes))
+        .map((refs) => (Array.isArray(refs) ? refs.flat() : refs))
+    )
+  );
+}
+
+export default function Table({ group }) {
+  const codes = getCodes(getGroup(group));
+
+  const footnotesAnchor = group + "-" + "footnotes";
+
+  const tableFootnotes = extractFootnoteIds(codes).map((id, i) => {
+    const Component = getFootnote(id);
+    return {
+      id,
+      anchor: footnotesAnchor,
+      symbol: i + 1,
+      value: Component ? <Component /> : undefined,
+    };
+  });
+
+  return (
+    <div className="codes">
+      <table>
+        <thead>
+          <tr>
+            <th className="names">Names</th>
+            <th className="description">Description</th>
+            <th className="documentation" title="Documentation">
+              <LinkIcon />
+            </th>
+            {operatingSystems.map(({ key, className, heading, title }) => (
+              <th key={key} className={`os ${className}`} title={title}>
+                {heading}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.isArray(codes)
+            ? codes.map((code) => (
+                <TableRow
+                  key={code.names[0]}
+                  {...code}
+                  tableFootnotes={tableFootnotes}
+                />
+              ))
+            : undefined}
+        </tbody>
+      </table>
+      {tableFootnotes.length > 0 ? (
+        <Footnotes id={footnotesAnchor} footnotes={tableFootnotes} />
+      ) : undefined}
+    </div>
+  );
+}
+
+Table.propTypes = {
+  group: PropTypes.string.isRequired,
+};
--- a/docs/src/components/codes/TableRow.jsx
+++ b/docs/src/components/codes/TableRow.jsx
@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Name from "./Name";
+import Description from "./Description";
+import Context from "./Context";
+import LinkIcon from "./LinkIcon";
+import OsSupport from "./OsSupport";
+import operatingSystems from "@site/src/data/operating-systems";
+
+export default function TableRow({
+  names,
+  description,
+  context = "",
+  clarify = false,
+  documentation,
+  os,
+  footnotes,
+  tableFootnotes,
+}) {
+  return (
+    <tr>
+      <td className="names">
+        {names.map((name) => (
+          <Name key={name} name={name}>
+            {name}
+          </Name>
+        ))}
+      </td>
+      <td className="description">
+        <Description description={description} />
+        {clarify && context ? <Context>{context}</Context> : undefined}
+      </td>
+      <td className="documentation" title="Documentation">
+        <a href={documentation} target="_blank" rel="noreferrer">
+          <LinkIcon />
+        </a>
+      </td>
+      {operatingSystems.map(({ key, className, title }) => (
+        <td key={key} className={`os ${className}`} title={title}>
+          <OsSupport
+            value={os[key]}
+            footnotes={tableFootnotes.filter(
+              ({ id }) =>
+                (Array.isArray(footnotes[key]) &&
+                  footnotes[key].includes(id)) ||
+                footnotes[key] == id
+            )}
+          />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+TableRow.propTypes = {
+  names: PropTypes.array.isRequired,
+  description: PropTypes.string.isRequired,
+  context: PropTypes.string.isRequired,
+  clarify: PropTypes.bool,
+  documentation: PropTypes.string.isRequired,
+  os: PropTypes.object.isRequired,
+  footnotes: PropTypes.object.isRequired,
+  tableFootnotes: PropTypes.array.isRequired,
+};
--- a/docs/src/components/codes/ToastyContainer.jsx
+++ b/docs/src/components/codes/ToastyContainer.jsx
@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+export default function ToastyContainer() {
+  return (
+    <ToastContainer
+      position="bottom-right"
+      autoClose={2000}
+      hideProgressBar={true}
+      newestOnTop={true}
+    />
+  );
+}
+
+ToastyContainer.propTypes = {};
--- a/docs/src/components/codes/ToastyCopyToClipboard.jsx
+++ b/docs/src/components/codes/ToastyCopyToClipboard.jsx
@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { toast } from "react-toastify";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+
+export default function ToastyCopyToClipboard({ children, text }) {
+  const notify = () =>
+    toast(
+      <span>
+        📋 Copied <code>{text}</code>
+      </span>
+    );
+  return (
+    <div onClick={notify}>
+      <CopyToClipboard text={text}>{children}</CopyToClipboard>
+    </div>
+  );
+}
+
+ToastyCopyToClipboard.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+    .isRequired,
+  text: PropTypes.string.isRequired,
+};
--- a/docs/src/css/codes.css
+++ b/docs/src/css/codes.css
@ -0,0 +1,220 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+.codes.os.legend {
+  position: sticky;
+  z-index: 1;
+  top: var(--ifm-navbar-height);
+  width: 100%;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  background: var(--ifm-background-color);
+  display: flex;
+  justify-content: space-between;
+}
+
+html[data-theme="light"] .codes.os.legend {
+  background: white;
+}
+
+.codes.os.legend .os {
+  flex: 1;
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+  padding: 0.1em;
+  border: 1px var(--ifm-table-border-color) solid;
+  border-radius: 0.5em;
+  text-align: center;
+}
+
+.codes.os.legend .os .heading {
+  font-weight: bold;
+}
+
+.codes.os.legend .os .heading::after {
+  content: " : ";
+  font-weight: normal;
+}
+
+.codes .name {
+  cursor: copy;
+}
+
+.codes .name:hover {
+  opacity: 0.8;
+}
+
+.codes .name:active {
+  color: var(--ifm-font-color-base-inverse);
+  background: var(--ifm-font-color-base);
+}
+
+.codes.os.legend,
+.codes table {
+  font-size: 0.8em;
+}
+
+.codes table {
+  display: table;
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+
+.codes th,
+.codes td {
+  padding: 0.2rem;
+}
+
+.codes td {
+  position: relative;
+}
+
+.codes th.names,
+.codes th.description {
+  text-align: left;
+}
+
+.codes td.names code {
+  display: block;
+  float: left;
+  clear: both;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  font-size: 0.85em;
+}
+
+.codes .context {
+  display: inline;
+  margin: 0 0 0 0.5em;
+  font-size: 0.85em;
+}
+
+.codes .context::before {
+  content: "(";
+}
+
+.codes .context::after {
+  content: ")";
+}
+
+.codes .symbol {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.codes .symbol code {
+  align-self: flex-start;
+  width: auto;
+}
+
+.codes .symbol .meaning {
+  flex: 1;
+  font-size: 0.8em;
+  text-transform: uppercase;
+}
+
+.codes td.documentation,
+.codes td.os {
+  width: 0.1%;
+  min-width: 1.9rem;
+  text-align: center;
+}
+
+.codes td.documentation {
+  font-size: 0.8em;
+}
+
+.codes td.documentation a {
+  cursor: help;
+}
+
+.codes .os {
+  color: black;
+}
+
+.codes td.os {
+  font-size: 0.8em;
+}
+
+.codes .not-tested {
+  font-weight: bold;
+}
+
+.codes .os.windows {
+  background: #caedfd;
+}
+
+.codes .os.linux {
+  background: #fff2ca;
+}
+
+.codes .os.android {
+  background: #d8eed9;
+}
+
+.codes .os.macos {
+  background: #ececec;
+}
+
+.codes .os.ios {
+  background: #ffffff;
+}
+
+.codes .footnotes {
+  display: flex;
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
+  border: var(--ifm-table-border-width) dashed var(--ifm-table-border-color);
+  border-top: 0;
+  font-size: 0.8em;
+}
+
+.codes .footnotes .label {
+  display: block;
+  margin-right: 1em;
+  font-style: italic;
+}
+
+.codes .footnotes .label::after {
+  content: ":";
+}
+
+.codes .footnotes .anchor {
+  display: block;
+  position: relative;
+  top: calc(var(--ifm-navbar-height) * -1 - 6em);
+  visibility: hidden;
+}
+
+.codes .footnote {
+  flex: 1;
+  display: flex;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.codes .footnote .symbol {
+  flex: 0;
+  float: left;
+  margin-right: 0.4em;
+  font-size: 0.8em;
+}
+
+.codes .footnote .content p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.codes .footnoteRefs {
+  float: right;
+  font-size: 0.8em;
+}
+
+.codes .footnoteRefs a {
+  color: black;
+}
--- a/docs/src/data/footnotes.js
+++ b/docs/src/data/footnotes.js
@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import example from "@site/docs/codes/_footnotes/example.mdx";
+
+export default {
+  example,
+};
--- a/docs/src/data/groups.js
+++ b/docs/src/data/groups.js
@ -0,0 +1,414 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+export default {
+  "application-controls": [
+    "K_MENU",
+    "C_AC_PROPERTIES",
+    "K_SELECT",
+    "C_AC_CANCEL",
+    "K_EXECUTE",
+    "C_AC_REFRESH",
+    "K_REFRESH",
+    "C_AC_STOP",
+    "K_STOP",
+    "C_AC_FORWARD",
+    "K_FORWARD",
+    "C_AC_BACK",
+    "K_BACK",
+    "C_AC_HOME",
+    "C_AC_BOOKMARKS",
+    "C_AC_NEW",
+    "C_AC_OPEN",
+    "C_AC_SAVE",
+    "C_AC_CLOSE",
+    "C_AC_EXIT",
+    "C_AC_PRINT",
+    "C_AC_FIND",
+    "K_FIND",
+    "K_FIND2",
+    "C_AC_SEARCH",
+    "C_AC_GOTO",
+    "C_AC_ZOOM",
+    "C_AC_ZOOM_IN",
+    "C_AC_ZOOM_OUT",
+    "C_AC_SCROLL_UP",
+    "K_SCROLL_UP",
+    "C_AC_SCROLL_DOWN",
+    "K_SCROLL_DOWN",
+    "C_AC_REPLY",
+    "C_AC_FORWARD_MAIL",
+    "C_AC_SEND",
+    "C_AC_EDIT",
+    "C_AC_INSERT",
+    "C_AC_DEL",
+    "C_AC_VIEW_TOGGLE",
+    "C_AC_DESKTOP_SHOW_ALL_WINDOWS",
+    "C_VOICE_COMMAND",
+  ],
+  applications: [
+    "C_AL_NEXT_TASK",
+    "C_AL_PREVIOUS_TASK",
+    "C_AL_SELECT_TASK",
+    "C_AL_MY_COMPUTER",
+    "C_AL_DOCUMENTS",
+    "C_AL_FILE_BROWSER",
+    "C_AL_WWW",
+    "K_WWW",
+    "C_AL_EMAIL",
+    "C_AL_INSTANT_MESSAGING",
+    "C_AL_NETWORK_CHAT",
+    "C_AL_CONTACTS",
+    "C_AL_CALENDAR",
+    "C_AL_IMAGE_BROWSER",
+    "C_AL_AUDIO_BROWSER",
+    "C_AL_MOVIE_BROWSER",
+    "C_AL_TEXT_EDITOR",
+    "C_AL_WORD",
+    "C_AL_SPREADSHEET",
+    "C_AL_PRESENTATION",
+    "C_AL_GRAPHICS_EDITOR",
+    "C_AL_CALCULATOR",
+    "K_CALCULATOR",
+    "C_AL_NEWS",
+    "C_AL_DATABASE",
+    "C_AL_VOICEMAIL",
+    "C_AL_FINANCE",
+    "C_AL_TASK_MANAGER",
+    "C_AL_JOURNAL",
+    "C_AL_AV_CAPTURE_PLAYBACK",
+    "C_AL_SPELLCHECK",
+    "C_AL_SCREEN_SAVER",
+    "C_AL_KEYBOARD_LAYOUT",
+    "C_AL_CONTROL_PANEL",
+    "C_AL_HELP",
+    "K_HELP",
+    "C_AL_OEM_FEATURES",
+    "C_AL_CCC",
+  ],
+  "consumer-controls": [
+    "C_CHANNEL_INC",
+    "C_CHANNEL_DEC",
+    "C_RECALL_LAST",
+    "C_MEDIA_VCR_PLUS",
+    "C_MEDIA_GUIDE",
+    "C_MEDIA_STEP",
+    "C_MEDIA_HOME",
+    "C_MEDIA_TV",
+    "C_MEDIA_CABLE",
+    "C_MEDIA_TUNER",
+    "C_MEDIA_DVD",
+    "C_MEDIA_CD",
+    "C_MEDIA_SATELLITE",
+    "C_MEDIA_VCR",
+    "C_MEDIA_TAPE",
+    "C_MEDIA_COMPUTER",
+    "C_MEDIA_WWW",
+    "C_MEDIA_GAMES",
+    "C_MEDIA_PHONE",
+    "C_MEDIA_VIDEOPHONE",
+    "C_MEDIA_MESSAGES",
+    "C_QUIT",
+    "C_HELP",
+  ],
+  "consumer-menus": [
+    "C_MENU",
+    "C_MENU_PICK",
+    "C_MENU_UP",
+    "C_MENU_DOWN",
+    "C_MENU_LEFT",
+    "C_MENU_RIGHT",
+    "C_MENU_ESCAPE",
+    "C_MENU_INCREASE",
+    "C_MENU_DECREASE",
+    "C_RED_BUTTON",
+    "C_GREEN_BUTTON",
+    "C_BLUE_BUTTON",
+    "C_YELLOW_BUTTON",
+  ],
+  "cut-copy-paste": [
+    "C_AC_CUT",
+    "K_CUT",
+    "C_AC_COPY",
+    "K_COPY",
+    "C_AC_PASTE",
+    "K_PASTE",
+  ],
+  display: [
+    "C_BRIGHTNESS_INC",
+    "C_BRIGHTNESS_DEC",
+    "C_BRIGHTNESS_MINIMUM",
+    "C_BRIGHTNESS_MAXIMUM",
+    "C_BRIGHTNESS_AUTO",
+    "C_BACKLIGHT_TOGGLE",
+    "C_ASPECT",
+    "C_PIP",
+  ],
+  "input-assist": [
+    "C_KEYBOARD_INPUT_ASSIST_NEXT",
+    "C_KEYBOARD_INPUT_ASSIST_PREVIOUS",
+    "C_KEYBOARD_INPUT_ASSIST_NEXT_GROUP",
+    "C_KEYBOARD_INPUT_ASSIST_PREVIOUS_GROUP",
+    "C_KEYBOARD_INPUT_ASSIST_ACCEPT",
+    "C_KEYBOARD_INPUT_ASSIST_CANCEL",
+  ],
+  "keyboard-control-whitespace": [
+    "ESCAPE",
+    "RETURN",
+    "RETURN2",
+    "SPACE",
+    "TAB",
+    "BACKSPACE",
+    "DELETE",
+    "INSERT",
+  ],
+  "keyboard-fkeys": [
+    "F1",
+    "F2",
+    "F3",
+    "F4",
+    "F5",
+    "F6",
+    "F7",
+    "F8",
+    "F9",
+    "F10",
+    "F11",
+    "F12",
+    "F13",
+    "F14",
+    "F15",
+    "F16",
+    "F17",
+    "F18",
+    "F19",
+    "F20",
+    "F21",
+    "F22",
+    "F23",
+    "F24",
+  ],
+  "keyboard-international": [
+    "INTERNATIONAL_1",
+    "INTERNATIONAL_2",
+    "INTERNATIONAL_3",
+    "INTERNATIONAL_4",
+    "INTERNATIONAL_5",
+    "INTERNATIONAL_6",
+    "INTERNATIONAL_7",
+    "INTERNATIONAL_8",
+    "INTERNATIONAL_9",
+  ],
+  "keyboard-language": [
+    "LANGUAGE_1",
+    "LANGUAGE_2",
+    "LANGUAGE_3",
+    "LANGUAGE_4",
+    "LANGUAGE_5",
+    "LANGUAGE_6",
+    "LANGUAGE_7",
+    "LANGUAGE_8",
+    "LANGUAGE_9",
+  ],
+  "keyboard-letters": [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ],
+  "keyboard-locks": [
+    "CAPSLOCK",
+    "LOCKING_CAPS",
+    "SCROLLLOCK",
+    "LOCKING_SCROLL",
+    "LOCKING_NUM",
+  ],
+  "keyboard-miscellaneous": [
+    "PRINTSCREEN",
+    "PAUSE_BREAK",
+    "ALT_ERASE",
+    "SYSREQ",
+    "K_CANCEL",
+    "CLEAR",
+    "CLEAR_AGAIN",
+    "CRSEL",
+    "PRIOR",
+    "SEPARATOR",
+    "OUT",
+    "OPER",
+    "EXSEL",
+    "K_EDIT",
+  ],
+  "keyboard-modifiers": [
+    "LEFT_SHIFT",
+    "RIGHT_SHIFT",
+    "LEFT_CONTROL",
+    "RIGHT_CONTROL",
+    "LEFT_ALT",
+    "RIGHT_ALT",
+    "LEFT_GUI",
+    "RIGHT_GUI",
+  ],
+  "keyboard-navigation": [
+    "HOME",
+    "END",
+    "PAGE_UP",
+    "PAGE_DOWN",
+    "UP_ARROW",
+    "DOWN_ARROW",
+    "LEFT_ARROW",
+    "RIGHT_ARROW",
+    "K_APPLICATION",
+  ],
+  "keyboard-numbers": [
+    "NUMBER_1",
+    "NUMBER_2",
+    "NUMBER_3",
+    "NUMBER_4",
+    "NUMBER_5",
+    "NUMBER_6",
+    "NUMBER_7",
+    "NUMBER_8",
+    "NUMBER_9",
+    "NUMBER_0",
+  ],
+  "keyboard-symbols": [
+    "EXCLAMATION",
+    "AT_SIGN",
+    "HASH",
+    "DOLLAR",
+    "PERCENT",
+    "CARET",
+    "AMPERSAND",
+    "ASTERISK",
+    "LEFT_PARENTHESIS",
+    "RIGHT_PARENTHESIS",
+    "EQUAL",
+    "PLUS",
+    "MINUS",
+    "UNDERSCORE",
+    "SLASH",
+    "QUESTION",
+    "BACKSLASH",
+    "PIPE",
+    "NON_US_BACKSLASH",
+    "PIPE2",
+    "SEMICOLON",
+    "COLON",
+    "SINGLE_QUOTE",
+    "DOUBLE_QUOTES",
+    "COMMA",
+    "LESS_THAN",
+    "PERIOD",
+    "GREATER_THAN",
+    "LEFT_BRACKET",
+    "LEFT_BRACE",
+    "RIGHT_BRACKET",
+    "RIGHT_BRACE",
+    "GRAVE",
+    "TILDE",
+    "NON_US_HASH",
+    "TILDE2",
+  ],
+  keypad: ["KP_NUMLOCK", "KP_CLEAR", "CLEAR2", "KP_ENTER"],
+  "keypad-numbers": [
+    "KP_NUMBER_1",
+    "KP_NUMBER_2",
+    "KP_NUMBER_3",
+    "KP_NUMBER_4",
+    "KP_NUMBER_5",
+    "KP_NUMBER_6",
+    "KP_NUMBER_7",
+    "KP_NUMBER_8",
+    "KP_NUMBER_9",
+    "KP_NUMBER_0",
+  ],
+  "keypad-operations": [
+    "KP_PLUS",
+    "KP_MINUS",
+    "KP_MULTIPLY",
+    "KP_DIVIDE",
+    "KP_EQUAL",
+    "KP_EQUAL_AS400",
+    "KP_DOT",
+    "KP_COMMA",
+    "KP_LEFT_PARENTHESIS",
+    "KP_RIGHT_PARENTHESIS",
+  ],
+  "media-controls": [
+    "C_RECORD",
+    "C_PLAY",
+    "C_PLAY_PAUSE",
+    "K_PLAY_PAUSE",
+    "C_PAUSE",
+    "C_STOP",
+    "K_STOP2",
+    "K_STOP3",
+    "C_STOP_EJECT",
+    "C_EJECT",
+    "K_EJECT",
+    "C_NEXT",
+    "K_NEXT",
+    "C_PREVIOUS",
+    "K_PREVIOUS",
+    "C_FAST_FORWARD",
+    "C_REWIND",
+    "C_SLOW",
+    "C_SLOW_TRACKING",
+    "C_REPEAT",
+    "C_RANDOM_PLAY",
+    "C_CAPTIONS",
+    "C_DATA_ON_SCREEN",
+    "C_SNAPSHOT",
+  ],
+  power: [
+    "C_POWER",
+    "K_POWER",
+    "C_RESET",
+    "C_SLEEP",
+    "K_SLEEP",
+    "C_SLEEP_MODE",
+    "C_AL_LOGOFF",
+    "C_AL_LOCK",
+    "K_LOCK",
+  ],
+  sound: [
+    "C_VOLUME_UP",
+    "K_VOLUME_UP",
+    "K_VOLUME_UP2",
+    "C_VOLUME_DOWN",
+    "K_VOLUME_DOWN",
+    "K_VOLUME_DOWN2",
+    "C_MUTE",
+    "K_MUTE",
+    "K_MUTE2",
+    "C_ALTERNATE_AUDIO_INCREMENT",
+    "C_BASS_BOOST",
+  ],
+  "undo-redo": ["C_AC_UNDO", "K_UNDO", "C_AC_REDO", "K_AGAIN"],
+};
--- a/docs/src/data/hid-applications.js
+++ b/docs/src/data/hid-applications.js
@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import usage from "../hid-usage";
+import * as pages from "./hid-usage-pages";
+
+export const keyboard = usage(pages.genericDesktop, 0x06);
+export const consumer = usage(pages.consumer, 0x01);
--- a/docs/src/data/hid-usage-pages.js
+++ b/docs/src/data/hid-usage-pages.js
@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+export const genericDesktop = 0x01;
+export const key = 0x07;
+export const consumer = 0x0c;
--- a/docs/src/data/hid.js
+++ b/docs/src/data/hid.js
--- a/docs/src/data/operating-systems.js
+++ b/docs/src/data/operating-systems.js
@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+export default [
+  {
+    key: "windows",
+    className: "windows",
+    heading: "W",
+    title: "Windows",
+  },
+  {
+    key: "linux",
+    className: "linux",
+    heading: "L",
+    title: "Linux",
+  },
+  {
+    key: "android",
+    className: "android",
+    heading: "A",
+    title: "Android",
+  },
+  {
+    key: "macos",
+    className: "macos",
+    heading: "m",
+    title: "macOS",
+  },
+  {
+    key: "ios",
+    className: "ios",
+    heading: "i",
+    title: "iOS",
+  },
+];
--- a/docs/src/footnotes.js
+++ b/docs/src/footnotes.js
@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import footnotes from "./data/footnotes";
+
+export function getFootnote(id) {
+  const footnote = footnotes[id];
+  if (typeof footnote != "undefined") {
+    return footnote;
+  }
+}
--- a/docs/src/groups.js
+++ b/docs/src/groups.js
@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import groups from "./data/groups.js";
+
+export function getGroup(id) {
+  return groups[id] ?? null;
+}
--- a/docs/src/hid-usage.js
+++ b/docs/src/hid-usage.js
@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+export default function usage(page, id) {
+  return (page << 16) | id;
+}
--- a/docs/src/hid.js
+++ b/docs/src/hid.js
@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import codes from "./data/hid";
+
+export const map = codes.reduce((map, item) => {
+  item.names.forEach((name) => (map[name] = item));
+  return map;
+}, {});
+
+export function getCode(id) {
+  return map[id] ?? null;
+}
+
+export function getCodes(ids) {
+  return ids.reduce((result, id) => [...result, map[id]], []);
+}