no string for maintenance mode

.github/workflows/production.yml

@@ -32,6 +32,12 @@ jobs:
           tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          build-args: |
+            VITE_API_BASE_URL=https://api.chess-scribe.org/api/v1
+            VITE_MATOMO_URL=https://analytics.owenrees.eu
+            VITE_MATOMO_SITE_ID="3"
+            VITE_MAINTENANCE_MODE=
+            VITE_MAINTENANCE_MODE_MESSAGE="ChessScribe is currently undergoing maintenance. Some features may be unavailable."
 
   deploy:
     needs: publish

Dockerfile

@@ -1,6 +1,21 @@
 # --- Stage 1: Build Stage ---
 FROM node:24-alpine AS builder
 WORKDIR /app
+
+# 1. Declare the build-time arguments Vite needs
+ARG VITE_API_BASE_URL
+ARG VITE_MATOMO_URL
+ARG VITE_MATOMO_SITE_ID
+ARG VITE_MAINTENANCE_MODE
+ARG VITE_MAINTENANCE_MODE_MESSAGE
+
+# 2. Assign them to environment variables so Vite detects them
+ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
+ENV VITE_MATOMO_URL=$VITE_MATOMO_URL
+ENV VITE_MATOMO_SITE_ID=$VITE_MATOMO_SITE_ID
+ENV VITE_MAINTENANCE_MODE=$VITE_MAINTENANCE_MODE
+ENV VITE_MAINTENANCE_MODE_MESSAGE=$VITE_MAINTENANCE_MODE_MESSAGE
+
 COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
 RUN corepack enable pnpm && pnpm i --frozen-lockfile
 COPY . .

src/components/Header.tsx

@@ -1,17 +1,26 @@
 import { Link } from "@tanstack/react-router";
 import { Image } from "@unpic/react";
+import { z } from "zod";
 import MaintenanceModeBanner from "#/components/MaintenanceModeBanner.tsx";
 import { env } from "#/env.ts";
 import logo from "@/assets/images/logo.svg?url";
 
 export default function Header() {
+	const maintenanceModeMessage = env.VITE_MAINTENANCE_MODE
+		? z
+				.string()
+				.transform((value) => (value.trim() === "" ? null : value))
+				.parse(env.VITE_MAINTENANCE_MODE_MESSAGE)
+		: null;
+
 	return (
 		<header>
-			{env.VITE_MAINTENANCE_MODE ? (
+			{maintenanceModeMessage ? (
 				<div className="absolute w-full">
-					<MaintenanceModeBanner message={env.VITE_MAINTENANCE_MODE_MESSAGE} />
+					<MaintenanceModeBanner message={maintenanceModeMessage} />
 				</div>
 			) : null}
+
 			<nav className="w-full max-w-screen-2xl place-self-center p-8">
 				<div className="container mx-auto flex items-center justify-between">
 					<div className="flex items-center">

src/env.ts

@@ -1,8 +1,8 @@
 import { z } from "zod";
 
 const clientSchema = z.object({
-	VITE_API_BASE_URL: z.string("Invalid API Base URL format"),
+	VITE_API_BASE_URL: z.url("Invalid API Base URL format"),
-	VITE_MATOMO_URL: z.string("Invalid URL format"),
+	VITE_MATOMO_URL: z.url("Invalid URL format"),
 	VITE_MATOMO_SITE_ID: z.string("Invalid Site ID"),
 	VITE_MAINTENANCE_MODE: z.string("Invalid Maintenance Mode"),
 	VITE_MAINTENANCE_MODE_MESSAGE: z.string().optional(),
@@ -27,6 +27,7 @@ const getEnv = () => {
 		const _env = fullSchema.safeParse(rawEnv);
 		if (!_env.success) {
 			console.error("❌ Invalid Server Environment Variables:");
+			console.error(JSON.stringify(_env.error.format(), null, 2));
 			throw new Error("Invalid environment variables");
 		}
 		return _env.data;
@@ -34,6 +35,7 @@ const getEnv = () => {
 		const _env = clientSchema.safeParse(rawEnv);
 		if (!_env.success) {
 			console.error("❌ Invalid Client Environment Variables:");
+			console.error(JSON.stringify(_env.error.format(), null, 2));
 			throw new Error("Invalid environment variables");
 		}
 		return _env.data as z.infer<typeof fullSchema>;