Sneak peek into GatsbyJS themes for Plone

Last year, with @ajayns, @cekk and @tisto, we built integration plugin https://collective.github.io/gatsby-source-plone/ for GatsbyJS static site generator.

I believe, it's been on a quite little use since then. @ajayns built a starter example for it https://github.com/collective/gatsby-starter-plone and I built our team blog with it https://tech.blog.jyu.fi/ We have had also some experiments, but no public sites yet.

The source plugin still needs some love to better support custom content-types, but it should already be pretty good. Main remaining issue is that GatbyJS GraphQL queries failing when they expect schemas from data not removed from the source site. Yet, they are just releasing features to mitigate that https://www.gatsbyjs.org/blog/2019-03-04-new-schema-customization/

That said, GatsbyJS themes should make this more interesting: https://www.gatsbyjs.org/contributors/chris-biscardi/

@iFlameing has been refactoring @ajayns' gatsby-starter-plone into gatsby-theme-plone

It could be tried out just with the following commands:

yarn init --yes
yarn add --dev gatsby git+https://github.com/collective/gatsby-theme-plone

creating file ./gatsby-config.js with

module.exports = {
  __experimentalThemes: [
    {
      resolve: "gatsby-theme-plone",
      options: {
          baseUrl: 'https://plonedemo.kitconcept.com/en'
      }
    }
  ]
};

and running

yarn run gatsby develop

Changing https://plonedemo.kitconcept.com/en to https://plonedemo.kitconcept.com/de will result in German version of that demo site.

Changing it into your own site may build something, but most probably still raises errors.

But once it builds, that base theme (gatsby-theme-plone) could be customised locally by overriding its React component with something they call "component shadowing".

@iFlameing has been documenting minimal steps to get started https://github.com/collective/gatsby-theme-plone

1 Like

If anyone need help regarding this topic. I can help, feel free to ping me anytime :slight_smile: