1. metalsmith-rootpath
Easily find the relative path to the root directory in your Metalsmith templates
metalsmith-rootpath
Package: metalsmith-rootpath
Created by: radiovisual
Last modified: Sun, 19 Jun 2022 18:18:24 GMT
Version: 1.0.4
License: MIT
Downloads: 1,313
Repository: https://github.com/radiovisual/metalsmith-rootpath

Install

npm install metalsmith-rootpath
yarn add metalsmith-rootpath

metalsmith-rootpath

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

Makes relative-to-root links a breeze!

Build Status

Note: metalsmith-rootpath must run after any plugins that move files around, or create new files in your
metalsmith build chain (like metalsmith-permalinks, for example).
This is because metalsmith-rootpath needs to know what your final output directory will look like before it can assign
a correct rootPath value.

Install

$ npm install --save metalsmith-rootpath

Usage

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

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

:sunglasses: Now all the files and templates in your Metalsmith build have a rootPath variable assigned to them!
I am using the handlebars template in the examples below, but you can use your template language of choice, or access
the rootPath value from the file's metadata in anyway you like.

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 markup were 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>

License

MIT @ Michael Wuergler

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code