Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gatsby-theme-wheelroom with all npm packages installed. Try it out:

require("@types/react/package.json"); // @types/react is a peer dependency. require("gatsby/package.json"); // gatsby is a peer dependency. require("gatsby-source-contentful/package.json"); // gatsby-source-contentful is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var gatsbyThemeWheelroom = require("gatsby-theme-wheelroom")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-theme-wheelroom v5.0.10

Site framework based on Contentful and Gatsby

gatsby-theme-wheelroom

A generic gatsby-node.js built on consistent models and fragments, which takes care of pulling data from Contentful.

Have a look at the boilerplate to so see how to use this.

Wheelroom

The theme requires graphql queries to be defined. These can be generated by the wheelroom package and the plugin wheelroom-plugin-graphql.

Wheelroom is a tool for managing content models. It was designed to populate a headless CMS like contentful, generate graphql and generate boilerplate code.

Query types

The theme can handle three query types:

  • page: pages have a path which is used to create the actual pages
  • subPage: subPages have a slug from which the path is created
  • global: global data is added to every page

Install

Install the plugin by adding it to your gatsby-config.js

// Wheelroom generated files with graphql
const articleQuery = require('./src/graphql/article-query')
const globalsQuery = require('./src/graphql/globals-query')
const pageQuery = require('./src/graphql/page-query')

module.exports = {
  plugins: [
    {
      options: {
        defaultLocale: 'en-US',
        pageTemplate: path.resolve('./src/page-template.tsx'),
        queries: [articleQuery, globalsQuery, pageQuery],
      },
      resolve: `gatsby-theme-wheelroom`,
    },
...
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free