[1.0] Use index.md as text body in index.js

[iiroj]

It would be nice if I could have both index.js and index.md in the same path and then import the Markdown into my index. This way I could have one-off "layouts" for routes written in JSX while still having a block of text written in Markdown.

I want to do something like this in my index.js:

import { frontmatter, htmlBody } from 'index.md'
…
<Helmet title={frontmatter.title} />
…
<article dangerouslySetInnerHTML={{ __html: htmlBody }} />

What do you think? I assume it would be simple to support this with a Webpack loader. React-static-boilerplate uses this.

[KyleAMathews]

You can actually do basically this already :-)

Gatsby 0.x uses loaders to pull in Markdown, etc. All page data is passed into every js page as a prop e.g. https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/pages/index.js#L16

So you could either just use the data passed in as props or you could import the data directly.

In 1.x, you'll be able to query individual files using graphql doing something like (exact API in flux still):

{
  file(resolve: "./index.md") {
    Markdown {
      frontmatter {
        title
        author
      }
      html
    }
  }
}

Lots more about the new GraphQL stuff here if you're interested: #420