Greenwood has two types of templates:
In order to make a page template, you need to create a LitElement
based custom element that contains a predefined <entry></entry>
element. The <entry></entry>
element is where your markdown page content will be placed once compiled. You need to do this in a file within your templates/ directory named
Here is an example page-template.js
(the default one included with Greenwood which is the default page-template.js if no other is defined). You can just copy / paste this to start your own page template.
import { html, LitElement } from 'lit-element';
class PageTemplate extends LitElement {
render() {
return html`
<div class='gwd-wrapper'>
<div class='gwd-page-template gwd-content'>
<entry></entry>
</div>
</div>
`;
}
}
customElements.define('page-template', PageTemplate);
Note: the filename must be in the format
<label>-template.js
and thecustomElements
name must bepage-template
.
With a completed page-template.js present in your src/templates/
folder you can define which page uses it via front-matter at the top of any markdown file. See Front Matter Docs for more information. Simply including a file named page-template.js
will overwrite the greenwood default template for all markdown files, without needing to declare the template at the top of markdown file.
In order to make an app template, you need to create a LitElement
component that contains a predefined hook MYROUTES
aswell the component element itself must be defined as eve-app
. You need to do this in a file name and path <workspace>
/templates/app-template.js.
First, we need our app template to use routes, by default greenwood uses lit-redux-router. To do this we define a <routes></routes>
element in our app-template.js where our routes will be placed when compiled.
Here is an example app-template:
import { html, LitElement } from 'lit-element';
// Add the <routes></routes> predefined hook. This is where all your routes will be loaded.
// You may also opt to define a custom 404 route here.
// You must define the app-template with the element name eve-app
class AppComponent extends LitElement {
render() {
return html`
<routes></routes>
<lit-route><h1>404 Not found</h1></lit-route>
`;
}
}
customElements.define('eve-app', AppComponent);
app-template.js
requires <routes></routes>
element to place routesapp-template.js
must have a component name eve-app
app-template.js
must maintain filename and path <your-workspace>/templates/app-template.js
A working example can be found in the greenwood source which is the default app-template.js if no other is defined. A production example can be found in greenwood's website.
You can create all your pages in a pages/ directory in your projects workspace. You can also create nested pages and the page paths will map accordingly.
For example, given this folder structure:
.
└── src
├── pages
├── blog
│ ├── first-post.md
│ └── second-post.md
└── index.md
You will have the following page URLs: