add Changelog component

src/lib/components/About.svelte

@@ -1,8 +1,19 @@
-<Card>
+{#if showChangelog}
+  <Card>
+    <h2 slot="header">Changelog for the Docks</h2>
+    <div class="changelog">
+      <Changelog />
+    </div>
+  </Card>
+{:else}
+  <Card>
     <div slot="header" class="header">
       <h2>Welcome to the docks</h2>
 
-    <p class="version">version {import.meta.env.PACKAGE_VERSION}</p>
+      <div class="version">
+        <div>version {import.meta.env.PACKAGE_VERSION}</div>
+        <a on:click={() => (showChangelog = true)}>changelog</a>
+      </div>
     </div>
 
     <p>
@@ -20,9 +31,9 @@
     </p>
 
     <p>
-    The app is mostly developed for Firefox. I also check as much as I can that
+      The app is mostly developed for Firefox. I also check as much as I can
-    I don't mess things too badly on Chrome. For the other browsers... caveat
+      that I don't mess things too badly on Chrome. For the other browsers...
-    emptor.
+      caveat emptor.
     </p>
 
     <p>
@@ -31,10 +42,14 @@
       . Code available on
       <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
     </p>
-</Card>
+  </Card>
+{/if}
 
 <script>
   import { Modal, Card } from "svelte-chota";
+  import Changelog from "./Changelog.svelte";
+
+  let showChangelog = false;
 </script>
 
 <style>
@@ -46,13 +61,32 @@
   .header {
     margin-bottom: 1em;
     display: flex;
-    align-items: baseline;
+    align-items: center;
   }
+
   p {
     margin-left: 2em;
   }
+
   .version {
     flex: 1;
     text-align: right;
   }
+
+  .changelog :global(h1),
+  :global(h1 + p) {
+    display: none;
+  }
+
+  .changelog :global(h2) {
+    font-size: var(--font-scale-12);
+    font-family: Faktos;
+  }
+  .changelog :global(h3) {
+    font-size: var(--font-scale-12);
+    font-family: Faktos;
+  }
+  .version a {
+    display: inline-block;
+  }
 </style>

src/lib/components/Changelog.stories.svelte

@@ -0,0 +1,15 @@
+<Meta title="Changelog" component={Changelog} argTypes={{}} />
+
+<Story name="Primary" args={{}} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Changelog />
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+
+  import Changelog from "./Changelog.svelte";
+</script>

src/lib/components/Changelog.svelte

@@ -0,0 +1,38 @@
+<h1 id="changelog">Changelog</h1>
+<p>
+  All notable changes to this project will be documented in this file. See <a
+    href="https://github.com/conventional-changelog/standard-version"
+    >standard-version</a
+  > for commit guidelines.
+</p>
+<h2 id="230comparev220v23020220417">
+  <a href="///compare/v2.2.0…v2.3.0">2.3.0</a> (2022-04-17)
+</h2>
+<h3 id="features">Features</h3>
+<ul>
+  <li>
+    <p>
+      add 'reset ship' button [GH<a
+        href="undefined/undefined/undefined/issues/15">#15</a
+      >] 49fc8d5
+    </p>
+  </li>
+  <li><p>add version to About component 919f286, closes #6</p></li>
+  <li><p><strong>release:</strong> 2.3.0 4d10119</p></li>
+</ul>
+<h2 id="220comparev210v22020220411">
+  <a href="///compare/v2.1.0…v2.2.0">2.2.0</a> (2022-04-11)
+</h2>
+<h3 id="features-1">Features</h3>
+<ul>
+  <li>allow to edit the print layout 381d497</li>
+</ul>
+<h2 id="210comparev200v21020220407">
+  <a href="///compare/v2.0.0…v2.1.0">2.1.0</a> (2022-04-07)
+</h2>
+<h3 id="features-2">Features</h3>
+<ul>
+  <li><p>add localStorage memory bf7206a</p></li>
+  <li><p>can move main system comps in the print output b425f4a</p></li>
+  <li><p>add standard-version 2fd047f</p></li>
+</ul>