add version in the about page

.gitignore

@@ -18,3 +18,4 @@ dist/yarn-error.log
 dist
 src/lib/components/__image_snapshots__/__diff_output__/
 .histoire/dist
+pnpm-lock.yaml

package.json

@@ -45,6 +45,8 @@
     "@reduxjs/toolkit": "==2.0.0-alpha.5 ",
     "@yanick/updeep-remeda": "^2.2.0",
     "beercss": "^3.1.3",
+    "git-describe": "^4.1.1",
+    "git-repo-version": "^1.0.2",
     "histoire": "^0.16.1",
     "jsdom": "^21.1.1",
     "lodash": "^4.17.21",

src/routes/(about)/about/+page.svelte

@@ -1,11 +1,7 @@
+<div class="header">
   <h2>Welcome to the docks!</h2>
-
-<!-- TODO
-  <p class="version">
-    <span>version {import.meta.env.PACKAGE_VERSION}</span>
-    <a>changelog</a>
-  </p>
-  -->
+  <div>version {`import.meta.env.PACKAGE_VERSION`}</div>
+</div>
 
 <p>
   The Docks is a ship builder for the game
@@ -36,10 +32,18 @@
 <style>
   h2 {
     margin-bottom: 1.5rem;
+    flex: 1;
   }
   p {
     font-size: var(--font-scale-11);
     margin-bottom: 1.5rem;
     margin-left: 1rem;
   }
+  .header {
+    display: flex;
+    align-items: baseline;
+  }
+  .header div {
+    font-size: var(--font-scale-11);
+  }
 </style>

vite.config.js

@@ -1,6 +1,8 @@
 // vite.config.js
 import { sveltekit } from "@sveltejs/kit/vite";
 import packageJson from "./package.json";
+import getVersion from "git-repo-version";
+import git from "git-describe";
 
 /** @type {import('vite').UserConfig} */
 const config = {
@@ -9,7 +11,7 @@ const config = {
     ssr: {},
     optimizeDeps: {},
     define: {
-        "import.meta.env.PACKAGE_VERSION": JSON.stringify(packageJson.version),
+        "import.meta.env.PACKAGE_VERSION": git.gitDescribeSync().semverString,
         "import.meta.env.HOMEPAGE": JSON.stringify(packageJson.homepage),
         "import.meta.env.BUGS": JSON.stringify(packageJson.bugs.url),
     },