hoerdle/WHITE_LABEL.md

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:

: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.
4. 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:

   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):

   services:
     hoerdle:
       build:
         context: .
         args:
           NEXT_PUBLIC_APP_NAME: ${NEXT_PUBLIC_APP_NAME}
           # ...
   

3. Build and start the container:

   docker compose up --build -d