Gathering detailed insights and metrics for metalsmith-mdn
Gathering detailed insights and metrics for metalsmith-mdn
Gathering detailed insights and metrics for metalsmith-mdn
Gathering detailed insights and metrics for metalsmith-mdn
MDN is a Metalsmith plugin that lets you use Nunjucks in your markdown content.
npm install metalsmith-mdn
Typescript
Module System
Min. Node Version
Node Version
NPM Version
JavaScript (59.76%)
Nunjucks (40.24%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
1 Stars
36 Commits
1 Watchers
2 Branches
1 Contributors
Updated on Jun 26, 2025
Latest Version
1.0.2
Package Id
metalsmith-mdn@1.0.2
Unpacked Size
56.56 kB
Size
10.80 kB
File Count
9
NPM Version
10.7.0
Node Version
18.20.4
Published on
Mar 20, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
MDN is a Metalsmith plugin that lets you use Nunjucks in your markdown content. It enables the re-use of section components, the same components that you use in your page section templates can now be used in long text pages. Simply add the component props to the frontmatter of your markdown file and use the mdn
tag to include the component in your markdown content.
If you are new to the concept of section components, you can read more about it on the Metalsmith Components Website and in this blog post.
NPM:
npm install metalsmith-mdn
Yarn:
yarn add metalsmith-mdn
Note: This plugin must be run immediately before the markdown plugin.
This plugin supports both ESM and CommonJS usage.
1import Metalsmith from 'metalsmith'; 2import markdown from '@metalsmith/markdown'; 3import MDN from 'metalsmith-mdn'; 4 5Metalsmith(__dirname) 6 // ... 7 .use( 8 MDN({ 9 templatesDir: 'layouts', 10 customFilters: 'nunjucks-filters.js' 11 }) 12 ) 13 .use(markdown()); 14// ...
1const Metalsmith = require('metalsmith'); 2const markdown = require('@metalsmith/markdown'); 3const MDN = require('metalsmith-mdn'); 4 5Metalsmith(__dirname) 6 // ... 7 .use( 8 MDN({ 9 templatesDir: 'layouts', 10 customFilters: 'nunjucks-filters.js' 11 }) 12 ) 13 .use(markdown()); 14// ...
The plugin supports both ESM and CommonJS usage through dual package exporting. When published, it includes both formats:
lib/index.js
): Used by default when importing in an ESM contextlib/index.cjs
): Used when requiring in a CommonJS contextThe package follows the standard Metalsmith plugin structure with source code in the src
directory and the built files in the lib
directory.
Option | Default | Description |
---|---|---|
templatesDir | layouts | The directory where your Nunjucks templates are stored, relative to the Metalsmith root |
customFilters | nunjucks-filters.js | The filename of a custom Nunjucks filter file, located in the Metalsmith root directory |
To add a section component to your markdown content, use the mdn
tag and pass unique tag name and props as arguments.
Here is an example of a markdown file with a section component. This example uses the setup that is shown in the Usage section above.
index.md
1---
2layout: simple.njk
3bodyClass: 'home'
4
5seo:
6 title: My Awesome Metalsmith Website
7 description: 'Fusce Aenean Ridiculus Tristique'
8
9mySectionComponent:
10 layout: sections/intro.njk
11 text:
12 title: Important Information
13 header: 'h2'
14 subTitle: ''
15 prose: |-
16 Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
17---
18
19# Home page title
20
21Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
22
23{#mdn "mySectionComponent" #}
24
25Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
In addition to page related props, the mySectionComponent
tag is used to include the intro
section component. The intro
section component is located in the layouts/sections
directory and is defined in the intro.njk
file. Note that the intro
section component imports the text
macro.
layouts/sections/intro.njk
1{% from "../partials/text.njk" import text %} 2 3<section class="section-intro> 4 <div class="content"> 5 {% set info = params %} 6 {{ text(info.text) }} 7 </div> 8</section>
layouts/partials/text.njk
1{% macro text(info) %} 2 3 {% if info.title %} 4 {% if info.header === "h1" %} 5 <h1>{{ info.title }}</h1> 6 {% elif info.header === "h2" %} 7 <h2>{{ info.title }}</h2> 8 {% else %} 9 <h3>{{ info.title }}</h3> 10 {% endif %} 11 {% endif %} 12 13 {% if info.subTitle %} 14 <p class="sub-title">{{ info.subTitle }}</p> 15 {% endif %} 16 17 {% if info.prose %} 18 <div>{{ info.prose | mdToHTML | safe }}</div> 19 {% endif %} 20 21{% endmacro %}
index.html
index.html
below shows the transformed end result of the file. The intro
section component, populated with the props from the frontmatter is included in the markdown content.
1<h1>Home page title</h1> 2<p> 3 Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, 4 vestibulum at eros. 5</p> 6 7<section class="section-intro "> 8 <div class="content"> 9 <h2>Important Information</h2> 10 <div> 11 <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> 12 </div> 13 </div> 14</section> 15 16<p> 17 Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta 18 felis euismod semper. 19</p>
To enable debug logs, set the DEBUG
environment variable to metalsmith-mdn*
:
1metalsmith.env('DEBUG', 'metalsmith-mdn*');
Alternatively, you can use the DEBUG environment variable directly:
1DEBUG=metalsmith-mdn* node build.js
To use this plugin with the Metalsmith CLI, add metalsmith-mdn
to the plugins
key in your metalsmith.json
file:
1{ 2 "plugins": [ 3 { 4 "metalsmith-mdn": {} 5 } 6 ] 7}
This project maintains high statement and line coverage for the source code. Coverage is verified during the release process using the c8 coverage tool.
Coverage report (from latest test run):
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
---|---|---|---|---|---|
All files | 100 | 100 | 80 | 100 | |
index.js | 100 | 100 | 80 | 100 |
No vulnerabilities found.
No security vulnerabilities found.