EEA & Eau de Web Front-end add-ons - Plone conference 2023
Download as PPTX, PDF0 likes34 views
This document summarizes various Volto add-ons created by EEA and Eau de Web for customizing the front-end of Plone sites. It describes add-ons for theming, widgets, layout/styling, data visualization, text editing, and other functionalities. Over 100 Volto add-ons are maintained in GitHub repositories and published to NPM. The add-ons are used to build websites like eea.europa.eu and provide features like maps, charts, footnotes, and metadata handling.
EEA & Eau de Web Front-end add-ons - Plone conference 2023
- 1. EEA & Eau de Web: Front-end add-ons Plone conference 2023 Alexandru Ghica Alin Voinea
- 2. EEA in numbers: ◆ Volto add-ons: ~100 ◆ Volto based websites: ~20 ● https://www.eea.europa.eu ● https://biodiversity.europa.eu ● https://forest.eea.europa.eu ● https://climate-adapt.eea.europa.eu ● … Source code: ◆ GitHub ● https://github.com/eea/?q=volto- ◆ Npm ● https://npmjs.com/search?q=@eeacms/volto- EEA & Eau de Web: Front-end add-ons
- 3. Theming volto-eea-design-system ● https://eea.github.io ○ Docusaurus: https://eea.github.io/volto-eea-design-system ○ Storybook: https://eea.github.io/eea-storybook ● https://github.com/eea/volto-eea-design-system volto-eea-website-theme ● https://www.eea.europa.eu ● https://github.com/eea/volto-eea-website-theme … more themes: ● https://github.com/eea?q=theme
- 4. Overview Theming volto-eea-design-system | volto-eea-website-theme Widgets volto-widget-geolocation | volto-widget-temporal-coverage | volto-widget-theme-picker | volto-elastic-csv-widget | volto-widget-toggle Layout and styling volto-tabs-block | volto-accordion-block | volto-metadata-block | volto-columns-block | volto-group-block | volto-block-divider | volto-block-data-figure | volto-pdf-block | volto-block-style | volto-resize-helper | volto-listing-block | volto-statistic-block | volto-call-to-action-block | volto-citation | volto-description-block | volto-hero-block | volto-nextcloud-video-block | volto-quote-block | volto-tags-block | volto-timeline-block Data visualization volto-plotlycharts | volto-tableau | volto-openlayers-map | volto-eea-map | volto-datablocks | volto-embed Other functionalities volto-matomo | volto-banner | volto-corsproxy | volto-datahub | volto-progress-block | volto-searchlib | volto-taxonomy | volto-toolbar-actions | volto-workflow-progress Add-on bundle volto-eea-kitkat | eea.kitkat Text editing volto-slate-footnote | volto-slate-zotero | volto-slate-dataentity | volto-slate-label | volto-slate-metadata-mentions
- 5. Text editing add-ons / Slate extensions ● volto-slate-footnote ● volto-slate-zotero ● volto-slate-dataentity ● volto-slate-label ● volto-slate-metadata-mentions
- 6. @eeacms / volto-slate-metadata-mentions Dynamically insert any Document metadata within your slate text blocks. Combine multiple metadata in one slate text block. Apply styles. Preview metadata value. https://youtu.be/K8vy3A0_zaI
- 7. @eeacms / volto-slate-footnote Annotate text within Volto Slate text editor. Footnotes block.
- 8. @eeacms / volto-slate-zotero Footnotes extension. Integration with Zotero and OpenAire. Backend addon: ● eea.zotero
- 9. @eeacms / volto-slate-label Type of label Label pointing Tooltip position Tooltip type Tooltip size Always show tooltip
- 10. @eeacms / volto-slate-dataentity Slate addon that allows integration with the data connectors provided by eea.api.dataconnector: ● CSV ● SQL endpoint ● Elastic Select/query from data tables. Backend addon: ● eea.api.dataconnector
- 11. Widgets add-ons ● volto-widget-geolocation ● volto-widget-temporal-coverage ● volto-elastic-csv-widget ● volto-widget-theme-picker ● volto-widget-toggle
- 12. @eeacms / volto-widget-geolocation Geolocation widget GeoNames.org integration Lookup taxonomies Geo tag groups Backend addons: ● eea.geolocation ● collective.taxonomy https://www.geonames.org
- 13. @eeacms / volto-widget-temporal-coverage ● Add years or period: ○ 2010 ○ 2012, 2015 ○ 2010-2021 ● Brain indexed data for a period: ○ temporal_coverage: {'2010': '2010', '2011': '2011', '2012': '2012', '2013': '2013', '2014': '2014', '2015': '2015', '2016': '2016', '2017': '2017', '2018': '2018', '2019': '2019', '2020': '2020', '2021': '2021'}
- 14. @eeacms / volto-elastic-csv-widget ● widget that query an Elastic endpoint and expose the results in CSV ● can be used as data source for visualizations
- 15. @eeacms / volto-widget-theme-picker Allows selection of the preset Volto styles, primary, secondary etc.
- 16. @eeacms / volto-widget-toggle Replace any checkbox with a toggle button within the edit forms.
- 17. Layout and styling add-ons ● volto-metadata-block ● volto-description-block ● volto-call-to-action-block ● volto-statistic-block ● volto-timeline-block ● volto-tabs-block ● volto-accordion-block ● volto-columns-block ● volto-group-block ● volto-block-divider ● volto-nextcloud-video-block ● volto-citation ● volto-hero-block ● volto-quote-block ● volto-listing-block ● volto-resize-helper
- 18. @eeacms / volto-metadata-block Metadata block Metadata section block
- 19. @eeacms / volto-statistic-block & countup https://youtu.be/Gqu7vh-Zpo8
- 28. volto-nextcloud-video-block This add-on allows playback only from Nextcloud videos, from a selection of allowed domains.
- 29. Data visualization add-ons ● volto-plotlycharts ● volto-tableau ● volto-eea-map ● volto-embed ● volto-openlayers-map ● volto-datablocks ● eea.api.dataconnector
- 30. @eeacms / volto-plotlycharts Plotly Charts and Plotly Chart Editor integration with Volto. Registers a ‘VisualizationView’ component for a content type named 'Visualization'. ● volto-elastic-csv-widget ● eea.api.dataconnector ○ CSV ○ SQL endpoint ○ Elastic https://plotly.com/python
- 31. @eeacms / volto-eea-map Integration with ArcGIS maps. Provides extensive configuration of the ArcGIS maps. Parameters for the data connection are stored on the content object and automatically loaded. Available blocks: “EEA Embed Map” and “EEA Map”. Backen adon: ● eea.api.dataconnector
- 32. @eeacms / volto-tableau Integration with Tableau charts and dashboards. Configuration options available. Available blocks: “Tableau” and “Embed EEA Tableau visualization” Backen adon: ● eea.api.dataconnector
- 33. @eeacms / volto-embed Replaces the Map default block. Data protection component for GDPR compliance.
- 34. @eeacms / volto-datablocks Base addon for other visualization addons: ● volto-tableau ● volto-plotlycharts ● volto-eea-map Helper functions Blocks to construct data tables and various integrations Volto widgets data oriented Data connectors for Elastic, SQL, ArcGIS Tabular data - query, filter, display
- 35. @eeacms / volto-openlayers-map - OpenLayers components - Helper for block creation - Custom complex maps can be created
- 36. Other functionalities ● volto-toolbar-actions ● volto-workflow-progress ● volto-progress-block ● volto-banner ● volto-matomo ● volto-corsproxy ● volto-taxonomy ● volto-searchlib ● volto-datahub
- 37. @eeacms / volto-toolbar-actions https://youtu.be/Z5JPxKAxmvs Create toolbar actions via portal actions.
- 38. @eeacms / volto-workflow-progress Customize workflow state's percentage. Backend addon: ● eea.progress.workflow https://youtu.be/MV2_23_dBkc
- 40. @eeacms / volto-banner Display a banner on top of the page. Can be set to be appear only authenticated users. Control panel tool for customisation. Rancher integration to display status.
- 41. @eeacms / volto-matomo ● integrates Matomo with Volto sites ● multiple Matomo servers can be setup ● Europa Analytics - European Commission
- 42. @eeacms / volto-corsproxy This package enables fetching data from third-party servers through the Volto HTTP server, bypassing any CORS security restrictions imposed by the browser. The proxied destinations are configured via settings or a dedicated environment variable.
- 43. @eeacms / volto-taxonomy Control panel tool for collective.taxonomy. Backend addon: collective.taxonomy
- 44. Add-on bundle ● Frontend bundle ○ volto-eea-kitkat ○ 35 add-ons ● Backend bundle ○ eea.kitkat ○ 15 add-ons