Emerson CDN

Centrale distributie van fonts, stijlen, assets en interactie voor alle Emerson sites.

Production: https://cdn.emerson.agency
Development: http://localhost:4320

Structuur

fonts.css

Self-hosted fonts: Work Sans, IBM Plex Sans.

/css/fonts.css

tokens.css

Design tokens: kleuren, typografie, spacing.

/css/tokens.css

base.css

Reset, typography, layout, buttons, cards.

/css/base.css

components.css

Interactieve componenten: modal, tabs, dropdown.

/css/components.css

emerson.js

Interactie: menu, accordion, tabs, modal, dropdown, smooth scroll.

/js/emerson.js

Work Sans

Headings. Variable font, weights 300-600.

/fonts/work-sans/WorkSans-Variable.woff2

IBM Plex Sans

Body text. Variable font + italic.

/fonts/ibm-plex-sans/

Brand

Logo's en favicon.

/brand/logo.svg, favicon.svg

Photography

Brand photography collectie.

/images/photography/

Photos

Click photoblog afbeeldingen.

/photos/

Gebruik

Astro Sites (met TypeScript helper)

// In Astro component
import { cdn } from '../../../shared/lib/cdn';

// CSS
<link rel="stylesheet" href={cdn.css('fonts.css')} />
<link rel="stylesheet" href={cdn.css('tokens.css')} />

// Images
<img src={cdn.image('photography/R0002290.jpg')} />
<img src={cdn.brand('logo.svg')} />

Static HTML

<!-- Production -->
<link rel="stylesheet" href="https://cdn.emerson.agency/css/fonts.css">
<link rel="stylesheet" href="https://cdn.emerson.agency/css/tokens.css">
<link rel="stylesheet" href="https://cdn.emerson.agency/css/base.css">

<!-- Development -->
<link rel="stylesheet" href="http://localhost:4320/css/fonts.css">

Componenten Demo

Accordion

De CDN bevat alle gedeelde fonts, stijlen en JavaScript voor Emerson sites. Door deze centraal te hosten, hoef je geen stijlen te kopiëren en laden alle sites dezelfde fonts.

Self-hosted fonts zijn sneller (geen externe requests naar Google), beter voor privacy, en geven meer controle over caching. De variable fonts zijn ook kleiner dan losse weight files.

Wijzig sites/design-system/tokens/tokens.json en run npm run tokens:build. De CDN tokens.css wordt automatisch bijgewerkt.