Skip to main content
.com
Skip to main content
Algolia
View plugin on GitHub
See starters using this

Build Status

gatsby-source-plone

Source plugin for pulling data into Gatsby from Plone sites using plone.restapi.

Full documentation.

Install

npm install --save gatsby-source-plone

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-plone`,
  },
];

How to query

You can query nodes created from Plone like the following:

{
  allPloneDocument {
    edges {
      node {
        title
        description
        text {
          data
        }
        ...
      }
    }
  }
}

or

{
  allPloneNewsItem {
    edges {
      node {
        title
        description
        ...
      }
    }
  }
}

Development

Code Checkout

Checkout sources from github:

git clone git@github.com:collective/gatsby-source-plone.git

Set up Node

Make sure you use the latest NodeJS LTS version (currently 8.11.1). We recommend to use nvm for local development.

Set up Docker

We use Docker for handling the backend plone.restapi, and so it’s required to have docker-compose installed.

Build

Build project frontend:

make build

Dev Environment

Watch changes in Gatsby development mode:

make watch

Build Gatsby:

make build

Serve Gatsby build:

make serve

Stop Plone API server (started by any of the above):

make stop-backend

Clean everything and reset the environment:

make purge

Tests

Run unit tests:

make test

Watch unit tests:

make watch-test

Run both unit tests and acceptance tests:

make test-all

This command will automatically fire up the Plone backend, build and start Gatsby and the execute the selenium-based acceptance tests.

Acceptance tests depend on currently available Plone backend content. Ensure that your Plone backend includes also the tested content with:

make import-fixture

or replace Plone backend content with the test data with:

make init-backend

Publish Markdown docs at ./docs into Plone backend with:

make publish-to-backend

and export Plone backend data into importable fixture (for CI) with:

make export-fixture

Prettier Configuration

This project uses Prettier for code formatting, the .prettierrc file contains the requisite custom settings the project

It’s recommended that you setup Format on Save so that your editor takes care of this automatically for you. In Visual Studio Code this can be setup in project by adding the following to your Workspace settings (or in .vscode/settings.json), while having the VSCode plugin for Prettier installed:

{
  "editor.formatOnSave": true
}

Docs
Tutorial
Plugins
Blog
Showcase