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
parent 194854ff7b
commit ff638eb010
44 changed files with 9578 additions and 3 deletions
--- 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]], []);
+}