add layouts

src/lib/components/MainLayout.svelte

@@ -0,0 +1,28 @@
+<header>
+  <nav>
+    <h1>
+      <a>The Docks</a>
+    </h1>
+    <h3 class="max">a Full Thrust ship builder</h3>
+    <a>About</a>
+    <span>&nbsp;</span>
+  </nav>
+</header>
+<main class="responsive">
+  <slot />
+</main>
+
+<script>
+  import "$lib/style/index.js";
+</script>
+
+<style>
+  header nav {
+    align-items: baseline;
+    font-family: "Faktos";
+  }
+  h3 {
+    font-size: var(--font-scale-12);
+    font-weight: normal;
+  }
+</style>

src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<Layout>
+  <slot />
+</Layout>
+
+<script>
+  import { setContext } from "svelte";
+
+  import { createApi } from "$lib/store/api.ts";
+  import Layout from "$lib/components/MainLayout.svelte";
+
+  setContext("api", createApi());
+</script>

src/routes/+page.svelte

@@ -1,12 +1 @@
-<App />
+TODO
-
-<script>
-  import { setContext } from "svelte";
-
-  import "$lib/style/index.js";
-  import shipStore from "$lib/store/ship.js";
-
-  import App from "$lib/components/App.svelte";
-
-  setContext("ship", shipStore());
-</script>

src/routes/about/+layout.svelte

@@ -0,0 +1,23 @@
+<nav class="m l left">
+  <a>
+    <i>Question_Mark</i>
+    <span>About</span>
+  </a>
+  <!-- TODO
+    <a>
+      <i>Quiz</i>
+      <span>See also</span>
+    </a>
+    <a>
+      <i>Format_List_Bulleted</i>
+      <span>Changelog</span>
+    </a>
+    -->
+</nav>
+<slot />
+
+<style>
+  nav {
+    margin-top: 70px;
+  }
+</style>

src/routes/about/+page.svelte

@@ -1,40 +1,13 @@
-<header>
+<h2>Welcome to the docks!</h2>
-  <nav>
-    <h1>
-      <a>The Docks</a>
-    </h1>
-    <h3 class="max">a Full Thrust ship builder</h3>
-    <a>About</a>
-    <span>&nbsp;</span>
-  </nav>
-</header>
-<main class="responsive">
-  <nav class="m l left">
-    <a>
-      <i>Question_Mark</i>
-      <span>About</span>
-    </a>
-    <!-- TODO
-    <a>
-      <i>Quiz</i>
-      <span>See also</span>
-    </a>
-    <a>
-      <i>Format_List_Bulleted</i>
-      <span>Changelog</span>
-    </a>
-    -->
-  </nav>
-  <h2>Welcome to the docks!</h2>
 
-  <!-- TODO
+<!-- TODO
   <p class="version">
     <span>version {import.meta.env.PACKAGE_VERSION}</span>
     <a>changelog</a>
   </p>
   -->
 
-  <p>
+<p>
   The Docks is a ship builder for the game
   <a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
     >Full Thrust</a
@@ -43,40 +16,24 @@
     Cross Dimensions rules
   </a>
   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 that I
-    I don't mess things too badly on Chrome. For the other browsers... caveat
+  don't mess things too badly on Chrome. For the other browsers... caveat
   emptor.
-  </p>
+</p>
 
-  <p>
+<p>
   Written by
   <!-- TODO change link -->
   <a href="https://techblog.babyl.ca">Yanick Champoux</a>
   . Code available on
   <!-- TODO read the url from package.json -->
   <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
-  </p>
+</p>
-</main>
-
-<script>
-  import "$lib/style/index.js";
-</script>
 
 <style>
-  header nav {
-    align-items: baseline;
-    font-family: "Faktos";
-  }
-  main nav {
-    margin-top: 70px;
-  }
-  h3 {
-    font-size: var(--font-scale-12);
-    font-weight: normal;
-  }
   h2 {
     margin-bottom: 1.5rem;
   }

src/routes/about/about.test.js

@@ -0,0 +1,9 @@
+import { render, fireEvent, screen, getByText } from "@testing-library/svelte";
+import "@testing-library/jest-dom";
+
+import About from "./+page.svelte";
+
+test("we have an about page", () => {
+  const { getByText } = render(About);
+  expect(getByText("Welcome to the docks!")).toBeInTheDocument();
+});