@prezly/theme-kit-nextjs 3.2.5-test.0 → 3.3.0

package/src/seo/getAlternateLanguageLinks.test.ts

@@ -0,0 +1,164 @@
+import { NewsroomLanguageSettings } from '@prezly/sdk';
+import { LocaleCode, LocaleObject } from '../intl';
+import { getAlternateLanguageLinks } from './getAlternateLanguageLinks';
+
+function lang(code: LocaleCode, isDefault = false) {
+    return { code, is_default: isDefault } as NewsroomLanguageSettings;
+}
+
+function getTranslationUrl(locale: LocaleObject) {
+    return `translationUrl/${locale.toHyphenCode()}`;
+}
+
+function generateTranslationUrl(locale: LocaleObject) {
+    const translationUrl = getTranslationUrl(locale);
+
+    return `http://localhost:3000/${locale.toNeutralLanguageCode()}/${translationUrl}`;
+}
+
+describe('getAlternateLanguageLinks', () => {
+    it('should handle one en-GB non-default language', () => {
+        const links = getAlternateLanguageLinks([lang('en-GB')], generateTranslationUrl);
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en-GB' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should handle one en-GB default language', () => {
+        const links = getAlternateLanguageLinks([lang('en-GB', true)], generateTranslationUrl);
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en-GB' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should handle two full locales', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-GB', true), lang('fr-FR')],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en-GB' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr-FR' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should use en-GB locale as x-default even if other locale is set as default', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-GB'), lang('fr-FR', true)],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en-GB' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr-FR' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should use default locale as x-default when there is eng locale', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('ru-RU'), lang('fr-FR', true)],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr-FR' },
+            { href: 'http://localhost:3000/ru/translationUrl/ru-RU', hrefLang: 'ru' },
+            { href: 'http://localhost:3000/ru/translationUrl/ru-RU', hrefLang: 'ru-RU' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should include provided region independent locale', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-US'), lang('fr'), lang('fr-FR', true)],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en-US' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr', hrefLang: 'fr' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr-FR' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should use provided en region independent locale as x-default', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en'), lang('en-US'), lang('fr'), lang('fr-FR')],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en-US' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr', hrefLang: 'fr' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr-FR' },
+            { href: 'http://localhost:3000/en/translationUrl/en', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should fallback en link to en-US locale when there is en-GB locale', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-GB'), lang('en-US')],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en-GB' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en-US' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should should omit locales if getTranslationUrl is undefined', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-US'), lang('fr'), lang('fr-FR', true)],
+            (locale) => {
+                const translationUrl =
+                    locale.toHyphenCode() === 'en-US' ? undefined : getTranslationUrl(locale);
+
+                if (translationUrl) {
+                    return generateTranslationUrl(locale);
+                }
+
+                return undefined;
+            },
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/fr/translationUrl/fr', hrefLang: 'fr' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'fr-FR' },
+            { href: 'http://localhost:3000/fr/translationUrl/fr-FR', hrefLang: 'x-default' },
+        ]);
+    });
+
+    it('should should not duplicate links when equal languages passed', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-GB'), lang('en-GB'), lang('en-US'), lang('en-US')],
+            generateTranslationUrl,
+        );
+
+        expect(links).toMatchObject([
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en' },
+            { href: 'http://localhost:3000/en/translationUrl/en-GB', hrefLang: 'en-GB' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'en-US' },
+            { href: 'http://localhost:3000/en/translationUrl/en-US', hrefLang: 'x-default' },
+        ]);
+    });
+});

package/src/seo/getAlternateLanguageLinks.ts

@@ -0,0 +1,115 @@
+import type { NewsroomLanguageSettings } from '@prezly/sdk';
+
+import type { AlternateLanguageLink } from '../components-nextjs/PageSeo';
+import type { LocaleObject } from '../intl';
+import { getFallbackLocale } from '../intl';
+
+import { bindLanguagesWithLocales } from './utils/bindLanguagesWithLocales';
+import { createAlternateLanguageLink } from './utils/createAlternateLanguageLink';
+
+// We use english locale as fallback since English is the most common language
+const ENG_FALLBACK = 'en';
+const DEFAULT_HREF_LANG = 'x-default';
+
+export function getAlternateLanguageLinks(
+    availableLanguages: NewsroomLanguageSettings[],
+    generateTranslationUrl: (locale: LocaleObject) => string | undefined,
+): AlternateLanguageLink[] {
+    const languagesWithLocales = bindLanguagesWithLocales(availableLanguages);
+    const hrefLangLinks: Array<AlternateLanguageLink> = [];
+
+    function pushLocaleToLinks(locale: LocaleObject, hrefLang?: string) {
+        const link = createAlternateLanguageLink(locale, generateTranslationUrl);
+
+        if (!link) {
+            return;
+        }
+
+        if (hrefLang) {
+            hrefLangLinks.push({ ...link, hrefLang });
+        } else {
+            hrefLangLinks.push(link);
+        }
+    }
+
+    function populateDirectLinks() {
+        languagesWithLocales.forEach((binds) =>
+            binds.forEach(({ locale }) => pushLocaleToLinks(locale)),
+        );
+    }
+
+    function populateRegionIndependentLinks() {
+        languagesWithLocales.forEach((binds, regionIndependentLocaleCode) => {
+            // When there is no region independent locale of provided locales
+            // we still need something as a region independent locale
+            const localesArray = Array.from(binds.values()).map(({ locale }) => locale);
+
+            const hasRegionIndependentLocale = localesArray.some(
+                (locale) => locale.isRegionIndependent,
+            );
+
+            if (hasRegionIndependentLocale) {
+                return;
+            }
+
+            // Try to find some possible fallback for the regionIndependentLocaleCode from hardcoded list
+            // We try to find fallback from provided translations of current regionIndependentLocaleCode
+            // If there is no defined fallback in the list we will use just first translation as a region independent translation
+            const fallback =
+                getFallbackLocale(regionIndependentLocaleCode, localesArray) ?? localesArray.at(0);
+
+            if (fallback) {
+                pushLocaleToLinks(fallback, regionIndependentLocaleCode);
+            }
+        });
+    }
+
+    function populateDefault() {
+        let isDefaultAddedToLinks = false;
+
+        // First we try to find region independent english locale (en)
+        // If the story has just region independent `en` translation we will use it as default hreflang
+        languagesWithLocales.forEach((binds) =>
+            binds.forEach(({ locale }) => {
+                if (locale.isRegionIndependent && locale.toNeutralLanguageCode() === ENG_FALLBACK) {
+                    pushLocaleToLinks(locale, DEFAULT_HREF_LANG);
+                    isDefaultAddedToLinks = true;
+                }
+            }),
+        );
+
+        if (!isDefaultAddedToLinks) {
+            // If there is no explicit region independent `en` translation for this story
+            // we will try to find some link that already has `en` fallback
+            const fallbackFromRegionIndependentLocales = hrefLangLinks.find(
+                (alternate) => alternate.hrefLang === ENG_FALLBACK,
+            );
+
+            if (fallbackFromRegionIndependentLocales) {
+                hrefLangLinks.push({
+                    ...fallbackFromRegionIndependentLocales,
+                    hrefLang: DEFAULT_HREF_LANG,
+                });
+                isDefaultAddedToLinks = true;
+            }
+        }
+
+        if (!isDefaultAddedToLinks) {
+            // If there is no english locale at all we will use is_default language (provided from server)
+            languagesWithLocales.forEach((binds) =>
+                binds.forEach(({ locale, language }) => {
+                    if (language.is_default) {
+                        pushLocaleToLinks(locale, DEFAULT_HREF_LANG);
+                        isDefaultAddedToLinks = true;
+                    }
+                }),
+            );
+        }
+    }
+
+    populateDirectLinks();
+    populateRegionIndependentLinks();
+    populateDefault();
+
+    return hrefLangLinks.sort((a, b) => a.hrefLang.localeCompare(b.hrefLang));
+}

package/src/seo/index.ts

@@ -0,0 +1 @@
+export * from './getAlternateLanguageLinks';

package/src/seo/utils/bindLanguagesWithLocales.ts

@@ -0,0 +1,31 @@
+import type { NewsroomLanguageSettings } from '@prezly/sdk';
+
+import type { LangCode, LocaleCode } from '../../intl';
+import { LocaleObject } from '../../intl';
+
+interface LocaleWithLanguage {
+    language: NewsroomLanguageSettings;
+    locale: LocaleObject;
+}
+
+/**
+ * Group languages by their region independent language code (e.g. "en" for "en-US" and "en-GB").
+ */
+export function bindLanguagesWithLocales(languages: NewsroomLanguageSettings[]) {
+    const localesByLangCode = new Map<LangCode, Map<LocaleCode, LocaleWithLanguage>>();
+
+    languages.forEach((language) => {
+        const languageLocale = LocaleObject.fromAnyCode(language.code);
+        const regionIndependentLanguageCode = languageLocale.toNeutralLanguageCode();
+        let currentLocale = localesByLangCode.get(regionIndependentLanguageCode);
+
+        if (!currentLocale) {
+            currentLocale = new Map();
+            localesByLangCode.set(regionIndependentLanguageCode, currentLocale);
+        }
+
+        currentLocale.set(languageLocale.toHyphenCode(), { language, locale: languageLocale });
+    });
+
+    return localesByLangCode;
+}

package/src/seo/utils/createAlternateLanguageLink.ts

@@ -0,0 +1,17 @@
+import type { LocaleObject } from '../../intl';
+
+export function createAlternateLanguageLink(
+    locale: LocaleObject,
+    generateTranslationUrl: (locale: LocaleObject) => string | undefined,
+) {
+    const translationUrl = generateTranslationUrl(locale);
+
+    if (!translationUrl) {
+        return undefined;
+    }
+
+    return {
+        hrefLang: locale.toHyphenCode(),
+        href: translationUrl,
+    };
+}