Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terkelg/antedate
A tiny pre-renderer for client side applications.
https://github.com/terkelg/antedate
chrome optimization prerender puppeteer seo-optimization static-site static-site-generator
Last synced: 27 days ago
JSON representation
A tiny pre-renderer for client side applications.
- Host: GitHub
- URL: https://github.com/terkelg/antedate
- Owner: terkelg
- License: mit
- Created: 2019-06-12T00:47:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-08-22T15:00:11.000Z (about 5 years ago)
- Last Synced: 2024-09-29T09:27:28.596Z (about 1 month ago)
- Topics: chrome, optimization, prerender, puppeteer, seo-optimization, static-site, static-site-generator
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
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](#api) or [CLI](#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
### antedate(root, routes, opts?)
Returns: `Array`
Returns a rendering function that will optionally accept a [`date`](#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](#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](https://github.com/lukeed/pwa) by [Luke Edwards](https://github.com/lukeed). See original implementation in [build.js](https://github.com/lukeed/pwa/blob/master/packages/cli/lib/build.js#L114) in [@pwa/cli](https://github.com/lukeed/pwa/blob/master/packages/cli).
## License
[MIT License](LICENSE) @ [Terkel Gjervig](https://terkel.com)