Routing & Internationalization

AstroGlass uses Astro’s file-based routing system combined with a custom internationalization (i18n) strategy.

Page Routing

Pages are located in src/pages/. The folder structure determines the URL path.

For localized pages, we use separate directories:

Theme Demo Routing

Theme pages are generated dynamically from the theme registry. Adding a theme to src/config/themes.ts with enabled: true automatically creates a route at /{themeId}.

Documentation Routing

Documentation pages live in src/content/docs/[lang]/:

The URL for documentation is automatically generated based on the file path, e.g., /docs/en/getting-started/introduction.

Internationalization (i18n)

Translations are handled in two ways:

1. Dynamic Page Routing: A centralized src/pages/[...lang]/ directory handles all route permutations dynamically via getStaticPaths().
2. UI Strings: Centralized JSON files in src/locales/.

UI Translations

Common strings (nav items, buttons, section text, etc.) are stored as JSON files organized by section:

src/locales/
├── en/
│   ├── common.json
│   ├── hero.json
│   ├── features.json
│   ├── pricing.json
│   ├── contact.json
│   ├── privacy.json
│   ├── terms.json
│   └── ... (19 files total)
├── ru/
│   ├── common.json
│   ├── hero.json
│   └── ...

Use the useTranslations helper in components:

---
import { useTranslations } from '../utils/i18n';
import { getLocaleFromUrl } from '../utils/locale-utils';

const locale = getLocaleFromUrl(Astro.url);
const t = useTranslations(locale);
---
<p>{t('hero.title')}</p>
<p>{t('pricing.tier2Name')}</p>

Translation keys support dot notation for nested values. The common.json keys are spread at the root level, while other files are namespaced by their filename (e.g., hero.title, pricing.plans).

Adding a New Language