A Metalsmith plugin to manipulate HTML via jQuery syntax
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.gitignore
.travis.yml
LICENSE
README.md
package.json

README.md

metalsmith-jquery

Build Status Code Climate Dependency Status

A Metalsmith plugin to manipulate HTML via jQuery syntax.

Features

Leverages Cheerio to support a logical subset of jQuery syntax, allowing you to manipulate the HTML generated from metalsmith-markdown -- or any other plugin!

Installation

$ npm install metalsmith-jquery

Usage

When your markdown is converted to HTML, it doesn't contain any CSS information. Use this to add styles to your markdown-generated HTML:

var jquery = require('metalsmith-jquery');

Metalsmith(__dirname)
    .use(markdown())
    .use(jquery(function($) {
        $('h2').addClass('welcome');
    }))
    .use(templates('handlebars'))
    .build(function(err) {
        if (err) throw err;
    });

For example, if you're using a Bootstrap template, you may want your Markdown-rendered tables to contain the Bootstrap table CSS classes:

var jquery = require('metalsmith-jquery');

Metalsmith(__dirname)
    .use(markdown())
    .use(jquery(function($) {
        $('table').addClass('table table-bordered');
    }))
    .use(templates('handlebars'))
    .build(function(err) {
        if (err) throw err;
    });

If you don't want to process every file, you can include a pattern of files to process:

var jquery = require('metalsmith-jquery');

Metalsmith(__dirname)
    .use(markdown())
    .use(jquery('**/*.html', function($) {
        $('table').addClass('table table-bordered');
    }))
    .use(templates('handlebars'))
    .build(function(err) {
        if (err) throw err;
    });

If you want to add specific options to how Cherio should manipulate the generated HTML

var jquery = require('metalsmith-jquery');

Metalsmith(__dirname)
    .use(markdown())
    .use(jquery('**/*.html', function($, {decodeEntities: false}) {
        $('#content').append("<p>моя бабушка старая</p>"); // cyrillic characters wont be HTML-encoded
    }))
    .use(templates('handlebars'))
    .build(function(err) {
        if (err) throw err;
    });

Inside your callback, you can access the metalsmith-metadata, and metalsmith filename

    .use(jquery(function($, filename, files, metalsmith) {
        var title = $('h1').first().text();
        if (title)
            files[filename].title = title;
    }))

You can also store the javascript in a separate file, which is especially useful if you're managing your Metalsmith configuration in a JSON file:

{
    "plugins": {
        "metalsmith-markdown": {},
        "metalsmith-jquery": "fixit.js"
    }
}

... where "fixit.js" is a Javascript file in the node.js module format:

module.exports = function($) {

    $('h2').addClass('welcome');
    $('table').addClass('table table-bordered');

}

... and the path is relative to the current working directory.

See the tests for more examples.

Where do we use this? On our developer portal!