100 lines
3.4 KiB
Markdown
100 lines
3.4 KiB
Markdown
# White Labeling Guide
|
|
|
|
This application is designed to be easily white-labeled. You can customize the branding, colors, and configuration without modifying the core code.
|
|
|
|
## Configuration
|
|
|
|
The application is configured via environment variables. You can set these in a `.env` or `.env.local` file.
|
|
|
|
### Branding
|
|
|
|
| Variable | Description | Default |
|
|
|----------|-------------|---------|
|
|
| `NEXT_PUBLIC_APP_NAME` | The name of the application. | `Hördle` |
|
|
| `NEXT_PUBLIC_APP_DESCRIPTION` | The description used in metadata. | `Daily music guessing game...` |
|
|
| `NEXT_PUBLIC_DOMAIN` | The domain name (used for sharing). | `hoerdle.elpatron.me` |
|
|
| `NEXT_PUBLIC_TWITTER_HANDLE` | Twitter handle for metadata. | `@elpatron` |
|
|
|
|
### Analytics (Plausible)
|
|
|
|
| Variable | Description | Default |
|
|
|----------|-------------|---------|
|
|
| `NEXT_PUBLIC_PLAUSIBLE_DOMAIN` | The domain to track in Plausible. | `hoerdle.elpatron.me` |
|
|
| `NEXT_PUBLIC_PLAUSIBLE_SCRIPT_SRC` | The URL of the Plausible script. | `https://plausible.elpatron.me/js/script.js` |
|
|
|
|
### Credits
|
|
|
|
| Variable | Description | Default |
|
|
|----------|-------------|---------|
|
|
| `NEXT_PUBLIC_CREDITS_ENABLED` | Enable/disable footer credits (`true`/`false`). | `true` |
|
|
| `NEXT_PUBLIC_CREDITS_TEXT` | Text before the link. | `Vibe coded with ☕ and 🍺 by` |
|
|
| `NEXT_PUBLIC_CREDITS_LINK_TEXT` | Text of the link. | `@elpatron@digitalcourage.social` |
|
|
| `NEXT_PUBLIC_CREDITS_LINK_URL` | URL of the link. | `https://digitalcourage.social/@elpatron` |
|
|
|
|
## Theming
|
|
|
|
The application uses CSS variables for theming. You can override these variables in your own CSS file or by modifying `app/globals.css`.
|
|
|
|
### Key Colors
|
|
|
|
| Variable | Description | Default |
|
|
|----------|-------------|---------|
|
|
| `--primary` | Main action color (buttons). | `#000000` |
|
|
| `--secondary` | Secondary actions. | `#4b5563` |
|
|
| `--accent` | Accent color. | `#667eea` |
|
|
| `--success` | Success state (correct guess). | `#22c55e` |
|
|
| `--danger` | Error state (wrong guess). | `#ef4444` |
|
|
| `--warning` | Warning state (stars). | `#ffc107` |
|
|
| `--muted` | Muted backgrounds. | `#f3f4f6` |
|
|
|
|
### Example: Red Theme
|
|
|
|
To create a red-themed version, add this to your CSS:
|
|
|
|
```css
|
|
:root {
|
|
--primary: #dc2626;
|
|
--accent: #ef4444;
|
|
--accent-gradient: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
|
|
}
|
|
```
|
|
|
|
## Assets
|
|
|
|
To replace the logo and icons:
|
|
1. Replace `public/favicon.ico`.
|
|
2. Replace `public/icon.png` (if it exists).
|
|
3. Update `app/manifest.ts` if you have custom icon paths.
|
|
3. Update `app/manifest.ts` if you have custom icon paths.
|
|
|
|
## Docker Deployment
|
|
|
|
When deploying with Docker, please note that **Next.js inlines `NEXT_PUBLIC_` environment variables at build time**.
|
|
|
|
This means you cannot simply change the environment variables in `docker-compose.yml` and restart the container to change the branding. You must **rebuild the image**.
|
|
|
|
### Using Docker Compose
|
|
|
|
1. Create a `.env` file with your custom configuration:
|
|
```bash
|
|
NEXT_PUBLIC_APP_NAME="My Music Game"
|
|
NEXT_PUBLIC_THEME_COLOR="#ff0000"
|
|
# ... other variables
|
|
```
|
|
|
|
2. Ensure your `docker-compose.yml` passes these variables as build arguments (already configured in `docker-compose.example.yml`):
|
|
```yaml
|
|
services:
|
|
hoerdle:
|
|
build:
|
|
context: .
|
|
args:
|
|
NEXT_PUBLIC_APP_NAME: ${NEXT_PUBLIC_APP_NAME}
|
|
# ...
|
|
```
|
|
|
|
3. Build and start the container:
|
|
```bash
|
|
docker compose up --build -d
|
|
```
|