Default non-production hosts to test environment theming

Author: wilhel1812

src/components/MapView.tsx

@@ -12,16 +12,11 @@ import { getPathLossByModel } from "../lib/rfModels";
 import { sampleSrtmElevation } from "../lib/srtm";
 import { estimateTerrainExcessLossDb } from "../lib/terrainLoss";
 import { useSystemTheme } from "../hooks/useSystemTheme";
+import { isCurrentTestEnvironment } from "../lib/environment";
 import { useAppStore } from "../store/appStore";
 import type { Link, Site } from "../types/radio";
 
-const isStagingHost = (() => {
-  if (typeof window === "undefined") return false;
-  const host = window.location.hostname.toLowerCase();
-  return host.startsWith("staging.") || host.endsWith(".linksim-staging.pages.dev");
-})();
-
-const mapLinkColor = isStagingHost ? "#ff73b4" : "#00c2ff";
+const mapLinkColor = isCurrentTestEnvironment() ? "#ff73b4" : "#00c2ff";
 
 const mapLineLayer: LayerProps = {
   id: "link-lines",

src/components/Sidebar.tsx

@@ -16,6 +16,7 @@ import { fetchElevations } from "../lib/elevationService";
 import { FREQUENCY_PRESETS } from "../lib/frequencyPlans";
 import { searchLocations, type GeocodeResult } from "../lib/geocode";
 import { LEGACY_ASSETS } from "../lib/legacyAssets";
+import { isCurrentTestEnvironment } from "../lib/environment";
 import {
   fetchCollaboratorDirectory,
   fetchResourceChanges,
@@ -86,12 +87,6 @@ const styleByTheme = {
   dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
 };
 
-const isStagingHost = (() => {
-  if (typeof window === "undefined") return false;
-  const host = window.location.hostname.toLowerCase();
-  return host.startsWith("staging.") || host.endsWith(".linksim-staging.pages.dev");
-})();
-
 const RADIO_CLIMATE_OPTIONS: RadioClimate[] = [
   "Equatorial",
   "Continental Subtropical",
@@ -107,7 +102,7 @@ const meshmapNodesLayer: LayerProps = {
   type: "circle",
   paint: {
     "circle-radius": ["interpolate", ["linear"], ["zoom"], 4, 2, 8, 4, 12, 6],
-    "circle-color": isStagingHost ? "#ff73b4" : "#2bc0ff",
+    "circle-color": isCurrentTestEnvironment() ? "#ff73b4" : "#2bc0ff",
     "circle-opacity": 0.82,
     "circle-stroke-width": 1,
     "circle-stroke-color": "#0a1a24",
@@ -126,7 +121,7 @@ const meshmapLabelsLayer: LayerProps = {
     "text-allow-overlap": false,
   },
   paint: {
-    "text-color": isStagingHost ? "#ffd6e8" : "#e7f1ff",
+    "text-color": isCurrentTestEnvironment() ? "#ffd6e8" : "#e7f1ff",
     "text-halo-color": "rgba(10, 26, 36, 0.95)",
     "text-halo-width": 1.3,
   },

src/lib/environment.ts

@@ -0,0 +1,13 @@
+const PROD_HOSTS = new Set(["linksim.wilhelmfrancke.com", "linksim.pages.dev"]);
+
+const normalizeHost = (host: string): string => host.trim().toLowerCase();
+
+export const isProductionHostname = (hostname: string): boolean => PROD_HOSTS.has(normalizeHost(hostname));
+
+export const isTestEnvironmentHostname = (hostname: string): boolean => !isProductionHostname(hostname);
+
+export const isCurrentTestEnvironment = (): boolean => {
+  if (typeof window === "undefined") return false;
+  return isTestEnvironmentHostname(window.location.hostname);
+};
+

src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "./index.css";
 import App from "./App";
+import { isCurrentTestEnvironment } from "./lib/environment";
 
 if (window.location.hostname === "127.0.0.1") {
   const redirectUrl =
@@ -12,9 +13,7 @@ if (window.location.hostname === "127.0.0.1") {
   window.location.replace(redirectUrl);
 }
 
-const host = window.location.hostname.toLowerCase();
-const isStagingHost = host.startsWith("staging.") || host.endsWith(".linksim-staging.pages.dev");
-if (isStagingHost) {
+if (isCurrentTestEnvironment()) {
   document.documentElement.classList.add("env-staging");
 }