68 lines
2.5 KiB
Markdown
68 lines
2.5 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.
|