From 78af4eac2843a1b8e0649f142185f886d540c238 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Sun, 17 Apr 2022 12:59:37 -0400
Subject: [PATCH] add version to the about component

---
 src/lib/components/About.svelte  | 51 ++++++++++++--------------------
 src/lib/components/About.test.js | 11 +++++++
 svelte.config.js                 |  5 ++++
 3 files changed, 35 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/components/About.test.js

diff --git a/src/lib/components/About.svelte b/src/lib/components/About.svelte
index 74a4977..421f42a 100644
--- a/src/lib/components/About.svelte
+++ b/src/lib/components/About.svelte
@@ -1,5 +1,9 @@
 <Card>
-  <h2 slot="header">Welcome to the docks</h2>
+  <div slot="header" class="header">
+    <h2>Welcome to the docks</h2>
+
+    <p class="version">version {import.meta.env.PACKAGE_VERSION}</p>
+  </div>
 
   <p>
     This app is a ship builder for the game
@@ -25,47 +29,30 @@
     Written by
     <a href="https://twitter.com/yenzie">Yanick Champoux</a>
     . Code available on
-    <a href="https://github.com/aotds/aotds-shipyard">Github</a>
+    <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
   </p>
-        <div slot="footer" />
 </Card>
 
 <script>
-import {
-    Modal, Card
-} from 'svelte-chota';
-
+  import { Modal, Card } from "svelte-chota";
 </script>
 
 <style>
-h2 {
-    margin-bottom: 1em;
+  h2 {
     font-size: var(--font-scale-14);
     font-family: Faktos;
-}
-  aside {
-    background-color: rgb(254, 218, 184);
-    position: absolute;
-    height: 20em;
-    max-width: 50%;
-    z-index: 200;
-
-    padding: 1em;
-    border: 3px solid var(--indigo-dye);
-    border-radius: 1em;
-    left: 0px;
-    border-left: 0px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    top: 6em;
-    font-size: var(--font-scale-11);
+    margin-bottom: 0px;
   }
-
-  h3 {
-    text-align: center;
-    margin: 0px;
+  .header {
+    margin-bottom: 1em;
+    display: flex;
+    align-items: baseline;
   }
-p {
+  p {
     margin-left: 2em;
-}
+  }
+  .version {
+    flex: 1;
+    text-align: right;
+  }
 </style>
diff --git a/src/lib/components/About.test.js b/src/lib/components/About.test.js
new file mode 100644
index 0000000..e25dfe2
--- /dev/null
+++ b/src/lib/components/About.test.js
@@ -0,0 +1,11 @@
+import { test, expect } from "vitest";
+import { render } from "@testing-library/svelte";
+
+import About from "./About.svelte";
+
+test("version is present", () => {
+  import.meta.env.PACKAGE_VERSION = '1.2.3';
+  const { queryByText } = render(About);
+
+  expect(queryByText(/version 1.2.3/)).toBeTruthy();
+});
diff --git a/svelte.config.js b/svelte.config.js
index 8940ae6..da83039 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,6 +8,11 @@ export default {
     adapter: adapter({ fallback: "index.html" }),
     paths: { base: dev ? "" : "/aotds-docks" },
     vite: {
+      define: {
+        "import.meta.env.PACKAGE_VERSION": JSON.stringify(
+          process.env.npm_package_version
+        ),
+      },
       build: {
         rollupOptions: {
           plugins: [analyze()],