UI templating & configuration

[fxprunayre]

This issue is related to work made on the formatting micro service and the https://github.com/geonetwork/geonetwork-ui

We want to share common layout aspects between application modules. In GN4, the "Theme" is defined by:

• HTML base page created from XSLT (mainly to inject application UI config)
• HTML templates used by the Angular application
• HTML/XML/JSON/CSV produced by formatters used standalone or embedded in Angular
• Admin > Settings > CSS - A file with variables
• CSS/LESS files
• JSON UI configuration

The application is working as:

• client side only + JSON API (eg. Angular view),
• client side + HTML API (eg. advanced view, Editor),
• Server side only (eg. landing page).

In current requirements, we probably need the same cases:

• Client side only + JSON API eg. simple webcomponent
• Client side + HTML API eg. complete application
• Server side only mode eg. OGC API Records - catalog presentation page, search page, search results, record view

How can we share the layout config for the different modes. The questions are:

• How can we define a GeoNetwork theme?
  • CSS variables?
  • ...
• How to define a UI configuration? Do we keep current JSON config?
• Can we adopt a templating technology which can run/use on client and server side?
• Can pure HTML page like OGC API Records can be nicely "augmented" by Angular when running in the browser? All informations displayed in both modes but more interactive eg. links to map viewer, map & data browser, ...
• Global template for error pages 403, 404, 500

Technology options:

• Embed Angular widgets in a server side rendered html page including header-footer
• Server side Angular
• xslt/jsp/freemarker
• ...