Initial commit.

components/Footer.js

@@ -0,0 +1,47 @@
+import { html, css, sanitize } from '../templater.js'
+import base from '../styles/base.js'
+
+const body = async (ctx, { path, title }) => html`
+  <footer>
+    <p>Fugiat consectetur veniam sit ullamco. Aute do voluptate velit nulla nisi aliqua fugiat nulla sunt dolor nostrud. Est adipisicing sint eiusmod voluptate sunt dolor.</p>
+    <p>Et duis pariatur veniam aliquip. Nisi occaecat ea commodo amet. Sunt commodo aliquip ullamco ad do magna commodo ut eiusmod. Id nostrud deserunt in excepteur ipsum laborum tempor dolor. Nisi ipsum elit magna sit exercitation ut aliqua irure laboris et.</p>
+    <p>Eu cupidatat in ut nisi reprehenderit dolore. Consectetur reprehenderit id in ad eu duis anim. Ipsum ut velit in velit occaecat enim laboris Lorem nostrud.</p>
+    <dl>
+      <dt>Path:</dt>
+      <dd>${sanitize(path)}</dd>
+      <dt>Title:</dt>
+      <dd>${sanitize(title)}</dd>
+    </dl>
+  </footer>
+`
+
+const styles = css`
+  footer {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  footer > * {
+    flex: 1;
+    flex-basis: 30rem;
+    margin: 2rem;
+    margin-bottom: 0;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  footer dt {
+    font-weight: bolder;
+  }
+
+  footer dd {
+    margin-left: 1rem;
+  }
+`
+
+export async function Footer (ctx, { path, title }) {
+  ctx.css.add(styles)
+  ctx.body = await body(ctx, { path, title })
+
+  return ctx
+}

components/Header.js

@@ -0,0 +1,24 @@
+import { html, css, sanitize } from '../templater.js'
+import { NavBar } from '../components/NavBar.js'
+import base from '../styles/base.js'
+
+const body = async (ctx, { path, title }) => html`
+  <header>
+    <h3 style="flex: 1;">Title: ${sanitize(title)}</h3>
+    ${await ctx.b(NavBar, { path })}
+  </header>
+`
+
+const styles = css`
+  header {
+    display: flex;
+    align-items: center;
+  }
+`
+
+export async function Header (ctx, { path, title }) {
+  ctx.css.add(styles)
+  ctx.body = await body(ctx, { path, title })
+
+  return ctx
+}

components/NavBar.js

@@ -0,0 +1,58 @@
+import { html, css } from '../templater.js'
+
+const body = (path) => html`
+  <nav>
+    <ul>
+      <li class="${path === '/' ? 'active' : ''}"><a href="/">Home</a></li>
+      <li class="${path === '/about' ? 'active' : ''} "><a href="/about">About</a></li>
+    </ul>
+  </nav>
+`
+
+const styles = css`
+  nav ul {
+    list-style: none;
+    display: flex;
+    align-items: center;
+  }
+
+  nav li {
+    padding: 1rem 2rem;
+  }
+
+  nav a {
+    display: block;
+    position: relative;
+    padding: .5rem 1rem;
+    color: var(--color-body);
+    text-decoration: none;
+  }
+
+  nav a:before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 1rem;
+    transition: transform 200ms;
+    transform: scale(0);
+    z-index: -1;
+  }
+
+  nav a:hover:before, nav .active a:before {
+    transform: scale(1);
+  }
+
+  nav .active a {
+    color: var(--color-headings);
+  }
+`
+
+export function NavBar (ctx, { path }) {
+  ctx.css.add(styles)
+  ctx.body = body(path)
+  return ctx
+}