Metalsmith-clean-html NPM

metalsmith-clean-html

A Metalsmith plugin to clean HTML markup

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

Install this plugin (see Installing)
Add it to your Metalsmith build file or configuration
(optional) Use the clean property in your source files to opt-out (default is clean: true)
(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

Source code: https://github.com/pierresenechal/metalsmith-clean-html
Issue tracker: https://github.com/pierresenechal/metalsmith-clean-html/issues

Dependencies

Metalsmith: https://github.com/segmentio/metalsmith
prettier: https://github.com/prettier/prettier

License

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

html clean metalsmith metalsmith-plugin tidy

debug minimatch pkginfo prettier

5 years ago

6 years ago

6 years ago

6 years ago