Alex Polo c931aa5b98 Fix blocked dates red styling - add modifiersClassNames
- Add modifiersClassNames to both DayPicker modes (single and multiple)
- Blocked dates now show with rdp-day_blocked class (red background)
- NonWorking and pending modifiers also properly styled
- Improve layout: single column with centered calendar
- Better spacing and hover effects on buttons
2025-10-31 20:42:37 +01:00

Warme Catering Website

En moderne hjemmeside for catering og private dining services. Bygget med Next.js 14, TypeScript og Tailwind CSS.

Features

  • Moderne og responsivt design
  • Online menu oversigt og bestilling
  • Admin dashboard for bookings
  • Dynamisk prissætning baseret på antal gæster
  • Pakke- og menu-konfiguration

Tech Stack

  • Next.js 14 med App Router
  • TypeScript
  • Tailwind CSS
  • React Server Components
  • date-fns for datohåndtering
  • react-day-picker for kalenderbooking

Kom i gang

  1. Klon repositoriet:

    git clone https://github.com/alexpolo1/kokken.git
    
  2. Installer dependencies:

    npm install
    
  3. Start development server:

    npm run dev
    
  4. Åbn http://localhost:3000 i din browser

Struktur

  • /src/app/* - Next.js App Router pages
  • /src/components/* - React komponenter
  • /src/config/* - Konfiguration og sample data
  • /src/lib/* - Utility functions
  • /src/types/* - TypeScript type definitioner

Deployment & database

Environment variables are required and must be set in a local .env file (do NOT commit it).

Required env vars (see .env.example):

  • OPENAI_KEY - OpenAI API key used by image generation (optional)
  • DB_HOST, DB_USER, DB_PASSWORD, DB_NAME - MariaDB connection
  • ADMIN_USER, ADMIN_PASSWORD - basic-auth for admin area

Run database migrations (builds helper scripts then runs migration):

npm run migrate

Build and start the production server:

npm run build
node server.mjs

Generate images (script will skip images that already exist and uses scripts/image-cache.json):

node scripts/generate-images.mjs

Notes:

  • The repo ignores .env* files. Keep secrets in .env or your deployment environment.
  • Generated images can be large; a small number of generated images were removed from git and the project ignores public/img/generated/. If you want generated images checked into the repo, move them into public/img/ and commit explicitly.
  • For production process management the project includes PM2 scripts in package.json (see pm2:* scripts).

Office365 / SMTP (app password)

If you plan to use an Office365 mailbox with SMTP (app password):

  1. Enable SMTP AUTH for the mailbox (tenant settings may block it by default).
  2. If the mailbox has MFA enabled, create an app password for the mailbox and use it as SMTP_PASS.
    • Microsoft 365: My account -> Security info -> Add method -> App password (or use admin center to manage).
  3. Set these env vars in your local .env:
SMTP_HOST=smtp.office365.com
SMTP_PORT=587
SMTP_USER=christian@warme.dk
SMTP_PASS=your-app-password
SENDER_EMAIL=christian@warme.dk
BOOKING_EMAIL=christian@warme.dk
  1. The contact API will send mail using the authenticated mailbox as the From address and set Reply-To to the visitor's email so replies go to them.

If you prefer a more modern and robust approach we can switch to Microsoft Graph API with OAuth2 (recommended for production).

Description
No description provided
Readme 17 MiB
Languages
HTML 53.9%
TypeScript 35.3%
JavaScript 9.5%
CSS 1.1%
Shell 0.2%