Tailwind example

Author: bcomnes

examples/tailwind/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@top-bun/preact-example",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "npm run watch",
+    "build": "npm run clean && top-bun",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && tb --watch"
+  },
+  "author": "Bret Comnes <[email protected]> (https://bret.io/)",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "npm-run-all2": "^6.0.0",
+    "@preact/signals": "^2.0.0",
+    "htm": "^3.1.1",
+    "preact": "^10.24.0",
+    "preact-render-to-string": "^6.5.11",
+    "top-bun": "../../.",
+    "esbuild-plugin-tailwindcss": "2.0.1"
+  }
+}

examples/tailwind/src/README.md

@@ -0,0 +1,5 @@
+# Preact example
+
+This is a preact example WITH TAILWIND!
+
+[Isomorphic Component Rendering](./isomorphic/)

examples/tailwind/src/globals/esbuild.settings.js

@@ -0,0 +1,8 @@
+import tailwindPlugin from 'esbuild-plugin-tailwindcss'
+
+export default async function esbuildSettingsOverride (esbuildSettings) {
+  esbuildSettings.plugins = [
+    tailwindPlugin(),
+  ]
+  return esbuildSettings
+}

examples/tailwind/src/globals/global.client.js

@@ -0,0 +1 @@
+console.log('Global client')

examples/tailwind/src/globals/global.css

@@ -0,0 +1,2 @@
+
+@import "tailwindcss";

examples/tailwind/src/isomorphic/client.js

@@ -0,0 +1,71 @@
+import { html, Component } from 'htm/preact'
+import { render } from 'preact'
+import { useCallback } from 'preact/hooks'
+import { useSignal, useComputed } from '@preact/signals'
+
+const Header = ({ name }) => html`
+  <h1 class="text-3xl font-bold text-gray-800 mb-4">${name} List</h1>
+`
+
+const Footer = props => {
+  const count = useSignal(0)
+  const double = useComputed(() => count.value * 2)
+
+  const handleClick = useCallback(() => {
+    count.value++
+  }, [count])
+
+  return html`
+    <footer class="mt-8 p-4 bg-gray-100 rounded shadow flex flex-col gap-2" ...${props}>
+      <div class="text-gray-600">Count: ${count}</div>
+      <div class="text-gray-600">Double: ${double}</div>
+      <div>${props.children}</div>
+      <button
+        onClick=${handleClick}
+        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
+      >
+        Click
+      </button>
+    </footer>
+  `
+}
+
+class App extends Component {
+  addTodo () {
+    const { todos = [] } = this.state
+    this.setState({ todos: todos.concat(`Item ${todos.length}`) })
+  }
+
+  render ({ page }, { todos = [] }) {
+    return html`
+      <div class="app max-w-xl mx-auto p-6 bg-white rounded shadow">
+        <${Header} name="ToDo's (${page})" />
+        <ul class="space-y-2 mb-4">
+          ${todos.map(todo => html`
+            <li key=${todo} class="p-2 bg-gray-50 rounded shadow">${todo}</li>
+          `)}
+        </ul>
+        <button
+          onClick=${() => this.addTodo()}
+          class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition"
+        >
+          Add Todo
+        </button>
+        <${Footer}>footer content here<//>
+      </div>
+    `
+  }
+}
+
+export const page = () => html`
+  <div class="space-y-6">
+    <${App} page="Isomorphic"/>
+    <${Footer}>footer content here<//>
+    <${Footer}>footer content here<//>
+  </div>
+`
+
+if (typeof window !== 'undefined') {
+  const renderTarget = document.querySelector('.app-main')
+  render(page(), renderTarget)
+}

examples/tailwind/src/isomorphic/page.js

@@ -0,0 +1,5 @@
+import { page } from './client.js'
+
+export default () => {
+  return page()
+}

examples/tailwind/src/layouts/root.layout.js

@@ -0,0 +1,56 @@
+// @ts-ignore
+import { html } from 'htm/preact'
+import { render } from 'preact-render-to-string'
+
+/**
+ * @template T extends object
+ * @typedef {import('../build-pages/resolve-layout.js').LayoutFunction<T>} LayoutFunction
+ */
+
+/**
+ * Global layout with Tailwind container styles
+ *
+ * @type {LayoutFunction<{
+ *   title: string,
+ *   siteName: string,
+ *   defaultStyle: boolean,
+ *   basePath: string
+ * }>}
+ */
+export default function defaultRootLayout ({
+  vars: {
+    title,
+    siteName = 'TopBun',
+    basePath,
+  },
+  scripts,
+  styles,
+  children,
+}) {
+  return /* html */`
+    <!DOCTYPE html>
+    <html class="h-full">
+      ${render(html`
+        <head>
+          <meta charset="utf-8" />
+          <title>${title ? `${title}` : ''}${title && siteName ? ' | ' : ''}${siteName}</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+          ${scripts
+            ? scripts.map(script => html`<script type='module' src="${script.startsWith('/') ? `${basePath ?? ''}${script}` : script}" />`)
+            : null}
+          ${styles
+            ? styles.map(style => html`<link rel="stylesheet" href="${style.startsWith('/') ? `${basePath ?? ''}${style}` : style}" />`)
+            : null}
+        </head>
+      `)}
+      ${render(html`
+        <body class="min-h-screen bg-gray-50 text-gray-900 safe-area-inset">
+          ${typeof children === 'string'
+            ? html`<main class="container mx-auto p-4 mine-layout app-main" dangerouslySetInnerHTML="${{ __html: children }}" />`
+            : html`<main class="container mx-auto p-4 mine-layout app-main">${children}</main>`
+          }
+        </body>
+      `)}
+    </html>
+  `
+}