skills.rest
podcodar
podcodarOFFICIAL
Explore all skills by this author →
WebsiteGitHub

astro-i18n

Implement Astro i18n routing with locale detection and cookie-based language persistence.

7|1|Updated Jul 27, 2021
Search Tags:#typescript#i18n#translations#astro#locale routing#cookie persistence#language picker
One-click install
npx skills add https://github.com/podcodar/webapp --skill astro-i18n-podcodar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-i18n
Source: https://github.com/podcodar/webapp/tree/main/.opencode/skills/astro-i18n
Command: npx skills add https://github.com/podcodar/webapp --skill astro-i18n-podcodar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of building an Astro website that supports multiple languages with consistent URLs, automatic locale handling, and user language persistence.

Core Features & Use Cases

  • Built-in i18n routing setup: Configure locales, default locale, and locale URL prefix behavior for predictable multilingual navigation.
  • Locale detection and fallback logic: Use cookie/URL/header-aware prioritization (cookie first, then browser language via middleware when needed, then default).
  • Translation system for UI text: Store language-specific strings in typed TypeScript modules and render text via a translation helper function.
  • Cookie-based language persistence: Provide a language picker that updates a lang cookie so the selected language remains stable across navigation.
  • Use Case: When you have a bilingual marketing site, implement consistent navigation labels and page headings (including header/footer text) so that switching to /en/ reflects throughout the UI.

Quick Start

Configure astro.config.mjs with your locales and defaultLocale, then create src/i18n/ui.ts and src/i18n/utils.ts and update your .astro components to render all user-visible strings through the translation helper.

Frequently Asked Questions about astro-i18n

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add internationalization routing with locale persistence in Astro?▼

Astro internationalization routing works by configuring locales and defaultLocale in astro.config.mjs, then using getRelativeLocaleUrl and a cookie-writing language picker to ensure deterministic locale rendering and persistent user language selection.

How does cookie-based language detection and fallback work for multilingual Astro sites?▼

Cookie-based language detection prioritizes the saved user language cookie first, then falls back to browser language via middleware, and finally defaults to the configured defaultLocale to ensure stable multilingual navigation across page reloads.

How do I set up translated UI text and navigation labels in an Astro bilingual site?▼

Translated UI text in Astro requires storing language-specific strings in typed TypeScript modules within src/i18n/ui.ts, then rendering all user-visible strings through a translation helper function to reflect the active locale across headers and footers.

Do I need TypeScript to implement locale-aware routing and translation modules in Astro?▼

TypeScript is used to store language-specific translation strings in typed modules and configure the i18n utility helpers, ensuring predictable locale routing behavior and typed UI text rendering across multilingual page structures like default-locale root pages and locale-prefixed copies.

What is the best way to structure default-locale root pages and locale-prefixed copies in Astro?▼

The best structure for Astro locale routing places default-locale pages at the root while creating locale-prefixed copies like /en/ for secondary languages, using getRelativeLocaleUrl to generate predictable multilingual navigation paths between them.

Why does my Astro language picker not persist the selected locale across navigation?▼

Astro language persistence fails when the picker does not write the selected language to a cookie, causing the locale detection fallback logic to ignore user preferences and revert to browser language detection or the default locale.

Related Skills

Explore More Software Engineering Skills→
vishirivishiri
401

fantasia-i18n

Organize Vue i18n locale modules and TypeScript message schemas.

Community
Intermediate
KorCaptainKorCaptain
1

cst-tooltip

Enforces a standardized tooltip color scheme across all skill descriptions.

Community
Basic
vijethkumarmpvijethkumarmp

backend

Create typed API endpoints under src/pages/api in Astro.

Community
Intermediate
oakossoakoss
14

localization-engineer

Implement framework-agnostic i18n and l10n patterns for multilingual applications.

Official
Advanced