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
`

`js
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

$3


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.

`js
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.

License

MIT License @ Terkel Gjervig