If you're creating content in markdown or use a CMS like NetlifyCMS which outputs markdown files jdown can transform the content into JSON containing HTML at build time ready to be consumed within templates.
$ npm install jdown --save-dev
const jdown = require('jdown'); jdown('path/to/content').then(content => console.log(content));
Call jdown with the path to your markdown content (relative to the project root) and it will convert your content to JSON.
The structure of the JSON that jdown outputs depends on how files within the content folder are structured.
Top Level Files
Will be turned into a top level object.
Files within folders will be turned into objects and grouped under a top level object that has the same name as the parent folder (don't go more than one level deep).
The collections folder should only contain sub folders, each sub folder will be turned into an array of objects. There will be an object for each file in the sub folder.
YAML frontmatter can be included at the top of any files throughout and it will be added to the generated JSON as individual properties.
--- title: Example frontmatter --- Example Markdown Content
Path to a folder containing markdown files with a folder structure that matches
the guidelines above. The path should be relative to the project root so if your
content was in
/Users/username/project/src/content, you would use
Asset parsing options. Using jdown to parse assets is completely optional, but comes with a few benefits including:
- Ability to organise assets alongside markdown content
- Auto minification of image files using imagemin
- Cache busting, using the last modified time (mtime) of the asset to change it's file name and avoid the old version of the asset being served
All static assets must be placed within
/assets folders. Assets folders can be
placed in the top level content directory and/or it's sub directories. Within
the markdown content assets can then be referenced using
my-asset.png is an asset placed within an
The assets options object can contain the following properties:
|output||string||./public||Directory jdown will output processed assets to|
|path||string||/||Publically accessible path jdown will prepend to output file names|
|png||object||undefined||Options to pass into imagemin-pngquant|
|jpg||object||undefined||Options to pass into imagemin-jpegtran|
|svg||object||undefined||Options to pass into imagemin-svgo|
|gif||object||undefined||Options to pass into imagemin-svgo|
Set this to
false to disable markdown parsing and just recieve structured JSON
containing markdown instead of HTML.
Set this to
true to include file info objects in the output JSON which contain
the files path, name, created at date and modified at date.
In The Wild
- danwebb.co (source) is built using jdown and React Static. See the static.config.js file for a real world example.
- If you have an example please share by submitting a pull request to add it to this list so others can learn from it.
Any pull requests are welcome and will be reviewed.