antedate

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.

License

MIT License @ Terkel Gjervig