initial web pages

web/src/components/footer.ts

@@ -0,0 +1,14 @@
+const REPO = 'https://git.sowinski.dev/SowinskiBraeden/visual-strategy';
+
+export function footer(): string {
+  return `
+<footer>
+  <svg class="icon" aria-hidden="true"><use href="/icons.svg#chip" /></svg>
+  <span>Rust/WebAssembly demo</span>
+  <span class="dot">&middot;</span>
+  <a href="${REPO}" target="_blank" rel="noreferrer">
+    <svg class="icon" aria-hidden="true"><use href="/icons.svg#gitea" /></svg>
+    Source
+  </a>
+</footer>`;
+}

web/src/components/header.ts

@@ -0,0 +1,26 @@
+const links = [
+  { path: '/learn', label: 'Learn' },
+  { path: '/playground', label: 'Playground' },
+];
+
+export function header(path: string): string {
+  const nav = links
+    .map(
+      (l) =>
+        `<a href="#${l.path}"${path === l.path ? ' aria-current="page"' : ''}>${l.label}</a>`,
+    )
+    .join('\n      ');
+
+  return `
+<header>
+  <a class="brand" href="#/">
+    <span class="mark">
+      <svg class="icon" aria-hidden="true"><use href="/icons.svg#flag" /></svg>
+    </span>
+    Stint.
+  </a>
+  <nav>
+      ${nav}
+  </nav>
+</header>`;
+}