Add HEIC to JPEG conversion and image resizing support; update dependencies and Dockerfile

2026-02-22 00:17:08 +01:00
parent bf070ec47f
commit eb28501b2e
11 changed files with 481 additions and 43 deletions
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(tail:*)",
+      "Bash(grep:*)",
+      "Bash(cd:*)"
+    ]
+  }
+}
@@ -25,6 +25,10 @@ COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/public ./public

+# Copy sharp native binaries (needed for HEIC→JPEG conversion)
+COPY --from=builder /app/node_modules/sharp ./node_modules/sharp
+COPY --from=builder /app/node_modules/@img ./node_modules/@img
+
 RUN mkdir -p /app/data/uploads/photos /app/data/uploads/videos /app/data/uploads/music \
  && chown -R nextjs:nodejs /app/data

@@ -0,0 +1,221 @@
+@echo off
+setlocal enabledelayedexpansion
+
+REM Claude Code Windows CMD Bootstrap Script
+REM Installs Claude Code for environments where PowerShell is not available
+
+REM Parse command line argument
+set "TARGET=%~1"
+if "!TARGET!"=="" set "TARGET=latest"
+
+REM Validate target parameter
+if /i "!TARGET!"=="stable" goto :target_valid
+if /i "!TARGET!"=="latest" goto :target_valid
+echo !TARGET! | findstr /r "^[0-9][0-9]*\.[0-9][0-9]*\.[0-9][0-9]*" >nul
+if !ERRORLEVEL! equ 0 goto :target_valid
+
+echo Usage: %0 [stable^|latest^|VERSION] >&2
+echo Example: %0 1.0.58 >&2
+exit /b 1
+
+:target_valid
+
+REM Check for 64-bit Windows
+if /i "%PROCESSOR_ARCHITECTURE%"=="AMD64" goto :arch_valid
+if /i "%PROCESSOR_ARCHITECTURE%"=="ARM64" goto :arch_valid
+if /i "%PROCESSOR_ARCHITEW6432%"=="AMD64" goto :arch_valid
+if /i "%PROCESSOR_ARCHITEW6432%"=="ARM64" goto :arch_valid
+
+echo Claude Code does not support 32-bit Windows. Please use a 64-bit version of Windows. >&2
+exit /b 1
+
+:arch_valid
+
+REM Set constants
+set "GCS_BUCKET=https://storage.googleapis.com/claude-code-dist-86c565f3-f756-42ad-8dfa-d59b1c096819/claude-code-releases"
+set "DOWNLOAD_DIR=%USERPROFILE%\.claude\downloads"
+REM Use native ARM64 binary on ARM64 Windows, x64 otherwise
+if /i "%PROCESSOR_ARCHITECTURE%"=="ARM64" (
+    set "PLATFORM=win32-arm64"
+) else (
+    set "PLATFORM=win32-x64"
+)
+
+REM Create download directory
+if not exist "!DOWNLOAD_DIR!" mkdir "!DOWNLOAD_DIR!"
+
+REM Check for curl availability
+curl --version >nul 2>&1
+if !ERRORLEVEL! neq 0 (
+    echo curl is required but not available. Please install curl or use PowerShell installer. >&2
+    exit /b 1
+)
+
+REM Always download latest version (which has the most up-to-date installer)
+call :download_file "!GCS_BUCKET!/latest" "!DOWNLOAD_DIR!\latest"
+if !ERRORLEVEL! neq 0 (
+    echo Failed to get latest version >&2
+    exit /b 1
+)
+
+REM Read version from file
+set /p VERSION=<"!DOWNLOAD_DIR!\latest"
+del "!DOWNLOAD_DIR!\latest"
+
+REM Download manifest
+call :download_file "!GCS_BUCKET!/!VERSION!/manifest.json" "!DOWNLOAD_DIR!\manifest.json"
+if !ERRORLEVEL! neq 0 (
+    echo Failed to get manifest >&2
+    exit /b 1
+)
+
+REM Extract checksum from manifest
+call :parse_manifest "!DOWNLOAD_DIR!\manifest.json" "!PLATFORM!"
+if !ERRORLEVEL! neq 0 (
+    echo Platform !PLATFORM! not found in manifest >&2
+    del "!DOWNLOAD_DIR!\manifest.json" 2>nul
+    exit /b 1
+)
+del "!DOWNLOAD_DIR!\manifest.json"
+
+REM Download binary
+set "BINARY_PATH=!DOWNLOAD_DIR!\claude-!VERSION!-!PLATFORM!.exe"
+call :download_file "!GCS_BUCKET!/!VERSION!/!PLATFORM!/claude.exe" "!BINARY_PATH!"
+if !ERRORLEVEL! neq 0 (
+    echo Failed to download binary >&2
+    if exist "!BINARY_PATH!" del "!BINARY_PATH!"
+    exit /b 1
+)
+
+REM Verify checksum
+call :verify_checksum "!BINARY_PATH!" "!EXPECTED_CHECKSUM!"
+if !ERRORLEVEL! neq 0 (
+    echo Checksum verification failed >&2
+    del "!BINARY_PATH!"
+    exit /b 1
+)
+
+REM Run claude install to set up launcher and shell integration
+echo Setting up Claude Code...
+"!BINARY_PATH!" install "!TARGET!"
+set "INSTALL_RESULT=!ERRORLEVEL!"
+
+REM Clean up downloaded file
+REM Wait a moment for any file handles to be released
+timeout /t 1 /nobreak >nul 2>&1
+del /f "!BINARY_PATH!" >nul 2>&1
+if exist "!BINARY_PATH!" (
+    echo Warning: Could not remove temporary file: !BINARY_PATH!
+)
+
+if !INSTALL_RESULT! neq 0 (
+    echo Installation failed >&2
+    exit /b 1
+)
+
+echo.
+echo Installation complete^^!
+echo.
+exit /b 0
+
+REM ============================================================================
+REM SUBROUTINES
+REM ============================================================================
+
+:download_file
+REM Downloads a file using curl
+REM Args: %1=URL, %2=OutputPath
+set "URL=%~1"
+set "OUTPUT=%~2"
+
+curl -fsSL "!URL!" -o "!OUTPUT!"
+exit /b !ERRORLEVEL!
+
+:parse_manifest
+REM Parse JSON manifest to extract checksum for platform
+REM Args: %1=ManifestPath, %2=Platform
+set "MANIFEST_PATH=%~1"
+set "PLATFORM_NAME=%~2"
+set "EXPECTED_CHECKSUM="
+
+REM Use findstr to find platform section, then look for checksum
+set "FOUND_PLATFORM="
+set "IN_PLATFORM_SECTION="
+
+REM Read the manifest line by line
+for /f "usebackq tokens=*" %%i in ("!MANIFEST_PATH!") do (
+    set "LINE=%%i"
+    
+    REM Check if this line contains our platform
+    echo !LINE! | findstr /c:"\"%PLATFORM_NAME%\":" >nul
+    if !ERRORLEVEL! equ 0 (
+        set "IN_PLATFORM_SECTION=1"
+    )
+    
+    REM If we're in the platform section, look for checksum
+    if defined IN_PLATFORM_SECTION (
+        echo !LINE! | findstr /c:"\"checksum\":" >nul
+        if !ERRORLEVEL! equ 0 (
+            REM Extract checksum value
+            for /f "tokens=2 delims=:" %%j in ("!LINE!") do (
+                set "CHECKSUM_PART=%%j"
+                REM Remove quotes, whitespace, and comma
+                set "CHECKSUM_PART=!CHECKSUM_PART: =!"
+                set "CHECKSUM_PART=!CHECKSUM_PART:"=!"
+                set "CHECKSUM_PART=!CHECKSUM_PART:,=!"
+                
+                REM Check if it looks like a SHA256 (64 hex chars)
+                if not "!CHECKSUM_PART!"=="" (
+                    call :check_length "!CHECKSUM_PART!" 64
+                    if !ERRORLEVEL! equ 0 (
+                        set "EXPECTED_CHECKSUM=!CHECKSUM_PART!"
+                        exit /b 0
+                    )
+                )
+            )
+        )
+        
+        REM Check if we've left the platform section (closing brace)
+        echo !LINE! | findstr /c:"}" >nul
+        if !ERRORLEVEL! equ 0 set "IN_PLATFORM_SECTION="
+    )
+)
+
+if "!EXPECTED_CHECKSUM!"=="" exit /b 1
+exit /b 0
+
+:check_length
+REM Check if string length equals expected length
+REM Args: %1=String, %2=ExpectedLength
+set "STR=%~1"
+set "EXPECTED_LEN=%~2"
+set "LEN=0"
+:count_loop
+if "!STR:~%LEN%,1!"=="" goto :count_done
+set /a LEN+=1
+goto :count_loop
+:count_done
+if %LEN%==%EXPECTED_LEN% exit /b 0
+exit /b 1
+
+:verify_checksum
+REM Verify file checksum using certutil
+REM Args: %1=FilePath, %2=ExpectedChecksum
+set "FILE_PATH=%~1"
+set "EXPECTED=%~2"
+
+for /f "skip=1 tokens=*" %%i in ('certutil -hashfile "!FILE_PATH!" SHA256') do (
+    set "ACTUAL=%%i"
+    set "ACTUAL=!ACTUAL: =!"
+    if "!ACTUAL!"=="CertUtil:Thecommandcompletedsuccessfully." goto :verify_done
+    if "!ACTUAL!" neq "" (
+        if /i "!ACTUAL!"=="!EXPECTED!" (
+            exit /b 0
+        ) else (
+            exit /b 1
+        )
+    )
+)
+
+:verify_done
+exit /b 1
@@ -14,7 +14,8 @@
        "next": "^16.1.6",
        "qrcode": "^1.5.4",
        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "sharp": "^0.34.5"
      },
      "devDependencies": {
        "@types/node": "^22",
@@ -497,7 +498,6 @@
      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
      "license": "MIT",
-      "optional": true,
      "engines": {
        "node": ">=18"
      }
@@ -2051,7 +2051,6 @@
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
      "license": "Apache-2.0",
-      "optional": true,
      "engines": {
        "node": ">=8"
      }
@@ -3169,7 +3168,6 @@
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
      "license": "ISC",
-      "optional": true,
      "bin": {
        "semver": "bin/semver.js"
      },
@@ -3189,7 +3187,6 @@
      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
      "hasInstallScript": true,
      "license": "Apache-2.0",
-      "optional": true,
      "dependencies": {
        "@img/colour": "^1.0.0",
        "detect-libc": "^2.1.2",
@@ -16,7 +16,8 @@
    "next": "^16.1.6",
    "qrcode": "^1.5.4",
    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "sharp": "^0.34.5"
  },
  "devDependencies": {
    "@types/node": "^22",
@@ -1187,34 +1187,141 @@ export default function AdminPage() {
                {timelineContributions
                  .filter(c => c.type === 'timeline')
                  .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-                  .map(c => (
-                    <div key={`tc-${c.id}`} className={`rounded-lg p-3 border flex items-center justify-between ${
-                      c.status === 'flagged' ? 'bg-red-50 border-red-200' :
-                      c.status === 'approved' ? 'bg-green-50/50 border-green-200' :
-                      c.status === 'rejected' ? 'bg-red-50/30 border-red-100' :
-                      'bg-amber-50 border-amber-200'
-                    }`}>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 flex-wrap">
-                          <span className="font-lora text-sm text-warm-brown font-medium">{c.title || 'Ohne Titel'}</span>
-                          {c.year && <span className="text-warm-gold text-xs">{c.day ? `${c.day}.` : ''}{c.month ? `${c.month}.` : ''}{c.year}</span>}
-                          {c.status === 'flagged' && <span className="text-xs px-1.5 py-0.5 bg-red-200 text-red-800 rounded-full">🚩</span>}
-                          {c.status === 'approved' && <span className="text-xs px-1.5 py-0.5 bg-green-200 text-green-800 rounded-full">✓</span>}
-                          {c.status === 'rejected' && <span className="text-xs px-1.5 py-0.5 bg-red-100 text-red-600 rounded-full">✗</span>}
-                        </div>
-                        <p className="text-warm-brown-light/60 text-xs truncate">{c.name} {c.content ? `· ${c.content}` : ''}</p>
-                      </div>
-                      <div className="flex gap-1 ml-2">
-                        {(c.status === 'pending' || c.status === 'flagged') && (
-                          <>
-                            <button onClick={async () => { await fetch(`/api/contributions/${c.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'approved' }) }); loadData() }} className="p-1.5 text-green-600 hover:text-green-700" title="Freigeben"><Eye size={13} /></button>
-                            <button onClick={async () => { await fetch(`/api/contributions/${c.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'rejected' }) }); loadData() }} className="p-1.5 text-red-400 hover:text-red-500" title="Ablehnen"><X size={13} /></button>
-                          </>
+                  .map(c => {
+                    const isEditing = editingContribution?.id === c.id
+                    return (
+                      <div key={`tc-${c.id}`} className={`rounded-lg p-3 border ${
+                        c.status === 'flagged' ? 'bg-red-50 border-red-200' :
+                        c.status === 'approved' ? 'bg-green-50/50 border-green-200' :
+                        c.status === 'rejected' ? 'bg-red-50/30 border-red-100' :
+                        'bg-amber-50 border-amber-200'
+                      }`}>
+                        {isEditing ? (
+                          <div className="space-y-2">
+                            <div className="grid grid-cols-3 gap-2">
+                              <input
+                                type="text"
+                                value={editingContribution.day || ''}
+                                onChange={(e) => setEditingContribution({ ...editingContribution, day: e.target.value })}
+                                placeholder="Tag"
+                                className="px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs"
+                              />
+                              <input
+                                type="text"
+                                value={editingContribution.month || ''}
+                                onChange={(e) => setEditingContribution({ ...editingContribution, month: e.target.value })}
+                                placeholder="Monat"
+                                className="px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs"
+                              />
+                              <input
+                                type="text"
+                                value={editingContribution.year || ''}
+                                onChange={(e) => setEditingContribution({ ...editingContribution, year: e.target.value })}
+                                placeholder="Jahr"
+                                className="px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs"
+                              />
+                            </div>
+                            <input
+                              type="text"
+                              value={editingContribution.title || ''}
+                              onChange={(e) => setEditingContribution({ ...editingContribution, title: e.target.value })}
+                              placeholder="Titel"
+                              className="w-full px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs"
+                            />
+                            <input
+                              type="text"
+                              value={editingContribution.location || ''}
+                              onChange={(e) => setEditingContribution({ ...editingContribution, location: e.target.value })}
+                              placeholder="Ort (optional)"
+                              className="w-full px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs"
+                            />
+                            <textarea
+                              value={editingContribution.content || ''}
+                              onChange={(e) => setEditingContribution({ ...editingContribution, content: e.target.value })}
+                              placeholder="Beschreibung (optional)"
+                              rows={2}
+                              className="w-full px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs resize-none"
+                            />
+                            <div className="flex items-center gap-2">
+                              <input
+                                type="text"
+                                value={editingContribution.name || ''}
+                                onChange={(e) => setEditingContribution({ ...editingContribution, name: e.target.value })}
+                                placeholder="Name des Einreichers"
+                                className="flex-1 px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown text-xs"
+                              />
+                              <button
+                                onClick={() => setEditingContribution({ ...editingContribution, name: '' })}
+                                title="Namen entfernen (wird nicht angezeigt)"
+                                className="px-2 py-1.5 rounded border border-warm-border bg-white text-warm-brown-light hover:text-red-500 text-xs transition-colors"
+                              >
+                                Name verbergen
+                              </button>
+                            </div>
+                            <div className="flex gap-2">
+                              <button
+                                onClick={async () => {
+                                  await fetch(`/api/contributions/${editingContribution.id}`, {
+                                    method: 'PUT',
+                                    headers: { 'Content-Type': 'application/json' },
+                                    body: JSON.stringify({
+                                      name: editingContribution.name,
+                                      type: editingContribution.type,
+                                      year: editingContribution.year,
+                                      month: editingContribution.month,
+                                      day: editingContribution.day,
+                                      title: editingContribution.title,
+                                      content: editingContribution.content,
+                                      location: editingContribution.location,
+                                      media_filenames: editingContribution.media_filenames,
+                                      status: editingContribution.status,
+                                    }),
+                                  })
+                                  setEditingContribution(null)
+                                  loadData()
+                                }}
+                                className="px-3 py-1.5 bg-warm-gold text-white rounded text-xs hover:bg-amber-600 transition-colors"
+                              >
+                                Speichern
+                              </button>
+                              <button
+                                onClick={() => setEditingContribution(null)}
+                                className="px-3 py-1.5 bg-warm-brown-light/20 text-warm-brown rounded text-xs hover:bg-warm-brown-light/30 transition-colors"
+                              >
+                                Abbrechen
+                              </button>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="flex items-center justify-between">
+                            <div className="flex-1 min-w-0">
+                              <div className="flex items-center gap-2 flex-wrap">
+                                <span className="font-lora text-sm text-warm-brown font-medium">{c.title || 'Ohne Titel'}</span>
+                                {c.year && <span className="text-warm-gold text-xs">{c.day ? `${c.day}.` : ''}{c.month ? `${c.month}.` : ''}{c.year}</span>}
+                                {c.status === 'flagged' && <span className="text-xs px-1.5 py-0.5 bg-red-200 text-red-800 rounded-full">🚩</span>}
+                                {c.status === 'approved' && <span className="text-xs px-1.5 py-0.5 bg-green-200 text-green-800 rounded-full">✓</span>}
+                                {c.status === 'rejected' && <span className="text-xs px-1.5 py-0.5 bg-red-100 text-red-600 rounded-full">✗</span>}
+                              </div>
+                              <p className="text-warm-brown-light/60 text-xs truncate">
+                                {c.name ? c.name : <span className="italic text-warm-brown-light/40">Kein Name</span>}
+                                {c.content ? ` · ${c.content}` : ''}
+                              </p>
+                            </div>
+                            <div className="flex gap-1 ml-2">
+                              <button onClick={() => setEditingContribution(c)} className="p-1.5 text-amber-700 hover:text-amber-500" title="Bearbeiten"><Edit2 size={13} /></button>
+                              {(c.status === 'pending' || c.status === 'flagged') && (
+                                <>
+                                  <button onClick={async () => { await fetch(`/api/contributions/${c.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'approved' }) }); loadData() }} className="p-1.5 text-green-600 hover:text-green-700" title="Freigeben"><Eye size={13} /></button>
+                                  <button onClick={async () => { await fetch(`/api/contributions/${c.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'rejected' }) }); loadData() }} className="p-1.5 text-red-400 hover:text-red-500" title="Ablehnen"><X size={13} /></button>
+                                </>
+                              )}
+                              <button onClick={async () => { if (confirm('Löschen?')) { await fetch(`/api/contributions/${c.id}`, { method: 'DELETE' }); loadData() } }} className="p-1.5 text-red-400/60 hover:text-red-500" title="Löschen"><Trash2 size={13} /></button>
+                            </div>
+                          </div>
                        )}
-                        <button onClick={async () => { if (confirm('Löschen?')) { await fetch(`/api/contributions/${c.id}`, { method: 'DELETE' }); loadData() } }} className="p-1.5 text-red-400/60 hover:text-red-500" title="Löschen"><Trash2 size={13} /></button>
                      </div>
-                    </div>
-                  ))}
+                    )
+                  })}
              </div>
            </div>
          )}
@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server'
 import fs from 'fs'
 import path from 'path'
+import sharp from 'sharp'

 export const runtime = 'nodejs'

@@ -40,8 +41,84 @@ export async function GET(
    return NextResponse.json({ error: 'Not found' }, { status: 404 })
  }

-  const ext = path.extname(filePath).toLowerCase()
-  const contentType = MIME[ext] || 'application/octet-stream'
+  let ext = path.extname(filePath).toLowerCase()
+  let contentType = MIME[ext] || 'application/octet-stream'
+  let fileToSendPath = filePath
+
+  // 1. Handle HEIC/HEIF conversion (to JPEG)
+  // If it's HEIC, we want to work with the converted JPEG version for serving or resizing
+  if (ext === '.heic' || ext === '.heif') {
+    const jpegPath = filePath.replace(/\.(heic|heif)$/i, '.jpg')
+    if (fs.existsSync(jpegPath)) {
+      fileToSendPath = jpegPath
+      ext = '.jpg'
+      contentType = 'image/jpeg'
+    } else {
+      try {
+        const converted = await sharp(fs.readFileSync(filePath)).jpeg({ quality: 90 }).toBuffer()
+        fs.writeFileSync(jpegPath, converted)
+        fileToSendPath = jpegPath
+        ext = '.jpg'
+        contentType = 'image/jpeg'
+      } catch {
+        // Conversion failed — keep original path (will likely fail to display in non-Apple browsers)
+      }
+    }
+  }
+
+  // 2. Handle Resizing (only for images, if width requested)
+  const widthParam = request.nextUrl.searchParams.get('w')
+  const allowedWidths = [200, 400, 600, 800, 1200, 1600]
+  
+  if (widthParam && contentType.startsWith('image/') && !contentType.includes('gif')) {
+    const targetWidth = parseInt(widthParam, 10)
+    
+    if (allowedWidths.includes(targetWidth)) {
+      // Construct resized filename: original.jpg -> original_w800.jpg
+      const dir = path.dirname(fileToSendPath)
+      const name = path.basename(fileToSendPath, ext)
+      const resizedPath = path.join(dir, `${name}_w${targetWidth}${ext}`)
+
+      if (fs.existsSync(resizedPath)) {
+        fileToSendPath = resizedPath
+      } else {
+        try {
+          let transformer = sharp(fs.readFileSync(fileToSendPath))
+            .resize(targetWidth, null, { withoutEnlargement: true })
+          
+          if (ext === '.jpg' || ext === '.jpeg') {
+            transformer = transformer.jpeg({ quality: 80 })
+          } else if (ext === '.png') {
+            transformer = transformer.png({ quality: 80 })
+          } else if (ext === '.webp') {
+            transformer = transformer.webp({ quality: 80 })
+          }
+
+          const resizedBuffer = await transformer.toBuffer()
+          
+          fs.writeFileSync(resizedPath, resizedBuffer)
+          fileToSendPath = resizedPath
+        } catch (e) {
+          // Resize failed (maybe corrupt image), serve original
+          console.error('Resize failed:', e)
+        }
+      }
+    }
+  }
+
+  // If we changed the file path (HEIC conversion or resizing), update stats
+  if (fileToSendPath !== filePath) {
+    const stat = fs.statSync(fileToSendPath)
+    const buffer = fs.readFileSync(fileToSendPath)
+    return new NextResponse(buffer as unknown as ReadableStream, {
+      headers: {
+        'Content-Type': contentType,
+        'Content-Length': String(stat.size),
+        'Cache-Control': 'public, max-age=31536000, immutable',
+      },
+    })
+  }
+
  const stat = fs.statSync(filePath)

  // Range requests for video/audio seeking
@@ -4,6 +4,7 @@ import path from 'path'
 import { cookies } from 'next/headers'
 import { createHash, randomUUID } from 'crypto'
 import { getDb } from '@/lib/db'
+import sharp from 'sharp'

 export const runtime = 'nodejs'
 export const maxDuration = 60
@@ -95,7 +96,7 @@ export async function POST(req: NextRequest) {

  for (const file of filesToProcess) {
    let mimeType = file.type?.toLowerCase() || ''
-    const ext = path.extname(file.name).toLowerCase()
+    let ext = path.extname(file.name).toLowerCase()

    if (!mimeType && (ext === '.heic' || ext === '.heif')) {
      mimeType = 'image/heic'
@@ -106,9 +107,22 @@ export async function POST(req: NextRequest) {
      continue // Skip unsupported files
    }

+    let buffer: Buffer = Buffer.from(await file.arrayBuffer())
+
+    // Convert HEIC/HEIF to JPEG so all browsers can display it
+    if (mimeType === 'image/heic' || mimeType === 'image/heif') {
+      try {
+        const converted = await sharp(buffer).jpeg({ quality: 90 }).toBuffer()
+        buffer = converted as unknown as Buffer
+        ext = '.jpg'
+        mimeType = 'image/jpeg'
+      } catch {
+        // Conversion failed — keep original HEIC (will only display on Apple devices)
+      }
+    }
+
    const filename = `${folder}/${randomUUID()}${ext || '.bin'}`
    const filePath = path.join(DATA_DIR, 'uploads', filename)
-    const buffer = Buffer.from(await file.arrayBuffer())

    // Check for duplicate
    const existingFile = await findDuplicate(buffer, folder)
@@ -21,8 +21,15 @@ const lora = Lora({

 export const dynamic = 'force-dynamic'

+let metadataBase: URL
+try {
+  metadataBase = new URL(process.env.NEXT_PUBLIC_URL || 'http://localhost:3000')
+} catch {
+  metadataBase = new URL('http://localhost:3000')
+}
+
 export const metadata: Metadata = {
-  metadataBase: new URL(process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'),
+  metadataBase,
  title: 'In Erinnerung an Maria Malejka',
  description:
    'Eine liebevolle Gedenkseite für Maria Malejka · 29. November 1945 – 10. Februar 2026',
@@ -31,7 +31,7 @@ export default function PhotoGallery({ photos }: { photos: MediaItem[] }) {
            className="relative aspect-square overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 group"
          >
            <img
-              src={`/api/files/${photo.filename}`}
+              src={`/api/files/${photo.filename}?w=400`}
              alt={photo.caption || 'Maria Malejka'}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              loading="lazy"
@@ -91,7 +91,7 @@ export default function PhotoGallery({ photos }: { photos: MediaItem[] }) {
              onClick={(e) => e.stopPropagation()}
            >
              <img
-                src={`/api/files/${photos[lightboxIndex].filename}`}
+                src={`/api/files/${photos[lightboxIndex].filename}?w=1200`}
                alt={photos[lightboxIndex].caption || ''}
                className="max-h-[78vh] max-w-full object-contain rounded-lg"
              />
@@ -95,9 +95,10 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
                        {photos.slice(0, 2).map((filename, i) => (
                          <img
                            key={i}
-                            src={`/api/files/${filename.trim()}`}
+                            src={`/api/files/${filename.trim()}?w=600`}
                            alt=""
-                            className="w-full max-h-40 object-contain rounded-lg bg-warm-brown/5"
+                            className="w-full max-h-40 object-cover rounded-lg"
+                            loading="lazy"
                          />
                        ))}
                      </div>
@@ -219,9 +220,9 @@ export default function TimelineSection({ entries }: TimelineSectionProps) {
                    {selectedEntry.media_filenames.split(',').map((filename, i) => (
                      <img
                        key={i}
-                        src={`/api/files/${filename.trim()}`}
+                        src={`/api/files/${filename.trim()}?w=1200`}
                        alt=""
-                        className="w-full object-contain rounded-lg bg-warm-brown/5"
+                        className="w-full object-contain rounded-xl"
                      />
                    ))}
                  </div>