@tamu-dor/babel-plugin-import-md-to-js

babel-plugin-import-md-to-js

This is a simple babel plugin to inline markdown into js via marked and js-yaml.

This plugin is very much experimental due to use of the Babel6 API - largely undocumented. Contributions are welcome.

Install

npm i @tamu-dor/plugin-import-md-to

Usage

Place in plugins section of babel config

plugins: [
  ...
  '@tamu-dor/babel-plugin-import-md-to-js',
  ...
],

The following command will convert everything in the src folder to lib using babel and our plugin.

babel src/ -d lib/ --presets stage-0,es2015,react --plugins @tamu-dor/babel-plugin-import-md-to

Every js file that has a statement such as:

import page from './page.md'

will be roughtly translated to:

var page = {
    ...metadata
    contents: `...` // the md file without the metadata converted to html
}

You can also import markdown pages raw by placing the ! symbol at the end of the file. For example:

import page from './page.md!'

will be roughtly translated to:

var page = {
    ...metadata
    contents: `...` // the md file without the metadata
}

Notice that in both examples we split the metadata. This is done via the js-yaml module. Consider the following page:

---
a: 1
b: 2
---

# Hello

will be translated to:

var page = {
    a: 1,
    b: 2
    contents: `<h1>Hello</h1>`
}

Use Cases

The only use case of this plugin is to be able to bundle markdown pages with your js components. It is good for portability.