branding - inbo/vlaams-biodiversiteitsportaal GitHub Wiki

The branding folder contains all the files needed to build the static landing page and the custom UI branding for the portal.

The branding stuff can be built by running:

cd branding
npm install --dev
npm run build

This will generate a static version of the website in the dist folder.

For a hot-reloading development server, you can run:

npm run dev

But be aware that changes to the pages folder will not be picked up automatically.

Currently, some static pages can be added in the ./branding/pages folder. Any html or markdown files placed here, wil be templated into a full static page, that will be served together with the rest of the portal. Do note that support is very basic, long-term we will replace it with some kind of CMS.

The atlas uses a custom library to maintain a common look and feel across all the different service. It works by fetching a few html partials at startup, that are used to template the different pages, served by de individual services. Those partials being:

• head.html
• banner.html
• footer.html

The relevant configuration can be found in ./config/common under the skin and headerAndFooter options.

In addition to the html partials, some common CSS and JS files are also expected. Have a look at vite.config.js to get an idea for all the assets being built.

In order to modify the html files, based on the service config, a TagLib library is used that replaces certain values, surrounded by ::. Because we use path based routing, from a single domain, we do not really need to use this. All our paths are really relative to domain.

One exception is the ::loginStatus:: which is used to add the correct css classes based on the login status of the user. For a more flexible and fleshed out example of how branding can be configured, have a look at https://github.com/living-atlases/base-branding. This was the initial inspiration for our approach.