antedate

Предыстория

С легкостью выполняйте предварительную визуализацию статических веб-сайтов.

Antedate — это простой API и интерфейс командной строки, который использует кукловод Chrome для предварительной визуализации клиентских веб-сайтов. Он автоматически запускает локальный сервер и отображает каждый предоставленный маршрут.

Установить

 $ 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.

  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

Предыдущая дата (корень, маршруты, параметры?)

Возвращает: 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 ( ) } ) ; 

Кредит

Идея и логика основаны на коде PWA Люка Эдвардса. См. оригинальную реализацию в build.js в @pwa/cli.

Лицензия

Лицензия MIT @ Теркель Гьервиг