Merge pull request 'Fixing broken photos link + Changing the defualt layout' (#4) from dev into main

Reviewed-on: https://gitea.knapp/jacoknapp/EternalVows/pulls/4

Author: jacoknapp

.github/workflows/docker.yml

@@ -17,6 +17,15 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install NPM dependencies
+        run: npm install
+
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
 

config/photos/.gitkeep

@@ -0,0 +1,2 @@
+# Placeholder to ensure the photos directory exists in the repo.
+# Place .jpg/.jpeg/.png/.webp/.avif files here to be served at /photos/ and listed by /api/photos.

docker-compose.yml

@@ -71,9 +71,19 @@
       box-shadow: 0 20px 60px rgba(0,0,0,.35);
       text-align: center; /* Center names, date, and location */
     }
-  .monogram { display:block; width:max-content; margin-left:0; margin-right:auto; padding:.25rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25);
-      background: radial-gradient(ellipse at top left, var(--accent-1) 0%, transparent 70%), radial-gradient(ellipse at bottom right, var(--accent-2) 0%, transparent 60%);
-      font-family: "Playfair Display", serif; letter-spacing: 1px; opacity:.95; }
+  .monogram {
+      display: inline-block;
+      /* center within the header (parent has text-align:center) */
+      margin: 0 0 .25rem;
+      /* remove pill/button styling */
+      padding: 0;
+      border: none;
+      border-radius: 0;
+      background: transparent;
+      font-family: "Playfair Display", serif;
+      letter-spacing: 1px;
+      opacity:.95;
+    }
     h1.names { margin: .35rem 0 .25rem; font-family: "Great Vibes", cursive; font-size: clamp(2.2rem, 8vw, 4.2rem); font-weight: 400; letter-spacing:.4px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
     .tagline { font-size: clamp(1rem, 2.6vw, 1.2rem); opacity:.96 }
     .date { display:inline-block; margin-top:.4rem; font-weight:600; letter-spacing:.8px; background: linear-gradient(90deg, var(--accent-3), var(--accent-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }

index.html

@@ -9,14 +9,39 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const app = express();
 
+// Simple structured logger with optional DEBUG
+const LOG_LEVEL = (process.env.LOG_LEVEL || 'info').toLowerCase();
+const isDebug = LOG_LEVEL === 'debug' || LOG_LEVEL === 'trace' || process.env.DEBUG === '1';
+const ts = () => new Date().toISOString();
+const info = (...args) => console.log(ts(), '[INFO]', ...args);
+const warn = (...args) => console.warn(ts(), '[WARN]', ...args);
+const error = (...args) => console.error(ts(), '[ERROR]', ...args);
+const debug = (...args) => { if (isDebug) console.log(ts(), '[DEBUG]', ...args); };
+
 const ROOT = __dirname;
 const CONFIG_DIR = path.join(ROOT, 'config');
 const PHOTO_DIR = path.join(CONFIG_DIR, 'photos');
 const FAVICON_DIR = path.join(ROOT, 'favicon');
 const ALLOWED = new Set(['.jpg','.jpeg','.png','.webp','.avif']);
 
+// Request/response logger with timing
+app.use((req, res, next) => {
+  const start = process.hrtime.bigint();
+  debug('Incoming request', { method: req.method, url: req.originalUrl || req.url, ip: req.ip });
+  res.on('finish', () => {
+    const durMs = Number(process.hrtime.bigint() - start) / 1e6;
+    const msg = `${req.method} ${req.originalUrl || req.url} -> ${res.statusCode} ${Math.round(durMs)}ms`;
+    if (res.statusCode >= 500) error(msg);
+    else if (res.statusCode >= 400) warn(msg);
+    else info(msg);
+  });
+  next();
+});
+
 app.use(express.static(ROOT, { extensions: ['html'], etag: true, lastModified: true }));
 app.use('/config', express.static(CONFIG_DIR, { etag: true, lastModified: true }));
+// Serve photos from config/photos under a stable /photos path used by the client
+app.use('/photos', express.static(PHOTO_DIR, { etag: true, lastModified: true }));
 // Serve favicons and related assets
 app.use('/favicon', express.static(FAVICON_DIR, { etag: true, lastModified: true }));
 app.get('/favicon.ico', (_req, res) => res.sendFile(path.join(FAVICON_DIR, 'wedding_bell_favicon.ico')));
@@ -25,17 +50,29 @@ app.get('/site.webmanifest', (_req, res) => res.sendFile(path.join(FAVICON_DIR,
 
 app.get('/api/photos', async (_req, res) => {
   try {
+    debug('Listing photos from', PHOTO_DIR, 'allowed extensions:', [...ALLOWED].join(','));
     const primary = await readdir(PHOTO_DIR, { withFileTypes: true });
     const files = primary
       .filter(f => f.isFile() && ALLOWED.has(extname(f.name).toLowerCase()))
       .map(f => f.name)
       .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+    info(`/api/photos -> ${files.length} files`);
     res.set('Cache-Control', 'no-store');
     res.json({ files });
   } catch (e) {
+    // If the photos directory doesn't exist yet, treat as empty set
+    if (e && (e.code === 'ENOENT' || e.code === 'ENOTDIR')) {
+      warn('Photos directory not found; returning empty list');
+      return res.json({ files: [] });
+    }
+    error('Failed to list photos:', e && e.stack ? e.stack : e);
     res.status(500).json({ error: e.message });
   }
 });
 
 const port = process.env.PORT || 5500;
-app.listen(port, () => console.log(`Wedding site running at http://localhost:${port}`));
+app.listen(port, () => {
+  info(`Wedding site running at http://localhost:${port}`);
+  info('Environment', { node: process.versions.node, platform: process.platform, arch: process.arch, logLevel: LOG_LEVEL });
+  info('Paths', { ROOT, CONFIG_DIR, PHOTO_DIR, FAVICON_DIR });
+});