GSoC 2018 Ideas: "Big Green Button" with plone.restapi and GatsbyJS

This is one post in a series to begin focused discussion about ideas that came out of our 2018 GSoC Brainstorm.

Please use this post as a place to begin to discuss this idea more in depth.

This idea was suggested by @tisto, who is also interested in mentoring the project.

The description:

"Implementing the "Big Green Button" idea with plone.restapi and GatsbyJS. GatsbyJS is a blazing fast site generator written in React that got quite some traction lately. There are already add-ons for Drupal, WordPress, Contentful, etc."

Take it away, folks. This one is yours to make great!

1 Like

Hey @cewing @tisto I am interested in this idea, but didn't exactly understand what big green button meant as I am new to the community. Can you please help me out here?

I'll ask @tisto to explain the terminology a bit better. In the meantime, let me say that this is a place to discuss the idea, so if you're interested in GatsbyJS maybe you could chime in with your thoughts about how we could make a site generator add-on that used Plone as a data source. That might mean learning a bit about what Plone is, and how it works. You can begin by working your way through the steps outlined at the top of this post.

@ajayns GatsbyJS is a static site generator that can generate a static PWA from different sources. Those sources can be just Markdown files on the file system. There are also extensions that read the data from Content Management Systems (e.g. Drupal, WordPress).

I'd recommend that you check out the gatsby site first:

Then I would take a look at the Drupal implementation for instance, to get an idea what you would need to accomplish for Plone:

The goal of the GSoC project would be to have a "using-plone" example that fetches the data via plone.restapi and generates a static site with Gatsby.

Ok, i didn't read the main gsoc thread so i missed @tisto proposal.
I started watching gatsby last week and tried to develop a Plone plugin just as a proof of concept (and because we could possibly need it in the near future).

I wanted to put it on collective repo and make it the official one, but if this argument will become a gsoc project i can stop myself and let some student play with this :wink:

1 Like

I would take your interest @cekk as indication that this is a solid idea, and one that others will have interest in using.

Given the work you've done on a "proof of concept", I have a few questions for you:

  • How large a task would you imagine a full implementation to be?
  • Would having a proof of concept in place help to guide a student in reaching a completed version?
  • Would you be interested in helping to mentor a GSoC student?

A basic implementation could be a few lines of code, basically a fetch data and a serialization (here there is my very simple test).
A full implementation could be more complex because you can allow users to configure the plugin to search all contents, only a subset, the result of a collection, passing auth, also store images, etc..

Gatsby has 2 main types of plugins that do different tasks:

  • collect data and generate graphql nodes
  • generate a dynamic structure of pages based on node types

The first group is the one mentioned by Timo, and could be made as general as possible to cover every possible Plone query.

The second one can depend on the destination application layout..unless we wants to create also a general-purpose pages generator that "staticize" an entire Plone site with all the pieces (breadcrumbs, nav items, the entire structure, etc) and maybe a pastanaga layout.

IMO this could be a good project for gsoc but i don't know how deeply we wants to go in gatsby plugins creation.

I never get involved in a gsoc project, so i don't know if we need to find a project for the entire summer, for only one month or whatever..Probably a source plugin can be made in one month.

And to answer your last question: why not? it could be interesting, and i'd like to help Timo in this mentorship..but i have no idea of what does it means :slight_smile:


@cekk I really like the potential of this idea for bringing new blood into the Plone community. If you can use an out-of-the-box Plone instance to author content without needing to worry about layout or design customization, and then can render that content into a static GatsbyJS site, that's a nice nice nice story.

For GSoC, a project is expected to last for three months. I could imagine us stretching it out by, perhaps, trying to build some system for generating different node types that correspond to different content types in Plone. Not sure if that concept maps to this, but it sounds like it might.

For mentoring, the most important part is that you are willing to commit to communicating regularly with a student. Think of it kind of like being a project manager, with a bit of teaching rolled in. You help the student to establish realistic goals and timelines, keep them on track and focused on their real goals, help connect them with people in the community who can answer questions or give advice, and so on.

w00t!!! That is awesome! I don't think we should hold ourselves back just because of the GSoC proposal. We can also play around a bit with it and then find a student who can further enhance it.

I really think that Gatsby has lots of potential for Plone. There are a lot of use cases where people don't need a fully fledged React/Angular app as frontend and a statically generated site is just what they need. We migrated our company blog to Gatsby and it is a delight to work with so far.

Generating a dynamic structure of pages is what I would like to accomplish in the long term. Though, I wasn't sure if that would be beyond the scope of a GSoC project.

@cekk would you be available for a quick chat/hangout about Gatsby this week?

1 Like

I have exactly you feelings about Gatsby..i like it very much.

I started watching Gatsby because sometimes we need to build some simple semi-static sites where layouts doesn't need all the Plone's infrastructure, and it's easier for a frontend-dev to develop a theme without Plone.

Probably in the near future i'll use it with Plone for an incoming project, so i will need to play with it a bit.

Ping me on irc channel (cekk) when you have time :wink:

@tisto What's the current status of your plans on the next "headless Beethoven Sprint"? All this sounds very interesting.

Oh, and I'd be interested to listen to your hangout if possible :slight_smile:

Victor, Andrea and I are currently chatting on the Plone slack channel about it. Feel free to join! Also, any GSoC student is more than welcome to join us!

About the Beethoven sprint, it is planned April 2018 (or later). We have to find a date where most people will be able to make it. So let me know about your preferences! :slight_smile:

1 Like

@tisto, @cekk, would either or both of you be willing to write up a more involved proposal for this topic based on the conversation that's happened here? You could use the structure of the proposals here as a guideline for what one should look like.

Let's see if we can specify enough of the basics to give clear guidance on what we want, but leave plenty of wiggle room for a student to make a great proposal for it.

We are still hacking on the Plone/GatsbyJS integration and it looks very promising so far. I will try to write down a proposal in the next days.

Here are a few rough ideas:

  • Make it possible to export the full content tree from Plone to Gatsby (might become complex, would definitely require help from mentors, right now we can just export a flat list of content objects, not traverse the object tree)
  • Create a Gatsby theme for Pastanaga (that means, of course, just the frontend parts, any other theme would also be a possible option)
  • Enhance the Gatsby theme with "interactive" components that you usually need for a website: contact form, sitemap, commenting, google analytics, etc.
  • Implement Pastanaga editing (this one is some kind of a long shot and would be more a PoC type of project. We might be able to combine the advantages of a static site builder with the power of React and Pastanaga, Gatsby react components could still post content to the backend, which would automatically generate a new static version of the site)

If a student is interested, I am pretty sure we can come up with a good scope for a GSoC project. There are plenty of options and ideas. With Andrea, Victor, Rob and me, we have more than enough possible mentors.

I also asked Rob to come up with a few ideas for possible GSoC projects on plone-react (which is somehow related). We will discuss this and then post the ideas.

Status update on gatsby-source-plone: We took Andrea's PoC code and moved it to the collective:

We created a basic Robot Framework based acceptance test setup that builds a static site from Plone content (it currently just lists all documents in the Plone site). The acceptance test then checks if the "Welcome to Plone" front page does show up in Gatsby. Victor fixed some issues with the package so it is actually installable.

We have to continue to work on allowing devs to actually work on this locally. For now, we just made sure everything works on Travis.

As soon as the local dev env is in place and documented, I think this is a pretty good start for a possible GSoC student to jump in. First step would be to get familiar with Gatsby and Plone though.

1 Like

This. Is. AWESOME!!!

Great work, folks. This is shaping up really really well!

Hey guys!

This all seems pretty interesting and I'd love to contribute! But then I was going to GatsbyJS and realized it used React. I primarily work on Angular and so this is totally new to me. What steps do you think I should take? Learn a React and Gatsby side by side and also try to contribute to the Collective Gatsby repo?

@ajayns glad to hear you are interested! I'd recommend learning at least some React basics. If you are familiar with Angular 2 it shouldn't be too hard. Then I would start to look into pure Gatsby. When you are familiar with both Gatsby and React basics, you can start to look into the collective Gatsby package and try to contribute to it.

Let us know if you need help!


Hi! I just set up the plone development environment and i am really excited to work on this specifically. I know react and I would just need to start with Gatsby. Looking forward to contributing!

1 Like

That sounds great! I'll get started with React and then into Gatsby right away! Looking forward to contribute!

Plone Foundation Code of Conduct