v3: correctly using SITE_NAME across the app, added notifications on comments

vite.config.ts

@@ -4,6 +4,8 @@ import { lingui } from "@lingui/vite-plugin";
 import fs from "node:fs";
 import path from "node:path";
 
+const SITE_NAME = process.env.GERBEUR_SITE_NAME || "gerbeur";
+
 function manifestPlugin(): Plugin {
   const cssPath = path.resolve("src/index.css");
   const outPath = path.resolve("public/manifest.webmanifest");
@@ -21,8 +23,8 @@ function manifestPlugin(): Plugin {
     const bgColor = cssVar(rootBlock, "--color-bg") ?? "#111827";
 
     const manifest = {
-      name: "gerbeur",
-      short_name: "gerbeur",
+      name: SITE_NAME,
+      short_name: SITE_NAME,
       start_url: "/",
       display: "standalone",
       background_color: bgColor,
@@ -73,6 +75,18 @@ export default defineConfig({
   },
   plugins: [
     manifestPlugin(),
+    {
+      // In dev the API server isn't serving index.html, so replace the placeholder here.
+      // In production the Oak server does the replacement at runtime (see api/lib/static.ts).
+      name: "inject-site-name",
+      transformIndexHtml: {
+        order: "pre",
+        handler: (html, ctx) =>
+          ctx.server
+            ? html.replaceAll("__SITE_NAME__", SITE_NAME)
+            : html,
+      },
+    },
     lingui(),
     react({
       plugins: [["@lingui/swc-plugin", {}]],