opral / inlang-paraglide-js

Tree-shakable i18n library build on the inlang ecosystem.
https://inlang.com/m/gerre34r/library-inlang-paraglideJs
22 stars 0 forks source link

setLanguageTag doesn't seem to work #126

Closed gevera closed 1 month ago

gevera commented 1 month ago

I have an example repo. Its a plan Sveltekit install with Paraglide on top followed the instructions from https://inlang.com/g/2fg8ng94/guide-nilsjacobsen-buildAGlobalSvelteApp

I have tried the hreflang Change language to {lang} That did not work.

And then I attempted to set the language manualy by using setLanguageTag('en').

Here is the +layout.svelte

<script lang="ts">
    import { ParaglideJS } from '@inlang/paraglide-sveltekit';
    import { i18n } from '$lib/i18n';
    import { page } from '$app/stores';
    import { availableLanguageTags, languageTag, onSetLanguageTag, setLanguageTag } from '$paraglide/runtime';
    const changeLang = (lg: 'en' | 'ro') => {
        console.log('Changing language');
        if (lg == 'en') {
            setLanguageTag('ro');
        } else {
            setLanguageTag('en');
        }
    };
    $: onSetLanguageTag((newLanguageTag) => {
        console.log(`The language changed to ${newLanguageTag}`);
    });
</script>

<ParaglideJS {i18n}>
    <header>
        Switching with <i>hreflang</i>
        <br />
        {#each availableLanguageTags as lang}
            <a href={i18n.route($page.url.pathname)} hreflang={lang}>Change language to {lang}</a>
            <br />
        {/each}
    </header>
    <nav>
        Setting language with <i>setLanguageTag</i>
        <button on:click={() => changeLang(languageTag())}>Change language</button>
    </nav>
    <slot />
</ParaglideJS>

In either case, it doesnt seem to work. I wonder what am I missing and its not an actual bug. Maybe you could clone the repo and see the issue for yourself. I hope it helps

LorisSigrist commented 1 month ago

The guide is outdated. I rewrote it last week but apparently that was not deployed, I'll look into why. Sorry for the inconvenience.

As for your issue: The language is determined only from the URL. If you are on a page whose url starts with /de it will be german. In order to switch language you must do a navigation to the same page with the new language in the URL.

I assume that's what you're trying to do with:

{#each availableLanguageTags as lang}
   [Change language to {lang}]({i18n.route($page.url.pathname)})
{/each}

That does look correct at first glance. Try verifying that the correct HREFs are generated in your browser dev-tools & check if language detection is set up correctly by manually going to the page in a new language.

gevera commented 1 month ago

The guide is outdated. I rewrote it last week but apparently that was not deployed, I'll look into why. Sorry for the inconvenience. As for your issue: The language is determined only from the URL. If you are on a page whose url starts with /de it will be german. In order to switch language you must do a navigation to the same page with the new language in the URL.I assume that's what you're trying to do with:

{#each availableLanguageTags as lang}
   [Change language to {lang}]({i18n.route($page.url.pathname)})
{/each}

That does look correct at first glance. Try verifying that the correct HREFs are generated in your browser dev-tools & check if language detection is set up correctly by manually going to the page in a new language.

Thank you for clarification. Ill go the a href way. Looking forward for updated docs

radiorambo commented 2 weeks ago

FYI: Docs are not updated yet. And i ran into same issue following this docs.