dev: dynamic app name and icon (#8)

* feat: added dynamic pws name and icon * feat: added env badge
The24thDS · Aug 10, 2023 · a5d5ce6 · a5d5ce6
1 parent 3cc45d6
commit a5d5ce6
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 4 deletions.
diff --git a/public/assets/images/rmg_logo_192_dev.png b/public/assets/images/rmg_logo_192_dev.png
diff --git a/public/assets/images/rmg_logo_192_local.png b/public/assets/images/rmg_logo_192_local.png
diff --git a/public/assets/images/rmg_logo_192_stage.png b/public/assets/images/rmg_logo_192_stage.png
diff --git a/public/assets/images/rmg_logo_512_dev.png b/public/assets/images/rmg_logo_512_dev.png
diff --git a/public/assets/images/rmg_logo_512_local.png b/public/assets/images/rmg_logo_512_local.png
diff --git a/public/assets/images/rmg_logo_512_stage.png b/public/assets/images/rmg_logo_512_stage.png
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,4 +1,12 @@
-import { createStyles, Group, Image, Stack, Tabs, Text } from "@mantine/core";
+import {
+  Badge,
+  createStyles,
+  Group,
+  Image,
+  Stack,
+  Tabs,
+  Text,
+} from "@mantine/core";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { ROUTES } from "../../constants";
@@ -12,6 +20,14 @@ const tabs = [
   ROUTES.OTHER_TOOLS,
 ];
 
+const isProd = ENVIRONMENT === "production";
+
+const BADGE_COLOR_MAP = {
+  local: "pink",
+  dev: "orange",
+  stage: "cyan",
+};
+
 const useStyles = createStyles((theme) => ({
   header: {
     paddingTop: theme.spacing.sm,
@@ -52,6 +68,11 @@ export default function Header() {
             <Text size="xl" weight={700}>
               RMG Utils for Stellaris
             </Text>
+            {!isProd && (
+              <Badge color={BADGE_COLOR_MAP[ENVIRONMENT]} variant="outline">
+                {ENVIRONMENT}
+              </Badge>
+            )}
           </Group>
           <ColorSchemeTogle />
         </Group>

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 declare const APP_VERSION: string;
+declare const ENVIRONMENT: "local" | "dev" | "stage" | "production";
 
 interface ImportMetaEnv {
   readonly VITE_NETLIFY_FUNCTIONS_LOCAL_SERVER: string;

diff --git a/vite.config.ts b/vite.config.ts
@@ -2,26 +2,38 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { VitePWA } from "vite-plugin-pwa";
 
+const env =
+  process.env.NODE_ENV === "development" ? "local" : process.env.NODE_ENV;
+
+const PWA_TITLE_MAP = {
+  local: "RMG Utils (local)",
+  production: "RMG Utilities for Stellaris",
+  stage: "RMG Utils (stage)",
+  dev: "RMG Utils (dev)",
+};
+
+const PWA_ICONS_TYPE = env === "production" ? "" : "_" + env;
+
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
     VitePWA({
       registerType: "autoUpdate",
       manifest: {
-        name: "RMG Utilities for Stellaris",
+        name: PWA_TITLE_MAP[env],
         short_name: "RMG Utils",
         description:
           "RMG Utils is an application that RMG is using to expediate some parts of the mod-making process.",
         theme_color: "#25262b",
         icons: [
           {
-            src: "/assets/images/rmg_logo_192.png",
+            src: `/assets/images/rmg_logo_192${PWA_ICONS_TYPE}.png`,
             sizes: "192x192",
             type: "image/png",
           },
           {
-            src: "/assets/images/rmg_logo_512.png",
+            src: `/assets/images/rmg_logo_512${PWA_ICONS_TYPE}.png`,
             sizes: "512x512",
             type: "image/png",
           },
@@ -46,5 +58,6 @@ export default defineConfig({
   ],
   define: {
     APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    ENVIRONMENT: JSON.stringify(env),
   },
 });