intl

name	intl
description	Internationalization rules for multi-language websites. Use when working on localized text fields in the CMS, Intl formatting (dates, numbers, currencies, lists) in Astro components, or any locale-aware code.

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:

1. Never hardcode text strings - All user-facing text must be translatable
2. Update the CMS labels global - Add necessary fields to /cms/src/globals/labels.ts
   • Use the global group for common, site-wide labels (e.g., "show-more", "close", "loading")
   • Use specific groups for scoped labels (e.g., articles for article-related text, contact for contact forms)
3. Access labels in components - Use const { labels } = globalState
4. Example usage: labels.articles['written-by'] or labels.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

const formatDate = (date: Date | string) =>
  new Intl.DateTimeFormat(locale, {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  }).format(new Date(date));

Lists

const formatList = (items: string[], type: Intl.ListFormatType = 'conjunction') =>
  new Intl.ListFormat(locale, { type }).format(items);

Currency & Numbers

const formatCurrency = (value: number, currency = 'EUR') =>
  new Intl.NumberFormat(locale, {
    style: 'currency',
    currency,
    minimumFractionDigits: 2,
  }).format(value);