uno + rename folders

package.json

@@ -3,15 +3,19 @@
   "module": "src/main.ts",
   "type": "module",
   "scripts": {
-    "dev": "bun run --hot src/main.tsx",
-    "start": "bun run src/main.tsx",
+    "dev": "concurrently \"bun run --hot src/main.tsx\" \"bun run uno:dev\"",
+    "start": "bun run uno && bun run src/main.tsx",
     "db:push": "bunx drizzle-kit push:sqlite",
     "db:studio": "bunx drizzle-kit studio",
-    "db:seed": "bun run src/model/store/seed.ts"
+    "db:seed": "bun run src/model/store/seed.ts",
+    "uno": "bunx unocss",
+    "uno:dev": "bunx unocss --watch"
   },
   "devDependencies": {
     "bun-types": "latest",
-    "drizzle-kit": "^0.19.13"
+    "concurrently": "^8.2.1",
+    "drizzle-kit": "^0.19.13",
+    "unocss": "^0.55.7"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

src/components/base.tsx

@@ -10,8 +10,8 @@ export const BaseHtml = ({ children }: Html.PropsWithChildren) => `
   <title>THE BETH STACK</title>
   <script src="https://unpkg.com/htmx.org@1.9.3"></script>
   <script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
+  <link rel="stylesheet" href="/public/dist/unocss.css">
 </head>
 
 ${children}

src/components/todos.tsx

@@ -1,4 +1,4 @@
-import type { Todo } from "../model/todo";
+import type { Todo } from "../db/todo";
 import Html from "@kitajs/html";
 
 export function TodoItem({ content, completed, id }: Todo) {

src/context/index.ts

@@ -2,7 +2,7 @@ import { Elysia } from "elysia";
 import { logger } from "@bogeychan/elysia-logger";
 import pretty from "pino-pretty";
 import { config } from "../config";
-import { db } from "../model/store";
+import { db } from "../db";
 import "@kitajs/html/htmx";
 
 const stream = pretty({

src/db/index.ts

@@ -1,7 +1,7 @@
 import { drizzle } from "drizzle-orm/libsql";
 import { createClient } from "@libsql/client";
-import * as schema from "../schema";
-import { config } from "../../config";
+import * as schema from "./schemas";
+import { config } from "../config";
 
 const client = createClient({
   url: config.env.DATABASE_URL!,

src/db/schemas/index.ts

@@ -0,0 +1 @@
+export { todos } from "./todos";

src/main.tsx

@@ -1,15 +1,15 @@
 import { Elysia } from "elysia";
 import { swagger } from "@elysiajs/swagger";
 import { staticPlugin } from "@elysiajs/static";
-import { todosController } from "./controllers/todos";
-import { BaseHtml } from "./views/base";
+import { todosController } from "./services/todos";
+import { BaseHtml } from "./components/base";
 import Html from "@kitajs/html";
 
 const app = new Elysia({
   name: "@app/main",
 })
   // .use(swagger())
-  // .use(staticPlugin())
+  .use(staticPlugin())
   .use(todosController)
   .get("/", ({ html }) =>
     html(

src/model/schema.ts

@@ -1 +0,0 @@
-export { todos } from "./todo";

src/services/todos.tsx

@@ -1,9 +1,9 @@
 import Elysia, { t } from "elysia";
 import { ctx } from "../context";
-import { insertTodoSchema, todos } from "../model/todo";
-import { TodoItem, TodoForm, TodoList } from "../views/todos";
+import { insertTodoSchema, todos } from "../db/schemas/todos";
+import { TodoItem, TodoForm, TodoList } from "../components/todos";
 import Html from "@kitajs/html";
-import { db } from "../model/store";
+import { db } from "../db";
 import { eq } from "drizzle-orm";
 
 export const todosController = new Elysia({

uno.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "unocss";
+
+export default defineConfig({
+  cli: {
+    entry: {
+      patterns: ["src/**/*.{ts,tsx}"],
+      outFile: "public/dist/unocss.css",
+    },
+  },
+});