@prezly/theme-kit-nextjs 1.0.0

package/src/data-fetching/lib/getEnvVariables.ts

@@ -0,0 +1,44 @@
+import type { IncomingMessage } from 'http';
+import parseDataUrl from 'parse-data-url';
+
+import type { PrezlyEnv } from '../types';
+
+const decodeJson = (json: string): Record<string, any> => {
+    try {
+        const decoded = JSON.parse(json);
+        if (decoded && typeof decoded === 'object') {
+            return decoded;
+        }
+    } catch {
+        // passthru
+    }
+    return {};
+};
+
+const decodeHttpEnv = (header: string): Record<string, any> => {
+    if (header.startsWith('data:')) {
+        const parsed = parseDataUrl(header);
+        if (parsed && parsed.contentType === 'application/json') {
+            const data = parsed.toBuffer().toString('utf-8');
+            return decodeJson(data);
+        }
+        return {}; // unsupported data-uri
+    }
+    return decodeJson(header);
+};
+
+export const getEnvVariables = (req?: IncomingMessage): PrezlyEnv => {
+    if (process.browser) {
+        throw new Error('"getEnvVariables" should only be used on back-end side.');
+    }
+
+    const headerName = (process.env.HTTP_ENV_HEADER || '').toLowerCase();
+
+    if (headerName && req) {
+        const header = req.headers[headerName] as string | undefined;
+        const httpEnv = decodeHttpEnv(header || '');
+        return { ...process.env, ...httpEnv };
+    }
+
+    return { ...process.env };
+};

package/src/data-fetching/types.ts

@@ -0,0 +1,12 @@
+export interface AlgoliaSettings {
+    ALGOLIA_API_KEY: string;
+    ALGOLIA_APP_ID: string;
+    ALGOLIA_INDEX: string;
+}
+
+export interface PrezlyNewsroomEnv {
+    PREZLY_ACCESS_TOKEN: string;
+    PREZLY_NEWSROOM_UUID: string;
+}
+
+export interface PrezlyEnv extends PrezlyNewsroomEnv, AlgoliaSettings {}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './adapter-nextjs';
+export * from './data-fetching';
+export * from './intl';
+export * from './newsroom-context';
+export * from './types';

package/src/intl/index.ts

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

package/src/intl/lang.ts

@@ -0,0 +1,36 @@
+import { CultureRef, NewsroomLanguageSettings } from '@prezly/sdk';
+
+function isOnlyCulture(culture: CultureRef, languages: NewsroomLanguageSettings[]): boolean {
+    const numberOfLanguages = languages.filter(
+        ({ locale: { language_code } }) => language_code === culture.language_code,
+    ).length;
+
+    return numberOfLanguages === 1;
+}
+
+/**
+ * If there's only one culture used in a specific language,
+ * we strip the culture name completely.
+ *
+ * Examples:
+ *  - English (Global), Spanish (Spain)
+ *      -> English, Spanish
+ *  - English (Global), English (UK), Spanish (Spain)
+ *      -> English (Global), English (UK), Spanish
+ */
+export function getLanguageDisplayName(
+    language: NewsroomLanguageSettings,
+    languages: NewsroomLanguageSettings[],
+): string {
+    const { locale } = language;
+
+    if (isOnlyCulture(locale, languages)) {
+        const cultureNameIndex = locale.native_name.indexOf('(');
+
+        if (cultureNameIndex !== -1) {
+            return locale.native_name.slice(0, cultureNameIndex - 1);
+        }
+    }
+
+    return locale.native_name;
+}

package/src/intl/locale.ts

@@ -0,0 +1,118 @@
+import type { Redirect } from 'next';
+import { ParsedUrlQuery, stringify } from 'querystring';
+
+import { BasePageProps } from '../types';
+
+import { LocaleObject } from './localeObject';
+
+export const DEFAULT_LOCALE = 'en';
+export const DUMMY_DEFAULT_LOCALE = 'qps-ploc';
+
+const SUPPORTED_LOCALES = [
+    'af',
+    'ar',
+    'az',
+    'be',
+    'bg',
+    'cs',
+    'da',
+    'de',
+    'el',
+    'en',
+    'es',
+    'et',
+    'fi',
+    'fil',
+    'fr',
+    'ga',
+    'he',
+    'hi',
+    'hr',
+    'hu',
+    'id',
+    'it',
+    'ja',
+    'kk',
+    'ko',
+    'lt',
+    'lv',
+    'mt',
+    'nl',
+    'no',
+    'pl',
+    'pt-BR',
+    'pt',
+    'ro',
+    'ru',
+    'sk',
+    'sl',
+    'sv',
+    'th',
+    'tr',
+    'uk',
+    'ur',
+    'uz',
+    'vi',
+    'zh-CN',
+    'zh-TW',
+];
+
+export function getSupportedLocaleIsoCode(locale: LocaleObject): string {
+    const localeIsoCode = locale.toHyphenCode();
+
+    const isSupportedLocale =
+        localeIsoCode.length >= 2 && SUPPORTED_LOCALES.includes(localeIsoCode);
+    if (isSupportedLocale) {
+        return localeIsoCode;
+    }
+
+    const language = localeIsoCode.slice(0, 2);
+    const isSupportedLanguage = SUPPORTED_LOCALES.includes(language);
+    if (isSupportedLanguage) {
+        return language;
+    }
+
+    return DEFAULT_LOCALE;
+}
+
+export function getRedirectToCanonicalLocale(
+    basePageProps: BasePageProps,
+    nextLocaleIsoCode: string | undefined,
+    redirectPath: string,
+    query?: ParsedUrlQuery,
+): Redirect | undefined {
+    const { shortestLocaleCode } = basePageProps;
+    const shortestLocaleSlug = shortestLocaleCode
+        ? LocaleObject.fromAnyCode(shortestLocaleCode).toUrlSlug()
+        : shortestLocaleCode;
+
+    if (nextLocaleIsoCode === DUMMY_DEFAULT_LOCALE) {
+        return undefined;
+    }
+
+    if (shortestLocaleSlug !== nextLocaleIsoCode) {
+        const prefixedPath =
+            redirectPath && !redirectPath.startsWith('/') ? `/${redirectPath}` : redirectPath;
+
+        const urlQuery = query ? `?${stringify(query)}` : '';
+
+        return {
+            destination: shortestLocaleSlug
+                ? `/${shortestLocaleSlug}${prefixedPath}${urlQuery}`
+                : `${prefixedPath}${urlQuery}`,
+            permanent: false,
+        };
+    }
+
+    return undefined;
+}
+
+export function getLocaleDirection(locale: LocaleObject): 'ltr' | 'rtl' {
+    const neutralLanguageCode = locale.toNeutralLanguageCode();
+
+    if (['ar', 'he', 'ur'].includes(neutralLanguageCode)) {
+        return 'rtl';
+    }
+
+    return 'ltr';
+}

package/src/intl/localeConfig.js

@@ -0,0 +1,116 @@
+// This list is pulled from the main Prezly application. The underscores are replaced with dashes.
+const supportedLocales = [
+    'af-ZA',
+    'ar',
+    'ar-AE',
+    'ar-BH',
+    'ar-QA',
+    'ar-SA',
+    'az',
+    'be',
+    'bg-BG',
+    'cs-CZ',
+    'da-DK',
+    'de',
+    'de-DE',
+    'de-AT',
+    'de-CH',
+    'el-GR',
+    'en',
+    'en-US',
+    'en-AE',
+    'en-AU',
+    'en-BD',
+    'en-BE',
+    'en-BH',
+    'en-CA',
+    'en-CN',
+    'en-DE',
+    'en-DK',
+    'en-GB',
+    'en-HK',
+    'en-ID',
+    'en-IE',
+    'en-IL',
+    'en-IN',
+    'en-JP',
+    'en-KH',
+    'en-KR',
+    'en-LK',
+    'en-MV',
+    'en-MM',
+    'en-MY',
+    'en-NP',
+    'en-NZ',
+    'en-PH',
+    'en-PK',
+    'en-QA',
+    'en-SA',
+    'en-SG',
+    'en-TH',
+    'en-TW',
+    'en-VN',
+    'en-ZA',
+    'es',
+    'es-ES',
+    'es-MX',
+    'et-EE',
+    'fi-FI',
+    'fil',
+    'fr',
+    'fr-BE',
+    'fr-FR',
+    'fr-CA',
+    'fr-LU',
+    'ga-IE',
+    'he-IL',
+    'hi-IN',
+    'hr-HR',
+    'hu-HU',
+    'id-ID',
+    'it-IT',
+    'ja-JP',
+    'kk',
+    'ko-KR',
+    'ky',
+    'lt-LT',
+    'lv-LV',
+    'mt-MT',
+    'ms-MY',
+    'nb-NO',
+    'nl',
+    'nl-BE',
+    'nl-NL',
+    'pl-PL',
+    'pt',
+    'pt-BR',
+    'pt-PT',
+    'ro-RO',
+    'ru-RU',
+    'sk-SK',
+    'sl-SI',
+    'sv-SE',
+    'th-TH',
+    'tr-TR',
+    'uk-UA',
+    'ur-PK',
+    'uz',
+    'vi-VN',
+    'zh-Hant',
+    'zh-HK',
+    'zh-TW',
+    'zh-CN',
+];
+
+const lowercaseLocales = supportedLocales.map((l) => l.toLowerCase());
+
+// Get all permutations for the shorter locale codes supported by Prezly (e.g. short region codes)
+const lowercaseLocalPermutations = Array.from(
+    new Set([
+        ...lowercaseLocales,
+        ...lowercaseLocales.map((code) => code.split('-')[0]),
+        ...lowercaseLocales.map((code) => code.split('-')[1]).filter(Boolean),
+    ]),
+).sort();
+
+module.exports = lowercaseLocalPermutations;

package/src/intl/localeObject.ts

@@ -0,0 +1,73 @@
+import localeConfig from './localeConfig';
+
+export class LocaleObject {
+    /**
+     * Hyphen-separated locale code.
+     * Examples: `nl-BE`, `en-US`, `fr`, `fil`
+     */
+    private localeCode: string;
+
+    private constructor(localeCode: string) {
+        if (localeCode.indexOf('_') !== -1) {
+            throw new Error('Invalid locale code provided!');
+        }
+
+        const [language, region] = localeCode.split('-');
+
+        if (region) {
+            this.localeCode = [language, region.toUpperCase()].join('-');
+        } else {
+            this.localeCode = language;
+        }
+    }
+
+    /**
+     * @param localeCode Locale code in any of the formats below.
+     * Examples:
+     * - Hyphen-codes: `nl-BE`, `en-US`, `fr`, `fil`
+     * - Underscore-codes: `nl_BE`, `en_US`, `fr`, `fil`
+     * - Slugs: `nl-be`, `en-us`, `fr`, `fil`
+     */
+    public static fromAnyCode(localeCode: string): LocaleObject {
+        const lowercaseCode = localeCode.toLowerCase().replace('_', '-');
+        const foundCode = localeConfig.find((code) => code === lowercaseCode);
+
+        if (!foundCode) {
+            throw new Error(`Unsupported locale code provided: "${lowercaseCode}"`);
+        }
+
+        return new LocaleObject(foundCode);
+    }
+
+    public toHyphenCode(): string {
+        return this.localeCode;
+    }
+
+    public toUnderscoreCode(): string {
+        return this.localeCode.replace('-', '_');
+    }
+
+    public toUrlSlug(): string {
+        return this.localeCode.toLowerCase();
+    }
+
+    public toNeutralLanguageCode(): string {
+        const [language] = this.localeCode.split('-');
+
+        return language;
+    }
+
+    public toRegionCode(): string {
+        const [language, region] = this.localeCode.split('-');
+
+        if (!region) {
+            return language.toUpperCase();
+        }
+
+        return region.toUpperCase();
+    }
+
+    public isEqual(anotherLocale: LocaleObject) {
+        return anotherLocale.toHyphenCode() === this.localeCode;
+    }
+}

package/src/newsroom-context/context.tsx

@@ -0,0 +1,73 @@
+import type {
+    Category,
+    Newsroom,
+    NewsroomCompanyInformation,
+    NewsroomContact,
+    NewsroomLanguageSettings,
+    NewsroomThemePreset,
+    Story,
+} from '@prezly/sdk';
+import { createContext, FunctionComponent, useMemo } from 'react';
+
+import type { AlgoliaSettings } from '../data-fetching';
+import { LocaleObject } from '../intl';
+import { Translations } from '../types';
+
+export interface INewsroomContext {
+    newsroom: Newsroom;
+    companyInformation: NewsroomCompanyInformation;
+    categories: Category[];
+    contacts?: NewsroomContact[];
+    selectedCategory?: Category;
+    selectedStory?: Story;
+    languages: NewsroomLanguageSettings[];
+    locale: LocaleObject;
+    hasError?: boolean;
+    themePreset: NewsroomThemePreset;
+    algoliaSettings: AlgoliaSettings;
+}
+
+interface Props extends Omit<INewsroomContext, 'locale'> {
+    isTrackingEnabled?: boolean;
+    localeCode: string;
+    translations?: Translations;
+}
+
+export const NewsroomContext = createContext<INewsroomContext | undefined>(undefined);
+
+export const NewsroomContextProvider: FunctionComponent<Props> = ({
+    categories,
+    contacts,
+    newsroom,
+    selectedCategory,
+    selectedStory,
+    companyInformation,
+    languages,
+    localeCode,
+    hasError,
+    themePreset,
+    algoliaSettings,
+    children,
+}) => {
+    const locale = useMemo(() => LocaleObject.fromAnyCode(localeCode || 'en'), [localeCode]);
+
+    return (
+        <NewsroomContext.Provider
+            value={{
+                categories,
+                contacts,
+                newsroom,
+                selectedCategory,
+                selectedStory,
+                companyInformation,
+                languages,
+                locale,
+                hasError,
+                themePreset,
+                algoliaSettings,
+            }}
+        >
+            {children}
+        </NewsroomContext.Provider>
+    );
+};

package/src/newsroom-context/hooks/index.ts

@@ -0,0 +1,11 @@
+export * from './useAlgoliaSettings';
+export * from './useCategories';
+export * from './useCompanyInformation';
+export * from './useCurrentLocale';
+export * from './useGetLinkLocaleSlug';
+export * from './useGetTranslationUrl';
+export * from './useLanguages';
+export * from './useNewsroom';
+export * from './useNewsroomContext';
+export * from './useSelectedCategory';
+export * from './useSelectedStory';

package/src/newsroom-context/hooks/useAlgoliaSettings.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useAlgoliaSettings = () => {
+    const context = useNewsroomContext();
+
+    return context.algoliaSettings;
+};

package/src/newsroom-context/hooks/useCategories.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useCategories = () => {
+    const context = useNewsroomContext();
+
+    return context.categories;
+};

package/src/newsroom-context/hooks/useCompanyInformation.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useCompanyInformation = () => {
+    const context = useNewsroomContext();
+
+    return context.companyInformation;
+};

package/src/newsroom-context/hooks/useCurrentLocale.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useCurrentLocale = () => {
+    const context = useNewsroomContext();
+
+    return context.locale;
+};

package/src/newsroom-context/hooks/useGetLinkLocaleSlug.ts

@@ -0,0 +1,33 @@
+import type { NewsroomLanguageSettings } from '@prezly/sdk';
+import { useCallback } from 'react';
+
+import { getShortestLocaleCode } from '../../data-fetching';
+import { LocaleObject } from '../../intl';
+
+import { useCurrentLocale } from './useCurrentLocale';
+import { useLanguages } from './useLanguages';
+
+// Determine correct locale slug for the link (trying to shorten the locale code if possible)
+function getLinkLocaleSlug(
+    languages: NewsroomLanguageSettings[],
+    locale: LocaleObject,
+): string | false {
+    const shortestLocaleCode = getShortestLocaleCode(languages, locale);
+    // When navigating to default language, we don't append the locale to the URL.
+    if (!shortestLocaleCode) {
+        return shortestLocaleCode;
+    }
+
+    return LocaleObject.fromAnyCode(shortestLocaleCode).toUrlSlug();
+}
+
+export function useGetLinkLocaleSlug() {
+    const currentLocale = useCurrentLocale();
+    const languages = useLanguages();
+
+    // The `locale` parameter is mainly used for Language Dropdown
+    return useCallback(
+        (locale?: LocaleObject) => getLinkLocaleSlug(languages, locale || currentLocale),
+        [languages, currentLocale],
+    );
+}

package/src/newsroom-context/hooks/useGetTranslationUrl.ts

@@ -0,0 +1,61 @@
+import type { Category, Story } from '@prezly/sdk';
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+
+import { getCategoryHasTranslation, getCategoryUrl } from '../../data-fetching';
+import { LocaleObject } from '../../intl';
+
+import { useSelectedCategory } from './useSelectedCategory';
+import { useSelectedStory } from './useSelectedStory';
+
+// Determine correct URL for translated stories/categories with a fallback to homepage
+function getTranslationUrl(
+    locale: LocaleObject,
+    path: string,
+    selectedCategory?: Category,
+    selectedStory?: Story,
+    noFallback?: boolean,
+) {
+    if (selectedCategory) {
+        if (getCategoryHasTranslation(selectedCategory, locale)) {
+            return getCategoryUrl(selectedCategory, locale);
+        }
+
+        if (noFallback) {
+            return '';
+        }
+
+        return '/';
+    }
+
+    const localeCode = locale.toUnderscoreCode();
+
+    if (selectedStory && selectedStory.culture.locale !== localeCode) {
+        const translatedStory = selectedStory.translations.find(
+            ({ culture }) => culture.locale === localeCode,
+        );
+        if (translatedStory) {
+            return `/${translatedStory.slug}`;
+        }
+
+        if (noFallback) {
+            return '';
+        }
+
+        return '/';
+    }
+
+    return path;
+}
+
+export function useGetTranslationUrl() {
+    const { asPath } = useRouter();
+    const selectedCategory = useSelectedCategory();
+    const selectedStory = useSelectedStory();
+
+    return useCallback(
+        (locale: LocaleObject, noFallback?: boolean) =>
+            getTranslationUrl(locale, asPath, selectedCategory, selectedStory, noFallback),
+        [asPath, selectedCategory, selectedStory],
+    );
+}

package/src/newsroom-context/hooks/useLanguages.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useLanguages = () => {
+    const context = useNewsroomContext();
+
+    return context.languages;
+};

package/src/newsroom-context/hooks/useNewsroom.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useNewsroom = () => {
+    const context = useNewsroomContext();
+
+    return context.newsroom;
+};

package/src/newsroom-context/hooks/useNewsroomContext.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+
+import { INewsroomContext, NewsroomContext } from '../context';
+
+export const useNewsroomContext = () => {
+    // TS Compiler is having a hard time figuring this type implicitly, so we have to set it explicitly
+    // See https://github.com/microsoft/TypeScript/issues/5711#issuecomment-340283439
+    const newsroomContext: INewsroomContext | undefined = useContext(NewsroomContext);
+    if (!newsroomContext) {
+        throw new Error('No `NewsroomContextProvider` found when calling `useNewsroomContext`');
+    }
+
+    return newsroomContext;
+};

package/src/newsroom-context/hooks/useSelectedCategory.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useSelectedCategory = () => {
+    const context = useNewsroomContext();
+
+    return context.selectedCategory;
+};

package/src/newsroom-context/hooks/useSelectedStory.ts

@@ -0,0 +1,7 @@
+import { useNewsroomContext } from './useNewsroomContext';
+
+export const useSelectedStory = () => {
+    const context = useNewsroomContext();
+
+    return context.selectedStory;
+};

package/src/newsroom-context/index.ts

@@ -0,0 +1,2 @@
+export { NewsroomContext, NewsroomContextProvider } from './context';
+export * from './hooks';