From ae8336e737dee0404996ef1e2a01f66b8efda769 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Wed, 23 Oct 2024 11:38:03 -0400
Subject: [PATCH] change theme

---
 sites/docs/mdsx.config.js                       |  5 ++---
 sites/docs/src/content/components/sidebar.md    |  5 +++++
 .../src/lib/components/docs/copy-button.svelte  |  1 +
 .../src/lib/components/docs/pm-block.svelte     | 17 ++++++-----------
 .../lib/components/docs/style-switcher.svelte   |  2 +-
 sites/docs/src/styles/markdown.pcss             |  6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)
 create mode 100644 sites/docs/src/content/components/sidebar.md

diff --git a/sites/docs/mdsx.config.js b/sites/docs/mdsx.config.js
index abd4c187b..96a58805b 100644
--- a/sites/docs/mdsx.config.js
+++ b/sites/docs/mdsx.config.js
@@ -28,7 +28,7 @@ const __dirname = fileURLToPath(new URL(".", import.meta.url));
  * @type {import('rehype-pretty-code').Options}
  */
 const prettyCodeOptions = {
-	theme: JSON.parse(String(readFileSync(resolve(__dirname, "./other/themes/dark.json")))),
+	theme: "github-dark",
 	getHighlighter: (options) =>
 		getHighlighter({
 			...options,
@@ -45,8 +45,7 @@ const prettyCodeOptions = {
 	keepBackground: false,
 	onVisitLine(node) {
 		if (node.children.length === 0) {
-			// @ts-expect-error - we're changing the node type
-			node.children = { type: "text", value: " " };
+			console.log(JSON.stringify(node));
 		}
 	},
 	onVisitHighlightedLine(node) {
diff --git a/sites/docs/src/content/components/sidebar.md b/sites/docs/src/content/components/sidebar.md
new file mode 100644
index 000000000..a2fa42acf
--- /dev/null
+++ b/sites/docs/src/content/components/sidebar.md
@@ -0,0 +1,5 @@
+---
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+component: true
+---
diff --git a/sites/docs/src/lib/components/docs/copy-button.svelte b/sites/docs/src/lib/components/docs/copy-button.svelte
index bfc3ec495..6044b0f55 100644
--- a/sites/docs/src/lib/components/docs/copy-button.svelte
+++ b/sites/docs/src/lib/components/docs/copy-button.svelte
@@ -35,6 +35,7 @@
 					variant="ghost"
 					class={cn(
 						"bg-background/10 text-background/70 hover:bg-background/20 hover:text-background/80 dark:bg-foreground/5 dark:text-foreground/70 dark:hover:bg-foreground/10 dark:hover:text-foreground/80 relative !right-12 h-6 w-fit items-center justify-center rounded-md p-1",
+						"hidden sm:inline-flex",
 						className
 					)}
 					{...restProps}
diff --git a/sites/docs/src/lib/components/docs/pm-block.svelte b/sites/docs/src/lib/components/docs/pm-block.svelte
index 5142135d5..82ccab0ac 100644
--- a/sites/docs/src/lib/components/docs/pm-block.svelte
+++ b/sites/docs/src/lib/components/docs/pm-block.svelte
@@ -30,26 +30,21 @@
 </script>
 
 <figure data-rehype-pretty-code-figure>
-	<Pre
-		isPackageManagerBlock={true}
-		tabindex={0}
-		data-language="bash"
-		data-theme="Lambda Studio - Blackout"
-	>
-		<code data-language="bash" data-theme="Lambda Studio — Blackout" style="display: grid;">
+	<Pre isPackageManagerBlock={true} tabindex={0} data-language="bash" data-theme="github-dark">
+		<code data-language="bash" data-theme="github-dark" style="display: grid;">
 			<span data-line>
-				<span style="color:#FFF;font-weight:bold">{`${cmdStart}`}</span>
+				<span style="color:#B392F0;font-weight:bold">{`${cmdStart}`}</span>
 				{#if type === "install" || type === "create"}
-					<span style="color:#FFF8">
+					<span style="color:#9ECBFF">
 						{`${type === "install" ? getInstallCommand() : "create"}${command === "" ? "" : ` `}`}
 					</span>
 				{/if}
 				{#if command !== ""}
 					{#each command.split(" ") as word, i}
 						{#if i === 0}
-							<span style="color:#FFF8; margin-left:-8px">{`${word}`}</span>
+							<span style="color:#9ECBFF; margin-left:-8px">{`${word}`}</span>
 						{:else}
-							<span style="color:#FFF8">{` ${word}`}</span>
+							<span style="color:#9ECBFF">{` ${word}`}</span>
 						{/if}
 					{/each}
 				{/if}
diff --git a/sites/docs/src/lib/components/docs/style-switcher.svelte b/sites/docs/src/lib/components/docs/style-switcher.svelte
index f8beccc62..0c5cb7528 100644
--- a/sites/docs/src/lib/components/docs/style-switcher.svelte
+++ b/sites/docs/src/lib/components/docs/style-switcher.svelte
@@ -10,7 +10,7 @@
 		...restProps
 	}: WithoutChildren<Omit<PrimitiveButtonAttributes, "style" | "id">> = $props();
 
-	const styleLabel = $derived(styles.filter((s) => s.name === $config.style)[0].label);
+	const styleLabel = $derived(styles.filter((s) => s.name === $config.style)[0]?.label);
 
 	let value = $state($config.style);
 
diff --git a/sites/docs/src/styles/markdown.pcss b/sites/docs/src/styles/markdown.pcss
index d326af079..1bd0671bb 100644
--- a/sites/docs/src/styles/markdown.pcss
+++ b/sites/docs/src/styles/markdown.pcss
@@ -2,7 +2,7 @@
 	@apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm;
 }
 
-[data-theme*=" "] {
+[data-theme*="github-dark"] {
 	display: flex !important;
 	flex-direction: column;
 }
@@ -92,8 +92,8 @@
 	@apply mt-2;
 }
 
-code[data-theme*=" "],
-code[data-theme*=" "] span {
+code[data-theme*="github-dark"],
+code[data-theme*="github-dark"] span {
 	color: var(--shiki-light);
 	background-color: var(--shiki-light-bg);
 }