Banner: Add from RuntimeConfig
Background
In the last sprint we added prework for a configurable banner at the home page (HomePageComponent) #907.
This issue is about reading the runtime config for banners and serving a banner to the home page that matches this config.
The content of the banner will come from markdown.
For the moment only the elements seen in the figma files need styling. <b>
, <em>
for bold, <a>
for links.
What to do?
-
Create a Module RccRunTimeBannerModule
that reads the runtime config and adds an appropriate banner to the HP-
Setup a config format for the banner and register/request it -
Read the runtime config (RccPublicRuntimeConfigService) -
Add the banner component from below to the homepage (RccBannerService)
-
-
Create and style the Banner component -
Use the markdown from the config to render the content in the appropriate language (depends on #910) -
Set the background according to the config -
Add styles for <b>
and<em>
(both bold) and<a>
(underline) (see figma) -
No overflow (box size increases with text)
-
RccRunTimeBannerModule
Adding the banner, Reading the runtime config is done by RccPublicRuntimeConfigService
. See ExampleRuntimeConfigModule
for an example.
Since runtime data is only available after deployment, you can use and adjust MockRccPublicRuntimeConfigModule
to provide the data you need during development.
Adding a banner to the homepage is the job of RccBannerService
(Its a Subject you can use .next() on to set the current banner component. See ExampleBannerService
for an example.
What does the configuration data for a banner look like?
That's up to you (will provide a suggestion below)
In any case a configuration should provide the following items:
-
The background color for the banner (as a HierarchicalColor: 'primary', 'seconday' ... or as a CategoricalColor 'create', 'share', 'receive' ...)
-
The text content of the banner provided as markdown for all available languages (
RccTranslationService.availableLanguages()
)
I suggest something like this (feel free to improve on this):
// When announcing that you need a new value in the runtime config.
providers : [
requestPublicRunTimeConfigValue({
path: 'homepage.banner',
description: 'Home page banner config. Use .color for the background and [lang] for markdown content in lang',
type: 'object',
})
]
The expected value of the banner config, once you get it via should then look something like this:
{
"homepage": {
"banner":
// `rccPublicRuntimeConfigService.get('homepage.banner')` will return this:
{
"color": 'primary',
"content": {
"de": '__Deutscher__ Markdown-Inhalt',
"en": '__English__ markdown content'
}
}
}
}
}
The Module making use of the config has to check if configuration data is sufficient and handle cases where it is not. In case of the banner, if no banner config is present, just do not add a banner.
Create and style the Banner component
I do not know what the best way is to hand the config data over to the component. I guess a Service, that the component injects in the constructor, should do the trick.
Clickup: https://app.clickup.com/t/86bvzn8qt