HTML Pages Preview

Merged one HTML page from defined list of the pages/templates for preview

Why

Generated preview for all pages on the one for test or demonstration purposes

How to install

npm

npm i html-pages-preview --save-dev

yarn

yarn html-pages-preview -D

How to use

const htmlPreview = require('./lib/merged-html-preview');

const src = [
  './dist/article.html',
  './dist/home.html',
  './dist/product.html'
];

const dest = './dist/preview.html';

htmlPreview(src, dest)

Gulp integration

import gulp from 'gulp';
const { parallel, watch } = gulp;

import htmlPreview from 'html-pages-preview';

const htmlPagesPreview = (c) => {
  const src = [
    './dist/home.html',
    './dist/article.html',
    './dist/product.html'
  ];

  const dest = './dist/preview.html';

  htmlPreview(src, dest);
  return c();
};

const watcher = () => {
  watch('./dist/*.html', htmlPagesPreview);
};

export default
  parallel(
    htmlPagesPreview,
    watcher
  )

Config parameters

Default values

cfg = {
  styles: '',
  header: 'Pages Preview',
  toc: true,
  newtab: true,
  toggle: true,
  animation: true,
  pane: true,
  title: true,
  titleDivider: '-',
  filename: true,
  baseUrl: '',
  backToIndex: true,
  backToIndexUrl: ''
}

htmlPreview(src, dest, cfg);

| Value | Default | Description | |----------------|---------|-------------| | styles | '' | custom CSS for header, panel etc. Initial styles based on bootstrap 5 | | header | 'Pages Preview' | page header | | toc | true | show/hide Table of the content | | newtab | true | show/hide new tab link | | toggle | true | show/hide toggle link | | pane | true | show/hide panel with links and iframe title | | title | true | show/hide panel title | | titleDivider | - | Divide filename and page tytle by symbol | filename | true | show/hide filename at the panel title | | baseUrl | ./ | Base URL for pages (Default is destination folder) | | backToIndex | true | show/hide back link | | backToIndexUrl | '' | When empty default link is './index.html' |

Related Projects

I created this and some additional services for html-base to improve quality of frontend output. Here is the list:

• scss-reset
• scss-mixins-npm
• mobile-friendly-test-npm
• html-speed
• css-test-npm

Contributing

For issues, bugs or imporvements please open an issue

MIT License