Internationalization Rules
CMS: Localized Fields
- •All text fields (e.g. labels, titles) should have
localized: true
Web: Labels & Translations
This is a multi-language website. When adding labels or text to Astro components:
- •Never hardcode text strings - All user-facing text must be translatable
- •Update the CMS labels global - Add necessary fields to
/cms/src/globals/labels.ts- •Use the
globalgroup for common, site-wide labels (e.g., "show-more", "close", "loading") - •Use specific groups for scoped labels (e.g.,
articlesfor article-related text,contactfor contact forms)
- •Use the
- •Access labels in components - Use
const { labels } = globalState - •Example usage:
labels.articles['written-by']orlabels.global['show-more']
- •When adding labels to the CMS, ensure you use all of them. Delete unused labels after implementation.
Web: Formatting with Intl APIs
Use the built-in JavaScript Intl APIs for locale-aware formatting. Never use third-party libraries or manual string concatenation.
The active locale must come from the global state (const { locale } = globalState). Never hardcode a locale string.
Date & Time
ts
const formatDate = (date: Date | string) =>
new Intl.DateTimeFormat(locale, {
day: '2-digit',
month: 'long',
year: 'numeric',
}).format(new Date(date));
Lists
ts
const formatList = (items: string[], type: Intl.ListFormatType = 'conjunction') =>
new Intl.ListFormat(locale, { type }).format(items);
Currency & Numbers
ts
const formatCurrency = (value: number, currency = 'EUR') =>
new Intl.NumberFormat(locale, {
style: 'currency',
currency,
minimumFractionDigits: 2,
}).format(value);