Add application version number to footer

web/src/components/layout/ContentContainer.tsx

@@ -1,5 +1,6 @@
 import { Box, Container, Typography } from "@mui/material";
 import { ChildrenProps } from "../../common/types";
+import Footer from "./Footer";
 
 const ContentContainer = ({ children }: ChildrenProps) => (
   <>
@@ -14,7 +15,7 @@ const ContentContainer = ({ children }: ChildrenProps) => (
           fontWeight: 100,
         }}
       >
-        Made with ❤️ by 🦊
+        <Footer />
       </Typography>
     </Box>
   </>

web/src/components/layout/Footer.tsx

@@ -0,0 +1,15 @@
+import { Box, Typography } from "@mui/material";
+
+const Footer = () => (
+  <Box component="span" sx={{ color: (theme) => theme.palette.text.secondary }}>
+    <Typography component="span" variant="overline">
+      Keijo {import.meta.env.APP_VERSION}
+    </Typography>
+    <Typography component="span" variant="caption">
+      {" "}
+      &mdash; Made with ❤️ by 🦊
+    </Typography>
+  </Box>
+);
+
+export default Footer;

web/src/vite-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly APP_VERSION: string;
+}

web/tsconfig.node.json

@@ -4,7 +4,8 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "package.json"]
 }

web/vite.config.ts

@@ -1,7 +1,11 @@
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import packageJson from "./package.json";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    "import.meta.env.APP_VERSION": JSON.stringify(packageJson.version),
+  },
 });