feat(docs): Add keyboard vs consumer variants note

docs/docs/codes/applications.mdx

@@ -6,10 +6,12 @@ hide_title: true
 
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
+import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
 import Content, { toc as contentToc } from "./_applications.mdx";
 
 export const toc = contentToc;
 
+<KeyboardConsumer />
 <OsLegend />
 <ToastyContainer />
 <Content />

docs/docs/codes/editing.mdx

@@ -7,9 +7,11 @@ hide_title: true
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_editing.mdx";
+import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
 
 export const toc = contentToc;
 
+<KeyboardConsumer />
 <OsLegend />
 <ToastyContainer />
 <Content />

docs/docs/codes/index.mdx

@@ -6,6 +6,7 @@ slug: ./
 ---
 
 import SpellingCaution from "@site/src/components/codes/SpellingCaution";
+import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Key, { toc as keyToc } from "./_keyboard-keypad.mdx";
@@ -25,6 +26,7 @@ export const toc = [
 ];
 
 <SpellingCaution />
+<KeyboardConsumer />
 <OsLegend />
 <ToastyContainer />
 <Key />

docs/docs/codes/media.mdx

@@ -7,9 +7,11 @@ hide_title: true
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_media.mdx";
+import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
 
 export const toc = contentToc;
 
+<KeyboardConsumer />
 <OsLegend />
 <ToastyContainer />
 <Content />

docs/docs/codes/power.mdx

@@ -7,9 +7,11 @@ hide_title: true
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_power.mdx";
+import KeyboardConsumer from "@site/src/components/codes/KeyboardConsumer";
 
 export const toc = contentToc;
 
+<KeyboardConsumer />
 <OsLegend />
 <ToastyContainer />
 <Content />

docs/src/components/codes/KeyboardConsumer.jsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2024 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import Admonition from "@theme/Admonition";
+
+export default function KeyboardConsumer() {
+  return (
+    <Admonition type="info" title="Keyboard vs. Consumer keycodes">
+      <p>
+        In the below tables, there are keycode pairs with similar names where
+        one variant has a <code>K_</code> prefix and another <code>C_</code>.
+        These variants correspond to similarly named usages from different{" "}
+        <a href="https://usb.org/sites/default/files/hut1_2.pdf#page=16">
+          HID usage pages
+        </a>
+        , namely the "keyboard/keypad" and "consumer" ones respectively.
+      </p>
+      <p>
+        In practice, some OS and applications might listen to only one of the
+        variants. You can use the values in the compatibility columns below to
+        assist you in selecting which one to use.
+      </p>
+    </Admonition>
+  );
+}
+
+KeyboardConsumer.propTypes = {};