Quick Start

Astro

This page demonstrates the minimal setup of Intor in an Astro project.

Installation

This example is based on the Basic Starter template.
See the official guide for setup instructions: Astro .

Install Intor:

npm install intor
yarn add intor
pnpm add intor
bun add intor

Project Structure

index.json
U
index.json
U
Layout.astro
M
index.astro
U
intor-config.ts
U

Integration Steps

♯1 Messages

Create a messages directory in your project, and add a subdirectory for each locale.
Each locale provides an index.json file.

index.json
U
index.json
U
{
  "hello": "Hello, {name}",
  "rich": "A <tag>text</tag>."
}
{
  "hello": "Bonjour, {name}",
  "rich": "Un <tag>texte</tag>."
}

♯2 Config

Create an i18n/ directory under src/, and add an intor-config.ts file inside it.
This example uses the most basic translation loading approach by defining messages directly in the config.

For more details, see: Message Loading 

intor-config.ts
U
import { defineIntorConfig } from "intor";
import EN from "../../messages/en/index.json";
import FR from "../../messages/fr/index.json";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  messages: {
    en: EN,
    fr: FR,
  },
});

♯3 Initialization

Update Layout.astro so that <html lang> can receive the locale from outside.

Layout.astro
M
---
const { locale } = Astro.props;
---

<!doctype html>
<html lang={locale}>
// ...

Then create a [locale]/ directory under pages/ and add index.astro.

index.astro
U

Usage Example

Use getTranslator to access translation capabilities:

  • t: returns the resolved text
  • tRich: renders structured messages with semantic tags
index.astro
U
---
import Layout from "../../layouts/Layout.astro";
import { intorConfig } from "../../i18n/intor-config";
import { getTranslator } from "intor/server";

export async function getStaticPaths() {
  return intorConfig.supportedLocales.map((locale) => ({ params: { locale } }));
}

const { locale } = Astro.params;

const { t, tRich } = await getTranslator(intorConfig, { locale });
---

<Layout locale={locale}>
  <p>{t("hello", { name: "Intor" })}</p>

  <p set:html={tRich("rich", { tag: (children) => `<b>${children}</b>` })} />

  <a href="/en">en</a>
  <a href="/fr">fr</a>
</Layout>

After starting the development server, visit http://localhost:4321/en or /fr to preview the result.

Type Safety
Learn more about how type safety is enabled in an Astro project.

On this page