GSOC 2019: GatsbyJS preview for Plone

Hello everyone!

I am Alok Kumar(iFlameing) 2nd-year undergraduate as a Computer Science Major from Shri Mata Vaishno Devi University(Katra, India). Thank you for selecting me as a GSOC student and for giving me the opportunity to work with @datakurre and with the Plone community. My skill sets Include Javascript, Html, CSS, Python. I am pretty proficient in react, node, and Gatsby which are the required skills for the project. My project idea is GatsbyJs Preview for Plone. we are managing the project using Github project board for technical part and for communication we are using Gitter channel

Currently, gatsby-source-plone plugin is unable to update, update, delete and create node after fetching data from Plone site unless GatsbyJs development server is manually restarted or GatsbyJs site is rebuilt. This project plan is to enhance existing project "gatsby-source-plone" with features that allow "gatsby develop" development server to provide up-to-date instant live previews of pages that contain data from a Plone CMS source. You can read more about the project and How I plan to achieve the project goal by going to this link.

I applied to the GSOC program because It provides me a community where I can work with different people and hone my development skills. I can interact with amazing people who are working in the software development field for many years. Building something which is used by many of us and getting in the world of open source, stipend, and the t-shirt :slightly_smiling_face:

I would like to utilize this community to get advice and tips from other participants, to be inspired by other peoples projects and ideas and to become better at D.I.Y solutions. I will be happy to hear about any topic related to my communication or technical skills where I can improve myself from the community.

Alok Kumar
(ialokkumarsingh0@gmail.com)

1 Like

FWIW we choosed to manage the projecft using a Gitter channel and a GitHub project board.

Sorry for not mentioning that, I will update the post with mentioning them.

For anyone interested, as a side effect of this project, there's now a custom Docker image of Plone 5.2rc3 with Twisted based ZServer (and REST API) on Python 3.7 for testing purposes available:

docker run --rm -ti -p 8080:8080 datakurre/gatsby-source-plone:2019-06-04

It includes (not yet secured) websocket support for streaming object lifecycle events so that gatsby-source-plone -plugin could be implemented to subscribe them and update "gatsby develop" site live preview.

Screenshot_2019-06-05 Plone site

2 Likes

Fun thing that gatsby develop is serving the updated version of the page before the editor using Plone see their version :slight_smile:

5 Likes

:scream:

1 Like

Quick update. gatsby-source-plone repository now comes with a Docker image with permission aware websocket notifications so that gatsby develop gets proper live updates.

@iFlameing has been working on processing those notifications from Plone and as seen, adding and updating content already works.

3 Likes

The second coding period of GSOC 2019 has now been completed, so it is time for a quick update:

As @iFlameing had planned, this period was used for testing the MVP developed in the first period and fixing bugs when found, and also adding more unit tests for the code developed in the last year. This period was successful, so the last period can be used for refactoring the code for easier maintenance.

We also managed to build an acceptance testing setup for testing GatsbyJS develop live updates using my ZServer+WebSockets docker image "datakurre/gatsby-source-plone:2019-06-21".

Meanwhile I realized that the current Plone GatsbyJS examples are way too complex, because they are examples for re-building complete Plone-sites with GatsbyJS. Therefore I wrote an example of building a simple page composition from contents of a Plone folder – similarly to countless page composition add-ons in Plone:

This example contains only single page

That fetches its content from Plone, using a two level deep GraphQL query for the configured gatsby-source-plone site root:

export const query = graphql`
  fragment Document on PloneDocument {
    _type
    title
    description
    text {
      react
    }
  }
  fragment Image on PloneImage {
    _type
    title
    description
    image {
      childImageSharp {
        fixed(width: 1200) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
  query IndexPageQuery {
    ploneSite {
      nodes {
        ... on PloneFolder {
          _type
          title
          description
          nodes {
            ... on PloneDocument {
              ...Document
            }
          }
        }
        ... on PloneDocument {
          ...Document
        }
        ... on PloneImage {
          ...Image
        }
      }
    }
  }
`;

Note that support for those linked "nodes"-attributes connecting folder contents to their parents were added into gatsby-source-plone master very recently.

1 Like

Plone Foundation Code of Conduct