Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Attribute lang not change #166

Closed
alkorlos opened this issue Jan 26, 2024 · 4 comments · Fixed by #169
Closed

Attribute lang not change #166

alkorlos opened this issue Jan 26, 2024 · 4 comments · Fixed by #169
Labels
bug Something isn't working examples Issue related to examples good first issue Good for newcomers

Comments

@alkorlos
Copy link
Contributor

Hello, thanks for the great library

Example Locale-router-static
src/hooks.server.js

// Add html `lang` attribute
return resolve({ ...event, locals: { lang: locale } }, {
  transformPageChunk: ({ html }) => html.replace(/<html.*>/, `<html lang="${locale}">`),
});

If I understand correctly, this code is supposed to change the lang attribute when switching languages, but it doesn't work, as evident in the example. <html> always have lang="en".
@jarda-svoboda jarda-svoboda added bug Something isn't working good first issue Good for newcomers examples Issue related to examples labels Jan 26, 2024
@saya-dev
Copy link

saya-dev commented Feb 2, 2024

This is doesn't look like a bug, i think its working as expected.

If I understand correctly, this code is supposed to change the lang attribute when switching languages, but it doesn't work, as evident in the example. always have lang="en".

Reason why you'd want to have a lang attribute at the first place is mainly for SEO. And when the page is loaded for the first time it has the correct lang attribute, thats what matters mostly. I have also built the example on my local and saw that generated pages have the correct lang attribute.

@alkorlos
Copy link
Contributor Author

alkorlos commented Feb 2, 2024 •
edited
Loading

I have also built the example on my local and saw that generated pages have the correct lang attribute.

Yes, everything is correct during the initial load, the issues arise when switching languages.

In addition to SEO, translation programs, etc., also consider the lang. If the lang correct, it will be beneficial, it definitely won't make the application work worse.

But I couldn't figure out how to implement change lang with this library.

@saya-dev
Copy link

saya-dev commented Feb 2, 2024

But I couldn't figure out how to implement change lang with this library.

src/routes/[lang]/+layout.svelte

Replace

<select on:change="{({ target }) => goto(target.value)}">
  {#each $locales as lc}
    <option value="/{lc}{route}" selected="{lc === $locale}">{$t(`lang.${lc}`)}</option>
  {/each}
</select>

With this

<select
  on:change={({ target }) => {
    goto(`/${target.value}${route}`);
    document.querySelector("html").setAttribute("lang", target.value);
  }}
>
  {#each $locales as lc}
    <option value={lc} selected={lc === $locale}>{$t(`lang.${lc}`)}</option>
  {/each}
</select>

@alkorlos
Copy link
Contributor Author

alkorlos commented Feb 3, 2024

Thank you!

I am still working with sveltekit-i18n, and I have encountered a few issues. The code document.querySelector("html").setAttribute("lang", target.value); is not working entirely for me, so I am thinking of changing the lang attribute through src/hooks.server.js. However, for the Locale-router-static example, this works perfectly.

I will submit a pull request with this code now. If @jarda-svoboda decides that this is the best way to solve the issue, great. If not, maybe make it better.

@alkorlos alkorlos mentioned this issue Feb 3, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working examples Issue related to examples good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add example locale router static change lang alkorlos/lib
3 participants
@alkorlos @jarda-svoboda @saya-dev