Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal, GraphQL, Views, View Modes and Gatsby for a US Gov site CMS Philly

417 views

Published on

Drupal, GraphQL, Views, View Modes
and Gatsby for a US Gov site

Published in: Technology
  • Be the first to comment

Drupal, GraphQL, Views, View Modes and Gatsby for a US Gov site CMS Philly

  1. 1. Jesus Manuel Olivas / octahedroid Drupal, GraphQL, Views, View Modes and Gatsby for a US Gov site
  2. 2. Jesus Manuel Olivas jmolivas.com @jmolivas ——————————————— octahedroid.com Co-Founder
  3. 3. We are a professional services and consulting agency specializing in modern front-end tools, cloud native architectures, automation and CMS integrations.
  4. 4. Agenda > View Modes > GatsbyJS > Views ( Client side and SSR build time ) > Migration, YAML Content and Console Commands > Challenges
  5. 5. Challenges > Keep the same editorial experience > Build a secure, fast and easy to maintain site > Reduce the overhead of the infrastructure team > Provide a modern experience to visitors
  6. 6. The 80 / 20 rule > Migration covers 80% > YAML Content covers the 80% of the remaining 20% > Console commands covers the 80% of the remaining 20% > Manual entry for the remaining content tasks
  7. 7. Migration > Migrate plugins to scrap block content placed via context module and panels > Migrate content from single fields to Paragraphs > Extract images from WYSIWYG to Paragraphs > Avoid duplicate media entities when creating Paragraphs and Custom Block Types
  8. 8. YAML Content > Use YAML files to generate content ( i.e. pages exposed via views on D7 ) > Create then update nodes to force path alias > Reuse migrate plugins to scrap block content placed via context
  9. 9. Console Commands snippet > Convert PNG and GIF files as JPEG and update references on body fields. > Update path alias for certain Nodes > Set Taxonomies for certain Nodes > Update nodes for edge cases
  10. 10. Views > Add view to expose data client side > Connect the view with Solr engine > Enable GraphQL Views module > Call GraphQL endpoint via client side from Gatsby application
  11. 11. Views: src/components/search.js
  12. 12. Views > Add view using a reference via Paragraphs > Allow to pass a taxonomy as contextual filter > Allow to pass the number of nodes to return > Allow to select the React component to render ( i.e. list, teaser )
  13. 13. Views:
  14. 14. Views: Node Edit
  15. 15. View Mode > Allow to provide different presentations of field values using Field Formatters > Use Field Formatter provided by core or custom mode for this example we will use Smart trim > Customize Field Formatter options to display data as we want so use to the user
  16. 16. View Mode
  17. 17. View Mode: GraphQL query
  18. 18. View Mode: Twig Template
  19. 19. View Mode: Output
  20. 20. Gatsby: plugins > gatsby > gatsby-source-graphql > gatsby-link > gatsby-image > gatsby-plugin-sharp > gatsby-transformer-sharp > gatsby-source-filesystem > gatsby-plugin-theme-ui
  21. 21. Gatsby: gatsby-config.js
  22. 22. Gatsby: Query nodes
  23. 23. Gatsby: Create pages
  24. 24. DEMO
  25. 25. Thank you. Any Questions? @jmolivas | @octahedroidHQ

×