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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prezly/theme-kit-nextjs",
-  "version": "3.2.2",
+  "version": "3.2.3-0",
   "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,19 @@ export function PageSeo({
             return [];
         }
 
-        const alternateLanguages = getUsedLanguages(languages).filter(
-            (language) => language.code !== currentLocale.toUnderscoreCode(),
-        );
-
-        return alternateLanguages
-            .map((language) => {
-                const locale = LocaleObject.fromAnyCode(language.code);
-
-                const translationLink = getTranslationUrl(locale, true);
+        const usedLanguages = getUsedLanguages(languages);
 
-                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 getAlternateLanguageLinks(
+            usedLanguages,
+            getTranslationUrl,
+            (locale, translationUrl) =>
+                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,26 @@
+import type { LangCode } from './locale';
+import { LocaleObject } from './localeObject';
+
+/**
+ * Fallback locales for each language.
+ * For example, a story has no en(global) locale, then we can take some fallback locale from here.
+ */
+export const localeFallback: Record<LangCode, LocaleObject[]> = {
+    en: [LocaleObject.fromAnyCode('en-US'), LocaleObject.fromAnyCode('en-GB')],
+    fr: [LocaleObject.fromAnyCode('fr-FR'), LocaleObject.fromAnyCode('fr-CA')],
+};
+
+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 & { __BRAND__?: 'langCode' };
+export type RegionCode = string & { __BRAND__?: 'regionCode' };
+export type LocaleCode = string & { __BRAND__?: 'localeCode' };
+
 /**
  * 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 global (without region/culture part).
+     * I.E. `en` is global, while `en-US` is not.
+     */
+    public isGlobal: 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.isGlobal = 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.isGlobal = true;
             this.localeCode = language;
         }
     }

package/src/seo/getAlternateLanguageLinks.test.ts

@@ -0,0 +1,150 @@
+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 createHref(locale: LocaleObject, translationUrl: string) {
+    return `http://localhost:3000/${locale.toNeutralLanguageCode()}/${translationUrl}`;
+}
+
+describe('getAlternateLanguageLinks', () => {
+    it('should handle one en-GB non-default language', () => {
+        const links = getAlternateLanguageLinks([lang('en-GB')], getTranslationUrl, createHref);
+
+        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)],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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')],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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)],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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)],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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 global locale', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en-US'), lang('fr'), lang('fr-FR', true)],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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 global locale as x-default', () => {
+        const links = getAlternateLanguageLinks(
+            [lang('en'), lang('en-US'), lang('fr'), lang('fr-FR')],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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')],
+            getTranslationUrl,
+            createHref,
+        );
+
+        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) => (locale.toHyphenCode() === 'en-US' ? undefined : getTranslationUrl(locale)),
+            createHref,
+        );
+
+        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' },
+        ]);
+    });
+});

package/src/seo/getAlternateLanguageLinks.ts

@@ -0,0 +1,72 @@
+import type { NewsroomLanguageSettings } from '@prezly/sdk';
+
+import type { AlternateLanguageLink } from '../components-nextjs/PageSeo';
+import type { LocaleObject } from '../intl';
+import { getFallbackLocale } from '../intl';
+
+import { createAlternateLanguageLink } from './utils/createAlternateLanguageLink';
+import { getDefaultHrefLang } from './utils/getDefaultHrefLang';
+import { mapLanguagesToLocales } from './utils/mapLanguagesToLocales';
+
+export function getAlternateLanguageLinks(
+    languages: NewsroomLanguageSettings[],
+    getTranslationUrl: (locale: LocaleObject) => string | undefined,
+    createHref: (locale: LocaleObject, translationUrl: string) => string,
+): AlternateLanguageLink[] {
+    const alternateLanguageFallbackGlobalLinks: AlternateLanguageLink[] = [];
+    const alternateLanguageLocales: LocaleObject[] = [];
+    const [localesByLangCode, defaultLangLocale] = mapLanguagesToLocales(languages);
+
+    localesByLangCode.forEach((locales, globalLocaleCode) => {
+        let hasGlobalLocale = false;
+
+        locales.forEach((locale) => {
+            alternateLanguageLocales.push(locale);
+
+            if (!hasGlobalLocale && locale.isGlobal) {
+                hasGlobalLocale = true;
+            }
+        });
+
+        if (!hasGlobalLocale) {
+            const localesArray = Array.from(locales.values());
+            const fallback =
+                getFallbackLocale(globalLocaleCode, localesArray) ?? localesArray.at(0);
+
+            if (fallback) {
+                const fallbackLink = createAlternateLanguageLink(
+                    fallback,
+                    getTranslationUrl,
+                    createHref,
+                );
+
+                if (fallbackLink) {
+                    alternateLanguageFallbackGlobalLinks.push({
+                        ...fallbackLink,
+                        hrefLang: globalLocaleCode,
+                    });
+                }
+            }
+        }
+    });
+
+    let languageAlternates: Array<AlternateLanguageLink | undefined> = alternateLanguageLocales.map(
+        (locale) => createAlternateLanguageLink(locale, getTranslationUrl, createHref),
+    );
+
+    languageAlternates = languageAlternates.concat(alternateLanguageFallbackGlobalLinks);
+
+    const xDefault = getDefaultHrefLang({
+        alternateLanguageLocales,
+        alternateLanguageFallbackGlobalLinks,
+        defaultLangLocale,
+        getTranslationUrl,
+        createHref,
+    });
+
+    languageAlternates.push(xDefault);
+
+    return languageAlternates
+        .filter((link): link is Exclude<typeof link, undefined> => Boolean(link))
+        .sort((a, b) => a.hrefLang.localeCompare(b.hrefLang));
+}

package/src/seo/index.ts

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

package/src/seo/utils/createAlternateLanguageLink.ts

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

package/src/seo/utils/getDefaultHrefLang.ts

@@ -0,0 +1,57 @@
+import type { AlternateLanguageLink } from '../../components-nextjs/PageSeo';
+import type { LocaleObject } from '../../intl';
+
+import { createAlternateLanguageLink } from './createAlternateLanguageLink';
+
+interface Options {
+    alternateLanguageLocales: LocaleObject[];
+    alternateLanguageFallbackGlobalLinks: AlternateLanguageLink[];
+    defaultLangLocale: LocaleObject | undefined;
+    getTranslationUrl: (locale: LocaleObject) => string | undefined;
+    createHref: (locale: LocaleObject, translationUrl: string) => string;
+}
+
+export function getDefaultHrefLang({
+    createHref,
+    defaultLangLocale,
+    getTranslationUrl,
+    alternateLanguageFallbackGlobalLinks,
+    alternateLanguageLocales,
+}: Options): AlternateLanguageLink | undefined {
+    const engFallback = 'en';
+    const hrefLang = 'x-default';
+
+    const fallbackFromLocales = alternateLanguageLocales.find(
+        (alternate) => alternate.isGlobal && alternate.toNeutralLanguageCode() === engFallback,
+    );
+
+    if (fallbackFromLocales) {
+        const link = createAlternateLanguageLink(
+            fallbackFromLocales,
+            getTranslationUrl,
+            createHref,
+        );
+
+        if (link) {
+            return { ...link, hrefLang };
+        }
+    }
+
+    const fallbackFromGlobalLocales = alternateLanguageFallbackGlobalLinks.find(
+        (alternate) => alternate.hrefLang === engFallback,
+    );
+
+    if (fallbackFromGlobalLocales) {
+        return { ...fallbackFromGlobalLocales, hrefLang };
+    }
+
+    if (defaultLangLocale) {
+        const link = createAlternateLanguageLink(defaultLangLocale, getTranslationUrl, createHref);
+
+        if (link) {
+            return { ...link, hrefLang };
+        }
+    }
+
+    return undefined;
+}

package/src/seo/utils/mapLanguagesToLocales.ts

@@ -0,0 +1,28 @@
+import type { NewsroomLanguageSettings } from '@prezly/sdk';
+
+import type { LangCode, LocaleCode } from '../../intl';
+import { LocaleObject } from '../../intl';
+
+export function mapLanguagesToLocales(languages: NewsroomLanguageSettings[]) {
+    let defaultLangLocale: LocaleObject | undefined;
+    const localesByLangCode = new Map<LangCode, Map<LocaleCode, LocaleObject>>();
+
+    languages.forEach((language) => {
+        const languageLocale = LocaleObject.fromAnyCode(language.code);
+        const globalLanguageCode = languageLocale.toNeutralLanguageCode();
+        let currentLocale = localesByLangCode.get(globalLanguageCode);
+
+        if (!currentLocale) {
+            currentLocale = new Map([[languageLocale.toHyphenCode(), languageLocale]]);
+            localesByLangCode.set(globalLanguageCode, currentLocale);
+        }
+
+        currentLocale.set(languageLocale.toHyphenCode(), languageLocale);
+
+        if (language.is_default) {
+            defaultLangLocale = languageLocale;
+        }
+    });
+
+    return [localesByLangCode, defaultLangLocale] as const;
+}