Merge pull request #41 from linked-planet/dev

first simple draft of a code block

Author: marcus-wishes

library/src/components/codeblock/CodeBlock.tsx

@@ -0,0 +1,39 @@
+import { common, createLowlight } from "lowlight"
+import { Fragment, jsx, jsxs } from "react/jsx-runtime"
+import { toJsxRuntime } from "hast-util-to-jsx-runtime"
+import { memo } from "react"
+
+import "./theme.scss"
+
+/**
+ * @typedef {import('hast').Root} Root
+ *
+ * @typedef {import('lowlight')}
+ */
+
+const lowLight = createLowlight(common)
+
+function CodeBlock({
+	children,
+	language,
+}: {
+	/* children is the code to be rendered */
+	children: string
+	/* language is the language of the code */
+	language?: string
+}) {
+	const ast = language
+		? lowLight.highlight(language, children)
+		: lowLight.highlightAuto(children)
+	// @ts-expect-error: react types don’t type these.
+	const jsxTree = toJsxRuntime(ast, { Fragment, jsx, jsxs })
+
+	return (
+		<pre className="overflow-auto bg-neutral p-2 border-l-4 border-l-solid border-l-neutral-pressed">
+			{jsxTree}
+		</pre>
+	)
+}
+
+const memoizedCodeBlock = memo(CodeBlock)
+export { memoizedCodeBlock as CodeBlock }

library/src/components/codeblock/index.ts

@@ -0,0 +1 @@
+export { CodeBlock } from "./CodeBlock"

library/src/components/codeblock/theme.scss

@@ -0,0 +1,13 @@
+@use "sass:meta";
+
+html[data-color-mode="light"], 
+html[data-color-mode="fallback"],
+html[data-color-mode="aui-light"],
+html[data-color-mode="auto"]
+{
+  @include meta.load-css("highlight.js/styles/github");
+}
+html[data-color-mode="dark"] {
+  @include meta.load-css("highlight.js/styles/github-dark-dimmed");
+}
+

library/src/components/index.ts

@@ -32,3 +32,4 @@ export * from "./Banner"
 export * from "./Blanket"
 export * from "./Breadcrumbs"
 export * from "./SectionMessage"
+export * from "./codeblock"