add version to the about component

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 {
+  import { Modal, Card } from "svelte-chota";
-    Modal, Card
-} from 'svelte-chota';
-
 </script>
 
 <style>
   h2 {
-    margin-bottom: 1em;
     font-size: var(--font-scale-14);
     font-family: Faktos;
+    margin-bottom: 0px;
   }
-  aside {
+  .header {
-    background-color: rgb(254, 218, 184);
+    margin-bottom: 1em;
-    position: absolute;
+    display: flex;
-    height: 20em;
+    align-items: baseline;
-    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);
-  }
-
-  h3 {
-    text-align: center;
-    margin: 0px;
   }
   p {
     margin-left: 2em;
   }
+  .version {
+    flex: 1;
+    text-align: right;
+  }
 </style>

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();
+});

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()],