Intlayer + Astro Boilerplate

This project is a comprehensive boilerplate for building multilingual Astro applications using Intlayer. It demonstrates how to integrate internationalization (i18n) across Astro and various UI frameworks like React, Svelte, Vue, and more.

🌟 Key Features

• Framework Agnostic: Works with Astro, React, Vue, Svelte, Solid, Preact, and Lit.
• Declarative Dictionaries: Manage translations at the component level for better maintainability.
• Type Safety: Benefit from autogenerated TypeScript types for your translation keys.
• Localized Routing: Pre-configured middleware for locale detection and URL management.
• SEO Optimized: Includes patterns for hreflang, canonical links, and sitemaps.

🚀 Getting Started

1. Install Dependencies

npm install

2. Run the Development Server

npm run dev

The application will be available at http://localhost:4321.

📖 How to Use

Declare Your Content

Create content declarations in your src directory. They can be .json, .ts, or .tsx files matching the .content.{json,ts,tsx} extension.

// src/app.content.tsx
import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: t({
      en: "Hello World",
      fr: "Bonjour le monde",
      es: "Hola mundo",
    }),
  },
} satisfies Dictionary;

export default appContent;

Use Content in Astro

You can consume dictionaries directly in .astro files:

---
// src/pages/index.astro
import { getIntlayer, getLocaleFromPath } from "intlayer";

const locale = getLocaleFromPath(Astro.url.pathname);
const { title } = getIntlayer("app", locale);
---

<h1>{title}</h1>

🛠 Project Structure

• src/pages/[...locale]/: Handles localized routing.
• intlayer.config.ts: Configuration for your locales (en, fr, es by default) and routing strategies.
• .intlayer/: Directory where Intlayer generates types and compiled dictionaries.

📚 Learn More

For full documentation and advanced patterns, visit the official Intlayer guides:

• Intlayer with Astro Guide
• Intlayer with React
• Intlayer with Vue
• Intlayer with Svelte
• Intlayer with Solid
• Intlayer with Preact
• Intlayer with Lit

---

Built with Astro and Intlayer.