Add gatsby-plugin-contentful-pages

[felixjung]

This PR adds a new plugin for creating pages straight from Contentful data. No need for gatsby-node.js scripts.

Changes

• Add plugin
• Update the "using-contentful" example replacing the gatsby-node.js script with a plugin config in the gatsby.config.js file.

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit 53aa95f

https://deploy-preview-3725--gatsbygram.netlify.com

[gatsbybot]

Deploy preview for gatsbygram ready!

Built with commit c10e265

https://deploy-preview-3725--gatsbygram.netlify.com

[Khaledgarbaya]

Hey @felixjung, is there a reason not to have this in the contentful-source-plugin ?
you can extend the opetion object to include these configs.

{
  resolve: 'contentful-source-contentful',
  ...
  pages:[
   {template: path.resolve('templates/contentType1.js', contentType: 'ContentType1')}
   ....
  ]
}

and if the pages config is not set the plugin won't create any. WDYT?

[felixjung]

Sure. Just thought, since this is technically not a source functionality, it should be separate? But maybe I did not get the difference between different plugin types.

[KyleAMathews]

This should definitely be seperate. Source plugins should only have responsibility for sourcing data. There are many ways to facilitate making pages from data and there's no need to draw source or transformer plugins into that.

@felixjung looks really good. One question I had reading through this is if it'd make sense to make this plugin a bit more generic and work for any type of data? E.g. gatsby-plugin-type-pages? There's another plugin I know kinda similar to this by @mikefowler https://www.npmjs.com/package/gatsby-plugin-collections for easily creating pages from "markdown collections".

One big argument against making this plugin more generic is then the UX would suffer as this is very simple to use if you're familiar with Contentful as you just copy the content type name over to your gatsby-config.js and off you go where if this was generic, you'd need to understand how gatsby-source-contentful converts Contentful type names into Gatsby's type names.

[felixjung]

Thanks for the feedback. You're right that there are a lot of other use cases for this. And generalizing might not make it that much more difficult. I could imagine a config like this:

    {
      resolve: `gatsby-plugin-auto-pages`,
      options: {
        pageTypes: [
          {
            component: ({ prop1, prop2, ... }) => `.src/templates/${props1}${prop2}`,
            path: ({ prop1, prop2, ... }) => `/products/${prop1}/`,
            query: `
              allNodeTypeSelector {
                edges {
                  node {
                    prop1,
                    prop2,
                    ...
                  }
                }
              }
            `,
          },
        ],
      },

It's not that much harder and I guess you can make examples for popular source plugins?

[KyleAMathews]

@felixjung yeah... so thinking some more — I'm not really sure I want to commit to higher-order patterns for creating pages just yet — I'd rather people try building more solutions like this as plugins first. I feel like there's too much experimentation to do still before making anything official.

So instead of adding it as an official plugin — could you publish it a personal repo and to NPM? Then add a mention of it to the contentful source plugin README?

I think this is an awesome solution for many people. Would love to hear more reports from people using this on projects in the wild!

[felixjung]

OK, thanks.