feat(client): custom layouting

src/client/theme-default/Layout.vue

@@ -21,7 +21,17 @@
     <!-- TODO: make this button accessible -->
     <div class="sidebar-mask" @click="toggleSidebar(false)" />
     <main class="home" aria-labelledby="main-title" v-if="enableHome">
-      <Home />
+      <Home>
+        <template #hero>
+          <slot name="home-hero" />
+        </template>
+        <template #features>
+          <slot name="home-features" />
+        </template>
+        <template #footer>
+          <slot name="home-footer" />
+        </template>
+      </Home>
     </main>
     <main v-else>
       <Page>

src/client/theme-default/components/Home.vue

@@ -26,6 +26,7 @@
     >
       <NavBarLink :item="actionLink" />
     </p>
+    <slot name="hero" />
   </header>
 
   <div
@@ -40,6 +41,7 @@
       <h2>{{ feature.title }}</h2>
       <p>{{ feature.details }}</p>
     </div>
+    <slot name="features" />
   </div>
 
   <div
@@ -47,6 +49,7 @@
     class="footer"
   >
     {{ data.footer }}
+    <slot name="footer" />
   </div>
 </template>