From 2ef72888f5ed6ee1f8b8dede09bcd616c29095c0 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Thu, 11 May 2023 10:11:55 -0400
Subject: [PATCH] add version in the about page

---
 .gitignore                            |  1 +
 package.json                          | 18 ++++++++++--------
 src/routes/(about)/about/+page.svelte | 20 ++++++++++++--------
 vite.config.js                        |  4 +++-
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2ebe419..96726a4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,4 @@ dist/yarn-error.log
 dist
 src/lib/components/__image_snapshots__/__diff_output__/
 .histoire/dist
+pnpm-lock.yaml
diff --git a/package.json b/package.json
index 9ec18db..3c8d152 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,14 @@
   "version": "2.3.0",
   "type": "module",
   "private": true,
-    "repository": {
-        "type": "git",
-        "url": "https://git.babyl.ca/aotds/aotds-docks.git" 
-    },
-    "bugs": {
-        "url": "https://git.babyl.ca/aotds/aotds-docks/issues"
-    },
-    "homepage": "https://git.babyl.ca/aotds/aotds-docks",
+  "repository": {
+    "type": "git",
+    "url": "https://git.babyl.ca/aotds/aotds-docks.git"
+  },
+  "bugs": {
+    "url": "https://git.babyl.ca/aotds/aotds-docks/issues"
+  },
+  "homepage": "https://git.babyl.ca/aotds/aotds-docks",
   "scripts": {
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
@@ -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",
diff --git a/src/routes/(about)/about/+page.svelte b/src/routes/(about)/about/+page.svelte
index 35feacb..e4f53d7 100644
--- a/src/routes/(about)/about/+page.svelte
+++ b/src/routes/(about)/about/+page.svelte
@@ -1,11 +1,7 @@
-<h2>Welcome to the docks!</h2>
-
-<!-- TODO
-  <p class="version">
-    <span>version {import.meta.env.PACKAGE_VERSION}</span>
-    <a>changelog</a>
-  </p>
-  -->
+<div class="header">
+  <h2>Welcome to the docks!</h2>
+  <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>
diff --git a/vite.config.js b/vite.config.js
index aece566..b0c4b3d 100644
--- a/vite.config.js
+++ b/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),
     },