Convert context to a factory.

components/Footer.js

@@ -40,8 +40,7 @@ const styles = css`
 `
 
 export async function Footer (ctx, { path, title }) {
-  ctx.css.add(styles)
-  ctx.body = await body(ctx, { path, title })
-
+  ctx.addCSS(styles)
+  ctx.setBody(await body(ctx, { path, title }))
   return ctx
 }

components/Header.js

@@ -5,7 +5,7 @@ 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 })}
+    ${await ctx.renderBody(NavBar, { path })}
   </header>
 `
 
@@ -17,8 +17,8 @@ const styles = css`
 `
 
 export async function Header (ctx, { path, title }) {
-  ctx.css.add(styles)
-  ctx.body = await body(ctx, { path, title })
+  ctx.addCSS(styles)
+  ctx.setBody(await body(ctx, { path, title }))
 
   return ctx
 }

components/NavBar.js

@@ -52,7 +52,7 @@ const styles = css`
 `
 
 export function NavBar (ctx, { path }) {
-  ctx.css.add(styles)
-  ctx.body = body(path)
+  ctx.addCSS(styles)
+  ctx.setBody(body(path))
   return ctx
 }