From 9019f3d3e63c426025aa14971b9cd7f5958b6bf5 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Fri, 14 Apr 2023 12:56:39 -0400
Subject: [PATCH] add layouts

---
 src/lib/components/MainLayout.svelte | 28 +++++++++
 src/routes/+layout.svelte            | 12 ++++
 src/routes/+page.svelte              | 13 +---
 src/routes/about/+layout.svelte      | 23 +++++++
 src/routes/about/+page.svelte        | 93 ++++++++--------------------
 src/routes/about/about.test.js       |  9 +++
 6 files changed, 98 insertions(+), 80 deletions(-)
 create mode 100644 src/lib/components/MainLayout.svelte
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/about/+layout.svelte
 create mode 100644 src/routes/about/about.test.js

diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
new file mode 100644
index 0000000..fc22854
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..7a041ca
--- /dev/null
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8c3d41a..1333ed7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1 @@
-<App />
-
-<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>
+TODO
diff --git a/src/routes/about/+layout.svelte b/src/routes/about/+layout.svelte
new file mode 100644
index 0000000..6e2f9f4
--- /dev/null
+++ b/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>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 643ceee..90b9b49 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,82 +1,39 @@
-<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">
-  <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>
+<h2>Welcome to the docks!</h2>
 
-  <!-- TODO
+<!-- TODO
   <p class="version">
     <span>version {import.meta.env.PACKAGE_VERSION}</span>
     <a>changelog</a>
   </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
-    >, with construction rules following the
-    <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
-      Cross Dimensions rules
-    </a>
-    as closely as possible.
-  </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
+  >, with construction rules 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
-    <!-- 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>
-</main>
-
-<script>
-  import "$lib/style/index.js";
-</script>
+<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>
 
 <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;
   }
diff --git a/src/routes/about/about.test.js b/src/routes/about/about.test.js
new file mode 100644
index 0000000..1980b77
--- /dev/null
+++ b/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();
+});