feat: show app version and build date in WelcomeModal

package.json

@@ -1,5 +1,6 @@
 {
   "name": "rappli",
+  "version": "0.0.1",
   "bin": "./bin/rappli.js",
   "scripts": {
     "dev": "solid-start dev",

src/components/WelcomeModal.tsx

@@ -15,7 +15,7 @@ import { LocalStoreContext } from "~/stores";
 import createAccordion from "./Accordion";
 import typer from "typer-js";
 import "typer-js/dist/typer.min.css";
-import { shuffle } from "~/util";
+import { getDisplayDate, shuffle } from "~/util";
 
 const WelcomeModal: Component = (props) => {
   const [localState, setLocalState, localStateMounted] =
@@ -317,6 +317,10 @@ const WelcomeModal: Component = (props) => {
           <LaunchIcon />
           Loslegen
         </button>
+        <div class="absolute -bottom-12 -right-12 text-xs text-black opacity-60 flex gap-3">
+          <span>Version: {__APP_VERSION__}</span>
+          <span>{getDisplayDate(new Date(__BUILD_TIME__))}</span>
+        </div>
       </div>
     </Modal>
   );

src/index.d.ts

@@ -0,0 +1,2 @@
+declare const __APP_VERSION__: string;
+declare const __BUILD_TIME__: number;

src/util.tsx

@@ -17,9 +17,9 @@ export const roundToStep = (value: number, step = 1.0) => {
   return inv.mul(value).round().div(inv).toNumber();
 };
 
-export const getDisplayDateFromUnix = function (unix: number) {
+export const getDisplayDate = function (date: Date) {
   return intlFormat(
-    fromUnixTime(unix),
+    date,
     {
       day: "2-digit",
       month: "2-digit",
@@ -31,6 +31,10 @@ export const getDisplayDateFromUnix = function (unix: number) {
   );
 };
 
+export const getDisplayDateFromUnix = function (unix: number) {
+  return getDisplayDate(fromUnixTime(unix));
+};
+
 export const resetInput =
   (defaultValue: any, eventName = "input") =>
   (evt: FocusEvent) => {

vite.config.ts

@@ -20,6 +20,10 @@ const cleanSvg = (svgString: string) => {
 };
 
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+    __BUILD_TIME__: JSON.stringify(new Date().getTime()),
+  },
   plugins: [
     Icons({
       compiler: "solid",