Gatsby Preview With Plone

1. OCT. 24, 2019 • FERRARA, ITALY
Gatsby
Preview with Plone

2. Alok kumar
Google summer of code student
2019
Collaborator Taskcluster CI/CD
Mozilla
Author of gatsby-theme-plone
GatsbyJs Maintainer
@iFlameing

3. What is Gatsby
Preview?

4. "Gatsby Preview gives developers,
designers, and content creators a live
URL where you can see changes made in a
CMS before publishing those changes. Sort
of like “hot reloading” but for content
editing!"
According to Official Docs
@iFlameing

5. According
to me.
@iFlameing

6. When User Update their content
on Plone CMS the site will
automatically reflect those
changes.
@iFlameing

7. SO BASIC WORKFLOW LIKE
SERVER CLIENT
@iFlameing

8. How we can achieve
the same thing in
Plone CMS?
@iFlameing

9. Webhook
Plone
CMS
Gatsby-
source-
plugin
@iFlameing

10. We can split above
process in three parts i.e
Create Event
Modified Event
Delete Event
@iFlameing

11. 01 Create
When User upload any file to
the Plone CMS it will fire a
websocket event and we
create a node for that file in
gatsby-node.js file.
@iFlameing

12. A CREATE WEBSOCKET EVENT LOOK LIKE THIS

14. 02 Modified
When User make any
modification in content then
also we have to update the
created node in GatsbyJs.
@iFlameing

15. A MODIFIED EVENT LOOK LIKE THIS

17. 03 Delete
Similarly when user delete
any content from the Plone
CMS then also we have to
delete the node which you
previously created.
@iFlameing

18. A DELETE EVENT LOOK LIKE THIS

20. Live Demo

21. GATSBY-THEME-PLONE
A gatsby theme for the Plone CMS. You can create a
gatsby site in just 3-4 lines of code. You can change all
the default behaviour of the site using component
shadowing.

23. QUESTIONS

24. Thank You
Thank you Plone Foundation for giving me this
wonderful opportunity. My mentors Asko
Soukka(@datakurre), Timo Stollenwerk, Nilesh
Gulia and Paul Roeland.
@iFlameing