feat: add changelog to app

Merge branch 'changelog-in-app'

fix #16

.gitignore

@@ -13,3 +13,4 @@ package-lock.json
 .temp
 node_modules/
 dist/yarn-error.log
+.task/

.versionrc.json

@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "postchangelog": "gotask changelog"
+  },
   "types": [
     { "type": "feat", "section": "Features" },
     { "type": "fix", "section": "Bug Fixes" },

Taskfile.yml

@@ -0,0 +1,22 @@
+# https://taskfile.dev
+
+version: "3"
+
+vars:
+  GREETING: Hello, World!
+
+tasks:
+  release:
+    cmds:
+      - standard-version -a
+  changelog:
+    sources: [CHANGELOG.md]
+    generates: [src/lib/components/Changelog.svelte]
+    cmds:
+      - pnpx showdown makehtml -i CHANGELOG.md -o src/lib/components/Changelog.svelte
+      - git add src/lib/components/Changelog.svelte
+
+  default:
+    cmds:
+      - echo "{{.GREETING}}"
+    silent: true

package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-svelte3": "^3.4.1",
     "prettier": "~2.5.1",
     "prettier-plugin-svelte": "^2.6.0",
+    "showdown": "^2.0.3",
     "standard-version": "^9.3.2",
     "storybook-builder-vite": "0.1.21",
     "svelte": "^3.46.4",

src/lib/components/About.svelte

@@ -1,40 +1,55 @@
-<Card>
+{#if showChangelog}
-  <div slot="header" class="header">
+  <Card>
-    <h2>Welcome to the docks</h2>
+    <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>
+        <div>version {import.meta.env.PACKAGE_VERSION}</div>
+        <a on:click={() => (showChangelog = true)}>changelog</a>
+      </div>
+    </div>
 
-  <p>
+    <p>
-    This app is a ship builder for the game
+      This app is a ship builder for the game
-    <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
+      <a href="https://shop.groundzerogames.co.uk/rules.html">Full Thrust</a>
-    .
+      .
-  </p>
+    </p>
 
-  <p>
+    <p>
-    The contruction rules are following the
+      The contruction rules are following the
-    <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
+      <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
-      Cross Dimensions rules
+        Cross Dimensions rules
-    </a>
+      </a>
-    as closely as possible.
+      as closely as possible.
-  </p>
+    </p>
 
-  <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>
 
-  <p>
+    <p>
-    Written by
+      Written by
-    <a href="https://twitter.com/yenzie">Yanick Champoux</a>
+      <a href="https://twitter.com/yenzie">Yanick Champoux</a>
-    . Code available on
+      . Code available on
-    <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
+      <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
-  </p>
+    </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>