npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2024 – Pkg Stats / Ryan Hefner

astro-i18n-aut

v0.7.0

Published

The i18n integration for Astro πŸ§‘β€πŸš€

Downloads

4,775

Readme

astro-i18n-aut The i18n integration for Astro πŸ§‘β€πŸš€


Motivation

Provide an internationalization (i18n) integration for Astro that:

  • Supports the defaultLocale
  • Avoids template file duplication
  • Is adapter agnostic
  • Is UI framework agnostic
  • Is compatible with @astrojs/sitemap

Quick start

Install

Install via npm:

npm install astro-i18n-aut

Configure

In your Astro config file:

import { defineConfig } from "astro/config";
import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
import sitemap from "@astrojs/sitemap";

const defaultLocale = "en";
const locales = {
  en: "en-US", // the `defaultLocale` value must present in `locales` keys
  es: "es-ES",
  fr: "fr-CA",
};

export default defineConfig({
  site: "https://example.com/",
  trailingSlash: "always",
  build: {
    format: "directory",
  },
  integrations: [
    i18n({
      locales,
      defaultLocale,
    }),
    sitemap({
      i18n: {
        locales,
        defaultLocale,
      },
      filter: filterSitemapByDefaultLocale({ defaultLocale }),
    }),
  ],
});

In your .gitignore file:

astro_tmp_pages_*

Usage

Now that you have set up the config, each .astro page will have additional renders with your other languages. For example, src/pages/about.astro will render as:

  • /about/
  • /es/about/
  • /fr/about/

If you have enabled redirectDefaultLocale (true by default), redirects will be:

  • /en/about/ => /about/

Please note that the getStaticPaths() function will only run once. This limitation means that you cannot have translated urls, such as /es/acerca-de/ for /about/. However, it also ensures compatibility with @astrojs/sitemap.

The Astro frontmatter and page content is re-run for every translated page. For example, the Astro.url.pathname will be:

  • /about/
  • /es/about/
  • /fr/about/

It is up to you to detect which language is being rendered. You can use Astro content collections or any i18n UI framework, such as react-i18next, for your translations. Here is a pure Hello World example:

---
import { getLocale } from "astro-i18n-aut";
import Layout from "../layouts/Layout.astro";

const locale = getLocale(Astro.url);

let title: string;
switch (locale) {
  case "es":
    title = "Β‘Hola Mundo!";
    break;
  case "fr":
    title = "Bonjour Monde!";
    break;
  default:
    title = "Hello World!";
}
---

<Layout title={title}>
  <h1>{title}</h1>
</Layout>

Several helper functions are included to make handling locales easier.

Astro config options

Please see the official Astro docs for more details:

You must set either:

  • {
      site: "https://example.com/",
      trailingSlash: "always",
      build: {
        format: "directory",
      },
    }
  • {
      site: "https://example.com",
      trailingSlash: "never",
      build: {
        format: "file",
      },
    }

All these options are related and must be set together. They affect whether your urls are:

  • /about/
  • /about

If you choose /about/, then /about will 404 and vice versa.

Integration options

  • locales: A record of all language locales.
  • defaultLocale: The default language locale. The value must present in locales keys.
  • redirectDefaultLocale - Assuming the defaultLocale: "en", whether /en/about/ redirects to /about/ (default: 308).
  • include: Glob pattern(s) to include (default: ["pages/**/*"]).
  • exclude: Glob pattern(s) to exclude (default: ["pages/api/**/*"]).

Compatibility

Page file types

Other Astro page file types:

  • βœ… .astro
  • ❌ .md
  • ❌ .mdx (with the MDX Integration installed)
  • ❌ .html
  • ❌ .js / .ts (as endpoints)

cannot be translated. If you choose to use them in the pages directory, please add them to the ignore glob patterns. For example:

["pages/api/**/*", "pages/**/*.md"];

Excluding pages

In Astro, the docs state:

You can exclude pages or directories from being built by prefixing their names with an underscore (_). Files with the _ prefix won’t be recognized by the router and won’t be placed into the dist/ directory.

You can use this to temporarily disable pages, and also to put tests, utilities, and components in the same folder as their related pages.

Unfortunately, this excluding pages feature is not supported. Please only keep pages in your pages directory.

You can still exclude pages prefixed with an underscore (_) by adding pages/**/_* to the ignore glob patterns:

["pages/api/**/*", "pages/**/_*"];

Markdown

For .md and .mdx, use Astro Content Collections.

With this library and Astro Content Collections, you can keep your Markdown separate and organized in content, while using pages/blog/index.astro and pages/blog/[slug].astro to render all of your content, even with a defaultLocale! Here is an example folder structure:

.
└── astro-project/
    └── src/
        β”œβ”€β”€ pages/
        β”‚   └── blog/
        β”‚       β”œβ”€β”€ index.astro
        β”‚       └── [id].astro
        └── content/
            └── blog/
                β”œβ”€β”€ en/
                β”‚   β”œβ”€β”€ post-1.md
                β”‚   └── post-2.md
                β”œβ”€β”€ es/
                β”‚   β”œβ”€β”€ post-1.md
                β”‚   └── post-2.md
                └── fr/
                    β”œβ”€β”€ post-1.md
                    └── post-2.md

UI frameworks

Astro does not support .tsx or .jsx as page file types.

For UI frameworks like React and Vue, use them how you normally would with Astro by importing them as components.

Feel free to pass the translated content title={t('title')} or locale locale={locale} as props.

Endpoints

By default, all pages in pages/api/**/* are ignored.

For .ts and .js endpoints, how you handle multiple locales is up to you. As endpoints are not user-facing and there are many different ways to use endpoints, we leave the implementation up to your preferences.

License

MIT Licensed

Contributing

PRs welcome! Thank you for your help. Read more in the contributing guide for reporting bugs and making PRs.