extended-netlify-cms-loader v0.4.2

netlify-cms-loader

A webpack loader, that makes it easier to access content from the Netlify CMS in your website or single-page-application.

The loader processes all .md files of a collection and outputs their content and file path as an array of objects.

Processed .md files and any assets in the "media_folder" are automatically copied to the output directory, so they can be fetched by the app later on.

Note: This is a 3rd-party loader. I am in no way affiliated with Netlify, though I wholeheartedly recommend anyone to check them out.

Loader options

• collection ("posts", required) Name of the collection you want to retrieve.
• bodyLimit (256) Include markdown body in the results, if body-length is less than specified. This can save http-requests for small items later on.
• copyMEdia (true) Copy uploaded images to the output directory.
• copyFiles (true) Copy processed .md files to the output directory.
• sortBy ("") Name of widget the output should be sorted by. Leave empty to skip sorting.
• reverse (false) Reverse output array. Useful for sorting by date with newest item coming first.
• outputDirectory ("cms") If copyFiles is true, then .md files are copied to "outputDirectory/collectionName/fileName".

Using the loader

require() your Netlify CMS config file with the loader inline.

You must at least specify the name of the collection, that you want to retreive information about. The remaining options have fairly sane defaults, but can always be changed to your liking.

const cmsPosts = require('!netlify-cms-loader?collection=posts!../admin/config.yml')

A JSON filer per collection is created.

The loaders output is an array of objects, corresponding to the processed markdown files of the collection.

In addition to each files front-matter, the loader adds two additional properties 'filePath' and 'hasBody' . (Please make sure, that these don't collide with the fields from your CMS collection. This might be addressed in future versions, if it turns out to be an issue.)

filePath is the path of the .md file in the build directory and hasBody indicates, whether there is a body-section present in the .md file.

Depending on the loader-options, a markdown files body may be included in the output array or needs to be fetched later on by the website/app.

Example output of the loader:

[{
	title: "Long blog post",
	image: "/uploads/hero_image.jpg",
	filePath: "cms/posts/2017-09-20-long-blog-post.md",
	hasBody: true
}, {
	title: "A short story",
	image: "/uploads/placeholder.jpg",
	body: "This body is short enough to be included right away",
	filePath: "cms/posts/2017-09-22-a-short-story.md",
	hasBody: true,
}, {
	title: "A longer story",
	image: "/uploads/test.jpg",
	filePath: "cms/posts/2017-09-23-a-longer-story.md",
	hasBody: true
}]

See a live example of a test-site built with the loader here.

Code example of a Vue component using the loader here.