improve spacing / fix copy bug

.changeset/eighty-meals-walk.md

@@ -0,0 +1,8 @@
+---
+"uico": patch
+---
+
+A few small changes.
+
+- Improve prose styles - li and image spacing.
+- Fix copy color on color generator.

apps/docs/package.json

@@ -10,11 +10,11 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"@robino/md": "^0.2.0",
-		"domco": "^0.8.1",
+		"@robino/md": "^0.2.1",
+		"domco": "^0.13.3",
 		"drab": "^5.4.2",
-		"hono": "^4.5.11",
+		"hono": "^4.6.2",
 		"uico": "*",
-		"vite": "^5.4.3"
+		"vite": "^5.4.6"
 	}
 }

apps/docs/src/+page.html → apps/docs/src/client/+page.html

@@ -4,7 +4,8 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="stylesheet" href="/style.css" />
+		<link rel="stylesheet" href="/client/style.css" />
+		<script type="module" src="/client/index.ts"></script>
 		<title>uico</title>
 		<meta name="description" content="Comprehensive Styles with Modern CSS" />
 	</head>

apps/docs/src/color-generator/+page.html → apps/docs/src/client/color-generator/+page.html

@@ -4,8 +4,9 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="stylesheet" href="/style.css" />
-		<link rel="stylesheet" href="/color-generator/style.css" />
+		<link rel="stylesheet" href="/client/style.css" />
+		<link rel="stylesheet" href="/client/color-generator/style.css" />
+		<script type="module" src="/client/color-generator/index.ts"></script>
 		<title>OKLCH Color Generator</title>
 		<meta
 			name="description"

apps/docs/src/color-generator/+client.ts → apps/docs/src/client/color-generator/index.ts

@@ -1,4 +1,4 @@
-import "@/components/color";
+import "@/client/components/color";
 import { ColorMaker } from "uico";
 
 class ColorGenerator extends HTMLElement {

apps/docs/src/components/color/index.ts → apps/docs/src/client/components/color/index.ts

@@ -4,9 +4,8 @@ import "drab/copy/define";
 class ColorSwatch extends HTMLElement {
 	connectedCallback() {
 		const copy = document.createElement("drab-copy") as Copy;
-		copy.style.display = "contents";
 
-		copy.value = getComputedStyle(this).backgroundColor;
+		copy.style.display = "contents";
 
 		const shade = parseInt(
 			this.style
@@ -24,7 +23,10 @@ class ColorSwatch extends HTMLElement {
 			this.style.colorScheme = "light";
 		}
 
-		button.dataset.trigger = "";
+		button.addEventListener("click", () => {
+			copy.copy(getComputedStyle(this).backgroundColor);
+		});
+
 		button.dataset.content = "";
 		button.ariaLabel = `Copy base color of shade ${shade}`;
 

apps/docs/src/client/index.ts

@@ -0,0 +1,3 @@
+import "@/client/components/color";
+import "@/client/components/dialog";
+import "@/client/components/theme";

apps/docs/src/style.css → apps/docs/src/client/style.css

@@ -1,7 +1,7 @@
 @import "uico";
-@import "@/components/color/style.css" layer(components);
-@import "@/components/dialog/style.css" layer(components);
-@import "./components/theme/style.css" layer(components);
+@import "@/client/components/color/style.css" layer(components);
+@import "@/client/components/dialog/style.css" layer(components);
+@import "@/client/components/theme/style.css" layer(components);
 
 @layer theme {
 	:root {

apps/docs/src/content/overview.md

@@ -16,7 +16,7 @@ npm i -D uico
 @import "uico";
 ```
 
-or copy and paste the [stylesheet](https://github.com/rossrobino/uico/tree/main/packages/uico/style.css) into your project (everything is in one file).
+or copy and paste the [stylesheet](https://github.com/rossrobino/uico/tree/main/packages/uico/style.css) into your project (everything is in one CSS file).
 
 ### Layers
 

apps/docs/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="domco/env" />

apps/docs/src/+server.ts → apps/docs/src/server/+app.ts

@@ -1,13 +1,16 @@
 import base from "@/content/base.md?raw";
+import color from "@/content/color-generator.md?raw";
 import overview from "@/content/overview.md?raw";
 import prose from "@/content/prose.md?raw";
 import theme from "@/content/theme.md?raw";
 import { processMarkdown } from "@robino/md";
+import { html } from "client:page";
+import { html as colorHtml } from "client:page/color-generator";
 import type { Prerender } from "domco";
 import { Injector } from "domco/injector";
 import { Hono } from "hono";
 
-export const prerender: Prerender = true;
+export const prerender: Prerender = ["/"];
 
 const app = new Hono();
 
@@ -17,14 +20,24 @@ app.get("/", async (c) => {
 	const { html: overviewHtml } = processMarkdown({ md: overview });
 	const { html: themeHtml } = processMarkdown({ md: theme });
 
-	const page = new Injector(c.var.page()).comment([
+	const page = new Injector(html).comment([
 		{ text: "prose", children: proseHtml },
 		{ text: "base", children: baseHtml },
 		{ text: "overview", children: overviewHtml },
 		{ text: "theme", children: themeHtml },
 	]);
 
-	return c.html(page.toString());
+	return c.html(page.html);
+});
+
+app.get("/color-generator", async (c) => {
+	const { html: colorMdHtml } = processMarkdown({ md: color });
+
+	const page = new Injector(colorHtml).comment([
+		{ text: "content", children: colorMdHtml },
+	]);
+
+	return c.html(page.html);
 });
 
 // redirects from previous version
@@ -34,4 +47,4 @@ app.get("/fonts/", (c) => c.redirect("/", 301));
 
 app.get("/oklch/", (c) => c.redirect("/color-generator", 301));
 
-export default app;
+export const handler = app.fetch;