Define websites using a spec.js file. Render each page at build time, in the browser and offline.
Ensure the best rendering experience is always available to the widest possible audience.
Layout, page and component files only contain valid HTML.
All paths are relative to the spec.js file.
All sites need an outer page layout:
/pages/layout.html
This should include anything you want to share accross all pages. css, js, nav, header, footer. Anything that doesn't change. You can still use the spec to update the layout between pages. eg adding an active class.
The layout needs to contain a html element with an id of container:
<div id="container">
</div>
This is used to append the page content to.
If you want to use a contact
page in a spec you need to create the page at:
/pages/contact/contact.html
A page can be used by multiple routes, using the page specs to change the appearance.
If you want to call a component contact
you need to create a html file at:
/component/contact/contact.html
Components allow small chunks of html to be reused between pages and when looping through a list.
A very simple spec looks like this:
module.exports = {
'/': {
page: 'home'
}
};
Take the home page (/pages/home/home.html) and append it to #container domNode in the layout.html.
module.exports = {
'/': {
page: 'home',
spec: {
h1: 'welcome',
title: 'hello'
}
}
};
Take /pages/home/home.html and add it to the layout #container. Replace any h1 innerHTML text and set the title to hellow.
module.exports = {
'/': {
page: function(callback) {
callback('<div> Some info about us </div>');
}
}
};
Provide a function that when called generates the markup required for the page.
module.exports = {
'/': {
page: 'home',
spec: {
'#bacon': {
component: 'cat'
}
}
}
};
Take the /pages/home/home.html and append it to the #container div in the layout.html.
module.exports = {
'/': {
page: 'pets',
spec: {
'#pets': {
component: 'cat'
data: [
{
li: 'Bob'
},
{
li: 'Jane'
}
]
}
}
}
};
Take the /pages/pets/pets.html and append it to the #container div in the layout.html.
Get the cat component and append it to the pets li, changing the innerHTML to Bob and Jane.
git clone git@github.com:simonmcmanus/speclate-example.git
cd speclate-example
npm install
npm run build
speclate --debug
The NPM run build command does a couple of things, firstly it generates our client side router and service worker file, then it runs speclate --all which does the following:
The speclate speclate --debug command creates a server so you can test your site locally.
speclate --build
Will generate a site given a spec.json in the current directory.
to get a full list of commands type:
speclate --help
For testing purposes you can run a local server by running the command:
speclate --debug
That will start a server running at https://localhost:5002
You will need to run the speclate --all command separately to build the files.
Please see the contributing guide
Speclate was originally built to support the LNUG website.