Add comprehensive English language support with full i18n implementation

[Copilot]

Overview

This PR implements comprehensive internationalization (i18n) support for the PBJ Komplit! website, enabling full bilingual functionality in Indonesian and English. The implementation leverages Astro 5.11.0's built-in i18n capabilities to provide a scalable, SEO-optimized multilingual experience.

Changes Made

1. Astro i18n Configuration

Added i18n configuration to astro.config.ts:

• Default locale: Indonesian (id) - accessible at /
• English locale: en - accessible at /en/
• Routing strategy: No prefix for default locale, /en/ prefix for English

i18n: {
  defaultLocale: 'id',
  locales: ['id', 'en'],
  routing: {
    prefixDefaultLocale: false
  }
}

2. Translation System

Created a robust translation infrastructure in src/i18n/:

ui.ts - Centralized translation dictionaries containing:

• Navigation labels (Home, Contact, Privacy Policy, Terms of Use)
• Footer text (copyright, powered by, source)
• Contact page content
• About page content
• Language switcher labels

utils.ts - Helper functions for:

• getLangFromUrl() - Detect current language from URL
• useTranslations() - Get translation function for current language
• getLocalizedPath() - Generate language-specific URLs
• getAlternateUrl() - Calculate alternate language URLs

3. Language Switcher Component

Created src/components/ui/LanguageSwitcher.astro:

• Globe icon with current alternate language code (EN/ID)
• Seamlessly switches between languages while maintaining page context
• Integrated into the site header for easy access
• Styled consistently with existing UI components

4. Component Updates

Header (src/components/layout/Header.astro):

• Added language switcher between app store badges and theme toggle

Footer (src/components/layout/Footer.astro):

• Translated all navigation links
• Translated "Powered by" and "Source" text
• Dynamic language-aware URLs

BaseLayout (src/layouts/BaseLayout.astro):

• Dynamic language detection from URL
• Proper HTML lang attribute (id-ID or en-US)

BaseHead (src/components/layout/BaseHead.astro):

• Added hreflang tags for language alternates
• Added x-default fallback to Indonesian
• Added Open Graph locale metadata (og:locale, og:locale:alternate)
• Language-specific canonical URLs

About (src/components/pages/About.astro):

• Language-aware content loading
• Automatically selects Indonesian or English version based on current language

5. Page Structure

Indonesian Pages (no prefix):

• / - Homepage with Indonesian content
• /contact - Contact page in Indonesian
• /privacy-policy - Privacy policy in Indonesian
• /terms-of-use - Terms of use in Indonesian

English Pages (/en/ prefix):

• /en/ - Homepage with English content
• /en/contact - Contact page in English
• /en/privacy-policy - Privacy policy in English
• /en/terms-of-use - Terms of use in English

6. Content Translation

Created English versions of all key content:

• About page: Translated introduction, philosophy, and offerings
• Privacy Policy: Full English translation maintaining all legal information
• Terms of Use: Complete English version of terms and conditions
• Contact page: Translated UI elements and content

7. SEO Optimization

Implemented comprehensive SEO best practices:

• hreflang tags: Proper language alternates for search engines
• Open Graph locale: Social media sharing with correct language
• Canonical URLs: Language-specific canonical references
• Sitemap: All language versions included in sitemap
• HTML lang attribute: Proper language declaration per page

8. Documentation

Updated README.md with:

• Bilingual site description
• i18n feature highlights
• Comprehensive implementation documentation
• Instructions for adding new translations
• Instructions for adding translated content

Technical Details

Build Output: Successfully generates 9 pages

• 4 Indonesian pages
• 4 English pages
• 1 404 page
• RSS/Atom feeds
• Sitemap with all language versions

Code Quality:

• ✅ Zero build errors
• ✅ All linter warnings resolved (only pre-existing warnings remain)
• ✅ Type-safe translation system
• ✅ Follows Astro best practices

Testing

• ✅ Manual browser testing completed
• ✅ Language switcher verified in both directions
• ✅ All translated pages render correctly
• ✅ SEO metadata verified in generated HTML
• ✅ Content filtering by language works correctly
• ✅ Build process successful

Screenshots

Indonesian Homepage

English Homepage

English Contact Page

Future Extensibility

The architecture supports easy addition of more languages by:

1. Adding the locale to astro.config.ts locales array
2. Adding translations to src/i18n/ui.ts for the new language
3. Creating content in src/content/{collection}/{locale}/ directories
4. No changes required to components or routing logic

Benefits

• 🌐 Accessibility: Content now accessible to English-speaking users
• 🔍 SEO: Improved search engine visibility with proper language signals
• 📱 UX: Seamless language switching with context preservation
• 🚀 Performance: Static generation, zero runtime overhead
• 🛠️ Maintainability: Centralized translations, easy to extend
• 📈 Scalability: Architecture supports multiple additional languages

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/pepakbasajawa-web/pepakbasajawa-web/node_modules/.bin/astro build (dns block)
  • Triggering command: node /home/REDACTED/work/pepakbasajawa-web/pepakbasajawa-web/node_modules/.bin/astro preview (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Add comprehensive English language support to the AstroJS static website by implementing internationalization (i18n) features.

The implementation should include:

1. Astro i18n Configuration:

   • Configure Astro's built-in i18n support in astro.config.mjs
   • Set up routing for multiple languages (Indonesian and English)
   • Define default locale and supported locales

2. Language Structure:

   • Create a proper directory structure for multi-language content
   • Set up translation files/dictionaries for UI strings
   • Organize content files by language

3. Translation Files:

   • Create English translations for all UI elements, navigation, buttons, and static text
   • Maintain existing Indonesian content while adding English equivalents
   • Set up a translation system that's easy to maintain and extend

4. Routing and Navigation:

   • Implement language-aware routing (e.g., /en/ for English, /id/ or / for Indonesian)
   • Add language switcher component for users to toggle between languages
   • Ensure proper URL structure for SEO and user experience

5. Content Management:

   • Duplicate existing content structure for English versions
   • Translate key pages and content to English
   • Maintain proper metadata and SEO tags for both languages

6. Components and Layouts:

   • Update existing components to support i18n
   • Ensure all text content uses translation functions
   • Make layouts language-aware

The solution should be scalable, allowing for easy addition of more languages in the future, and should follow Astro's best practices for internationalization.

This pull request was created as a result of the following prompt from Copilot chat.

Add comprehensive English language support to the AstroJS static website by implementing internationalization (i18n) features.

The implementation should include:

1. Astro i18n Configuration:

   • Configure Astro's built-in i18n support in astro.config.mjs
   • Set up routing for multiple languages (Indonesian and English)
   • Define default locale and supported locales

2. Language Structure:

   • Create a proper directory structure for multi-language content
   • Set up translation files/dictionaries for UI strings
   • Organize content files by language

3. Translation Files:

   • Create English translations for all UI elements, navigation, buttons, and static text
   • Maintain existing Indonesian content while adding English equivalents
   • Set up a translation system that's easy to maintain and extend

4. Routing and Navigation:

   • Implement language-aware routing (e.g., /en/ for English, /id/ or / for Indonesian)
   • Add language switcher component for users to toggle between languages
   • Ensure proper URL structure for SEO and user experience

5. Content Management:

   • Duplicate existing content structure for English versions
   • Translate key pages and content to English
   • Maintain proper metadata and SEO tags for both languages

6. Components and Layouts:

   • Update existing components to support i18n
   • Ensure all text content uses translation functions
   • Make layouts language-aware

The solution should be scalable, allowing for easy addition of more languages in the future, and should follow Astro's best practices for internationalization.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.