spice osprey
I was using i18n integration to build a multilang website last year, fetching data from a .json file as well.
Architecture for french based content, with second language being english, looked like this :
astro.config.mjs
//after importing all the correct components :
export default defineConfig({
site: "https://www.your-website.com",
integrations: [
sitemap({
i18n: {
defaultLocale: "fr", // All urls that don't contain `uk` after `https://www.your-website.com/` will be treated as default locale, i.e. `fr`
locales: {
fr: "fr-FR",
uk: "en-UK",
},
},
}),
],
});
then for index.astro or other [lang] page :
---
// i had a .json file per language. Here indexData is for my index page. It sure duplicates the content per lang though.
import fr from "./path-to-your-data/fr/indexDataFR.json";
import uk from "./path-to-your-data/uk/indexDataUK.json";
// this function will map the content in different languages
export function getStaticPaths() {
return ["fr", "uk"].map((lang) => ({ params: { lang } }));
}
// these will return the right content based on the language of the page viewed
const { lang } = Astro.params;
const languages = { fr, uk };
const indexData = languages[lang];
// now you can access your data with "indexData" prefix
---
<h1>{indexData.titleH1}</h1>
<p set:html={indexData.firstParagraph></p>
Just repeat and adapt these few lines to access the content in each [lang] pages.
Hope this helps
grand helm
