Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

metalsmith-clean-html

1.0.3 • Public • Published

metalsmith-clean-html

A Metalsmith plugin to clean HTML markup

CircleCI Codecov NPM Latest Master

This plugin clean the markup of the HTML files. This is useful to make up for the various templating engines that do not always output nice, readable, code. It uses prettier under the hood.

Getting started

  1. Install this plugin (see Installing)
  2. Add it to your Metalsmith build file or configuration
  3. (optional) Use the clean property in your source files to opt-out (default is clean: true)
  4. (optional) Use the encoding property in your source files to specificy their encoding (default is encoding: utf-8)

Example source files

src/index.md

---
title: My Website
---
 
Hello, World!

Example layout files

layouts/my-layout.njk

<!DOCTYPE html>
<html><head><title>{{ title }}</title></head><body><header><h1>{{ title }}</h1></header><main><p>{{ contents | safe }}</p></main><footer><hr />Licensed under CC-BY-SA</footer></body></html>

Example output without clean-html

build/index.html

<!DOCTYPE html>
<html><head><title>My Website</title></head><body><header><h1>My Website</h1></header><main><p>Hello, World!</p></main><footer><hr />Licensed under CC-BY-SA</footer></body></html>

Example output with clean-html

build/index.html

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>My Website</title>
    </head>
    <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <p>Hello, World!</p>
    </main>
    <footer>
      <hr />
      Licensed under CC-BY-SA
    </footer>
  </body>
</html>

Installing

With npm installed, run

$ npm install metalsmith-clean-html

For static websites, some prefer to specificy --save-dev to npm install as the distributed website does not actually require this plugin as a dependency.

Configuring

Since Metalsmith follows a Pipeline pattern, the step at which plugins run is important. This plugin should ideally run after the layout step.

There is only one option:

name default description
filter **/*.html glob pattern that file name should match, otherwise it will be skipped

Example build file with options

// ...
Metalsmith(__dirname)
    .use(markdown())
    .use(layouts())
    .use(cleanHtml({ filter: "*.html" }))
    .build(function (err) {
        if (err) throw err;
    });

Example configuration with options

{
  "source": "src",
  "destination": "build",
  "plugins": [{
    "metalsmith-markdown": {},
    "metalsmith-layouts": {},
    "metalsmith-clean-html": {
      "filter": "*.html"
    }
  }]
}

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. Issues and pull requests are warmly welcome.

Links and references

Dependencies

License

This software is free software licensed under the MIT License. See LICENSE.MD

Install

npm i metalsmith-clean-html

DownloadsWeekly Downloads

4

Version

1.0.3

License

MIT

Unpacked Size

7.83 kB

Total Files

4

Last publish

Collaborators

  • avatar