antedate

前の日付

静的 Web サイトを簡単に事前レンダリングします。

Antedate は、Chrome pupeteer を使用してクライアント側 Web サイトを事前レンダリングするシンプルな API および CLI です。ローカル サーバーを自動的に起動し、提供された各ルートをレンダリングします。

インストール

 $ npm install antedate

使用法

API または 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

このモジュールには 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(ルート、ルート、オプション?)

戻り値: Array

オプションで唯一の引数としてdate値を受け入れるレンダリング関数を返します。

根

タイプ: String
必須: true

事前レンダリングする静的サイトを含むディレクトリへのパス。 Antedate はローカル サーバーを自動的に起動します。

ルート

タイプ: Array
必須: true

レンダリングされるルートの配列。ルート/常に最後にレンダリングされます。例: ['/about', '/contact', '/'] 。

選択します

タイプ: Object
必須: false

頭のない

タイプ: Boolean
デフォルト: false

puppeteer をヘッドレス モードで実行するかどうか。

セレクタ

タイプ: String
デフォルト:「

サイトをレンダリングする前に、 selector表示されるまで待ちます。たとえば、 body.prerender 。

待って

タイプ: Number
デフォルト:「

サイトをレンダリングするまでのミリ秒。

OBS:これは、セレクター オプションの両方が指定されている場合に発生します。

スクリプト

タイプ: Function
デフォルト:「

レンダリングが行われる前にページ上で実行されるコールバック関数。

デコレータ

タイプ: Function
デフォルト:「

レンダリングされた HTML 文字列を操作できるデコレーター関数。

 await antedate ( site , routes , { decorator : html => html . toUpperCase ( ) } ) ; 

クレジット

このアイデアとロジックは、Luke Edwards による PWA のコードに基づいています。 @pwa/cli の build.js の元の実装を参照してください。

ライセンス

MIT ライセンス @ Terkel Gjervig