Load markdown files through markdown-with-front-matter-loader

[pugnascotia]

This PR adds support for loading *.md files through markdown-with-front-matter-loader. This makes it simple to load and render Markdown through CRA.

Testing

1. Create a demo app with ./tasks/cra.sh my-app-test
2. cd my-app-test
3. Create src/_posts/hello-world.md

---
title: 'Hello world'
---
# Hello world
This is a test
```javascript
function() { }
```

4. Modify src/App.js to load the file

import post from './_pages/hello-world.md';

5. Include the post in the page:

<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div dangerouslySetInnerHTML={{__html: post.__content}}></div>

6. Start dev mode and check the page renders as expected.

yarn start

7. Build a production bundle:

yarn run build

8. Check that the production build works as expected by serving it and browsing http://localhost/

docker run -it --rm -v $PWD/build:/usr/share/nginx/html -p 80:80 nginx:alpine

[gaearon]

Thanks for the PR! What does that JSON look like?

[gaearon]

Also, can you provide node_modules size before and after this change?

[pugnascotia]

Regarding node_modules size - test script:

#!/bin/bashset -eo pipefail
test_branch() {
branch="$1"
git checkout "$branch">/dev/null 2>&1
rm -rf build
npm run create-react-app build >/dev/null 2>&1
ls build/node_modules >"$HOME/tmp/cra-$branch-modules.txt"
du -s build/node_modules/
}
MASTER_SIZE=$(test_branch master)
MARKDOWN_SIZE=$(test_branch load-markdown)echo"node_modules size on master: $MASTER_SIZE"echo"node_modules size on load-markdown: $MARKDOWN_SIZE"echoecho"Module diff:"
diff -u "$HOME/tmp/cra-master-modules.txt""$HOME/tmp/cra-load-markdown-modules.txt"

Results:

node_modules size on master: 292608	build/node_modules/
node_modules size on load-markdown: 293840	build/node_modules/
Module diff:
--- /Users/rah/tmp/cra-master-modules.txt	2017-02-13 14:49:27.000000000 +0000
+++ /Users/rah/tmp/cra-load-markdown-modules.txt	2017-02-13 14:50:02.000000000 +0000
@@ -487,6 +487,7 @@
lru-cache
macaddress
makeerror
+markdown-with-front-matter-loader
marked
marked-terminal
math-expression-evaluator
@@ -788,5 +789,6 @@
xtend
y18n
yallist
+yaml-front-matter
yargs
yargs-parser

Size of new modules:

$ cd build/node_modules/
$ du -csh markdown-with-front-matter-loader yaml-front-matter
24K	markdown-with-front-matter-loader
592K	yaml-front-matter
616K	total

[pugnascotia]

Regarding JSON - given some Markdown:

---title: Test markdown postdate: 2015-06-03tags: Badger, Squirrel, Nihilist---# Content
Some content

You get the following, except the date below is actually a Date object. This is just a stringified version.

{"title": "Test markdown post","date": "2015-06-03T00:00:00.000Z","tags": "Badger, Squirrel, Nihilist","__content": "<h1 id=\"content\">Content</h1>\n<p>Some content</p>\n"}

[gaearon]

What is the benefit of this structure, compared to regular Markdown -> HTML conversion?

[pugnascotia]

The first part can contain any fields you want, so you can use whatever metainfo conventions make sense for your Markdown documents. For example, a tags field (string or YAML array) for categorising a blog post, a field for a blog post's background image, author name, references, anything you like really. You could even pre-process the files at build time to extract the metadata and build some kind of index.

That's all separate from the actual markdown content.

[gaearon]

So, I appreciate the PR but I think we'll hold off for now. If we add an exception for .md now, people will ask the same for HTML and a bunch of other formats. At the same time I'm trying not to add more size for non-essential features.

If there are more requests for this in the future, we can reconsider this. Sorry!