antedate
v1.0.0
Published
pre-render static websites with ease
Downloads
22
Maintainers
Readme
Antedate
Pre-render static websites with ease.
Antedate is a simple API and CLI that uses Chrome pupeteer to pre-render client-side websites. It automatically spins up a local server and renders each route provided.
Install
$ npm install antedate
Usage
You can either use the API or CLI.
$ antedate render -r /home -r /about
import antedate from 'antedate'
const routes = ['/', '/about', '/contact'];
const site = './site';
await antedate(site, routes);
// => [
// { html: '....', route: '/', path: '/index.html' },
// { html: '....', route: '/about', path: '/about.html' }
// ...
// ]
await antedate(site, routes, { headless: false, dirs: true });
// => [
// { html: '....', route: '/', path: '/index.html' },
// { html: '....', route: '/about', path: '/about/index.html' }
// ...
// ]
CLI
The module also comes with an CLI
Description
Pre-render the routes given
Usage
$ antedate render [options]
Options
-s, --selector Wait for the following selector before rendering
-w, --wait MS to wait before saving page. Happens after selector wait
-r, --route Prerender the route specified
-d, --dir Directory containing the static site (default .)
-o, --output Output directory (default ./static)
-h, --help Displays this message
Examples
$ antedate render -r /home -r /about
API
antedate(root, routes, opts?)
Returns: Array
Returns a rendering function that will optionally accept a date
value as its only argument.
root
Type: String
Required: true
Path to the directory containing the static site to pre-render. Antedate automatically starts a local server.
routes
Type: Array
Required: true
Array of routes to be rendered. The root /
is always rendered last.
E.g. ['/about', '/contact', '/']
.
opts
Type: Object
Required: false
headless
Type: Boolean
Default: false
Wether to run puppeteer in headless mode.
selector
Type: String
Default: ``
Wait for selector
to appear before rendering the site. E.g. body.prerender
.
wait
Type: Number
Default: ``
Milliseconds to before rendering the site.
OBS: This happens after the selector option if both are provided.
script
Type: Function
Default: ``
A callback function to execute on the page before the rendering happens.
decorator
Type: Function
Default: ``
A decorator function that allows you to manupulate the rendered HTML string.
await antedate(site, routes, { decorator: html => html.toUpperCase()});
Credit
The idea and logic is based on code from PWA by Luke Edwards. See original implementation in build.js in @pwa/cli.