Gatsby: Front matter in JS

[rileytomasek]

Hey there, I would like to use pure React components to write my posts, but I would also like to have front matter for title/path/etc.

I tried writing a loader to do this, but the webpack require.context call in utils/load-context always errors before I get the chance to parse and remove whatever I use to write the front matter.

Do you have any suggestions on how I can accomplish this, or if it is already possible? Thanks!

[KyleAMathews]

Hey, components don't need wrappers. Just drop a component of whatever sort
in /pages and it'll work. Wrappers exist for markdown and other sources as
every page in Gatsby has to be a react component so wrappers take in non
component data and react-ize it.

React component pages don't support front matter as you can just use JS
vars.
On Mon, Sep 12, 2016 at 12:42 PM Riley Tomasek [email protected]
wrote:

Hey there, I would like to use pure React components to write my posts,
but I would also like to have front matter for title/path/etc.

I tried writing a loader to do this, but the webpack require.context call
in utils/load-context always errors before I get the chance to parse and
remove whatever I use to write the front matter.

Do you have any suggestions on how I can accomplish this, or if it is
already possible? Thanks!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/439, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh5B0pahDYqvSsf3LIY3DaFqGJdA2ks5qpaswgaJpZM4J69Bx
.

[rileytomasek]

how would i export the variables that would normally go into front matter (title, date) so that they are available in other places like this? https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/pages/index.js#L21

[KyleAMathews]

Oh... hmmm right. That'd require a change to Gatsby internals actually. This file is where the frontmatter is pulled off html/md files.

To make this work, we'd need some sort of static way of exporting data from a component because as this is in node.js context, we can't just require the react component as often it'll have special webpack import/requires which would just blow up in Node.js

Probably one of the JS parsers out there would make quick work of this. Support convention like:

// In React.js page component

export const data = {
  title: "It was a beautiful day",
  date: "2016-09-12T13:52:59-07:00",
}

Then pull that off each component and set it as pageData.

You want to take this on?

[renatorib]

I think js pages must be wrapped in 'wrappers/js.js' too.
As much as he can render himself, it is about standardization of all the pages data.

import React from 'react';

const AboutComponent = (props) => (
  <div className="about">
    <p>Im Renato...</p>
  </div>
);

export const data = {
// or AboutComponent.data = {
  title: 'About me',
  foo: 'bar'
};

export default AboutComponent;

wrappers/js.js

import React from 'react'

export default ({ route: { page: { data } } }) => {
  // data.body = <AboutComponent />

  return (
    <div className="JSWrapper">
      {data.body}
    </div>
  )
}

[KyleAMathews]

See the code here for wrappers — react components are required directly and data files are "wrapped" https://github.com/gatsbyjs/gatsby/blob/7a4c5534056c819e0a267bfde3528a096a60f014/lib/isomorphic/create-routes.js#L114

[rileytomasek]

@KyleAMathews ill look into supporting export const data = {} in the next few days.

It should be as easy as adding a new else if () {} to the load-frontmatter.js code you linked earlier and then parsing the file and checking for a data export, right?

[KyleAMathews]

Yup!

As per my TODO there I'd thought about using webpack-require but that's kinda slow/overkill for pulling off static data.

Extra points if you support commonjs exports as well exports.data = {} and extra extra points if you add support for Coffeescript (CJSX) files but anything would be a great start.

[chiedo]

Just to be clear. Is this not related to this?

https://github.com/gatsbyjs/gatsby/issues/2

It seems to me that it is but I could be misunderstanding

[KyleAMathews]

@chiedo yes, that's on the same issue. Didn't get to this in the past obviously :-)

[chiedo]

Cool :)

[jbolda]

591 closes this.

[KyleAMathews]

Thanks @jbolda for adding this!

Added a quick example of how this works on the starter blog

• http://gatsbyjs.github.io/gatsby-starter-blog/2016-12-9-react-component-post/
• https://github.com/gatsbyjs/gatsby-starter-blog/commit/e333cb1aadbba2d5053a3b471fa841b29b3187c2