@prezly/theme-kit-nextjs 3.2.2 → 3.2.3-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prezly/theme-kit-nextjs",
-  "version": "3.2.2",
+  "version": "3.2.3-1",
   "description": "Data layer and utility library for developing Prezly themes with NextJS",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -56,19 +56,19 @@
   },
   "devDependencies": {
     "@prezly/eslint-config": "4.3.2",
-    "@sentry/nextjs": "7.34.0",
+    "@sentry/nextjs": "7.35.0",
     "@types/jest": "29.4.0",
     "@types/node": "17.0.14",
     "@types/parse-data-url": "3.0.0",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
-    "eslint": "8.32.0",
+    "eslint": "8.33.0",
     "jest": "29.4.1",
     "np": "7.6.3",
     "prettier": "2.8.3",
     "rimraf": "3.0.2",
     "ts-jest": "29.0.5",
-    "typescript": "4.9.4"
+    "typescript": "4.9.5"
   },
   "publishConfig": {
     "access": "public"

package/src/components-nextjs/PageSeo/PageSeo.tsx

@@ -3,7 +3,7 @@ import type { NextSeoProps } from 'next-seo';
 import { useRouter } from 'next/router';
 import { useMemo } from 'react';
 
-import { getUsedLanguages, LocaleObject } from '../../intl';
+import { getUsedLanguages } from '../../intl';
 import {
     useCompanyInformation,
     useCurrentLocale,
@@ -13,6 +13,7 @@ import {
     useLanguages,
     useNewsroom,
 } from '../../newsroom-context';
+import { getAlternateLanguageLinks } from '../../seo';
 import { getNewsroomLogoUrl } from '../../utils';
 
 import { getAbsoluteUrl } from './lib/getAbsoluteUrl';
@@ -65,31 +66,22 @@ export function PageSeo({
             return [];
         }
 
-        const alternateLanguages = getUsedLanguages(languages).filter(
-            (language) => language.code !== currentLocale.toUnderscoreCode(),
-        );
+        const usedLanguages = getUsedLanguages(languages);
 
-        return alternateLanguages
-            .map((language) => {
-                const locale = LocaleObject.fromAnyCode(language.code);
+        return getAlternateLanguageLinks(usedLanguages, (locale) => {
+            const translationUrl = getTranslationUrl(locale);
 
-                const translationLink = getTranslationUrl(locale, true);
+            if (!translationUrl) {
+                return undefined;
+            }
 
-                if (!translationLink) {
-                    return undefined;
-                }
-
-                return {
-                    hrefLang: locale.toHyphenCode(),
-                    href: getAbsoluteUrl(
-                        translationLink,
-                        site.url,
-                        currentStory && translationLink !== '/' ? false : getLinkLocaleSlug(locale),
-                    ),
-                };
-            })
-            .filter<AlternateLanguageLink>(Boolean as any);
-    }, [currentLocale, getLinkLocaleSlug, getTranslationUrl, languages, site.url, currentStory]);
+            return getAbsoluteUrl(
+                translationUrl,
+                site.url,
+                currentStory && translationUrl !== '/' ? false : getLinkLocaleSlug(locale),
+            );
+        });
+    }, [currentStory, getLinkLocaleSlug, getTranslationUrl, languages, site.url]);
 
     return (
         <NextSeo

package/src/components-nextjs/document.tsx

@@ -26,7 +26,6 @@ export class PrezlyThemeDocument extends Document {
             <Html lang={locale.toHyphenCode()} dir={direction}>
                 <Head>
                     <meta name="og:locale" content={locale.toHyphenCode()} />
-                    {/* TODO: Add alternate locales */}
                 </Head>
                 <body>
                     <Main />

package/src/intl/getFallbackLocale.ts

@@ -0,0 +1,29 @@
+import type { LangCode } from './locale';
+import { LocaleObject } from './localeObject';
+
+const localeFallback: Record<LangCode, LocaleObject[]> = {
+    en: [LocaleObject.fromAnyCode('en-US'), LocaleObject.fromAnyCode('en-GB')],
+    fr: [LocaleObject.fromAnyCode('fr-FR'), LocaleObject.fromAnyCode('fr-CA')],
+};
+
+/**
+ * Fallback locales for each region independent locale.
+ * For example, a story has en-CA en-AU and en-GB locales. As you can see there is no region independent locale.
+ * We will use a list of possible fallbacks to determine region independent locale alias.
+ * In the provided example the result will be en-GB since it is defined in the localeFallback list
+ * If the list will be en-CA en-AU and en-US then the result will be en-US since it is the first one and hence takes precedence.
+ */
+export function getFallbackLocale(
+    langCode: LangCode,
+    availableLocales: LocaleObject[],
+): LocaleObject | undefined {
+    const fallbacks = localeFallback[langCode];
+
+    if (!fallbacks) {
+        return undefined;
+    }
+
+    return fallbacks.find((fallback) =>
+        Boolean(availableLocales.find((available) => available.isEqual(fallback))),
+    );
+}

package/src/intl/index.ts

@@ -1,4 +1,5 @@
+export * from './getFallbackLocale';
 export * from './languages';
-export * from './locale';
 export { default as localeConfig } from './localeConfig';
+export * from './locale';
 export * from './localeObject';

package/src/intl/locale.ts

@@ -8,11 +8,15 @@ export const DEFAULT_LOCALE = 'en';
 // We use pseudo locale used for localization testing, to reliably determine if we need to fallback to the default newsroom language
 export const DUMMY_DEFAULT_LOCALE = 'qps-ploc';
 
+export type LangCode = string;
+export type RegionCode = string;
+export type LocaleCode = string;
+
 /**
  * This a list of locales that Prezly has translations for. Each code represents a language file in the `@prezly/themes-intl-messages` package.
  * See https://github.com/prezly/themes-intl-messages for more info.
  */
-const SUPPORTED_LOCALES = [
+const SUPPORTED_LOCALES: LocaleCode[] = [
     'af',
     'ar',
     'az',

package/src/intl/localeObject.ts

@@ -12,6 +12,12 @@ export class LocaleObject {
      */
     private localeCode: string;
 
+    /**
+     * Whether the locale is region independent (without region/culture part).
+     * I.E. `en` is region independent, while `en-US` is not.
+     */
+    public isRegionIndependent: boolean;
+
     private constructor(localeCode: string) {
         if (!/^([a-z]{2,3})(-[a-z\d]{1,4})?$/i.test(localeCode)) {
             throw new Error('Invalid locale code provided!');
@@ -20,11 +26,13 @@ export class LocaleObject {
         const [language, region] = localeCode.split('-');
 
         if (region) {
+            this.isRegionIndependent = false;
             // Workaround for `zh-Hant` locale, which is the only locale with non-uppercase region part
             const regionSuffix = region === 'hant' ? 'Hant' : region.toUpperCase();
 
             this.localeCode = [language, regionSuffix].join('-');
         } else {
+            this.isRegionIndependent = true;
             this.localeCode = language;
         }
     }

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';
+
+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() {
+        // We use english locale as fallback since English is the most common language
+        const engFallback = 'en';
+        const defaultHrefLang = 'x-default';
+
+        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() === engFallback) {
+                    pushLocaleToLinks(locale, defaultHrefLang);
+                    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 === engFallback,
+            );
+
+            if (fallbackFromRegionIndependentLocales) {
+                hrefLangLinks.push({
+                    ...fallbackFromRegionIndependentLocales,
+                    hrefLang: defaultHrefLang,
+                });
+                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, defaultHrefLang);
+                        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,
+    };
+}