Burgerportaal

Omgevingsvariabelen

Variabele	Uitleg
ODRC_BASE_URL	De base url van de Publicatiebank waarmee gekoppeld moet worden. Meer informatie Bijvoorbeeld: https://publicatiebank.mijn-gemeente.nl
ODRC_API_KEY	De geheime sleutel voor de Publicatiebank waarmee gekoppeld moet worden. Meer informatie Bijvoorbeeld: VM2B!ccnebNe.M*gxH63*NXc8iTiAGhp
SEARCH_BASE_URL	De base url van de Zoekcomponent waarmee gekoppeld moet worden. Meer informatie Bijvoorbeeld: https://zoekcomponent.mijn-gemeente.nl
SEARCH_API_KEY	De geheime sleutel voor de Zoekcomponent waarmee gekoppeld moet worden. Meer informatie Bijvoorbeeld: VM2B!ccnebNe.M*gxH63*NXc8iTiAGhp
RESOURCES:PORTAAL_TITEL	De titel van het burgerportaal. Meer informatie Bijvoorbeeld: Open Mijn Gemeente
RESOURCES:GEMEENTE_NAAM	De naam van de gemeente die wordt gebruikt binnen het burgerportaal. Meer informatie Bijvoorbeeld: Mijn Gemeente
RESOURCES:GEMEENTE_LOGO_URL	Publiek URL waar het logo van de gemeente beschikbaar is. Meer informatie Bijvoorbeeld: https://www.mijn-gemeente.nl/logo.svg
RESOURCES:GEMEENTE_FAVICON_URL	Publiek URL waar het favicon van de gemeente beschikbaar is. Meer informatie Bijvoorbeeld: https://www.mijn-gemeente.nl/favicon.ico
RESOURCES:GEMEENTE_MAIN_IMAGE_URL	Publiek URL waar een hoge resolutie sfeerfoto van de gemeente beschikbaar is, die wordt opgenomen in alle pagina's. Meer informatie Bijvoorbeeld: https://www.mijn-gemeente.nl/main_img.jpg
RESOURCES:GEMEENTE_DESIGN_TOKENS_URL	Publiek URL waar het css-bestand met NL Design System tokens beschikbaar is, om het burgerportaal te stylen in gemeentehuisstijl. Meer informatie Bijvoorbeeld: https://unpkg.com/@gemeente/design-tokens/dist/index.css
RESOURCES:GEMEENTE_WEB_FONT_SOURCES	Publiek URL - of meerdere door spaties gescheiden publieke URL's - als verwijzing naar web-font-bestand(en) horend bij de gemeentehuisstijl. Meer informatie Bijvoorbeeld: https://fonts.mijn-gemeente.nl/custom-regular-font.woff2 https://fonts.mijn-gemeente.nl/custom-bold-font.woff2. Een enkele verwijzing naar de locatie waar alle font-style-bestanden staan kan ook: https://fonts.mijn-gemeente.nl/custom-font/. Let op: deze configuratie is alleen bedoeld om de font-bestanden onder CORS te kunnen inladen. Verwijzingen naar bestanden zullen ook in de theme styling onder een @font-face ruleset gespecificeerd moeten worden.
RESOURCES:GEMEENTE_THEME_NAAM	De naam van de selector uit het css-bestand die wordt gebruikt om de NLDS-tokens te scopen. Meer informatie Bijvoorbeeld: gemeente-theme
RESOURCES:GEMEENTE_WEBSITE_URL	Het website-adres van de gemeente, om vanuit het burgerportaal naar de website van de gemeente te linken. Meer informatie Bijvoorbeeld: https://www.mijn-gemeente.nl
RESOURCES:GEMEENTE_PRIVACY_URL	Het website-adres waar de privacyverklaring van de gemeente staat. Wordt gebruikt om vanuit burgerportaal naar te linken. Meer informatie Bijvoorbeeld: https://www.mijn-gemeente.nl/privacy
RESOURCES:GEMEENTE_CONTACT_URL	Het website-adres waar contactgegevens van de gemeente te vinden zijn. Wordt gebruikt om vanuit burgerportaal naar te linken. Meer informatie Bijvoorbeeld: https://www.mijn-gemeente.nl/contact
RESOURCES:GEMEENTE_WELKOM	De in HTML opgemaakte welkomsttekst voor op de homepage. Meer informatie Let op: het HTML-fragment moet afhankelijk van het formaat (bijvoorbeeld JSON of YAML) op de juiste manier 'escaped' / geformateerd worden om deze als omgevingsvariabele te kunnen toevoegen. De volgende HTML-elementen kunnen hier gebruikt worden: <h1>, <h2>, <p>, <a>, <ul>, <ol>, <li>
RESOURCES:TOEGANKELIJKHEIDSVERKLARING_REGISTER_URL	Het website-adres van het overheidsregister van toegankelijkheids­verklaringen. Wordt gebruikt om vanuit burgerportaal naar te linken. Meer informatie Waarschijnlijk: https://www.toegankelijkheidsverklaring.nl/register
DOWNLOAD_TIMEOUT_MINUTES	Het aantal minuten dat het downloaden van bestanden maximaal mag duren. (default waarde is 10)
SITEMAP_CACHE_DURATION_HOURS	Het aantal uur dat de sitemap in de cache bewaard wordt. (default waarde is 23)

Cross-Origin Resource Sharing (CORS) en Cross-Origin-Embedder-Policy (COEP)

Deze applicatie maakt gebruik van Cross-Origin-Embedder-Policy (COEP: require-corp), maar de externe resources (afbeeldingen en stylesheets) worden geladen onder CORS (met cross-origin-attributen). Dat betekent dat die externe resources de juiste Access-Control-Allow-Origin-header moeten bevatten.

Alleen moet vanwege COEP voor het favicon ook de Cross-Origin-Resource-Policy-header gezet worden, omdat sommige browsers bij <link rel=icon crossorigin> het cross-origin-attribuut negeren en de resource geladen wordt in zogenaamde no-cors mode.

Headers:

Voor alle externe resources moet Access-Control-Allow-Origin: * of bijvoorbeeld Access-Control-Allow-Origin: *.mijn-gemeente.nl ingesteld worden.

En voor het favicon naast de CORS-header ook CORP-header Cross-Origin-Resource-Policy: cross-origin instellen.

Als een resource niet correct is geconfigureerd, zal deze niet geladen worden door de browser. Let op: met uitzondering van de geconfigureerde Web fonts kunnen geconfigureerde externe resources geen verwijzingen bevatten naar andere externe resources of data URIs.

NLDS – NL Design System

De interface van het Burgerportaal is opgebouwd met componenten uit het NL Design System (NLDS). Dit is een verzameling ontwerp- en ontwikkelrichtlijnen voor digitale overheidsdiensten in Nederland. Door gebruik te maken van NLDS-componenten blijft de gebruikerservaring consistent en toegankelijk, in lijn met de standaarden van de overheid.

🔗 Meer informatie: Introductie NLDS

Aanpasbaarheid voor gemeentes

Dankzij NLDS kunnen verschillende installaties van het Burgerportaal eenvoudig worden aangepast aan de huisstijl van diverse gemeentes. Dit wordt mogelijk gemaakt door het gebruik van design tokens, die de stijlkenmerken zoals kleuren, typografie en componenten bepalen.

Implementatie op basis van Utrecht Design System

Op dit moment is de implementatie gebaseerd op alleen het Utrecht Design System, een specifieke variant van NLDS. Voor een correcte weergave en de beste resultaten moeten ten minste de Brand en Common tokens correct ingevuld zijn.

Gebruikte CSS-componenten

Component	Storybook
Document (utrecht-document)	🔗 Design Tokens
Surface (utrecht-surface)	🔗 Design Tokens
Page (utrecht-page)	🔗 Design Tokens
Page header (utrecht-page-header)	🔗 Design Tokens
Page content (utrecht-page-content)	🔗 Design Tokens
Page footer (utrecht-page-footer)	🔗 Design Tokens
Navigation bar (utrecht-nav-bar)	🔗 Design Tokens
Link (utrecht-link)	🔗 Design Tokens
Skip link (utrecht-skip-link)	🔗 Design Tokens
Article (utrecht-article)	🔗 Design Tokens
Heading (utrecht-heading)	🔗 Design Tokens
Paragraph (utrecht-paragraph)	🔗 Design Tokens
Unordered list (utrecht-unordered-list)	🔗 Design Tokens
Button (utrecht-button)	🔗 Design Tokens
Form field (utrecht-form-field)	🔗 Design Tokens
Form label (utrecht-form-label)	🔗 Design Tokens
Textbox (utrecht-textbox)	🔗 Design Tokens
Table (utrecht-table)	🔗 Design Tokens
Logo (utrecht-logo)	🔗 Design Tokens

GPP Woo Theme

Naast de bovenstaande componenten bestaat de interface van het Burgerportaal ook uit verschillende custom componenten en elementen. Deze (gpp-woo) componenten en elementen kunnen via een aantal voorgedefinieerde css-variabelen worden aangepast voor een uniforme uitstraling binnen de huisstijl van de gemeente.

Ter referentie gpp-woo-theme.