No worries, here's a step-by-step guide to adding Internationalisation to the minimal starter.
- Add a file called
lang.js to the params folder:
export function match(param) {
console.log({ lang: { param } });
console.log(param === 'fr-fr');
return param === 'fr-fr';
}
- Add a folder called
[lang=lang] inside the folder [[preview=preview]]
- Inside this folder add a filed called
+page.svelte
<script>
import { SliceZone } from '@prismicio/svelte';
import { components } from '$lib/slices';
export let data;
</script>
<SliceZone slices={data.page.data.slices} {components} />
- Add another file called
+page.server.ts
import { asText } from '@prismicio/client';
import { createClient } from '$lib/prismicio';
export async function load({ fetch, cookies, params }) {
const client = createClient({ fetch, cookies });
const page = await client.getByUID('page', 'home', {
lang: params.lang
});
return {
page,
title: asText(page.data.title),
meta_description: page.data.meta_description,
meta_title: page.data.meta_title,
meta_image: page.data.meta_image.url
};
}
export function entries() {
return [{}];
}
- Inside the
[lang=lang] folder add a folder called [uid]
- Inside this folder add a filed called
+page.svelte
<script>
import { SliceZone } from '@prismicio/svelte';
import { components } from '$lib/slices';
export let data;
</script>
<SliceZone slices={data.page.data.slices} {components} />
- Add another file called
+page.server.ts
import { asText } from '@prismicio/client';
import { createClient } from '$lib/prismicio';
export async function load({ params, fetch, cookies }) {
const client = createClient({ fetch, cookies });
const page = await client.getByUID('page', params.uid, {
lang: params.lang
});
return {
page,
title: asText(page.data.title),
meta_description: page.data.meta_description,
meta_title: page.data.meta_title,
meta_image: page.data.meta_image.url
};
}
export async function entries() {
const client = createClient();
const pages = await client.getAllByType('page');
return pages.map((page) => {
return { uid: page.uid };
});
}
- Update the
+page.server.ts files outside the [lang=lang] folder to use the use the code shown above.
- In the
routes folder update the +layout.svelte file with this code:
<script>
import { PrismicPreview } from '@prismicio/svelte/kit';
import { page } from '$app/stores';
import { repositoryName } from '$lib/prismicio';
</script>
<svelte:head>
<title>{$page.data.title}</title>
{#if $page.data.meta_description}
<meta name="description" content={$page.data.meta_description} />
{/if}
{#if $page.data.meta_title}
<meta name="og:title" content={$page.data.meta_title} />
{/if}
{#if $page.data.meta_image}
<meta name="og:image" content={$page.data.meta_image} />
<meta name="twitter:card" content="summary_large_image" />
{/if}
</svelte:head>
<header>
<nav>
<h1>Title</h1>
</nav>
</header>
<ul>
<li><a href="/">English</a></li>
<li><a href="/fr-fr">French</a></li>
</ul>
<main>
<slot />
</main>
<PrismicPreview {repositoryName} />
- Update the
src/lib/prismicio.ts file with this code:
import * as prismic from '@prismicio/client';
import { enableAutoPreviews } from '@prismicio/svelte/kit';
import sm from '../../slicemachine.config.json';
/**
* The project's Prismic repository name.
*/
export const repositoryName = import.meta.env.VITE_PRISMIC_ENVIRONMENT || sm.repositoryName;
/**
* A list of Route Resolver objects that define how a document's `url` field is resolved.
*
* {@link https://prismic.io/docs/route-resolver#route-resolver}
*
* @type {prismic.ClientConfig["routes"]}
*/
// TODO: Update the routes array to match your project's route structure.
const routes = [
{ type: 'page', path: '/', uid: 'home' },
{ type: 'page', path: '/fr-fr', lang: 'fr-fr', uid: 'accueil' },
{ type: 'page', path: '/:uid' },
{ type: 'page', path: '/fr-fr/:uid', lang: 'fr-fr' }
];
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param {import('@prismicio/svelte/kit').CreateClientConfig} config - Configuration for the Prismic client.
*/
export const createClient = ({ cookies, ...config } = {}) => {
const client = prismic.createClient(sm.apiEndpoint || repositoryName, {
routes,
...config
});
enableAutoPreviews({ client, cookies });
return client;
};
That should be everything, no need to add i18n 