chore(templates): bump ilha version

Author: yzuyr

apps/website/src/lib/components/tutorial.ts

@@ -114,19 +114,7 @@ export const Tutorial = ({ content, code, key }: TutorialProps) => {
     })
     .render(
       () => html`
-        <div class="flex h-full flex-col gap-2 overflow-hidden">
-          <div class="tabs w-full shrink-0" id="demo-tabs-with-panels">
-            <nav role="tablist" aria-orientation="horizontal" class="w-full">
-              <button type="button" role="tab" aria-selected="true" tabindex="0" data-tab="script">
-                Script
-              </button>
-              <button type="button" role="tab" aria-selected="false" tabindex="0" data-tab="template">
-                Template
-              </button>
-            </nav>
-          </div>
-          <div id="editor" class="flex-1 overflow-hidden rounded-lg border"></div>
-        </div>
+        <div id="editor" class="flex-1 overflow-hidden"></div>
       `,
     );
 
@@ -176,9 +164,7 @@ export const Tutorial = ({ content, code, key }: TutorialProps) => {
     })
     .render(
       () => html`
-      <div class="h-full min-h-[36rem] lg:min-h-auto overflow-hidden border rounded-lg p-4">
-        <iframe class="w-full h-full" srcdoc="${buildSrcDoc()}"></iframe>
-      </div>
+        <iframe class="flex-1" srcdoc="${buildSrcDoc()}"></iframe>
     `,
     );
 
@@ -187,19 +173,21 @@ export const Tutorial = ({ content, code, key }: TutorialProps) => {
     .slot("preview", Preview)
     .render(
       ({ slots }) => html`
-        <div class="w-full lg:h-[100rem]">
-          <div class="grid gap-4 h-full grid-cols-1 lg:grid-cols-2 grid-cols-none lg:grid-rows-2">
-            <div class="overflow-hidden rounded-lg border p-4 flex flex-col">
-              <h2 class="text-xl font-semibold shrink-0">Tutorials</h2>
-              <div class="flex flex-col mt-4 overflow-auto">
-                ${TUTORIAL_LIST.map((t) => html`<a href="${t.href}" class="${isActive(t.href) ? "btn-secondary" : "btn-ghost"} justify-start">${t.label}</a>`)}
-              </div>
-            </div>
-            <div class="relative overflow-hidden rounded-lg border">
-              <div class="h-full overflow-auto prose p-4 pb-16">${raw(contentHtml)}</div>
-              <div class="pointer-events-none absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-gray-900 dark:via-gray-900/80"></div>
+        <div class="flex-1 flex flex-col lg:grid grid-cols-6 grid-rows-2 border rounded-2xl overflow-hidden *:max-h-[40rem] h-full">
+          <div class="col-span-2 bg-neutral-50 border-r p-4 border-b">
+            <h2 class="text-xl font-semibold shrink-0">Tutorials</h2>
+            <div class="flex flex-col mt-4 overflow-auto">
+              ${TUTORIAL_LIST.map((t) => html`<a href="${t.href}" class="${isActive(t.href) ? "btn-outline" : "btn-ghost"} justify-start">${t.label}</a>`)}
             </div>
+          </div>
+          <div class="col-span-4 col-start-3 relative overflow-auto border-b">
+            <div class="prose mx-auto p-4 pb-16">${raw(contentHtml)}</div>
+            <div class="pointer-events-none sticky bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent dark:from-gray-900 dark:via-gray-900/80 mt-[-4rem]"></div>
+          </div>
+          <div class="flex col-span-3 row-start-2 overflow-hidden">
             ${slots.editor()}
+          </div>
+          <div class="flex col-span-3 col-start-4 row-start-2 overflow-hidden p-4 min-h-[36rem]">
             ${slots.preview()}
           </div>
         </div>

apps/website/src/pages/tutorial/counter-derived.ts

@@ -35,7 +35,6 @@ const code = {
   script: dedent`
     import ilha, { html, mount } from "ilha";
 
-
     const counter = ilha
       .state("count", 1)
       .derived("doubled", ({ state }) => state.count() * 2)
@@ -50,7 +49,6 @@ const code = {
         \`
       );
 
-
     mount({ counter });
   `,
 };

apps/website/src/pages/tutorial/counter-on.ts

@@ -34,7 +34,6 @@ const code = {
   script: dedent`
     import ilha, { html, mount } from "ilha";
 
-
     const counter = ilha
       .state("count", 0)
       .on("[data-action=increase]@click", ({ state }) => {
@@ -47,7 +46,6 @@ const code = {
         \`
       );
 
-
     mount({ counter });
   `,
 };

apps/website/src/pages/tutorial/index.ts

@@ -32,6 +32,8 @@ const code = {
       );
 
     mount({ counter });
+
+    // HTML: <div data-ilha="counter"></div>
   `,
 };
 

apps/website/src/pages/tutorial/pokedex-onmount.ts

@@ -83,6 +83,8 @@ const code = {
       });
 
     mount({ pokedex });
+
+    // HTML: <div data-ilha="pokedex"></div>
   `,
 };
 

templates/bun-orpc/bun.lock

@@ -10,7 +10,7 @@
   "dependencies": {
     "@orpc/client": "^1.13.13",
     "@orpc/server": "^1.13.13",
-    "ilha": "https://pkg.pr.new/ilhajs/ilha@442b13f"
+    "ilha": "https://pkg.pr.new/ilhajs/ilha@64dfe47"
   },
   "devDependencies": {
     "@types/bun": "latest",

templates/bun-orpc/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@hono/node-server": "^1.19.12",
     "hono": "^4.12.9",
-    "ilha": "https://pkg.pr.new/ilhajs/ilha@442b13f"
+    "ilha": "https://pkg.pr.new/ilhajs/ilha@64dfe47"
   },
   "devDependencies": {
     "@types/node": "^20.11.17",