metalsmith-jquery

0.2.2 • Public • Published

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!

Readme

Keywords

Package Sidebar

Install

npm i metalsmith-jquery

Weekly Downloads

55

Version

0.2.2

License

MIT

Last publish

Collaborators

  • manheim