yossydev · yossydev · Feb 23, 2024 · Feb 23, 2024 · Feb 23, 2024 · Feb 23, 2024
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -0,0 +1,18 @@
+name: Code quality
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+      - name: Run Biome
+        run: biome ci .
diff --git a/app/client.ts b/app/client.ts
@@ -1,3 +1,3 @@
-import { createClient } from 'honox/client'
+import { createClient } from "honox/client";
 
-createClient()
+createClient();
diff --git a/app/global.d.ts b/app/global.d.ts
@@ -1,15 +1,14 @@
-import {} from 'hono'
+import {} from "hono";
 
 type Head = {
-  title?: string
-}
+  title?: string;
+};
 
-declare module 'hono' {
-  interface Env {
-    Variables: {}
-    Bindings: {}
-  }
+declare module "hono" {
   interface ContextRenderer {
-    (content: string | Promise<string>, head?: Head): Response | Promise<Response>
+    (
+      content: string | Promise<string>,
+      head?: Head,
+    ): Response | Promise<Response>;
   }
 }
diff --git a/app/index.css b/app/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/app/islands/counter.tsx b/app/islands/counter.tsx
@@ -1,11 +1,13 @@
-import { useState } from 'hono/jsx'
+import { useState } from "hono/jsx";
 
 export default function Counter() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
   return (
     <div>
       <p>{count}</p>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
+      <button type="button" onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
     </div>
-  )
+  );
 }
diff --git a/app/routes/_renderer.tsx b/app/routes/_renderer.tsx
@@ -1,6 +1,6 @@
-import { Style } from 'hono/css'
-import { jsxRenderer } from 'hono/jsx-renderer'
-import { Script } from 'honox/server'
+import { Style } from "hono/css";
+import { jsxRenderer } from "hono/jsx-renderer";
+import { Script } from "honox/server";
 
 export default jsxRenderer(({ children, title }) => {
   return (
@@ -14,5 +14,5 @@ export default jsxRenderer(({ children, title }) => {
       </head>
       <body>{children}</body>
     </html>
-  )
-})
+  );
+});
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -1,18 +1,13 @@
-import { css } from 'hono/css'
-import { createRoute } from 'honox/factory'
-import Counter from '../islands/counter'
-
-const className = css`
-  font-family: sans-serif;
-`
+import { createRoute } from "honox/factory";
+import Counter from "../islands/counter";
 
 export default createRoute((c) => {
-  const name = c.req.query('name') ?? 'Hono'
+  const name = c.req.query("name") ?? "Hono";
   return c.render(
-    <div class={className}>
-      <h1>Hello, {name}!</h1>
+    <div>
+      <h1 className="text-3xl font-bold underline">Hello world! {name}</h1>
       <Counter />
     </div>,
-    { title: name }
-  )
-})
+    { title: name },
+  );
+});
diff --git a/app/server.ts b/app/server.ts
@@ -1,8 +1,8 @@
-import { showRoutes } from 'hono/dev'
-import { createApp } from 'honox/server'
+import { showRoutes } from "hono/dev";
+import { createApp } from "honox/server";
 
-const app = createApp()
+const app = createApp();
 
-showRoutes(app)
+showRoutes(app);
 
-export default app
+export default app;
diff --git a/biome.json b/biome.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -1,20 +1,27 @@
 {
-  "name": "basic",
+  "name": "blog",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build --mode client && vite build",
     "preview": "wrangler pages dev ./dist",
-    "deploy": "$npm_execpath run build && wrangler pages deploy ./dist"
+    "deploy": "$npm_execpath run build && wrangler pages deploy ./dist",
+    "format": "biome format --write .",
+    "lint": "biome lint .",
+    "check": "biome check --apply ."
   },
   "private": true,
   "dependencies": {
     "hono": "^4.0.5",
     "honox": "^0.1.4"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.5.3",
     "@cloudflare/workers-types": "^4.20240208.0",
     "@hono/vite-cloudflare-pages": "^0.2.4",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "vite": "^5.0.12",
     "wrangler": "^3.27.0"
   }

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./app/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/vite.config.ts b/vite.config.ts
@@ -8,9 +8,8 @@ export default defineConfig(({ mode }) => {
     return {
       plugins: [client()],
     };
-  } else {
-    return {
-      plugins: [honox(), pages()],
-    };
   }
+  return {
+    plugins: [honox(), pages()],
+  };
 });