Different wrappers for different content

[clouddra]

Currently gatsby only uses one type of wrapper for each file type (e.g. /wrapper/md.js for .md files).

I think there are use cases for different wrappers for different type of content. Take for example for a personal page. I may want to format my blog post page differently from projects (portfolio for all my projects) page.

To achieve this I will need to read the props.page.path and then render the right markup accordingly based on the directory of the page.
I wonder if it is possible to have a different wrapper for each folder (i.e /projects/_wrapper/md.js and posts/_wrapper/md.js).

[KyleAMathews]

Yup! Absolutely. Gatsby is mainly concerned about data not presentation. So it loads data from static files then passes them to your components to do whatever you'd like.

So Gatsby will only call one markdown wrapper (and one wrapper for every other file type) but within that wrapper you can do whatever you want. So for the case where you want to present markdown files differently by the folder there in, you'd want to do something like this in your wrappers/md.js file:

render () {
  const { dirname } = this.props.route.page.file
  if (dirname.includes('projects')) { // Using the ES2015 String.includes function.
    return <ProjectsMarkdownWrapper {...this.props} />
  } else if (dirname.includes('blog')) {
    return <BlogMarkdownWrapper {...this.props} />
  }
}