Implement a custom loader for Markdown

[bebraw]

I got this idea from @gwil. We can simply do something like this:

module.exports = function(content) {
    return (
        'module.exports = require("react").createElement("span", {' +
            'dangerouslySetInnerHTML: {' +
                '__html: ' + marked(content) +
            '}' +
        '});'
    );
};

...

{ test: /\.svg$/, loader: require.resolve('./dangerouslySetInnerHTML.loader'), exclude: /node_modules/ }

This will allow us to load Markdown into React components. Then you can do something like

var Content = require('./content.md');

...

<Content>

Actually we can probably generalize on this through templating and do even

...

<Content date={17.07.15}>

Those props could be passed put through something like Handlebars before passing to Markdown. I'm not sure if we want templating yet but it seems this approach would allow that if we need it.

In any case this makes user code much nicer and hides those ugly dangerouslySetInnerHTML declarations effectively.

[eldh]

Why not use a component like <Markdown path='./content.md'> instead? I.e. handle it inside the component rather than a loader.

[bebraw]

Yeah, that would work.

[bebraw]

I pushed this to a Markdown component. Usage: <Markdown file={require('./index.md')} />. I tried the proposed interface but that breaks require resolution. There might be some way to fix that perhaps but this is good enough for now.