#Speclate
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.htmlThis 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.htmlA 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.htmlComponents 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 installnpm run build
speclate --debugThe 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:
- Generate a completely static version of all pages defined in the spec. These will be used for the inital page load and will be served to crawlers or anyone who doesn't have javascript enabled.
- Generetate a JSON file for each page on the site: /docs/api/speclate, this contains just the data that changes between pages and will be used to check the server for changes.
- Move the layouts pages and components defined in the spec into the appropriate place so that the pages can be rendered in the browser.
The speclate speclate --debug command creates a server so you can test your site locally.
speclate --buildWill generate a site given a spec.json in the current directory.
to get a full list of commands type:
speclate --helpFor testing purposes you can run a local server by running the command:
speclate --debugThat 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.