# extended-netlify-cms-loader

> netlify-cms-loader

Latest version **0.4.2** (published 2018-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install extended-netlify-cms-loader
pnpm add extended-netlify-cms-loader
yarn add extended-netlify-cms-loader
bun add extended-netlify-cms-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.2 |
| Published | 2018-05-30 |
| First published | 2018-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Miguel San Segundo |
| Maintainers | miksansegundo |
| Keywords | netlify, cms, loader, webpack |

## Links

- npm: https://www.npmjs.com/package/extended-netlify-cms-loader
- npm.io page: https://npm.io/package/extended-netlify-cms-loader

## Dependencies (2)

- [js-yaml](https://npm.io/package/js-yaml.md) ^3.10.0
- [front-matter](https://npm.io/package/front-matter.md) ^2.2.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.4.2 (latest) — 2018-05-30

## README

## netlify-cms-loader

A webpack loader, that makes it easier to access content from the [Netlify CMS](https://www.netlifycms.org/) 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](https://www.netlify.com/), 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.

```javascript
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:
```javascript
[{
	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](https://netlify-cms-loader.netlify.com/).

Code example of a Vue component using the loader [here](https://github.com/Nocory/netlify_cms/blob/master/src/components/cms.vue).

---
_Source: https://npm.io/package/extended-netlify-cms-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._