UI strings and translations

How the translation system works, what strings are built in, and how to add new ones when you extend the UI.

All text that appears in the Dustavez UI chrome — navigation labels, search strings, the table of contents heading, and so on — is driven by a translation dictionary in src/lib/i18n.ts. Content authors never hardcode UI text in component templates.

Built-in strings

The following keys are translated for all six built-in locales:

How components access translations

The DocsLayout.astro component resolves the current locale from the page slug and calls t() to get the translation function:

// src/layouts/DocsLayout.astro (simplified)
import { getTranslations, type TFunction } from '@/lib/i18n';

const locale = getLocale(entry.id);
const t: TFunction = getTranslations(locale);

t is then passed as a prop to child components that render text. Components that receive it type it as TFunction:

// A component that renders translated text
interface Props {
  t: TFunction;
  // ...other props
}

const { t } = Astro.props;

<!-- Inside the template -->
<span>{t('toc.title')}</span>

Adding a new string

If you add a component that renders UI text, follow these steps:

1. Add the key to all six locale dictionaries in src/lib/i18n.ts:

const translations = {
  en: {
    // ...existing keys
    'myComponent.label': 'Learn more',
  },
  fr: {
    // ...existing keys
    'myComponent.label': 'En savoir plus',
  },
  es: {
    // ...existing keys
    'myComponent.label': 'Más información',
  },
  de: {
    // ...existing keys
    'myComponent.label': 'Mehr erfahren',
  },
  ja: {
    // ...existing keys
    'myComponent.label': 'もっと見る',
  },
  hi: {
    // ...existing keys
    'myComponent.label': 'और जानें',
  },
};

2. Accept t as a prop in your component and pass it from DocsLayout.astro:

import type { TFunction } from '@/lib/i18n';

interface Props {
  t: TFunction;
}
const { t } = Astro.props;

<!-- src/layouts/DocsLayout.astro — add t={t} to your component -->
<MyComponent t={t} />

3. Use t('myComponent.label') in the template — never hardcode the string.

Naming conventions

Use a dot-separated namespace matching your component name:

toc.title        ✓   namespaced to table of contents
search.placeholder ✓ namespaced to search
myComponent.action ✓ namespaced to your component

label            ✗   too generic, collides easily

Keys are lowercase with dots — no camelCase, no underscores.