A Svelte-based menu website that displays menu items from a YAML configuration file and generates images using AI.
Edit the static/menu.yaml
file to configure your menu items:
menus:
- name: americano
ingredients: water, espresso
price: '$3.50'
- name: latte
ingredients: water, espresso, milk
price: '$4.50'
- name: Tequila Sunrise
ingredients: Tequila, Lemon, Pomegranate Syrup, Orange Juice
price: '$8.00'
token: xxxxxx # Replace with your API token
Make sure to replace xxxxxx
with your actual SiliconFlow API token to enable image generation.
Generate menu images before building:
npm run generate
This will:
static/images/
directoryOnce you've created a project and installed dependencies with npm install
(or pnpm install
or yarn
), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
The project includes Docker containerization with nginx for production deployment.
# Build web assets and container image
npm run build
# Deploy using Docker Compose
npm run deploy
# Build only web assets
npm run build:web
# Build only container image
npm run build:container
# Stop deployment
npm run deploy:stop
# View container logs
npm run deploy:logs
# Build container image
docker build -f Containerfile -t menu-website .
# Run with Docker Compose
docker compose up -d
# Stop containers
docker compose down
The application will be available at http://localhost:5874