@inlang/paraglide-solidstart
v0.0.2
Published
Downloads
11
Readme
Currently Unmaintained
Paraglide-SolidStart
Example project
Before setting up Paraglide-SolidStart in your own project, you can take a look at the example project to see how it works.
Getting started
1. Initialize paraglide-js
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.
2. Install Paraglide-SolidStart
npm install @inlang/paraglide-solidstart
# or
pnpm add @inlang/paraglide-solidstart
# or
yarn add @inlang/paraglide-solidstart3. Use Paraglide-SolidStart to wrap paraglide
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.
4. Provide a language tag to your app and the Solid Router.
// 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.
5. Use message functions
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>6. Switch language
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 the
translateHreffunction on links that point to external websites. It will break the link.
7. Alternate links
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>