Switch to eslint (#5)

* feat: revert pnpm

* refactor: biome -> eslint

Makefile

@@ -1,22 +1,25 @@
 run:
 	@pnpm run dev
+	@pnpm run dev
 
 build-client:
 	@pnpm run generate
 	@pnpm dlx serve .output/public
 
+start:
+	@pnpm run start
+	@pnpm run generate
+	@pnpm dlx serve .output/public
+
 start:
 	@pnpm run start
 
 build:
 	@pnpm run build
 	@node .output/server/index.mjs 
 
-format:
-	@pnpm biome format --write ./app ./server
-
 lint:
-	@pnpm biome lint --write ./app ./server 
+	@pnpm lint
 
 upgrade-deps:
 	@ncu -u
@@ -25,5 +28,12 @@ upgrade-deps:
 up:
 	@docker compose up -d
 
+down:
+	@docker compose down -v
+	@pnpm i
+
+up:
+	@docker compose up -d
+
 down:
 	@docker compose down -v

README.md

@@ -9,7 +9,7 @@ A modern Nuxt 3 starter template with Drizzle ORM, Biome, Pinia, Docker, and Uno
 - **[Nuxt 3](https://nuxt.com/)** - The Intuitive Vue Framework
 - **[UnoCSS](https://unocss.dev/)** - Instant On-demand Atomic CSS Engine
 - **[Drizzle ORM](https://orm.drizzle.team/)** - TypeScript ORM with powerful migrations
-- **[Biome](https://biomejs.dev/)** - Fast linter and formatter
+- **[ESlint](https://eslint.org/)** - The pluggable linting utility
 - **[Pinia](https://pinia.vuejs.org/)** - Intuitive state management
 - **[Docker](https://www.docker.com/)** - Containerization support
 

app/app.css

@@ -1,27 +1,27 @@
 @font-face {
-    font-family: 'Satoshi-Variable';
-    src: url('/fonts/Satoshi-Variable.ttf') format('trueType');
-    font-weight: 100 900;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Satoshi-Variable';
+  src: url('/fonts/Satoshi-Variable.ttf') format('trueType');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 body {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .border {
-    border-width: 1px;
-    border-style: solid;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .border-2 {
-    border-width: 2px;
-    border-style: solid;
+  border-width: 2px;
+  border-style: solid;
 }
 
 .border-4 {
-    border-width: 4px;
-    border-style: solid;
-}
+  border-width: 4px;
+  border-style: solid;
+}

app/app.vue

@@ -4,4 +4,4 @@
       <NuxtPage />
     </NuxtLayout>
   </div>
-</template>
+</template>

app/components/Counter.vue

@@ -1,23 +1,28 @@
 <script setup lang="ts">
-import { useCount } from "~/store/count";
-const counter = useCount();
+const counter = useCount()
 
 const buttons = [
-	{ icon: "ic:baseline-plus", fn: counter.increment },
-	{ icon: "ic:baseline-minus", fn: counter.decrement },
-];
+  { icon: 'ic:baseline-plus', fn: counter.increment },
+  { icon: 'ic:baseline-minus', fn: counter.decrement },
+]
 </script>
 
 <template>
-  <div class="mt-8">
-    <div class="flex flex-col items-center gap-4 dark:text-gray-100 text-gray-900">
-      <p class="text-3xl font-medium">Counter: {{ counter.count }}</p>
-      <div class="flex items-center gap-4">
-        <button v-for="button in buttons" @click="button.fn"
-          class="bg-neutral-800 border-none hover:bg-neutral-700 text-gray-100 px-4 py-2 rounded-lg transition-colors duration-200 flex items-center justify-center group">
-          <Icon :name="button.icon" class="w-6 h-6" />
+  <div class="mt-4 sm:mt-6 md:mt-8">
+    <div class="flex flex-col items-center gap-2 sm:gap-3 md:gap-4 text-gray-900 dark:text-gray-100">
+      <p class="text-2xl sm:text-3xl font-medium">
+        Counter: {{ counter.count }}
+      </p>
+      <div class="flex items-center gap-2 sm:gap-3 md:gap-4">
+        <button
+          v-for="button in buttons"
+          :key="button.icon"
+          class="group flex items-center justify-center rounded-lg border-none bg-neutral-800 px-3 py-1.5 sm:px-4 sm:py-2 text-gray-100 transition-colors duration-200 hover:bg-neutral-700"
+          @click="button.fn"
+        >
+          <Icon :name="button.icon" class="h-5 w-5 sm:h-6 sm:w-6" />
         </button>
       </div>
     </div>
   </div>
-</template>
+</template>

app/components/Hero.vue

@@ -1,56 +1,68 @@
 <script setup lang="ts">
 const icons = [
-	{
-		name: "nuxt",
-		iconName: "logos:nuxt-icon",
-		label: "Nuxt",
-	},
-	{
-		name: "pinia",
-		iconName: "logos:pinia",
-		label: "Pinia",
-	},
-	{
-		name: "drizzle",
-		iconName: "simple-icons:drizzle",
-		label: "Drizzle ORM",
-	},
-	{
-		name: "biome",
-		iconName: "devicon:biome",
-		label: "Biome",
-	},
-	{
-		name: "docker",
-		iconName: "logos:docker-icon",
-		label: "Docker",
-	},
-	{
-		name: "unocss",
-		iconName: "logos:unocss",
-		label: "UnoCSS",
-	},
-];
+  {
+    name: 'nuxt',
+    iconName: 'logos:nuxt-icon',
+    label: 'Nuxt',
+  },
+  {
+    name: 'pinia',
+    iconName: 'logos:pinia',
+    label: 'Pinia',
+  },
+  {
+    name: 'drizzle',
+    iconName: 'simple-icons:drizzle',
+    label: 'Drizzle ORM',
+  },
+  {
+    name: 'biome',
+    iconName: 'devicon:eslint',
+    label: 'ESLint',
+  },
+  {
+    name: 'docker',
+    iconName: 'logos:docker-icon',
+    label: 'Docker',
+  },
+  {
+    name: 'unocss',
+    iconName: 'logos:unocss',
+    label: 'UnoCSS',
+  },
+]
 </script>
 
 <template>
-	<section class="bg-inherit w-full h-full justify-center overflow-auto items-center flex flex-col">
-		<div class="max-w-6xl mx-auto flex flex-col items-center">
-			<div class="flex flex-col items-center gap-4 ">
-				<Icon name="logos:nuxt-icon" class="text-green-500 w-16 h-16" />
-				<h1 class="dark:text-gray-100 text-gray-900 text-4xl font-bold">Nuxt Starter</h1>
-			</div>
-			<div class="grid grid-cols-1 text-gray-900 dark:text-gray-100 md:grid-cols-3 gap-4 w-full max-w-4xl">
-				<div v-for="icon in icons"
-					class="dark:bg-neutral-800/50 bg-gray-100 p-6 rounded-xl border-2 border-neutral-700/50 hover:border-green-500">
-					<div class="flex flex-col items-center gap-3">
-						<Icon :name="icon.iconName" :class="icon.name == 'drizzle' ? 'text-yellow-400' : ''"
-							class="w-12 h-12 group-hover:scale-110" />
-						<span class="font-medium">{{ icon.label }}</span>
-					</div>
-				</div>
-			</div>
-			<Counter />
-		</div>
-	</section>
+  <section class="min-h-screen flex flex-col items-center justify-center overflow-auto bg-inherit p-4">
+    <div class="mx-auto w-full max-w-6xl flex flex-col items-center gap-8 sm:gap-12">
+      <div class="flex flex-col items-center gap-3 sm:gap-4">
+        <Icon name="logos:nuxt-icon" class="h-12 w-12 sm:h-14 sm:w-14 md:h-16 md:w-16 text-green-500" />
+        <h1 class="text-3xl sm:text-4xl text-gray-900 font-bold dark:text-gray-100 text-center">
+          Nuxt Starter
+        </h1>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 w-2/3 gap-3 sm:gap-4 text-gray-900 dark:text-gray-100">
+        <div
+          v-for="icon in icons"
+          :key="icon.name"
+          class="border-2 border-neutral-700/50 rounded-xl bg-gray-100 p-4 sm:p-5 md:p-6 hover:border-green-500 dark:bg-neutral-800/50 transition-all duration-200"
+        >
+          <div class="flex flex-col items-center gap-2 sm:gap-3">
+            <Icon
+              :name="icon.iconName"
+              :class="[
+                'h-8 w-8 sm:h-10 sm:w-10 md:h-12 md:w-12 group-hover:scale-110 transition-transform duration-200',
+                icon.name === 'drizzle' ? 'text-yellow-400' : ''
+              ]"
+            />
+            <span class="font-medium text-sm sm:text-base">{{ icon.label }}</span>
+          </div>
+        </div>
+      </div>
+
+      <Counter />
+    </div>
+  </section>
 </template>

app/components/Theme.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 const colorMode = useColorMode({
-	modes: {
-		light: "light",
-		dark: "dark",
-	},
-});
-const isDark = useState("isDark", () => true);
+  modes: {
+    light: 'light',
+    dark: 'dark',
+  },
+})
+const isDark = useState('isDark', () => true)
 
-const toggleColorMode = () => {
-	colorMode.value = colorMode.value === "light" ? "dark" : "light";
-	isDark.value = !isDark.value;
-};
+function toggleColorMode() {
+  colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
+  isDark.value = !isDark.value
+}
 
 onMounted(() => {
-	isDark.value = colorMode.value === "dark";
-});
+  isDark.value = colorMode.value === 'dark'
+})
 </script>
 
 <template>
-    <button @click="toggleColorMode" class="p-2 bg-inherit border-none">
-        <Icon name="solar:moon-bold" v-if="isDark" class="p-1 text-white" />
-        <Icon name="solar:sun-bold" v-else  class="p-1 text-black" />
-    </button>
-</template>
+  <button class="border-none bg-inherit p-2" @click="toggleColorMode">
+    <Icon v-if="isDark" name="solar:moon-bold" class="p-1 text-white" />
+    <Icon v-else name="solar:sun-bold" class="p-1 text-black" />
+  </button>
+</template>

app/layouts/default.vue

@@ -1,3 +1,3 @@
 <template>
-    <slot />
-</template>
+  <slot />
+</template>

app/pages/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <main class="w-screen h-screen dark:bg-neutral-900 bg-white">
-        <div class="fixed top-5 right-5">
-            <Theme />
-        </div>
-        <Hero />
-    </main>
-</template>
+  <main class="h-screen w-screen bg-white dark:bg-neutral-900">
+    <div class="fixed right-5 top-5">
+      <Theme />
+    </div>
+    <Hero />
+  </main>
+</template>

docker-compose.yml

@@ -6,16 +6,16 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-      - "3000:3000"
-    
+      - '3000:3000'
+
   postgres:
     container_name: postgres_nuxt
     image: postgres
     environment:
-      POSTGRES_DB: "postgres"
-      POSTGRES_USER: "root"
-      POSTGRES_PASSWORD: "password"
+      POSTGRES_DB: postgres
+      POSTGRES_USER: root
+      POSTGRES_PASSWORD: password
       PGDATA: /data/postgres
     ports:
-      - "5432:5432"
-    restart: unless-stopped
+      - '5432:5432'
+    restart: unless-stopped