Initial commit.

2020-09-22 20:42:46 -04:00
commit 05c575bb26
11 changed files with 457 additions and 0 deletions
--- a/pages/About.js
+++ b/pages/About.js
@@ -0,0 +1,42 @@
+import { html, css, sanitize } from '../templater.js'
+import { Header } from '../components/Header.js'
+import { Footer } from '../components/Footer.js'
+import base from '../styles/base.js'
+
+const head = ({ title }) => html`
+  <title>About Page - ${sanitize(title)}</title>
+`
+
+const body = async (ctx, { path, title }) => html`
+  ${await ctx.b(Header, { path, title })}
+  <main id="app">
+    <section>
+      <h1>About Page - ${sanitize(title)}</h1>
+      <p>
+        Veniam quis commodo ad Lorem do proident et elit labore amet incididunt et culpa. Non ex in deserunt veniam minim pariatur incididunt consectetur. Aliqua occaecat irure eu est.
+      </p>
+      <ul>
+        <li>Anim reprehenderit enim amet eu id esse duis exercitation nulla fugiat sunt esse exercitation.</li>
+        <li>In non ex esse et fugiat excepteur aliquip ea.</li>
+        <li>Reprehenderit aliqua aute cupidatat enim ipsum eu.</li>
+        <li>Consectetur exercitation exercitation excepteur quis in qui qui magna cillum sint.</li>
+      </ul>
+    </section>
+  </main>
+  ${await ctx.b(Footer, { path, title })}
+`
+
+const styles = css`
+  main {
+    background-color: #fff;
+  }
+`
+
+export async function AboutPage (ctx, { path, title }) {
+  ctx.css.add(base)
+  ctx.css.add(styles)
+  ctx.head.add(head({ title }))
+  ctx.body = await body(ctx, { path, title })
+
+  return ctx
+}
--- a/pages/Home.js
+++ b/pages/Home.js
@@ -0,0 +1,36 @@
+import { html, css, sanitize } from '../templater.js'
+import { Header } from '../components/Header.js'
+import { Footer } from '../components/Footer.js'
+import base from '../styles/base.js'
+
+const head = ({ title }) => html`
+  <title>Home Page - ${sanitize(title)}</title>
+`
+
+const body = async (ctx, { path, title }) => html`
+  ${await ctx.b(Header, { path, title })}
+  <main id="app">
+    <section>
+      <h1>Home Page - ${sanitize(title)}</h1>
+      <p>
+        Lorem ex excepteur occaecat et labore veniam veniam duis pariatur laboris. Aute incididunt anim laborum cupidatat mollit amet pariatur. Consectetur nostrud eu amet eu cillum duis ipsum qui ad magna nisi. Ad aliquip est fugiat dolor ad deserunt. Dolore excepteur enim ullamco duis irure elit occaecat magna mollit culpa elit amet elit minim. Fugiat nostrud sunt consequat labore dolore sunt minim nisi deserunt minim sint consequat. Cupidatat adipisicing sit ullamco proident proident id esse mollit.
+      </p>
+    </section>
+  </main>
+  ${await ctx.b(Footer, { path, title })}
+`
+
+const styles = css`
+  main {
+    background-color: #eee;
+  }
+`
+
+export async function HomePage (ctx, { path, title }) {
+  ctx.css.add(base)
+  ctx.css.add(styles)
+  ctx.head.add(head({ title }))
+  ctx.body = await body(ctx, { path, title })
+
+  return ctx
+}
--- a/pages/Page.js
+++ b/pages/Page.js
@@ -0,0 +1,29 @@
+import { html, render } from '../templater.js'
+
+async function Root (ctx, component, ...params) {
+  const result = await ctx.render(component, ...params)
+  const scripts = Array.from(result.js).join(';\n')
+  const css = Array.from(result.css).join('\n')
+
+  return html`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        ${Array.from(result.head).join('\n')}
+        <style>
+          ${css}
+        </style>
+      </head>
+      <body>
+        ${result.body}
+        ${scripts ? `<script>${scripts}</script>` : ''}
+      </body>
+    </html>
+  `
+}
+
+export function page(component, ...params) {
+  return render(Root, component, ...params)
+}