Test page.vars.js layout

examples/basic/src/js-page/page.js

@@ -1,11 +1,13 @@
 import { html } from 'uhtml-isomorphic'
 
 export default async function JSPage ({
-  siteName,
-  title,
+  vars: {
+    siteName,
+    title,
+  }
 }) {
   return html`
-  <p>The js page is the only page type that can render the body with the set varibles.</p>
+  <p>The js page is the only page type that can render the body with the set variables.</p>
 
   <p>
     All you have to do is export a default function (async or sync) that returns a string, or any

examples/basic/src/js-page/page.vars.js

@@ -0,0 +1,3 @@
+export default {
+  layout: 'child'
+}

examples/basic/src/layouts/child.layout.js

@@ -0,0 +1,22 @@
+import { html } from 'uhtml-isomorphic'
+
+import defaultRootLayout from './root.layout.js'
+
+export default function articleLayout (args) {
+  const { children, ...rest } = args
+  const wrappedChildren = html`
+    <article class="bc-article h-entry" itemscope itemtype="http://schema.org/NewsArticle">
+
+      <h1>${rest.vars.title}</h1>
+
+      <section class="e-content" itemprop="articleBody">
+        ${typeof children === 'string'
+          ? html([children])
+          : children /* Support both uhtml and string children. Optional. */
+        }
+      </section>
+    </article>
+  `
+
+  return defaultRootLayout({ children: wrappedChildren, ...rest })
+}