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.

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

20. @eeacms / volto-description-block
https://youtu.be/JG_p85tOZi0

21. @eeacms / volto-call-to-action
https://youtu.be/rCWNeM910aw

22. @eeacms / volto-timeline-block

23. @eeacms / volto-tabs-block

24. @eeacms / volto-accordion-block

25. @eeacms / volto-columns-block

26. @eeacms / volto-group-block

27. @eeacms / volto-block-divider

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

39. @eeacms / volto-progress-block

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

45. github.com/eea
eea.github.io
eea.github.io/eea-storybook
npmjs.com/search?q=@eeacms
eea.europa.eu
eaudeweb.ro
youtube.com/playlist?list=PLl943HsWij4gOY6
AQL4vCHntCiuH3Y5Z6
Thank you!