diff options
| author | Mathias Magnusson <mathias@magnusson.space> | 2025-08-14 15:11:23 +0200 |
|---|---|---|
| committer | Mathias Magnusson <mathias@magnusson.space> | 2025-08-14 18:44:19 +0200 |
| commit | 923c7c6b1a6549a6c5012713a22d5cf6e478f994 (patch) | |
| tree | 1f50b20f53745f348ea7215a0ab0dd90a45a8863 /src | |
| parent | 59f99c59d577ac4c640bee676856969ec035bcb6 (diff) | |
| download | uneven-923c7c6b1a6549a6c5012713a22d5cf6e478f994.tar.gz | |
Set up htmx & drizzle+libsql
Diffstat (limited to 'src')
| -rw-r--r-- | src/db/schema.ts | 5 | ||||
| -rw-r--r-- | src/global.d.ts | 7 | ||||
| -rw-r--r-- | src/index.ts | 15 | ||||
| -rw-r--r-- | src/index.tsx | 45 |
4 files changed, 57 insertions, 15 deletions
diff --git a/src/db/schema.ts b/src/db/schema.ts new file mode 100644 index 0000000..15da652 --- /dev/null +++ b/src/db/schema.ts @@ -0,0 +1,5 @@ +import { text, sqliteTable } from "drizzle-orm/sqlite-core"; + +export const groupsTable = sqliteTable("groups", { + name: text("name").notNull(), +}); diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..71f018f --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,7 @@ +import "typed-htmx"; + +declare module 'hono/jsx' { + namespace JSX { + interface HTMLAttributes extends HtmxAttributes { } + } +} diff --git a/src/index.ts b/src/index.ts deleted file mode 100644 index bc1cc19..0000000 --- a/src/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { serve } from '@hono/node-server' -import { Hono } from 'hono' - -const app = new Hono() - -app.get('/', (c) => { - return c.text('Hello Hono!') -}) - -serve({ - fetch: app.fetch, - port: 3000 -}, (info) => { - console.log(`Server is running on http://localhost:${info.port}`) -}) diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..c72d766 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,45 @@ +import { serve } from "@hono/node-server"; +import { Hono } from "hono"; +import { createClient } from "@libsql/client"; +import { drizzle } from "drizzle-orm/libsql"; +import { groupsTable } from "./db/schema.js"; + +const app = new Hono(); +const db = drizzle(createClient({ url: "file:data.db" })); + +async function Groups() { + const result = await db.select().from(groupsTable).all(); + + return <ul>{ + result.map(group => <li>{group.name}</li>) + }</ul>; +} + +app.get("/", c => c.html( + <html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm" crossorigin="anonymous"></script> + <title>Uneven</title> + </head> + <body> + <Groups /> + <button hx-get="/button" hx-swap="outerHTML">click me!</button> + </body> + </html> +)); + +let colors = ["red", "green", "blue"]; +app.get("/button", c => c.html( + <button + hx-get="/button" + hx-swap="outerHTML" + style={{ backgroundColor: colors[Math.floor(Math.random() * colors.length)] }} + >disco button!</button> +)); + +serve({ + fetch: app.fetch, + port: 3000, +}, info => console.log(`Server is running on http://localhost:${info.port}`)); |