diff --git a/site/components/ComponentSelector.html b/site/components/ComponentSelector.html
new file mode 100644
index 00000000..45556024
--- /dev/null
+++ b/site/components/ComponentSelector.html
@@ -0,0 +1,9 @@
+
diff --git a/site/components/ComponentViewer.html b/site/components/ComponentViewer.html
new file mode 100644
index 00000000..a4b07e94
--- /dev/null
+++ b/site/components/ComponentViewer.html
@@ -0,0 +1 @@
+
diff --git a/site/layouts/BaseLayout.html b/site/layouts/BaseLayout.html
index 713b5040..1a2eea91 100644
--- a/site/layouts/BaseLayout.html
+++ b/site/layouts/BaseLayout.html
@@ -28,11 +28,13 @@
-
-
+
diff --git a/site/layouts/componentViewerPage.html b/site/layouts/componentViewerPage.html
new file mode 100644
index 00000000..2f9f4629
--- /dev/null
+++ b/site/layouts/componentViewerPage.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/site/layouts/componentViewerPage.server.ts b/site/layouts/componentViewerPage.server.ts
new file mode 100644
index 00000000..7d64fb6c
--- /dev/null
+++ b/site/layouts/componentViewerPage.server.ts
@@ -0,0 +1,5 @@
+function init() {
+ return { btoa };
+}
+
+export { init };
diff --git a/site/routes.json b/site/routes.json
index b431be58..a787ff73 100644
--- a/site/routes.json
+++ b/site/routes.json
@@ -119,6 +119,14 @@
}
}
},
+ "component-viewer": {
+ "layout": "componentViewerPage",
+ "meta": {
+ "title": "Component viewer",
+ "description": "View system components on this page"
+ },
+ "scripts": [{ "name": "componentPlayground" }]
+ },
"atom.xml": {
"layout": "rssPage",
"meta": {
diff --git a/site/scripts/componentPlayground.ts b/site/scripts/componentPlayground.ts
new file mode 100644
index 00000000..e869527c
--- /dev/null
+++ b/site/scripts/componentPlayground.ts
@@ -0,0 +1,38 @@
+import { install, tw } from "https://cdn.skypack.dev/@twind/core@1.1.1?min";
+import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.1";
+import breeze, { type Options } from "../../breezewind/mod.ts";
+import * as breezeExtensions from "../../breezewind/extensions.ts";
+
+install({ presets: [presetTailwind()], hash: false });
+
+async function compileBreezewind(component: Options["component"]) {
+ const components = await fetch("/components.json").then((res) => res.json());
+
+ // TODO: Figure out how to handle component specific utilities (component.server.ts)
+ // 1. Define a way to get the data from the server (implies bundling, how/where to handle?)
+ // 2. Fetch component specific utilities (could be a single file with proper keying within)
+ // 3. Attach utilities here (see templating code for an example)
+ return breeze({
+ component,
+ components,
+ context: {},
+ extensions: [
+ breezeExtensions.visibleIf,
+ // @ts-expect-error This is fine
+ breezeExtensions.classShortcut(tw),
+ breezeExtensions.foreach,
+ ],
+ });
+}
+
+declare global {
+ interface Window {
+ compileBreezewind: typeof compileBreezewind;
+ }
+}
+
+if (!("Deno" in globalThis)) {
+ console.log("Hello from the component playground");
+
+ window.compileBreezewind = compileBreezewind;
+}