feat: style md <kbd>

kobaltedev · Nov 4, 2024 · 38d516a · 38d516a
1 parent f86b099
commit 38d516a
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 0 deletions.
diff --git a/dev/src/routes/index.mdx b/dev/src/routes/index.mdx
@@ -68,6 +68,8 @@ A note[^1]
 
 ~one~ or ~~two~~ tildes.
 
+<kbd class="cls">Ctrl</kbd> + <kbd>C</kbd>
+
 | a        | b        |        c |    d     |
 | -------- | :------- | -------: | :------: |
 | longword | longword | longword | longword |

diff --git a/docs/src/routes/guide/dev.mdx b/docs/src/routes/guide/dev.mdx
@@ -91,6 +91,8 @@ A note[^1]
 
 ~one~ or ~~two~~ tildes.
 
+<kbd class="cls">Ctrl</kbd> + <kbd>C</kbd>
+
 | a        | b        |        c |    d     |
 | -------- | :------- | -------: | :------: |
 | longword | longword | longword | longword |

diff --git a/src/config/mdx.ts b/src/config/mdx.ts
@@ -17,6 +17,7 @@ import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import type { SolidBaseResolvedConfig } from ".";
 import { rehypeFixExpressiveCodeJsx } from "./rehype-plugins";
 import {
+	remarkAddClass,
 	remarkDirectiveContainers,
 	remarkGithubAlertsToDirectives,
 	remarkIssueAutolink,
@@ -67,6 +68,7 @@ export function solidBaseMdx(sbConfig: SolidBaseResolvedConfig<any>) {
 			remarkRelativeImports,
 			remarkTOC,
 			remarkDirectiveContainers,
+			remarkAddClass,
 			[remarkIssueAutolink, sbConfig.issueAutolink],
 			...(sbConfig.markdown?.remarkPlugins ?? []),
 		],

diff --git a/src/config/remark-plugins.ts b/src/config/remark-plugins.ts
@@ -198,3 +198,25 @@ export function remarkRelativeImports() {
 		});
 	};
 }
+
+export function remarkAddClass() {
+	return (tree: any) => {
+		visit(tree, (node) => {
+			if (node.type !== "mdxJsxTextElement" && node.name !== "kbd") return;
+
+			node.attributes ??= [];
+
+			const found = node.attributes.find((attr: any) => attr.name === "class");
+
+			if (found) {
+				found.value += " sb-kbd";
+			} else {
+				node.attributes.push({
+					type: "mdxJsxAttribute",
+					name: "class",
+					value: "sb-kbd",
+				});
+			}
+		});
+	};
+}
diff --git a/src/default-theme/mdx-components.module.css b/src/default-theme/mdx-components.module.css
@@ -50,6 +50,15 @@ h2[id="footnote-label"] {
 	line-height: 1.3;
 }
 
+:global(.sb-kbd) {
+	border-radius: var(--border-radius);
+	border: 1px solid var(--decoration-color);
+	border-bottom-width: 3px;
+	background: color-mix(in hsl, var(--decoration-color) 10%, transparent);
+	color: var(--heading-color);
+	padding: .1em .4em;
+}
+
 .a,
 a[data-footnote-backref],
 a[data-footnote-ref] {