Add white label reference page

Documents EVCC_CUSTOM_* branding (logo, brand, contact, custom CSS), problem-report email flow, deployment via CLI/systemd/Docker and image forking. Adds screenshot-generator recipes and explicit English anchors on the Linux env-vars section.

Author: naltatis

astro.config.mjs

@@ -269,6 +269,7 @@ export default defineConfig({
             { label: "Plugins", slug: "reference/plugins" },
             { label: "Modbus", slug: "reference/modbus" },
             { label: "Web UI", slug: "reference/web-ui" },
+            { label: "White Label", slug: "reference/white-label" },
             { label: "API State", link: "/reference/state" },
             { label: "evcc App", slug: "reference/app" },
             {

screenshot-generator/recipes/custom-logo-dark.svg

@@ -12,12 +12,12 @@ const BINARY = "./evcc";
 
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export async function start(config, sqlDumps) {
+export async function start(config, sqlDumps, flags = []) {
   await _clean();
   if (sqlDumps) {
     await _restoreDatabase(sqlDumps);
   }
-  await _start(config);
+  await _start(config, flags);
 }
 
 export async function stop() {
@@ -49,16 +49,17 @@ async function _restoreDatabase(sqlDumps) {
 
 let instance = null;
 
-async function _start(config) {
+async function _start(config, flags = []) {
   const configPath =
     typeof config === "string"
       ? `recipes/${config}`
       : mergeYaml(`recipes/${config[0]}`, `recipes/${config[1]}`);
 
-  console.log("starting evcc", { config });
+  console.log("starting evcc", { config, flags });
   const port = new URL(BASE_URL).port;
+  const flagArgs = flags.map((flag) => JSON.stringify(flag)).join(" ");
   instance = exec(
-    `EVCC_DATABASE_DSN=${DB_PATH} EVCC_NETWORK_PORT=${port} EVCC_OCPP_PORT=12099 EVCC_EEBUS_PORT=13099 ${BINARY} --config ${configPath}`,
+    `EVCC_DATABASE_DSN=${DB_PATH} EVCC_NETWORK_PORT=${port} EVCC_OCPP_PORT=12099 EVCC_EEBUS_PORT=13099 ${BINARY} --config ${configPath} ${flagArgs}`,
   );
   instance.stdout.pipe(process.stdout);
   instance.stderr.pipe(process.stderr);

screenshot-generator/recipes/custom-logo-light.svg

@@ -0,0 +1,30 @@
+import { test } from "@playwright/test";
+import { loop } from "./utils/loop";
+import { start, stop } from "./utils/evcc";
+
+const BASE_PATH = "reference/screenshots";
+
+test.beforeAll(async () => {
+  // config is ignored in demo mode but required by the start helper
+  await start("basics.evcc.yaml", null, [
+    "--demo",
+    "--custom-css",
+    "recipes/white-label.css",
+  ]);
+});
+
+test.afterAll(async () => {
+  await stop();
+});
+
+loop((screenshot) => {
+  test("custom css changes color and font", async ({ page }) => {
+    await page.goto(`/`);
+    page.setViewportSize({ width: 1280, height: 680 });
+    await page.locator(".loadpoint").first().waitFor();
+    // ensure the Google font is loaded before taking the screenshot
+    await page.evaluate(() => document.fonts.ready);
+
+    await screenshot(page, `${BASE_PATH}/white-label-css`, null, { all: 0 });
+  });
+});

screenshot-generator/recipes/utils/evcc.js

@@ -0,0 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap");
+
+:root {
+  --evcc-dark-green: #22d3ee;
+  --evcc-darker-green: #0891b2;
+  --bs-body-font-family: "Space Grotesk", sans-serif;
+}