docker sucks x400

Complete UI rewrite using shadcn-svelte for consistency and better design

Reviewed-on: #1
Co-authored-by: June <self@breadone.net>
Co-committed-by: June <self@breadone.net>

.gitignore

@@ -17,6 +17,7 @@ Thumbs.db
 .env.*
 !.env.example
 !.env.test
+pgdata
 
 # Vite
 vite.config.js.timestamp-*

Dockerfile

@@ -0,0 +1,54 @@
+# Build stage
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Install all dependencies (including dev)
+RUN pnpm install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN pnpm run build
+
+# Production stage
+FROM node:22-alpine
+
+WORKDIR /app
+
+# Copy package files from builder
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+
+# Install pnpm
+RUN npm install -g pnpm
+
+# Install all dependencies (including dev for drizzle-kit)
+RUN pnpm install --frozen-lockfile
+
+# Copy built application from builder
+COPY --from=builder /app/build ./build
+
+# Copy drizzle config and schema for migrations
+COPY drizzle.config.ts ./
+COPY tsconfig.json ./
+COPY src/lib/server/db ./src/lib/server/db
+
+# Install netcat for database readiness check
+RUN apk add --no-cache netcat-openbsd
+
+# Copy entrypoint script
+COPY entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+# Expose port (SvelteKit Node adapter default)
+EXPOSE 5173
+
+# Start the application
+ENTRYPOINT ["/app/entrypoint.sh"]

compose.yaml

@@ -9,4 +9,22 @@ services:
       POSTGRES_PASSWORD: mysecretpassword
       POSTGRES_DB: memento
     volumes:
-      - ~/tmp/pgdata:/var/lib/postgresql
+      # - ~/tmp/pgdata:/var/lib/postgresql
+      - ./pgdata:/var/lib/postgresql
+
+  app:
+    build: .
+    restart: always
+    ports:
+      - 5173:3000
+    depends_on:
+      - db
+    environment:
+      DATABASE_URL: postgresql://root:mysecretpassword@db:5432/memento
+      UPLOAD_DIR: /app/uploads
+    volumes:
+      # - .:/app
+      - ./uploads:/app/uploads
+      # - /app/node_modules
+
+

entrypoint.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+# Wait for PostgreSQL to be ready
+while ! nc -z db 5432; do
+  sleep 1
+done
+
+# Run database migrations
+echo "Pushing database schema..."
+pnpm run db:push
+
+# Start the application
+echo "Starting application..."
+node build

src/lib/upload.ts

@@ -57,17 +57,11 @@ export async function updateEntry(entry) {
 }
 
 export async function deleteEntry(entry) {
-  const res = await fetch(`/api/entry/delete`, {
+  await fetch(`/api/entry/delete`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify({ id: entry.id })
   });
-  
-  if (res.ok) {
-    entry = null;
-  } else {
-    alert('Failed to delete entry');
-  }
 }

src/routes/+layout.svelte

@@ -16,10 +16,13 @@
     let { children, data } = $props();
     let dateValue = $derived(data.date);
     let entries = $derived(data.entries);
+    let title = $state("Memento")
 
     $effect(() => {
         // Navigate when dateValue changes
         goto(`/${dateValue}`);
+        title = `Memento: ${dateValue}`
+        
     });
 
     $effect(() => {
@@ -28,7 +31,10 @@
     });
 </script>
 
-<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<svelte:head>
+    <title>{title}</title>
+    <link rel="icon" href={favicon} />
+</svelte:head>
 <ModeWatcher />
 
 <div

svelte.config.js

@@ -1,6 +1,13 @@
 import adapter from '@sveltejs/adapter-node';
 
 /** @type {import('@sveltejs/kit').Config} */
-const config = { kit: { adapter: adapter() } };
+const config = {
+  kit: {
+    adapter: adapter(),
+    csrf: {
+      checkOrigin: false
+    }
+  }
+};
 
 export default config;