Source plugin for pulling data into Gatsby from Plone sites using plone.restapi.
npm install --save gatsby-source-plone
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-source-plone`,
},
];
You can query nodes created from Plone like the following:
{
allPloneDocument {
edges {
node {
title
description
text {
data
}
...
}
}
}
}
or
{
allPloneNewsItem {
edges {
node {
title
description
...
}
}
}
}
Checkout sources from github:
git clone git@github.com:collective/gatsby-source-plone.git
Make sure you use the latest NodeJS LTS version (currently 8.11.1). We recommend to use nvm for local development.
We use Docker for handling the backend plone.restapi, and so it's required to have docker-compose installed.
Build project frontend:
make purge # if you already put some data into plone site
make init-backend # Feeding automatic data into the plone site
make build # this command build the frontend for this plugin
you will see a site running at localhost:8000 similar to https://collective.github.io/gatsby-source-plone/
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
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
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
}