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/bash

set -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"
echo
echo "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 post
date: 2015-06-03
tags: 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!