2020-09-23 20:37:34 -04:00

37 lines
1.3 KiB
JavaScript

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.renderBody(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.renderBody(Footer, { path, title })}
`
const styles = css`
main {
background-color: #eee;
}
`
export async function HomePage (ctx, { path, title }) {
ctx.addCSS(base)
ctx.addCSS(styles)
ctx.addHead(head({ title }))
ctx.setBody(await body(ctx, { path, title }))
return ctx
}