Split into two columns

zmkfirmware · Jan 16, 2025 · 13b4574 · 13b4574
1 parent d8da6cd
commit 13b4574
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/docs/docs/intro.md → docs/docs/intro.mdx b/docs/docs/intro.md → docs/docs/intro.mdx
@@ -4,6 +4,8 @@ sidebar_label: Introduction
 slug: /
 ---
 
+import { Columns, Column } from "@site/src/components/columns";
+
 ZMK Firmware is an open source (MIT) keyboard firmware built on the [Zephyr™ Project](https://zephyrproject.org/) Real Time Operating System (RTOS).
 ZMK's goal is to provide a modern and powerful firmware that is designed for power-efficiency, flexibility, and broad hardware support.
 ZMK is capable of being used for both wired and wireless input devices.
@@ -12,9 +14,18 @@ ZMK is capable of being used for both wired and wireless input devices.
 
 Below table lists major features/capabilities currently supported in ZMK, as well as ones that are currently under development and not planned.
 
+<Columns>
+  <Column className="full-width-table">
+
 | Legend: | ✅ Supported | 🚧 Under Development | ❌ Not Planned |
 | :------ | :----------- | :------------------- | -------------- |
 
+  </Column>
+</Columns>
+
+<Columns>
+  <Column className="full-width-table">
+
 | Hardware                                                                                                      | Support |
 | ------------------------------------------------------------------------------------------------------------- | :-----: |
 | [Wireless Split Keyboards](features/split-keyboards.md)                                                       |   ✅    |
@@ -32,6 +43,9 @@ Below table lists major features/capabilities currently supported in ZMK, as wel
 | [Support for a Wide Range of 32-bit Microcontrollers](https://docs.zephyrproject.org/3.5.0/boards/index.html) |   ✅    |
 | Support for AVR/8-bit Chips                                                                                   |   ❌    |
 
+  </Column>
+  <Column className="full-width-table">
+
 | Connectivity                                                    | Support |
 | --------------------------------------------------------------- | :-----: |
 | Low-Latency BLE Support                                         |   ✅    |
@@ -52,6 +66,9 @@ Below table lists major features/capabilities currently supported in ZMK, as wel
 | [Mouse Keys](keymaps/behaviors/mouse-emulation.md)                                                                                                     |   ✅    |
 | [Realtime Keymap Updating](features/studio.md)                                                                                                         |   🚧    |
 
+  </Column>
+</Columns>
+
 ## Code of Conduct
 
 Please note that this project is released with a [Contributor Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/).

diff --git a/docs/src/components/columns.tsx b/docs/src/components/columns.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode, CSSProperties } from "react";
+import clsx from "clsx";
+
+interface ColumnsProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+// className will allow you to pass either your custom classes or the native infima classes https://infima.dev/docs/layout/grid.
+// style will allow you to either pass your custom styles directly, which can be an alternative to the "styles.module.css" file in certain cases.
+export function Columns({ children, className, style }: ColumnsProps) {
+  return (
+    <div className="container center">
+      <div className={clsx("row", className)} style={style}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface ColumnProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export function Column({ children, className, style }: ColumnProps) {
+  return (
+    <div className={clsx("col", className)} style={style}>
+      {children}
+    </div>
+  );
+}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -50,3 +50,8 @@
 .secrettabs {
   display: none;
 }
+
+.full-width-table table {
+  width: 100%;
+  display: table;
+}