Create custom site document; use default layout

parameter1 · Oct 12, 2021 · fcea1a1 · fcea1a1
1 parent 6364d05
commit fcea1a1
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/services/example-website/index.js b/services/example-website/index.js
@@ -1,5 +1,6 @@
 const { startServer } = require('@parameter1/base-cms-marko-web');
 
+const document = require('./server/components/document');
 const coreConfig = require('./config/core');
 const siteConfig = require('./config/site');
 const routes = require('./server/routes');
@@ -8,6 +9,7 @@ const { log } = console;
 
 module.exports = startServer({
   rootDir: __dirname,
+  document,
   coreConfig,
   siteConfig,
   routes,

diff --git a/services/example-website/server/components/document.marko b/services/example-website/server/components/document.marko
@@ -0,0 +1,15 @@
+<marko-web-document ...input>
+  <@head>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <${input.head} />
+  </@head>
+  <@above-container>
+    <${input.aboveContainer} />
+  </@above-container>
+  <@below-container>
+    <${input.belowContainer} />
+  </@below-container>
+</marko-web-document>
diff --git a/services/example-website/server/components/marko.json b/services/example-website/server/components/marko.json
@@ -1 +1,14 @@
-{}
+{
+  "<site-document>": {
+    "template": "./document.marko",
+    "<head>": {},
+    "<above-container>": {},
+    "<container>": {
+      "<above-page>": {},
+      "<page>": {},
+      "<below-page>": {}
+    },
+    "<below-container>": {},
+    "<foot>": {}
+  }
+}
diff --git a/services/example-website/server/templates/index.marko b/services/example-website/server/templates/index.marko
@@ -1 +1,9 @@
-<h1>Hello World!</h1>
+<marko-web-default-page-layout
+  type="test"
+  title="Test Page"
+  description="This is a test page."
+>
+  <@page>
+    <h1>Hello World!</h1>
+  </@page>
+</marko-web-default-page-layout>