gustwindjs · bebraw · Feb 14, 2024 · Feb 14, 2024 · Feb 14, 2024 · Feb 15, 2024
diff --git a/site/components/ComponentSelector.html b/site/components/ComponentSelector.html
@@ -0,0 +1,9 @@
+<ul &foreach="(get props components)">
+  <li>
+    <a
+      &href="(concat # (get props name))"
+      &onclick="(concat 'setState({ selectedComponent: `'(get props name)'` })')"
+      &children="(get props name)"
+    ></a>
+  </li>
+</ul>
diff --git a/site/components/ComponentViewer.html b/site/components/ComponentViewer.html
@@ -0,0 +1 @@
+<div x="compileBreezewind(state.components[state.selectedComponent])"></div>
diff --git a/site/layouts/BaseLayout.html b/site/layouts/BaseLayout.html
@@ -28,11 +28,13 @@
   </head>
   <body>
     <MainNavigation />
-    <aside
-      class="fixed top-16 pl-4 hidden lg:inline"
-      &children="(get props aside)"
-    ></aside>
-    <main &children="(get props content)"></main>
+    <div &x-promise="(get props x-promise)" &x-state="(get props x-state)">
+      <aside
+        class="fixed top-16 pl-4 hidden lg:inline"
+        &children="(get props aside)"
+      ></aside>
+      <main &children="(get props content)"></main>
+    </div>
     <MainFooter />
     <Scripts />
   </body>

diff --git a/site/layouts/componentViewerPage.html b/site/layouts/componentViewerPage.html
@@ -0,0 +1,20 @@
+<BaseLayout
+  x-state="{
+    selectedComponent: (new window.URL(document.location)).hash.slice(1),
+    components: {}
+  }"
+  x-promise="{
+    state: {
+      components: fetch('/components.json').then(res => res.json())
+    }
+  }"
+>
+  <slot name="aside">
+    <ComponentSelector &components="(get context components)" />
+  </slot>
+  <slot name="content">
+    <div class="md:mx-auto px-4 md:px-0 w-full lg:max-w-3xl prose lg:prose-xl">
+      <ComponentViewer />
+    </div>
+  </slot>
+</BaseLayout>
diff --git a/site/layouts/componentViewerPage.server.ts 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
@@ -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
@@ -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;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div x="compileBreezewind(state.components[state.selectedComponent])"></div>