From 89fb27ff9fb8794b4a19d20bff17c0d08e355d1c Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Sun, 17 Apr 2022 17:51:31 -0400
Subject: [PATCH] add Changelog component

---
 src/lib/components/About.svelte             | 94 ++++++++++++++-------
 src/lib/components/Changelog.stories.svelte | 15 ++++
 src/lib/components/Changelog.svelte         | 38 +++++++++
 3 files changed, 117 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/components/Changelog.stories.svelte
 create mode 100644 src/lib/components/Changelog.svelte

diff --git a/src/lib/components/About.svelte b/src/lib/components/About.svelte
index 421f42a..364478c 100644
--- a/src/lib/components/About.svelte
+++ b/src/lib/components/About.svelte
@@ -1,40 +1,55 @@
-<Card>
-  <div slot="header" class="header">
-    <h2>Welcome to the docks</h2>
+{#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>
+      <div class="version">
+        <div>version {import.meta.env.PACKAGE_VERSION}</div>
+        <a on:click={() => (showChangelog = true)}>changelog</a>
+      </div>
+    </div>
 
-  <p>
-    This app is a ship builder for the game
-    <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
-    .
-  </p>
+    <p>
+      This app is a ship builder for the game
+      <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
+      .
+    </p>
 
-  <p>
-    The contruction rules are following the
-    <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
-      Cross Dimensions rules
-    </a>
-    as closely as possible.
-  </p>
+    <p>
+      The contruction rules are following the
+      <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
+        Cross Dimensions rules
+      </a>
+      as closely as possible.
+    </p>
 
-  <p>
-    The app is mostly developed for Firefox. I also check as much as I can that
-    I don't mess things too badly on Chrome. For the other browsers... caveat
-    emptor.
-  </p>
+    <p>
+      The app is mostly developed for Firefox. I also check as much as I can
+      that I don't mess things too badly on Chrome. For the other browsers...
+      caveat emptor.
+    </p>
 
-  <p>
-    Written by
-    <a href="https://twitter.com/yenzie">Yanick Champoux</a>
-    . Code available on
-    <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
-  </p>
-</Card>
+    <p>
+      Written by
+      <a href="https://twitter.com/yenzie">Yanick Champoux</a>
+      . Code available on
+      <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
+    </p>
+  </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>
diff --git a/src/lib/components/Changelog.stories.svelte b/src/lib/components/Changelog.stories.svelte
new file mode 100644
index 0000000..183f8b9
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/Changelog.svelte b/src/lib/components/Changelog.svelte
new file mode 100644
index 0000000..0cf664c
--- /dev/null
+++ b/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>