Currently Unmaintained
Before setting up Paraglide-SolidStart in your own project, you can take a look at the example project to see how it works.
If you haven't already, initialize paraglide-js in your project. To do so, follow the getting started guide to get familiar with the basic paraglide concepts.
Then come back here to learn how Paraglide-SolidStart helps you to integrate ParaglideJS into your SolidStart project.
npm install @inlang/paraglide-solidstart
# or
pnpm add @inlang/paraglide-solidstart
# or
yarn add @inlang/paraglide-solidstart
Pass the runtime generated by paraglide to paraglide-solidstart to create SolidStart-bound functions.
// i18n.tsx
import * as paraglide from "./paraglide/runtime.js" // generated by paraglide
import { createI18n } from "@inlang/paraglide-solidstart"
const { LanguageTagProvider, languageTag, setLanguageTag } = createI18n(paraglide)
Take a look at example/src/i18n/index.tsx to see how paraglide-solidstart is used in an example project. With an addition to some convenience functions.
// entry-server.tsx
import { createHandler, StartServer } from "@solidjs/start/server"
import { useLocationLanguageTag } from "./i18n.js"
export default createHandler(() => {
const language_tag = useLocationLanguageTag() ?? i18n.sourceLanguageTag
return (
<StartServer
document={(props) => (
<html lang={language_tag}>
<head>
{props.assets}
</head>
<body>
<div id="app">{props.children}</div>
{props.scripts}
</body>
</html>
)}
/>
)
})
// app.tsx
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start"
import { Suspense } from "solid-js"
import { LanguageTagProvider, useLocationLanguageTag, sourceLanguageTag } from "./i18n.js"
export default function App() {
// get language tag from URL, or use source language tag as fallback
const url_language_tag = useLocationLanguageTag()
const language_tag = url_language_tag ?? sourceLanguageTag
// 1. provide language tag to your app
// 2. set html lang attribute
// 3. make sure the routing doesn't treat the language tag as part of the path
return (
<main>
<Router
base={url_language_tag}
root={(props) => (
<LanguageTagProvider value={language_tag}>
<Suspense>{props.children}</Suspense>
</LanguageTagProvider>
)}
>
<FileRoutes />
</Router>
</main>
)
}
Take a look at example/src/app.tsx to see how it is used in a example project.
The language tag of the current request is provided by Paraglide-SolidStart via a context. All the message functions used in this context will be renderd with the it's language.
// uses the context's language tag to translate the message
<h1>{m.greeting({ name: "Loris" })}</h1>
// pass language tag explicitly when used outside of the available context
const language_tag = languageTag() // in component body
<button onClick={e => {
e.preventDefault()
alert(
m.greeting({ name: "Loris" }, { languageTag: language_tag })
)
}}>
{m.show_greeting()}
</button>
You can switch languages by calling the setLanguageTag
function provided by Paraglide-Solidstart. This will navigate to the translated variant of the current route.
<select onChange={(e) => setLanguageTag(e.target.value)}>
{availableLanguageTags.map((tag) => (
<option value={tag} selected={tag === languageTag()}>
{tag}
</option>
))}
</select>
If you want to navigate to a different route in a specific language, you can use the translateHref
function provided by Paraglide-SolidStart to generate the correct href.
<A href={translateHref("/about", "en")}>{m.about()}</A>
⚠️ Don't use thetranslateHref
function on links that point to external websites. It will break the link.
If you want to provide alternate links to the same page in different languages.
const language_tag = languageTag()
<head>
{availableLanguageTags
.filter((tag) => tag !== language_tag)
.map((tag) => (
<link
rel="alternate"
href={translateHref("/", tag)}
hreflang={tag}
/>
))
}
</head>