Website/node_modules/metalsmith-rootpath
2015-12-03 19:57:30 -05:00
..
test Importing assets 2015-12-03 19:57:30 -05:00
.npmignore Importing assets 2015-12-03 19:57:30 -05:00
.travis.yml Importing assets 2015-12-03 19:57:30 -05:00
index.js Importing assets 2015-12-03 19:57:30 -05:00
LICENSE Importing assets 2015-12-03 19:57:30 -05:00
package.json Importing assets 2015-12-03 19:57:30 -05:00
README.md Importing assets 2015-12-03 19:57:30 -05:00

metalsmith-rootpath Build Status

Easily find the relative path to the root directory in your Metalsmith templates.

Makes relative-to-root links a breeze!

Install

$ npm install --save metalsmith-rootpath

Usage

var rootPath = require('metalsmith-rootpath');

Metalsmith(__dirname)
  .use(rootPath())
  .build(function(err) {
    if (err) throw err;
  });
  

Now you have a rootPath value assigned to the metadata of the files in your Metalsmith build.

Examples

Let's assume you have a directory structure like this:

        index.html
        dir1/
           index.html
        dir2/
           foo/
              index.html
        dir3/
           foo/
              bar/
                 baz/
                   index.html

The rootPath values in each index.html file would be:

File rootPath
index.html ""
dir1/index.html "../"
dir2/foo/index.html "../../"
dir3/foo/bar/baz/index.html "../../../../"

Use the rootPath variable anywhere you want to grab static files relative to your directory. rootPath will find the root folder no matter how many levels deep your templates are.

For example, if the following line of code where placed in dir3/foo/bar/baz/index.html

<link src="{{rootPath}}css/main.css" type="text/css" />

It would result in the following output:

<link src="../../../../css/main.css" type="text/css" />

Relative Navigation

This rootPath variable is useful when building a relative navigation structure, for example, in your Handlebars template partials/navigation.hbs

<ul>
    <li><a href="{{rootPath}}about/">About Us</a></li>
    <li><a href="{{rootPath}}awesome-page/">Awesome Page</a></li>
    <li><a href="{{rootPath}}contact/">Contact Us</a></li>
</ul>

Important Notes

  1. I am using the Handlebars syntax in the above examples, but the rootPath value is assigned to every file's metadata, so it can be accessed just as easily with your template language of choice.
  2. This plugin is only useful if your build/ directory is identical to your src/ structure. Meaning, none of the Metalsmith plugins you have on your build chain change the directory structure you have presented in your src folder.

License

MIT @ Michael Wuergler