fix: use drizzle

compose.yml

@@ -12,28 +12,28 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
 
   db:
-    image: postgres:15
+    image: postgres
     environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
+      - POSTGRES_DB=db
+    ports:
+      - "5432:5432"
     volumes:
       - db-data:/var/lib/postgresql/data
 
-  frontend:
-    build: ./packages/web_new
-    container_name: personal-website
+  sveltekit:
+    build: ./packages/web
     restart: unless-stopped
-    environment:
-      - DATABASE_URL=postgresql://postgres:postgres@db:5432/db
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.priceless-newton.rule=Host(`stanrunge.dev`)"
+      - "traefik.http.routers.personal-website.rule=Host(`stanrunge.dev`)"
       - "traefik.http.routers.localhost.rule=Host(`localhost`)"
-      - "traefik.http.services.priceless-newton.loadbalancer.server.port=3000"
+      - "traefik.http.services.personal-website.loadbalancer.server.port=3000"
     develop:
       watch:
         - action: rebuild
-          path: ./packages/web_new
+          path: ./packages/web
           ignore:
             - node_modules/
 

packages/web/drizzle.config.ts

@@ -5,5 +5,8 @@ export default defineConfig({
 	schema: './src/lib/db/schema.ts',
 	out: './drizzle',
 	verbose: true,
-	strict: true
+	strict: true,
+	dbCredentials: {
+		url: 'postgresql://postgres:postgres@localhost:5432/db'
+	}
 });

packages/web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "web-new",
+  "name": "web",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -18,31 +18,31 @@
     "studio": "drizzle-kit studio"
   },
   "devDependencies": {
-    "@playwright/test": "1.47.0",
-    "@sveltejs/kit": "^2.5.27",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@playwright/test": "1.49.1",
+    "@sveltejs/kit": "^2.15.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "9.6.1",
     "autoprefixer": "^10.4.20",
-    "drizzle-kit": "^0.24.2",
-    "eslint": "9.10.0",
+    "drizzle-kit": "^0.30.1",
+    "eslint": "9.17.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
-    "globals": "15.9.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "15.14.0",
     "postcss": "^8.4.49",
-    "prettier": "3.3.3",
-    "prettier-plugin-svelte": "3.2.6",
-    "svelte": "^5.0.0",
-    "svelte-check": "4.0.1",
+    "prettier": "3.4.2",
+    "prettier-plugin-svelte": "3.3.2",
+    "svelte": "^5.16.5",
+    "svelte-check": "4.1.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "5.5.4",
-    "typescript-eslint": "8.4.0",
-    "vite": "^5.4.4",
-    "vitest": "2.0.5"
+    "typescript": "5.7.2",
+    "typescript-eslint": "8.19.1",
+    "vite": "^6.0.7",
+    "vitest": "2.1.8"
   },
   "type": "module",
   "dependencies": {
-    "@sveltejs/adapter-node": "^5.2.4",
-    "drizzle-orm": "^0.33.0",
-    "postgres": "^3.4.4"
+    "@sveltejs/adapter-node": "^5.2.11",
+    "drizzle-orm": "^0.38.3",
+    "postgres": "^3.4.5"
   }
 }

packages/web/src/lib/db/db.server.ts

@@ -1,6 +0,0 @@
-import { drizzle } from 'drizzle-orm/postgres-js';
-import postgres from 'postgres';
-import { DATABASE_URL } from '$env/static/private';
-
-const client = postgres(DATABASE_URL);
-export const db = drizzle(client, {});

packages/web/src/lib/db/schema.ts

@@ -1,4 +1,9 @@
 import { integer, pgTable, serial, timestamp, varchar } from 'drizzle-orm/pg-core';
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+
+const client = postgres('postgresql://postgres:postgres@db:5432/db');
+export const db = drizzle(client, {});
 
 export const topics = pgTable('topics', {
 	id: serial('id').primaryKey(),
@@ -16,14 +21,6 @@ export const universities = pgTable('universities', {
 	updatedAt: timestamp('updated_at').defaultNow()
 });
 
-export const courses = pgTable('courses', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	universityId: integer('university_id').references(() => universities.id),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
 export const certificates = pgTable('certificates', {
 	id: serial('id').primaryKey(),
 	name: varchar('name', { length: 256 }),
@@ -32,17 +29,18 @@ export const certificates = pgTable('certificates', {
 	updatedAt: timestamp('updated_at').defaultNow()
 });
 
-export const books = pgTable('books', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	progress: integer('progress').default(0),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
 export const publications = pgTable('publications', {
 	id: serial('id').primaryKey(),
 	name: varchar('name', { length: 256 }),
 	createdAt: timestamp('created_at').defaultNow(),
 	updatedAt: timestamp('updated_at').defaultNow()
 });
+
+export const tasks = pgTable('topics', {
+	id: serial('id').primaryKey(),
+	name: varchar('name', { length: 256 }),
+	createdAt: timestamp('created_at').defaultNow(),
+	updatedAt: timestamp('updated_at').defaultNow()
+});
+
+

packages/web/src/routes/+page.server.ts

@@ -1,5 +1,4 @@
-// import { db } from '$lib/db/db.server';
-// import { myTable } from '$lib/db/schema';
+// import { myTable, db } from '$lib/db/schema';
 import type { PageServerLoad } from './$types';
 
 export const load = (async () => {

packages/web/src/routes/progress/+page.server.ts

@@ -1,5 +1,7 @@
+import { db, tasks } from "$lib/db/schema"
+
 export const load = async () => {
 	return {
-		tasks: []
+		tasks: await db.select().from(tasks)
 	}
 }

packages/web/src/routes/progress/+page.svelte

@@ -2,7 +2,13 @@
 	let { data } = $props();
 </script>
 
-<h1 class="font-bold text-xl text-center m-4">Tasks ({data.tasks.length})</h1>
+<div class="flex justify-center items-center">
+	<h1 class="font-bold text-xl text-center m-4">Tasks ({data.tasks.length})</h1>
+	<a href={'/progress/create'}>
+		<button class="px-4 py-2 rounded bg-green-500">Create</button>
+	</a>
+</div>
+
 <table>
 	<thead>
 		<tr>
@@ -15,9 +21,9 @@
 	<tbody>
 		{#each data.tasks as task}
 			<tr>
-				<td></td>
-				<td></td>
-				<td></td>
+				<td>{task.id}</td>
+				<td>{task.name}</td>
+				<td>{task.progress}</td>
 				<td><button>Delete</button></td>
 			</tr>
 		{/each}</tbody

packages/web/src/routes/progress/create/+page.server.ts

@@ -0,0 +1,12 @@
+import { db, tasks } from "$lib/db/schema"
+import { redirect } from "@sveltejs/kit"
+
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData()
+
+		await db.insert(tasks).values({ name: data.get('name') })
+
+		redirect(303, '/progress')
+	}
+}

packages/web/src/routes/progress/create/+page.svelte

@@ -0,0 +1,10 @@
+<form method="post" class="flex flex-col items-center gap-4">
+	<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
+
+	<div class="flex gap-4">
+		<label for="name">Name: </label>
+		<input type="text" id="name" class="border rounded" />
+	</div>
+
+	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
+</form>