✨ add menu pdf & pdf lib

package-lock.json

@@ -10,6 +10,7 @@
         "@tanstack/react-start": "latest",
         "better-auth": "^1.6.29",
         "drizzle-orm": "^0.45.2",
+        "pdfjs-dist": "^6.2.108",
         "postgres": "^3.4.9",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -1310,6 +1311,271 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-1.0.8.tgz",
+      "integrity": "sha512-/SaLcvlqGWdm0HSCWMgHu7cjJiQXfP8/mOY+6dUyV9flQz7sPBBZ+ed2zYtoukojPmxOaL7bm+d/G4GeWWoN7g==",
+      "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "1.0.8",
+        "@napi-rs/canvas-darwin-arm64": "1.0.8",
+        "@napi-rs/canvas-darwin-x64": "1.0.8",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "1.0.8",
+        "@napi-rs/canvas-linux-arm64-gnu": "1.0.8",
+        "@napi-rs/canvas-linux-arm64-musl": "1.0.8",
+        "@napi-rs/canvas-linux-riscv64-gnu": "1.0.8",
+        "@napi-rs/canvas-linux-x64-gnu": "1.0.8",
+        "@napi-rs/canvas-linux-x64-musl": "1.0.8",
+        "@napi-rs/canvas-win32-arm64-msvc": "1.0.8",
+        "@napi-rs/canvas-win32-x64-msvc": "1.0.8"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-1.0.8.tgz",
+      "integrity": "sha512-5+nkh8i3gt6lqS/d2jTZ1xAn6tdgtB4Lf1mW6T0Qm5/rXNwBuV1sAEyLEWan5o9gJPU/GuvHR3rvSeZ+FaGrbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-1.0.8.tgz",
+      "integrity": "sha512-7jQ47gi+fZ7KJmfc/5rNyy1CYw/cu4kZ0KPIYbo9UUgSdW0bKQJpt+WihEor6s4Lyp7+xc3a+3HeyXmAEbbnPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-1.0.8.tgz",
+      "integrity": "sha512-rRjDMZs9pIRKGxgijwezplKc1RnJsqUokrA9h88bbTkqQ+7ePj0ZN4ZnZDy8Vu0tXs7KRlI2tQLaK4mx9QlxHg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-1.0.8.tgz",
+      "integrity": "sha512-jGcCd+8ra6Q61xKqZeiItujTpp9a9eRLcQ0jW6qYNku+WpupqOPFPY0SrsuSnXFviJwkpKYT9p7QrB4lsf3LNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-1.0.8.tgz",
+      "integrity": "sha512-od6I2Y7kU7i1SwZYG2EKW8rWz6JiedtPpko4WEe1DDsiikrfaotVBCRaUTM5/yeZKaZ92EatoAS+5xG+6uJlYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-1.0.8.tgz",
+      "integrity": "sha512-yYkPbJDJiWj6N0gASA3CAvRypZmVpJnxU0DQg3aBhneLDQde9TPLKADsQkobNoJUtTT/lj46aWpzT48PDb3Qcg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-1.0.8.tgz",
+      "integrity": "sha512-PB00MSKAp4VwK/xwe6duKxRKmH8UH4GIl1pqHSbxng0jnU9Dr7FwaDypDiqwNFZ774N+8G7mJLGuLtg9NTcQsg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-1.0.8.tgz",
+      "integrity": "sha512-TWM2XWJoitLiIPCvgJh7SriC+L/T9qkYCVzC66AidsZy0QP1hkKzBzVwshCdcA3q6fIn3yE0ISbq4lMJSy8jFw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-1.0.8.tgz",
+      "integrity": "sha512-hb20MxKXXb5IB7AAwN8UHz9WRsa2HmdZfjsDCzjElwJoeV1aotVEwFU4FrFQcYQVzsJQLeaCc/2Qdt/0Q72mMg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-1.0.8.tgz",
+      "integrity": "sha512-WwPN08IXE4SkL+FhJyPz/iFnycMAUkbphFIT4cmKLlvbSU0Zfn1R7BGJ3Hqky1S89QUYc0Q4IOScXb/42Re9wQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-1.0.8.tgz",
+      "integrity": "sha512-XkrVqKb+pxyba7kjy2LJvABFVBTE0DNpEl7MrG4OYUmaWarrXH+t54z/Czj2YxCKtizYTV4mg6phNm3x24qjhQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
     "node_modules/@noble/ciphers": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-2.3.0.tgz",
@@ -3732,6 +3998,18 @@
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "license": "MIT"
     },
+    "node_modules/pdfjs-dist": {
+      "version": "6.2.108",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-6.2.108.tgz",
+      "integrity": "sha512-YxFb+SQcodN2rnX9Tn3dHYlqfb7NjlzzfONPpJd+AKoKtUjEdevTfbC07d5TcczzOK6261auRkP/M8OBHs9vFQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=22.13.0 || >=24"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^1.0.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "@tanstack/react-start": "latest",
     "better-auth": "^1.6.29",
     "drizzle-orm": "^0.45.2",
+    "pdfjs-dist": "^6.2.108",
     "postgres": "^3.4.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

src/components/pdf-menu.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useRef, useState } from 'react'
+import type { PDFDocumentProxy, RenderTask } from 'pdfjs-dist'
+
+type Props = {
+  src: string
+}
+
+// pdfjs-dist touches the DOM/Canvas at import time, so it's loaded lazily inside
+// the effect below instead of at module scope — this file also runs during SSR.
+export function PdfMenu({ src }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const pdfRef = useRef<PDFDocumentProxy | null>(null)
+  const directionRef = useRef(1)
+  const hasRenderedOnceRef = useRef(false)
+  const [error, setError] = useState(false)
+  const [numPages, setNumPages] = useState(0)
+  const [pageNumber, setPageNumber] = useState(1)
+  const [isBusy, setIsBusy] = useState(false)
+
+  function goToPage(next: number) {
+    directionRef.current = next > pageNumber ? 1 : -1
+    setPageNumber(next)
+  }
+
+  useEffect(() => {
+    let cancelled = false
+    setError(false)
+    setNumPages(0)
+    setPageNumber(1)
+    pdfRef.current = null
+    hasRenderedOnceRef.current = false
+
+    async function load() {
+      const pdfjsLib = await import('pdfjs-dist')
+      pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+        'pdfjs-dist/build/pdf.worker.min.mjs',
+        import.meta.url,
+      ).href
+
+      try {
+        const pdf = await pdfjsLib.getDocument({ url: src }).promise
+        if (cancelled) return
+        pdfRef.current = pdf
+        setNumPages(pdf.numPages)
+      } catch (err) {
+        console.error('PdfMenu failed to load', err)
+        if (!cancelled) setError(true)
+      }
+    }
+
+    load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [src])
+
+  useEffect(() => {
+    const pdf = pdfRef.current
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!pdf || !canvas || !container || numPages === 0) return
+
+    let cancelled = false
+    let renderTask: RenderTask | undefined
+    let exitTimeout: ReturnType<typeof setTimeout> | undefined
+
+    function wait(ms: number) {
+      return new Promise<void>((resolve) => {
+        exitTimeout = setTimeout(resolve, ms)
+      })
+    }
+
+    async function render(pdf: PDFDocumentProxy, canvas: HTMLCanvasElement, container: HTMLDivElement) {
+      const direction = directionRef.current
+      setIsBusy(true)
+
+      if (hasRenderedOnceRef.current) {
+        canvas.style.transition = 'opacity 0.18s ease, transform 0.18s ease'
+        canvas.style.opacity = '0'
+        canvas.style.transform = `translateX(${direction * -2}rem)`
+        await wait(180)
+        if (cancelled) return
+      }
+
+      try {
+        const page = await pdf.getPage(pageNumber)
+        if (cancelled) return
+        const unscaledViewport = page.getViewport({ scale: 1 })
+        const scale = container.clientWidth / unscaledViewport.width
+        const viewport = page.getViewport({ scale })
+
+        const pixelRatio = window.devicePixelRatio || 1
+        canvas.width = viewport.width * pixelRatio
+        canvas.height = viewport.height * pixelRatio
+        canvas.style.width = `${viewport.width}px`
+        canvas.style.height = `${viewport.height}px`
+
+        const context = canvas.getContext('2d')
+        if (!context) return
+        context.scale(pixelRatio, pixelRatio)
+
+        renderTask = page.render({ canvasContext: context, viewport, canvas })
+        await renderTask.promise
+        if (cancelled) return
+
+        // Jump to the entry offset with transitions off, then force the browser to
+        // commit that position before re-enabling them — otherwise the two style
+        // writes land in the same frame and the entry animation never paints.
+        canvas.style.transition = 'none'
+        canvas.style.transform = `translateX(${direction * 2}rem)`
+        canvas.offsetHeight
+        canvas.style.transition = 'opacity 0.22s ease, transform 0.22s ease'
+        canvas.style.opacity = '1'
+        canvas.style.transform = 'translateX(0)'
+        hasRenderedOnceRef.current = true
+      } catch (err) {
+        if (!cancelled) {
+          console.error('PdfMenu failed to render page', err)
+          setError(true)
+        }
+      } finally {
+        if (!cancelled) setIsBusy(false)
+      }
+    }
+
+    render(pdf, canvas, container)
+
+    return () => {
+      cancelled = true
+      clearTimeout(exitTimeout)
+      renderTask?.cancel()
+    }
+  }, [numPages, pageNumber])
+
+  if (error) {
+    return (
+      <p className="field-hint">
+        Die Speisekarte konnte nicht geladen werden.{' '}
+        <a href={src} target="_blank" rel="noopener noreferrer">
+          Als PDF öffnen
+        </a>
+        .
+      </p>
+    )
+  }
+
+  return (
+    <div className="pdf-menu" ref={containerRef}>
+      <div className="pdf-menu-viewport">
+        <canvas className="pdf-menu-page" ref={canvasRef} />
+        {numPages === 0 && (
+          <div className="pdf-menu-loading" role="status">
+            <div className="pdf-menu-spinner" aria-hidden="true" />
+            <p>Die Speisekarte wird aufgetischt …</p>
+          </div>
+        )}
+      </div>
+      {numPages > 1 && (
+        <div className="pdf-menu-pagination">
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={() => goToPage(pageNumber - 1)}
+            disabled={isBusy || pageNumber <= 1}
+          >
+            Zurück
+          </button>
+          <span>
+            Seite {pageNumber} von {numPages}
+          </span>
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={() => goToPage(pageNumber + 1)}
+            disabled={isBusy || pageNumber >= numPages}
+          >
+            Weiter
+          </button>
+        </div>
+      )}
+      <p className="field-hint">
+        Speisekarte nicht geladen?{' '}
+        <a href={src} target="_blank" rel="noopener noreferrer">
+          Klick hier
+        </a>
+      </p>
+    </div>
+  )
+}

src/routes/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 
+import { PdfMenu } from '#/components/pdf-menu'
 import { ReservationConfirmedModal } from '#/components/reservation-confirmed-modal'
 import { ReservationDateTimeField } from '#/components/reservation-datetime-field'
 import { SiteFooter } from '#/components/site-footer'
@@ -227,6 +228,16 @@ function Home() {
           </div>
         </section>
 
+        <section className="section" id="speisekarte">
+          <div className="section-grid">
+            <div>
+              <span className="section-kicker">Was uns schmeckt</span>
+              <h2 className="section-heading">Speisekarte</h2>
+            </div>
+            <PdfMenu src="/menu.pdf" />
+          </div>
+        </section>
+
         <section className="section" id="reservieren">
           <div className="section-grid">
             <div>

src/styles.css

@@ -1508,6 +1508,83 @@ a {
   pointer-events: none;
 }
 
+.pdf-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pdf-menu-viewport {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.4rem;
+  border: 1px solid var(--line);
+  background: #fff;
+  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
+}
+
+.pdf-menu-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 90%;
+  max-width: 20rem;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  opacity: 0;
+  animation: pdf-menu-spinner-fade-in 0.15s ease 0.15s forwards;
+}
+
+.pdf-menu-loading p {
+  margin: 0;
+  text-align: center;
+  font-family: 'Fraunces', Georgia, serif;
+  font-style: italic;
+  color: #6b5f4d;
+}
+
+.pdf-menu-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 3px solid var(--line);
+  border-top-color: var(--gold);
+  animation: pdf-menu-spin 0.8s linear infinite;
+}
+
+@keyframes pdf-menu-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pdf-menu-spinner-fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+.pdf-menu-page {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 210 / 297;
+  opacity: 0;
+}
+
+.pdf-menu-pagination {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--text-muted);
+}
+
 /* A classic map-pin: a square with three rounded corners (50% 50% 50% 0 leaves
    the bottom-left one sharp), rotated -45deg around that exact sharp corner so
    the corner itself — not the box center — lands on the `left`/`top` coordinate