KitchenAsty

Appearance

🌐 Internationalization ​

The KitchenAsty storefront supports multiple languages using i18next with React.

🗺️ Supported Languages ​

CodeLanguage
en🇬🇧 English
es🇪🇸 Spanish
fr🇫🇷 French
de🇩🇪 German
it🇮🇹 Italian
pt🇵🇹 Portuguese

⚙️ How It Works ​

  • 📁 Translations are stored as JSON files in packages/storefront/src/i18n/locales/
  • 💾 The selected language is persisted to localStorage
  • 🏷️ The <html lang> attribute updates automatically on language change
  • 🔄 Fallback language is English

🔑 Translation Keys ​

Translations are organized by domain:

NamespaceContent
common🔗 Shared strings — loading, errors, buttons
nav🧭 Navigation items
home🏠 Homepage hero and features
auth🔐 Login and registration forms
menu🍽️ Menu browsing and search
cart🛒 Shopping cart
checkout💳 Checkout flow
orders📦 Order history and status
reservations🪑 Table booking
reviews⭐ Review submission and display

➕ Adding a New Language ​

  1. Create a new locale file:
bash
cp packages/storefront/src/i18n/locales/en.json packages/storefront/src/i18n/locales/ja.json

  1. Translate all keys in the new file.

  2. Register the language in packages/storefront/src/i18n/index.ts:

typescript
import ja from './locales/ja.json';

// Add to resources
resources: {
  // ... existing languages
  ja: { translation: ja },
}
  1. Add the language option to the storefront language picker component.

🤖 Translation Script ​

For bulk translation, you can use automated tools:

bash
# Example: translate en.json to Japanese using a translation API
npx tsx scripts/translate.ts --from en --to ja

🧩 Using Translations in Components ​

tsx
import { useTranslation } from 'react-i18next';

function MenuPage() {
  const { t } = useTranslation();
  return <h1>{t('menu.title')}</h1>;
}

TIP

The admin dashboard currently uses English only. Contributions for admin i18n are welcome.