How to set the "lang" attribute programatically? In a +page.server.ts for example #12376
Describe the problemHello 👋 This is because I only know what language the page is when I load the article (in the This problem is very annoying bc if not done right, on some Androids Google will just translate the site without asking (is a opt out) just based on this Describe the proposed solutionUsing Alternatives consideredRun Importancewould make my life easier Additional InformationOther people with the same problem: |
Replies: 5 comments 4 replies
|
Another potential solution would be to add a |
|
you posted here about the same problem already. opral/paraglide-js#134 converting to discussion as this is not an issue with sveltekit itself but rather a question about an unusual arcitecture. |
|
Hello 👋 I do believe that is an issue with SvelteKit architecture, with the current tools you have to know in advance what language a page is. I can't change the On a PHP server I can do this very easily, but on SvelteKit I have to do it on the client side. I know it feels like a unusual architecture, but in reality we are dealing with user generated content, that is why we need the database to tell us what language it is. |
|
if you have no information available in the url directly about the language to be used, you can create a lookup table and access that in the handle hook. Remember to also translate the whole page to that language if you set lang at the html level, not just the article itself. If the page is always in one language, and the article in another, you can use embedded lang attribute |
By this you mean that I should fetch all articles in the hook to know language each of them are?
Could be a nice solution, will depend on how google handles it bc currently is constantly asking users to translate, is why I got into this mess in the first place Thanks for taking the time to answer my questions 🙏 |
|
You can use |
|
That looks like it could work but I don't understand all the steps involved. How can I run |
|
Check this out here in the docs for hooks.server.ts. This example from that page might help you. As far as I know, during SSR hooks runs after load. On Client side navigation load runs, then on client side navigation your load will run before hooks. When you hit a .server.ts I believe hooks.ts will run. import type { Handle } from '@sveltejs/kit';
export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event, {
transformPageChunk: ({ html }) => html.replace('old', 'new'),
filterSerializedResponseHeaders: (name) => name.startsWith('x-'),
preload: ({ type, path }) => type === 'js' || path.includes('/important/'),
});
return response;
};
|
|
Here is the solution: export const load = (async (event) => {
// use event.locals to set the value to be passed to the hook
event.locals.locale = 'fr';
return {};
});
export async function handle({ event, resolve }) {
return resolve(event, {
// then you can read this local here bc SvelteKit will run this function after the +page.server.ts
transformPageChunk: ({ html }) => html.replace('%lang%', event.locals.locale)
});
}Thanks @david-plugge and @jhubbardsf for the solution. |
Here is the solution:
+page.server.tshook.server.tsThanks @david-plugge and @jhubbardsf for the solution.