htmlnano 1.0.0 → 2.0.0

package/docs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "htmlnano-docs",
+  "version": "1.0.0",
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.4",
+    "@docusaurus/preset-classic": "2.0.0-beta.4",
+    "@mdx-js/react": "^1.6.21",
+    "@svgr/webpack": "^5.5.0",
+    "clsx": "^1.1.1",
+    "file-loader": "^6.2.0",
+    "prism-react-renderer": "^1.2.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "url-loader": "^4.1.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/docs/sidebars.js

@@ -0,0 +1,26 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+module.exports = {
+    // By default, Docusaurus generates a sidebar from the docs folder structure
+    tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+    // But you can create a sidebar manually
+    /*
+    tutorialSidebar: [
+      {
+        type: 'category',
+        label: 'Tutorial',
+        items: ['hello'],
+      },
+    ],
+    */
+};

package/docs/versioned_docs/version-1.1.1/010-introduction.md

@@ -0,0 +1,22 @@
+---
+sidebar_position: 1
+slug: /
+---
+
+# Introduction
+
+Modular HTML minifier, built on top of the [PostHTML](https://github.com/posthtml/posthtml). 
+Inspired by [cssnano](http://cssnano.co/).
+
+
+## [Benchmark](https://github.com/maltsev/html-minifiers-benchmark/blob/master/README.md)
+[html-minifier-terser@5.1.1]: https://www.npmjs.com/package/html-minifier-terser
+[htmlnano@1.0.0]: https://www.npmjs.com/package/htmlnano
+
+| Website | Source (KB) | [html-minifier-terser@5.1.1] | [htmlnano@1.0.0] |
+|---------|------------:|----------------:|-----------:|
+| [stackoverflow.blog](https://stackoverflow.blog/) | 95 | 87 | 82 |
+| [github.com](https://github.com/) | 210 | 183 | 171 |
+| [en.wikipedia.org](https://en.wikipedia.org/wiki/Main_Page) | 78 | 72 | 72 |
+| [npmjs.com](https://www.npmjs.com/features) | 41 | 38 | 36 |
+| **Avg. minify rate** | 0% | **9%** | **13%** |

package/docs/versioned_docs/version-1.1.1/020-usage.md

@@ -0,0 +1,77 @@
+# Usage
+
+## Gulp
+```bash
+npm install --save-dev gulp-htmlnano
+```
+
+```js
+const gulp = require('gulp');
+const htmlnano = require('gulp-htmlnano');
+const options = {
+    removeComments: false
+};
+
+gulp.task('default', function() {
+    return gulp
+        .src('./index.html')
+        .pipe(htmlnano(options))
+        .pipe(gulp.dest('./build'));
+});
+```
+
+
+## Javascript
+```js
+const htmlnano = require('htmlnano');
+const options = {
+    removeEmptyAttributes: false, // Disable the module "removeEmptyAttributes"
+    collapseWhitespace: 'conservative' // Pass options to the module "collapseWhitespace"
+};
+// posthtml, posthtml-render, and posthtml-parse options
+const postHtmlOptions = {
+    sync: true, // https://github.com/posthtml/posthtml#usage
+    lowerCaseTags: true, // https://github.com/posthtml/posthtml-parser#options
+    quoteAllAttributes: false, // https://github.com/posthtml/posthtml-render#options
+};
+
+htmlnano
+    // "preset" arg might be skipped (see "Presets" section below for more info)
+    // "postHtmlOptions" arg might be skipped
+    .process(html, options, preset, postHtmlOptions)
+    .then(function (result) {
+        // result.html is minified
+    })
+    .catch(function (err) {
+        console.error(err);
+    });
+```
+
+
+## PostHTML
+Just add `htmlnano` as a final plugin:
+```js
+const posthtml = require('posthtml');
+const options = {
+    removeComments: false, // Disable the module "removeComments"
+    collapseWhitespace: 'conservative' // Pass options to the module "collapseWhitespace"
+};
+const posthtmlPlugins = [
+    /* other PostHTML plugins */
+
+    require('htmlnano')(options)
+];
+
+const posthtmlOptions = {
+    // See PostHTML docs
+};
+
+posthtml(posthtmlPlugins)
+    .process(html, posthtmlOptions)
+    .then(function (result) {
+        // result.html is minified
+    })
+    .catch(function (err) {
+        console.error(err);
+    });
+```

package/docs/versioned_docs/version-1.1.1/030-config.md

@@ -0,0 +1,21 @@
+# Config
+
+There are two main ways to configure htmlnano:
+
+## Passing options to `htmlnano` directly
+This is the way described above in the examples.
+
+## Using configuration file
+Alternatively, you might create a configuration file (e.g., `htmlanorc.json` or `htmlnanorc.js`) or save options to `package.json` with `htmlnano` key.
+`htmlnano` uses `cosmiconfig`, so refer to [its documentation](https://github.com/davidtheclark/cosmiconfig/blob/main/README.md) for a more detailed description.
+
+If you want to specify a preset that way, use `preset` key:
+
+```json
+{
+    "preset": "max",
+}
+```
+
+Configuration files have lower precedence than passing options to `htmlnano` directly.
+So if you use both ways, then the configuration file would be ignored.

package/docs/versioned_docs/version-1.1.1/040-presets.md

@@ -0,0 +1,75 @@
+# Presets
+
+A preset is just an object with modules config.
+
+Currently the following presets are available:
+- [safe](https://github.com/posthtml/htmlnano/blob/master/lib/presets/safe.es6) — a default preset for minifying a regular HTML in a safe way (without breaking anything)
+- [ampSafe](https://github.com/posthtml/htmlnano/blob/master/lib/presets/ampSafe.es6) - same as `safe` preset but for [AMP pages](https://www.ampproject.org/)
+- [max](https://github.com/posthtml/htmlnano/blob/master/lib/presets/max.es6) - maximal minification (might break some pages)
+
+
+You can use them the following way:
+```js
+const htmlnano = require('htmlnano');
+const ampSafePreset = require('htmlnano').presets.ampSafe;
+const options = {
+    // Your options
+};
+
+htmlnano
+    .process(html, options, ampSafePreset)
+    .then(function (result) {
+        // result.html is minified
+    })
+    .catch(function (err) {
+        console.error(err);
+    });
+```
+
+If you skip `preset` argument [`safe`](https://github.com/posthtml/htmlnano/blob/master/lib/presets/safe.es6) preset would be used by default.
+
+
+If you'd like to define your very own config without any presets pass an empty object as a preset:
+```js
+const htmlnano = require('htmlnano');
+const options = {
+    // Your options
+};
+
+htmlnano
+    .process(html, options, {})
+    .then(function (result) {
+        // result.html is minified
+    })
+    .catch(function (err) {
+        console.error(err);
+    });
+```
+
+
+You might create also your own presets:
+```js
+const htmlnano = require('htmlnano');
+// Preset for minifying email templates
+const emailPreset = {
+    mergeStyles: true,
+    minifyCss: {
+        safe: true
+    },
+};
+
+const options = {
+    // Some specific options
+};
+
+htmlnano
+    .process(html, options, emailPreset)
+    .then(function (result) {
+        // result.html is minified
+    })
+    .catch(function (err) {
+        console.error(err);
+    });
+```
+
+Feel free [to submit a PR](https://github.com/posthtml/htmlnano/issues/new) with your preset if it might be useful for other developers as well.