Socket
Socket
Sign inDemoInstall

@inlang/paraglide-astro

Package Overview
Dependencies
1
Maintainers
0
Versions
35
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@inlang/paraglide-astro


Version published
Maintainers
0
Created

Readme

Source

Dead Simple i18n. Typesafe, Small Footprint, SEO-Friendly and with an IDE Integration.

Inlang-ecosystem compatibility badge

Gettting Started

npx @inlang/paraglide-js init
npm i @inlang/paraglide-astro

This will generate messages/{lang}.json files for each of your languages. That's where your translations live.

Register the Integration in astro.config.mjs:

import paraglide from "@inlang/paraglide-astro"

export default {
	// Use astro's i18n routing for deciding which language to use
	i18n: {
		locales: ["en", { code: "de", path: "deutsch" }],
		defaultLocale: "en",
	},

	integrations: [
		paraglide({
			// recommended settings
			project: "./project.inlang",
			outdir: "./src/paraglide", //where your files should be
		}),
	],
}

Passing the Language to the Client

To save bundle size the integration doesn't ship language detection code to the client. Instead, it will read the lang attribute on the <html> tag. Make sure it is set correctly.

//src/layouts/default.astro
---
import { languageTag } from "../paraglide/runtime";
---

<!doctype html>
<html lang={languageTag()} dir={Astro.locals.paraglide.dir}>
    <slot />
</html>

Usage

Adding & using messages

Messages live in messages/{lang}.json files. Add a message to get started

// messages.en.json
{
	"hello": "Hello {name}!"
}

You can edit which languages you support in project.inlang/settings.json.

{
	"languageTags": ["en", "de"],
	"sourceLanguageTag": "en"
}

Use messages in code by importing from the paraglide/messages.js file generated by the compiler.

---
import * as m from "../paraglide/messages.js";
---

<h1>{m.hello({ name: "Samuel" })}</h1>

Vite can tree-shake the messages with no extra work from you. Only messages that are used on an Island will be included in the client bundle.

Understanding Language Detection

Paraglide-Astro relies on astro:i18n's language detection. Place your page in a folder named for the language (or the path of the language) & all messages will be in that language.

src
├── pages
│   ├── en
│   │   ├── index.astro
│   │   └── about.astro
│   └── de
│       ├── index.astro
│       └── about.astro

If a page isn't in a language folder, it will use the default language.

src
├── pages
│   ├── index.astro // default language
│   ├── about.astro // default language
│   └── de
│       ├── index.astro // de
│       └── about.astro // de

You can configure which languages are available, and which is the default language in project.inlang/settings.json.

To save bundle size the integration doesn't ship language detection code to the client. Instead, it will read the lang attribute on the <html> tag. Make sure it is set correctly.

//src/layouts/default.astro
---
import { languageTag } from "$paraglide/runtime";
---

<!doctype html>
<html lang={languageTag()} dir={Astro.locals.paraglide.dir}>
    <slot />
</html>
---

You can also access the current language and text-direction via Astro.locals.paraglide.lang and Astro.locals.paraglide.dir respectively.

Linking between pages

Because pages in different languages often have different slugs there is no way to automatically generate links in all languages. You will need to define a custom function.

import type { AvailableLanguageTag } from "./paraglide/runtime.js"

type AbsolutePathname = `/${string}`

const pathnames : Record<AbsolutePathname, 
	Record<AvailableLanguageTag, AbsolutePathname>
> = {
	"/about": {
		en: "/about",
		de: "/de/ueber-uns",
	}
}

// src/linking.ts
export function localizePathname(
	pathname: AbsolutePathname, 
	locale: AvailableLanguageTag
) {
	if(pathnames[pathname]) {
		return pathnames[pathname][locale]
	}
	return pathname
}

Then use this function on your links

<a href={localizePathname("/about", languageTag())}>{m.about()}</a>

For SEO reasons, you should add alternate links to your page's head that point to all translations of the current page. Include the current page. Make sure these are full HREFs, including the protocol and origin, not just the path.

<head>
	<link rel="alternate" hreflang="en" href="https://acme.com/en/about" />
	<link rel="alternate" hreflang="de" href="https://acme.com/de/ueber-uns" />
</head>

Since only you know which pages correspond to each other this can't reliably be done automatically. Add these links manually.

Roadmap

  • Improved Server-Rendering support
  • Automatic Link-Map generation

Playground

Check out an example Astro project with Paraglide integration on StackBlitz

Keywords

FAQs

Last updated on 12 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc