Burgerportaal

Omgevingsvariabelen

Variabele	Uitleg
ODRC_BASE_URL	De base url van de ODRC (Registratiecomponent) waarmee gekoppeld moet worden. Meer informatie Bijvoorbeeld: https://odrc.mijn-gemeente.nl
ODRC_API_KEY	De geheime sleutel voor de ODRC (Registratiecomponent) waarmee gekoppeld moet worden. Meer informatie Bijvoorbeeld: VM2B!ccnebNe.M*gxH63*NXc8iTiAGhp
RESOURCES:GEMEENTE_NAAM	De naam van de gemeente die wordt gebruikt binnen het burgerportaal. Meer informatie Bijvoorbeeld: Mijn
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_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: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.

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