feat: add Dockerfile and GitHub Actions workflow for GHCR deployment

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+.git
+.github
+_sample-archives
+Dockerfile
+.dockerignore
+README.md
+GEMINI.md
+metadata.json

.github/workflows/docker-publish.yml

@@ -0,0 +1,47 @@
+name: Docker Build and Publish
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+            type=sha
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,38 @@
+# Stage 1: Build
+FROM node:20-slim AS build
+
+WORKDIR /app
+
+# Install build dependencies
+COPY package*.json ./
+RUN npm ci
+
+# Copy source and build frontend
+COPY . .
+RUN npm run build
+
+# Stage 2: Runtime
+FROM node:20-slim AS runtime
+
+# Set production environment
+ENV NODE_ENV=production
+ENV PORT=3000
+ENV ARCHIVES_DIR=/archives
+
+WORKDIR /app
+
+# Install runtime dependencies only
+COPY package*.json ./
+RUN npm ci --omit=dev
+
+# Copy built assets and server
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/server.ts ./
+
+# Ensure archives directory exists
+RUN mkdir -p /archives
+
+EXPOSE 3000
+
+# Start server using tsx
+CMD ["npx", "tsx", "server.ts"]

package-lock.json

@@ -16,6 +16,7 @@
         "date-fns": "^4.1.0",
         "dotenv": "^17.2.3",
         "express": "^4.21.2",
+        "idb-keyval": "^6.2.2",
         "lucide-react": "^0.546.0",
         "motion": "^12.23.24",
         "react": "^19.0.0",
@@ -4954,6 +4955,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/idb-keyval": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
+      "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",

package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-example",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite --port=3000 --host=0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
+    "server": "tsx server.ts",
     "clean": "rm -rf dist",
     "lint": "tsc --noEmit"
   },
@@ -19,11 +20,13 @@
     "date-fns": "^4.1.0",
     "dotenv": "^17.2.3",
     "express": "^4.21.2",
+    "idb-keyval": "^6.2.2",
     "lucide-react": "^0.546.0",
     "motion": "^12.23.24",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.5.0",
+    "tsx": "^4.21.0",
     "vite": "^6.2.0",
     "xz-decompress": "^0.2.3"
   },
@@ -32,7 +35,6 @@
     "@types/node": "^22.14.0",
     "autoprefixer": "^10.4.21",
     "tailwindcss": "^4.1.14",
-    "tsx": "^4.21.0",
     "typescript": "~5.8.2",
     "vite": "^6.2.0",
     "vite-plugin-pwa": "^1.2.0"

server.ts

@@ -0,0 +1,107 @@
+import express from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+const ARCHIVES_DIR = process.env.ARCHIVES_DIR || path.join(__dirname, '_sample-archives');
+
+// Ensure archives directory exists
+if (!fs.existsSync(ARCHIVES_DIR)) {
+  console.warn(`Warning: Archives directory not found at ${ARCHIVES_DIR}. Creating it...`);
+  fs.mkdirSync(ARCHIVES_DIR, { recursive: true });
+}
+
+app.use(express.json());
+
+// API: List archives (subdirectories in ARCHIVES_DIR)
+app.get('/api/archives', (req, res) => {
+  try {
+    const items = fs.readdirSync(ARCHIVES_DIR, { withFileTypes: true });
+    const archives = items
+      .filter(item => item.isDirectory())
+      .map(item => {
+        // Try to find a profile pic or first image for the thumbnail
+        const archivePath = path.join(ARCHIVES_DIR, item.name);
+        const files = fs.readdirSync(archivePath);
+        
+        let thumbnail = '';
+        const profilePic = files.find(f => f.toLowerCase().includes('_profile_pic.jpg') || f.toLowerCase() === `${item.name.toLowerCase()}.jpg`);
+        if (profilePic) {
+          thumbnail = `/archives/${item.name}/${profilePic}`;
+        } else {
+          const firstImage = files.find(f => /\.(jpg|jpeg|png|webp)$/i.test(f));
+          if (firstImage) thumbnail = `/archives/${item.name}/${firstImage}`;
+        }
+
+        return {
+          name: item.name,
+          thumbnail,
+          path: item.name,
+          fileCount: files.length
+        };
+      });
+    res.json(archives);
+  } catch (err) {
+    console.error('Error listing archives:', err);
+    res.status(500).json({ error: 'Failed to list archives' });
+  }
+});
+
+// API: List all files in an archive (recursive)
+app.get('/api/archives/:name/files', (req, res) => {
+  const archiveName = req.params.name;
+  const archivePath = path.join(ARCHIVES_DIR, archiveName);
+
+  if (!fs.existsSync(archivePath)) {
+    return res.status(404).json({ error: 'Archive not found' });
+  }
+
+  try {
+    const walk = (dir: string, base: string = ''): string[] => {
+      let results: string[] = [];
+      const list = fs.readdirSync(dir);
+      list.forEach(file => {
+        const filePath = path.join(dir, file);
+        const relativePath = path.join(base, file);
+        const stat = fs.statSync(filePath);
+        if (stat && stat.isDirectory()) {
+          results = results.concat(walk(filePath, relativePath));
+        } else {
+          results.push(relativePath);
+        }
+      });
+      return results;
+    };
+
+    const files = walk(archivePath);
+    res.json(files);
+  } catch (err) {
+    console.error('Error listing files:', err);
+    res.status(500).json({ error: 'Failed to list files' });
+  }
+});
+
+// Serve archive files
+app.use('/archives', express.static(ARCHIVES_DIR));
+
+// Serve production frontend
+const distPath = path.join(__dirname, 'dist');
+if (fs.existsSync(distPath)) {
+  app.use(express.static(distPath));
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(distPath, 'index.html'));
+  });
+}
+
+app.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}`);
+  console.log(`Serving archives from: ${ARCHIVES_DIR}`);
+});

vite.config.ts

@@ -64,8 +64,12 @@ export default defineConfig(({mode}) => {
     },
     server: {
       // HMR is disabled in AI Studio via DISABLE_HMR env var.
-      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
       hmr: process.env.DISABLE_HMR !== 'true',
+      proxy: {
+        '/api': 'http://localhost:3001',
+        '/archives': 'http://localhost:3001',
+      },
     },
   };
 });