metalsmith-jstransformer
Advanced tools
Metalsmith plugin to process files with any JSTransformer.
npm install --save metalsmith-jstransformer
If you are using the command-line version of Metalsmith, you can install via npm, and then add the metalsmith-jstransformer key to your metalsmith.json file:
{
"plugins": {
"metalsmith-jstransformer": {
"layoutPattern": "layouts/**",
"defaultLayout": null
}
}
}
If you are using the JS Api for Metalsmith, then you can require the module and add it to your .use() directives:
var jstransformer = require('metalsmith-jstransformer');
metalsmith.use(jstransformer({
'pattern': '**',
'layoutPattern': 'layouts/**',
'defaultLayout': null
}));
Create files that you would like to act on with JSTransformers with file extensions representing the transformer to use, in the format example.html.<transformer>. For example, if you would like to process with Pug, you would name it src/example.html.pug.
Use multiple transformers by appending additional file extension transformer names at the end. For example, to HTML-Minifier our Pug example above, you would use the filename src/example.html.html-minifier.pug.
The following example uses Pug, so we must additionally install jstransformer-pug:
npm install jstransformer-pug --save
src/example.html.pug---
pageTitle: My Site
pretty: true
---
doctype html
html(lang="en")
head
title= pageTitle
body
p This is my site!
<!doctype html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<p>This is my site!</p>
</body>
</html>
Declare layouts for your content with the extension of the template engine to be used for the layout, in the src/layouts/** directory.
The following example uses Pug and Markdown-it, so we must additionally install jstransformer-pug and jstransformer-markdown-it:
npm install jstransformer-pug --save
npm install jstransformer-markdown-it --save
src/layouts/default.pug---
pretty: true
---
doctype html
html
head
title My Site
body!= contents
Within the metadata of content in your src directory, tell it which layout to use:
src/index.md---
layout: layouts/default.pug
---
This is my **site**!
<!doctype html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<p>This is my <strong>site</strong>!</p>
</body>
</html>
.patternRender content only matching the given minimatch pattern. Defaults to **.
.layoutPatternThe pattern used to find your layouts, from within the Metalsmith source directory. Defaults to layouts/**.
.defaultLayoutIf provided, will be used as the default layout for content that doesn't have a layout explicitly defined. Needs to be the full path to the file, from the Metalsmith source directory. Defaults to null.
.engineOptionsAllows passing in options for the given engines.
engineOptions: {
// Add our own SASS include paths.
scss: {
includePaths: [
'styles/mystyles',
'node_modules/bootstrap'
]
}
}
.engineLocalsAllows passing in local variables for the given engines.
engineLocals: {
// All Twig templates will have the `baseURL` local variable.
twig: {
baseURL: 'http://mywebsite.com/'
}
}
MIT
FAQs
Metalsmith JSTransformer Plugin
We found that metalsmith-jstransformer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.