How Plone Excels in GatsbyJS Content Mesh
0 likes93 views
The document, presented at the Plone Conference 2019, discusses the integration of Plone with GatsbyJS, highlighting the benefits of this combination such as fast websites and flexible content management. It outlines the features and shortcomings of GatsbyJS while showcasing how Plone can enhance GatsbyJS applications through a REST API and various use cases. Additionally, it provides guidance on getting started with the Gatsby-source-Plone plugin and links to relevant resources and examples.
How Plone Excels in GatsbyJS Content Mesh
- 1. How Plone Excels in GatsbyJS Content Mesh Plone Conference 2019 Asko Soukka 23.10.2019 +
- 2. datakurre Asko Soukka Background • Python developer since 2002 • Plone developer since 2004 • Full-time professional since 2008 • GSOC mentor since 2013 • GatsbyJS user since 2018 1
- 3. University of Jyväskylä, Central Finland 2
- 4. Demo
- 5. GatsbyJS
- 6. datakurre Open Source GatsbyJS – the framework • React based website and app generator • GraphQL based CMS agnostic mashup framework • Server-side rendered static deployment • MIT-licensed open source plugin ecosystem 3
- 7. datakurre Business GatsbyJS – the company • Open source hobby turned into VC backed startup • Copyrights owner, maintainer and evangelist • Free tooling, documentation and webinars • Paid cloud services with premium features 4
- 8. datakurre Advantages Good • ”Blazingly-fast websites” • Beginner friendly documentation • Seamless developer experience • Commitment on accessibility • React ecosystem compatible 5
- 9. datakurre Shortcomings Bad • No incremental builds • Varying plugin quality • GatbyJS GitHub monorepo Ugly • ”Overly-complicated framework and pipeline” • ”Vendor lock-in for just updating static HTML” 6
- 10. datakurre Not for Everyone React is okay ○ Content is public ○ Use case is read-only ○ 7
- 11. Content Mesh
- 17. Ecosystem
- 18. datakurre Plugin Categories SOURCE TRANSFORMER THEME images scales gallery 12
- 19. datakurre Plugin Categories SOURCE TRANSFORMER THEME images scales gallery 12
- 20. datakurre Plugin Categories SOURCE TRANSFORMER THEME images scales gallery 12
- 21. datakurre Plugin Categories SOURCE TRANSFORMER THEME images scales gallery 12
- 22. datakurre Plugin Categories SOURCE TRANSFORMER THEME images scales gallery 12
- 23. datakurre Plugin Categories SOURCE TRANSFORMER THEME images scales gallery 12
- 24. All plugins are equal categories are not enforced 12
- 25. Themes
- 26. datakurre Gatsby Themes Experiment on maintainable boilerplate • Packages with pre-configured components • Configuration possible with plugin options • Overridable or extendable by shadowing JBOA ??? PROFIT 13
- 27. datakurre Gatsby Themes Experiment on maintainable boilerplate • Packages with pre-configured components • Configuration possible with plugin options • Overridable or extendable by shadowing JBOA ??? PROFIT 13
- 28. datakurre Gatsby Themes Experiment on maintainable boilerplate • Packages with pre-configured components • Configuration possible with plugin options • Overridable or extendable by shadowing JBOA ??? PROFIT 13
- 29. datakurre Gatsby Themes Experiment on maintainable boilerplate • Packages with pre-configured components • Configuration possible with plugin options • Overridable or extendable by shadowing JBOA ??? PROFIT 13
- 31. datakurre Example ”theme” configuration { resolve: "gatsby-theme-coverflow", options: { path: "gatsby-blog", query: `{ allCoverPages: allFeedGatsbyBlog { edges { node { title link } } } }` } } 15
- 32. Plone
- 33. datakurre Out of the Box Enablers • Hierarcical content management • Customizable content types • Flexible publication workflows • Effective and expiration dates • High quality extensible REST API 16
- 34. datakurre Excellences Curated use-cases • Standalone spin-off web sites • CMS part of GatsbyJS web apps • Content configuration management 17
- 35. datakurre Excellences Curated use-cases • Standalone spin-off web sites • CMS part of GatsbyJS web apps • Content configuration management Seen challenges • WYSIWYG → WYSIWYM • Release management 17
- 36. datakurre Status of gatsby-source-plone Done • Incremental Plone content sourcing • Selectable site root with baseURL option • Support for rich text, images and files • Rich text to React w/ Gatsby links and images • GraphQL queries by _path or by hierarchy • Websocket-ready for instant develop updates 18
- 37. datakurre Future of gatsby-source-plone To do • Support custom rich text, image and file fields Issue: Only fields text, image and file are supported • Path prefixing or namespacing support for multiple plugin instances Issue: Instances may override each others’ nodes 19
- 38. Get Started
- 39. datakurre Get Started with gatsby-source-plone 1/3 Create a new project $ npx gatsby new my-gatsby-project $ cd my-gatsby-project $ yarn add git+https://github.com/collective/gatsby-source-plone Add a Plone source in ./gatsby-config.js with plugins: [ { resolve: 'gatsby-source-plone', options: { baseUrl: 'https://plonedemo.kitconcept.com/en', }, }, 20
- 40. datakurre Get Started with gatsby-source-plone 2/3 Start GatsbyJS development server $ yarn gatsby develop Open browser at http://localhost:8000/___graphql 21
- 41. datakurre Get Started with gatsby-source-plone 3/3 Learn GatsbyJS • gatsbyjs.org/tutorial • collective.github.io/gatsby-source-plone Ask for help • github.com/collective/gatsby-source-plone/issues 22
- 42. datakurre More of gatsby-source-plone Web site examples • github.com/collective/gatsby-source-plone • github.com/collective/gatsby-starter-plone Landing page example • github.com/datakurre/gatsby-starter-plone-brochure Content configuration example • github.com/datakurre/gatsby-theme-ds-player 23