CloudCannon / rosey

:rose: Open-source CLI tool for managing translations on static websites.
MIT License
41 stars 0 forks source link

JS replaces and overwrites language (force) #42

Open silveltman opened 1 year ago

silveltman commented 1 year ago

When I go to another language, I see a short blink of that language. Then suddenly the content gets changed back to my language.

Why is this?

I see this script in the index.html of the root of my dist_translated folder, but I can't find any info on this in the docs:

        <script>
            (function () {
                var defaultLocale = "nl";
                var supportedLocales = {"en":"en","fr":"fr","nl":"nl"};

                var language;

                try {
                    function getBrowserLanguages() {
                        if (navigator.languages && navigator.languages.length > 0) {
                            return navigator.languages;
                        }

                        var language = navigator.language || navigator.userLanguage || defaultLocale;

                        return [language];
                    }

                    function getBestLanguage() {
                        var storedLocale = localStorage.getItem("force-language") || localStorage.getItem("eu-cc");
                        if (storedLocale) {
                            return storedLocale;
                        }

                        var languages = getBrowserLanguages();
                        for (var i = 0; i < languages.length; i++) {
                            var match = languages[0].toLowerCase().match(/[a-z]+/gi),
                                language = match[0], country = match[1];

                            if (supportedLocales[language + "-" + country]) {
                                return supportedLocales[language + "-" + country];
                            }

                            if (supportedLocales[language]) {
                                return supportedLocales[language];
                            }
                        }

                        return defaultLocale;
                    }

                    language = getBestLanguage();
                } catch (e) {
                    console.error(e);
                    language = defaultLocale;
                }

                var redirectPath;
                var linkElements = document.getElementsByTagName("link");
                for (var i = 0; i < linkElements.length; i++) {
                    if (linkElements[i].getAttribute("rel") === "canonical") {
                        redirectPath = linkElements[i].getAttribute("href")
                    }

                    if (linkElements[i].getAttribute("hreflang") === language) {
                        redirectPath = linkElements[i].getAttribute("href");
                        break;
                    }
                }

                // Use meta refresh for default path
                if (!redirectPath) { 
                    return;
                }

                var url = location.protocol + "//" + location.host + redirectPath;
                var search = location.search || '';

                var referrer = document.referrer;
                if (referrer && search.indexOf("utm_referrer") < 0) {
                    search += "&utm_referrer=" + referrer;
                }

                search = search.replace(/^&/, "?");

                var hash = location.hash || '';

                location.replace(url + search + hash);
            })();
        </script>

Would love to get some help! :)

EDIT: I now also see that this regular index page only has this content:

<body>
    <div>
        <h1>Redirecting…</h1>
        <p><a href="/nl/">Click here if you are not redirected.</a></p>
    </div>

and then navigates to /nl/

Why did you choose to do it like this? And how this this affect SEO, any things I need to be aware of?

EDIT 2: Another update 😄

I see this is added:

    <link rel="canonical" href="/nl/" hreflang="nl"/>
    <link rel="alternate" href="/en/" hreflang="en"><link rel="alternate" href="/fr/" hreflang="fr">

``z

Would this 100% suffice in terms of SEO? Being able to rank just as easily on the default language AND the alternate languages?

silveltman commented 1 year ago

Just set my VPN, macbook AND browser setting to english, but still redirects me (or replaces the content with js, not sure) to dutch.

I also see that in the generated dist folder each language has a index.html AND /index/index.html.

I see that some components do have their content quickly changed back to dutch, while some do stay in the language I requested. Pretty weird..

I would love to get some more info on how this works under the hood, this would allow me to fix the problems.