Веб-сайт конференции Альт

Сайт с интернационализацией, поддерживающий русский (ru), английский (en) и арабский (ar) языки с региональным контентом и поддержкой RTL/LTR направления текста. Сделано в рамках ШРИ Яндекса 2025 с любовью ❤️

Возможности

🌍 Интернационализация (i18n)

• Поддержка нескольких языков: русский (ru), английский (en), арабский (ar)
• Региональные локали: ru-RU, ru-BY, ru-KZ
• Динамическая загрузка контента: переводы загружаются по страницам
• Подход Code First: использование react-intl с Format.JS
• Статическое извлечение сообщений: Babel плагин для оптимизации продакшена

🧭 Локализация (l10n)

• Определение региона: моковый геосервис с возможностью переопределения в разработке
• Автоматические редиректы: на основе региона и языковых предпочтений пользователя
• Сохранение в куки: выбор языка сохраняется в куки
• Определение языка браузера: fallback на язык браузера
• Локаль в URL: локаль в пути URL (например, /ru-RU/, /en/, /ar/)

🎨 UI/UX возможности

• Поддержка RTL/LTR: автоматическое направление текста на основе локали
• Селектор языка: выпадающий список с переключением языков
• Региональные статьи: контент, адаптированный под регион пользователя
• Адаптивный дизайн: работает на всех размерах устройств
• Современный UI: чистый, доступный интерфейс

Технологический стек

• React 19 с TypeScript
• React Router DOM для роутинга с учетом локали
• React Intl для интернационализации
• Format.JS для форматирования сообщений
• Vite для сборки
• Babel с плагином formatjs для оптимизации
• ESLint с правилами formatjs для качества кода

Структура проекта

src/
├── components/          # Переиспользуемые UI компоненты
│   ├── lang-select/     # Компонент выбора языка
│   └── layout/          # Основной layout компонент
├── constants/           # Константы и конфигурации приложения
├── hooks/              # Пользовательские React хуки
│   └── useLocale.ts    # Хук управления локалью
├── lib/                # Утилитарные библиотеки
│   ├── geo-service.ts  # Сервис определения региона
│   └── i18n.ts         # Утилиты интернационализации
├── pages/              # Компоненты страниц
│   ├── home/           # Главная страница
│   └── article-*/      # Страницы статей
├── providers/          # React контекст провайдеры
│   └── IntlProvider.tsx # React Intl провайдер
└── types/              # TypeScript определения типов

Начало работы

Требования

• Node.js 18+
• npm или yarn

Установка

npm install

Разработка

npm run dev

Сборка

npm run build

Предпросмотр

npm run preview

Линтинг

npm run lint

Конфигурация

Поддерживаемые локали

Приложение поддерживает следующие локали:

• ru - русский (регион по умолчанию: RU)
• ru-RU - русский (Россия)
• ru-BY - русский (Беларусь)
• ru-KZ - русский (Казахстан)
• en - английский
• ar - арабский

Определение региона

Геосервис предоставляет определение региона со следующим приоритетом:

1. Query параметр URL devOverrideRegion (для разработки)
2. Регион по умолчанию (RU)

Приоритет определения языка

1. Локаль в пути URL
2. Предпочтение в куки
3. Язык браузера
4. Локаль по умолчанию (en)

Использование

Переключение языка

Пользователи могут переключать языки с помощью селектора языка в заголовке. Выбор сохраняется в куки и сохраняется между сессиями.

Региональный контент

На главной странице отображаются региональные статьи на основе определенного региона пользователя:

• Россия (RU): статья о русской локализации
• Беларусь (BY): статья о двуязычном интерфейсе
• Казахстан (KZ): статья о русско-казахской локализации
• Арабские регионы: статья об арабской локализации
• Другие регионы: статья об английском как универсальном языке

Структура URL

• / - редирект на локаль по умолчанию
• /{locale}/ - главная страница в определенной локали
• /{locale}/article/{article-name} - страницы статей

Переопределение в разработке

Для тестирования разных регионов во время разработки добавьте query параметр:

http://localhost:3000/?devOverrideRegion=BY

Реализация интернационализации

Файлы переводов

• translations.json - основной файл переводов со всеми поддерживаемыми языками
• Статические ID сообщений для совместимости с babel-plugin-formatjs

Формат сообщений

{
  "message.id": {
    "ru": "Русский текст",
    "en": "English text",
    "ar": "النص العربي"
  }
}

Использование React Intl

import { FormattedMessage } from 'react-intl';

<FormattedMessage 
  id="message.id" 
  defaultMessage="Текст по умолчанию"
  values={{ variable: "значение" }}
/>

Направление текста

Направление текста автоматически устанавливается на основе локали:

• Арабские локали: RTL (справа налево)
• Другие локали: LTR (слева направо)

Оптимизация сборки

Продакшен сборка

• Переводы компилируются и оптимизируются
• Русские исходные тексты удаляются из продакшен бандла
• Разделение кода для vendor и intl библиотек
• Оптимизация статических ресурсов

Конфигурация Babel плагина

babel-plugin-formatjs настроен для:

• Извлечения ID сообщений с SHA512 хешированием
• Генерации AST для оптимизированного рантайма
• Удаления исходных сообщений в продакшене

Вклад в проект

Добавление новых языков

1. Добавьте локаль в SUPPORTED_LOCALES в src/constants/index.ts
2. Добавьте название бренда в BRAND_NAMES в src/constants/brand-names.ts
3. Добавьте переводы в translations.json
4. Обновите маппинг направления текста при необходимости

Добавление новых статей

1. Создайте компонент статьи в src/pages/article-{name}/
2. Добавьте роут в src/App.tsx
3. Добавьте переводы для контента статьи
4. Обновите маппинг региональных статей при необходимости

Написание READ.ME

– Cursor AI

Лицензия

Этот проект лицензирован под MIT License.