@prezly/theme-kit-nextjs 1.0.0

package/src/data-fetching/api/PrezlyApi.ts

@@ -0,0 +1,240 @@
+import PrezlySDK, {
+    Category,
+    ExtraStoryFields,
+    Newsroom,
+    NewsroomLanguageSettings,
+    Story,
+} from '@prezly/sdk';
+import type { IncomingMessage } from 'http';
+
+import { LocaleObject } from '../../intl';
+import { BasePageProps } from '../../types';
+import { DEFAULT_PAGE_SIZE } from '../constants';
+import { getAlgoliaSettings } from '../lib/getAlgoliaSettings';
+
+import {
+    getCompanyInformation,
+    getDefaultLanguage,
+    getLanguageFromNextLocaleIsoCode,
+    getLanguageFromStory,
+    getShortestLocaleCode,
+} from './languages';
+import {
+    getContactsQuery,
+    getGalleriesQuery,
+    getSlugQuery,
+    getSortByPublishedDate,
+    getStoriesQuery,
+} from './queries';
+
+const DEFAULT_SORT_ORDER: SortOrder = 'desc';
+
+type SortOrder = 'desc' | 'asc';
+
+interface GetStoriesOptions {
+    page?: number;
+    pageSize?: number;
+    order?: SortOrder;
+    include?: (keyof ExtraStoryFields)[];
+    localeCode?: string;
+}
+
+interface GetGalleriesOptions {
+    page?: number;
+    pageSize: number;
+}
+
+export class PrezlyApi {
+    private readonly sdk: PrezlySDK;
+
+    private readonly newsroomUuid: Newsroom['uuid'];
+
+    constructor(accessToken: string, newsroomUuid: Newsroom['uuid']) {
+        const baseUrl = process.env.API_BASE_URL_OVERRIDE ?? undefined;
+        this.sdk = new PrezlySDK({
+            accessToken,
+            baseUrl,
+            headers: { 'X-Convert-v1-To-v3': 'true' },
+        });
+        this.newsroomUuid = newsroomUuid;
+    }
+
+    getStory(uuid: string) {
+        return this.sdk.stories.get(uuid);
+    }
+
+    async getNewsroom() {
+        return this.sdk.newsrooms.get(this.newsroomUuid);
+    }
+
+    async getNewsroomContacts() {
+        return this.sdk.newsroomContacts.search(this.newsroomUuid, {
+            query: JSON.stringify(getContactsQuery()),
+        });
+    }
+
+    async getNewsroomLanguages(): Promise<NewsroomLanguageSettings[]> {
+        return (await this.sdk.newsroomLanguages.list(this.newsroomUuid)).languages;
+    }
+
+    async getAllStories(order: SortOrder = DEFAULT_SORT_ORDER) {
+        const sortOrder = getSortByPublishedDate(order);
+        const newsroom = await this.getNewsroom();
+        const jsonQuery = JSON.stringify(getStoriesQuery(newsroom.uuid));
+        const maxStories = newsroom.stories_number;
+        const chunkSize = 200;
+
+        const pages = Math.ceil(maxStories / chunkSize);
+        const storiesPromises = Array.from({ length: pages }, (_, pageIndex) =>
+            this.searchStories({
+                limit: chunkSize,
+                sortOrder,
+                jsonQuery,
+                offset: pageIndex * chunkSize,
+            }),
+        );
+
+        const stories = (await Promise.all(storiesPromises)).flatMap(
+            (response) => response.stories,
+        );
+
+        return stories;
+    }
+
+    async getStories({
+        page = undefined,
+        pageSize = DEFAULT_PAGE_SIZE,
+        order = DEFAULT_SORT_ORDER,
+        include,
+        localeCode,
+    }: GetStoriesOptions = {}) {
+        const sortOrder = getSortByPublishedDate(order);
+        const jsonQuery = JSON.stringify(getStoriesQuery(this.newsroomUuid, undefined, localeCode));
+
+        const { stories, pagination } = await this.searchStories({
+            limit: pageSize,
+            offset: typeof page === 'undefined' ? undefined : (page - 1) * pageSize,
+            sortOrder,
+            jsonQuery,
+            include,
+        });
+
+        const storiesTotal = pagination.matched_records_number;
+
+        return { stories, storiesTotal };
+    }
+
+    async getStoriesFromCategory(
+        category: Category,
+        {
+            page = undefined,
+            pageSize = DEFAULT_PAGE_SIZE,
+            order = DEFAULT_SORT_ORDER,
+            include,
+            localeCode,
+        }: GetStoriesOptions = {},
+    ) {
+        const sortOrder = getSortByPublishedDate(order);
+        const jsonQuery = JSON.stringify(
+            getStoriesQuery(this.newsroomUuid, category.id, localeCode),
+        );
+
+        const { stories, pagination } = await this.searchStories({
+            limit: pageSize,
+            offset: typeof page === 'undefined' ? undefined : (page - 1) * pageSize,
+            sortOrder,
+            jsonQuery,
+            include,
+        });
+
+        const storiesTotal = pagination.matched_records_number;
+
+        return { stories, storiesTotal };
+    }
+
+    async getStoryBySlug(slug: string) {
+        const jsonQuery = JSON.stringify(getSlugQuery(this.newsroomUuid, slug));
+        const { stories } = await this.searchStories({
+            limit: 1,
+            jsonQuery,
+        });
+
+        if (stories[0]) {
+            return this.getStory(stories[0].uuid);
+        }
+
+        return null;
+    }
+
+    async getCategories(): Promise<Category[]> {
+        const categories = await this.sdk.newsroomCategories.list(this.newsroomUuid);
+
+        return Array.isArray(categories) ? categories : Object.values(categories);
+    }
+
+    async getCategoryBySlug(slug: string) {
+        const categories = await this.getCategories();
+
+        return categories.find((category) =>
+            Object.values(category.i18n).some((t) => t.slug === slug),
+        );
+    }
+
+    searchStories: typeof PrezlySDK.prototype.stories.search = (options) =>
+        this.sdk.stories.search(options);
+
+    async getGalleries({ page = undefined, pageSize }: GetGalleriesOptions) {
+        return this.sdk.newsroomGalleries.list(this.newsroomUuid, {
+            limit: pageSize,
+            offset: typeof page === 'undefined' ? undefined : (page - 1) * pageSize,
+            scope: getGalleriesQuery(),
+        });
+    }
+
+    async getGallery(uuid: string) {
+        return this.sdk.newsroomGalleries.get(this.newsroomUuid, uuid);
+    }
+
+    async getThemePreset() {
+        return this.sdk.newsroomThemes.getActive(this.newsroomUuid);
+    }
+
+    async getBasePageProps(
+        request: IncomingMessage | undefined,
+        nextLocaleIsoCode?: string,
+        story?: Story,
+    ): Promise<BasePageProps> {
+        const [newsroom, languages, categories, themePreset] = await Promise.all([
+            this.getNewsroom(),
+            this.getNewsroomLanguages(),
+            this.getCategories(),
+            this.getThemePreset(),
+        ]);
+
+        const currentLanguage = story
+            ? getLanguageFromStory(languages, story)
+            : getLanguageFromNextLocaleIsoCode(languages, nextLocaleIsoCode);
+        const defaultLanguage = getDefaultLanguage(languages);
+
+        const { code: localeCode } = currentLanguage || defaultLanguage;
+        const locale = LocaleObject.fromAnyCode(localeCode);
+        const shortestLocaleCode = getShortestLocaleCode(languages, locale);
+
+        // TODO: if no information given for current language, show boilerplate from default language
+        const companyInformation = getCompanyInformation(languages, locale);
+
+        const algoliaSettings = getAlgoliaSettings(request);
+
+        return {
+            newsroom,
+            companyInformation,
+            categories,
+            languages,
+            localeCode,
+            shortestLocaleCode,
+            localeResolved: Boolean(currentLanguage),
+            themePreset,
+            algoliaSettings,
+        };
+    }
+}

package/src/data-fetching/api/getPrezlyApi.ts

@@ -0,0 +1,24 @@
+import type { IncomingMessage } from 'http';
+
+import { getEnvVariables } from '../lib/getEnvVariables';
+
+import { PrezlyApi } from './PrezlyApi';
+
+export const getPrezlyApi = (req?: IncomingMessage): PrezlyApi => {
+    if (process.browser) {
+        throw new Error('"getPrezlyApi" should only be used on back-end side.');
+    }
+
+    // `getEnvVariables` handles both cases for envs parsing - .env and request headers
+    const { PREZLY_ACCESS_TOKEN, PREZLY_NEWSROOM_UUID } = getEnvVariables(req);
+
+    if (!PREZLY_ACCESS_TOKEN) {
+        throw new Error('"PREZLY_ACCESS_TOKEN" is not set in env variables.');
+    }
+
+    if (!PREZLY_NEWSROOM_UUID) {
+        throw new Error('"PREZLY_NEWSROOM_UUID" is not set in env variables.');
+    }
+
+    return new PrezlyApi(PREZLY_ACCESS_TOKEN, PREZLY_NEWSROOM_UUID);
+};

package/src/data-fetching/api/index.ts

@@ -0,0 +1,2 @@
+export * from './getPrezlyApi';
+export * from './languages';

package/src/data-fetching/api/languages.ts

@@ -0,0 +1,172 @@
+import type { NewsroomLanguageSettings, Story } from '@prezly/sdk';
+
+import { DUMMY_DEFAULT_LOCALE, LocaleObject } from '../../intl';
+
+export function getDefaultLanguage(languages: NewsroomLanguageSettings[]) {
+    return languages.find(({ is_default }) => is_default) || languages[0];
+}
+
+export function getUsedLanguages(languages: NewsroomLanguageSettings[]) {
+    return languages.filter((language) => language.public_stories_count > 0);
+}
+
+function getLanguageByExactLocaleCode(languages: NewsroomLanguageSettings[], locale: LocaleObject) {
+    const localeCode = locale.toUnderscoreCode();
+    return languages.find(({ code }) => code === localeCode);
+}
+
+// See https://github.com/prezly/prezly/blob/master/lib/model/CulturePeer.php#L123
+function getLanguageByNeutralLocaleCode(
+    languages: NewsroomLanguageSettings[],
+    locale: LocaleObject,
+) {
+    const neutralLanguageCode = locale.toNeutralLanguageCode();
+
+    // Prefer default language
+    const defaultLanguage = getDefaultLanguage(languages);
+    if (defaultLanguage.code === locale.toUnderscoreCode()) {
+        return defaultLanguage;
+    }
+
+    // Try to look in used cultures first (giving priority to used ones)
+    const usedLanguages = getUsedLanguages(languages);
+    const usedLanguage = usedLanguages.find(
+        ({ code }) =>
+            LocaleObject.fromAnyCode(code).toNeutralLanguageCode() === neutralLanguageCode ||
+            code === neutralLanguageCode,
+    );
+    if (usedLanguage) {
+        return usedLanguage;
+    }
+
+    // Search in all languages
+    return languages.find(
+        ({ code }) =>
+            LocaleObject.fromAnyCode(code).toNeutralLanguageCode() === neutralLanguageCode ||
+            code === neutralLanguageCode,
+    );
+}
+
+// See https://github.com/prezly/prezly/blob/master/lib/model/CulturePeer.php#L159
+function getLanguageByShortRegionCode(languages: NewsroomLanguageSettings[], locale: LocaleObject) {
+    const shortRegionCode = locale.toRegionCode();
+
+    // Prefer default language
+    const defaultLanguage = getDefaultLanguage(languages);
+    if (LocaleObject.fromAnyCode(defaultLanguage.code).toRegionCode() === shortRegionCode) {
+        return defaultLanguage;
+    }
+
+    // Try to look in used cultures first (giving priority to used ones)
+    const usedLanguages = getUsedLanguages(languages);
+    const usedLanguage = usedLanguages.find(
+        ({ code }) => LocaleObject.fromAnyCode(code).toRegionCode() === shortRegionCode,
+    );
+    if (usedLanguage) {
+        return usedLanguage;
+    }
+
+    // Search in all languages
+    return languages.find(
+        ({ code }) => LocaleObject.fromAnyCode(code).toRegionCode() === shortRegionCode,
+    );
+}
+
+/**
+ * Retrieve a culture with fallback to legacy codes support.
+ * Pulled from https://github.com/prezly/prezly/blob/de9900d9890a33502780494aa3fb85c9a732b3c3/lib/model/CulturePeer.php#L91-L114
+ */
+export function getLanguageFromNextLocaleIsoCode(
+    languages: NewsroomLanguageSettings[],
+    nextLocaleIsoCode?: string,
+): NewsroomLanguageSettings | undefined {
+    const defaultLanguage = getDefaultLanguage(languages);
+
+    if (!nextLocaleIsoCode || nextLocaleIsoCode === DUMMY_DEFAULT_LOCALE) {
+        return defaultLanguage;
+    }
+
+    const locale = LocaleObject.fromAnyCode(nextLocaleIsoCode);
+    let targetLanguage: NewsroomLanguageSettings | undefined;
+
+    if (nextLocaleIsoCode.length === 2) {
+        targetLanguage =
+            getLanguageByExactLocaleCode(languages, locale) ||
+            getLanguageByNeutralLocaleCode(languages, locale) ||
+            getLanguageByShortRegionCode(languages, locale);
+        if (targetLanguage) {
+            return targetLanguage;
+        }
+    } else {
+        targetLanguage = getLanguageByExactLocaleCode(languages, locale);
+    }
+
+    return targetLanguage;
+}
+
+export function getLanguageFromStory(languages: NewsroomLanguageSettings[], story: Story) {
+    const { code: storyLocaleCode } = story.culture;
+
+    return languages.find(({ code }) => code === storyLocaleCode);
+}
+
+export function getCompanyInformation(languages: NewsroomLanguageSettings[], locale: LocaleObject) {
+    const currentLanguage =
+        getLanguageByExactLocaleCode(languages, locale) || getDefaultLanguage(languages);
+
+    return currentLanguage.company_information;
+}
+
+/**
+ * Get shortest locale code possible from full locale code
+ * First: try shorting to neutral language code (there should be no locales with the same language code)
+ * Then: try shorting to region code (there should be no locales with the same region code)
+ * Finally: return the original locale code (shorting is not possible)
+ */
+export function getShortestLocaleCode(
+    languages: NewsroomLanguageSettings[],
+    locale: LocaleObject,
+): string | false {
+    const localeCode = locale.toUnderscoreCode();
+    const defaultLanguage = getDefaultLanguage(languages);
+    // If it's a default locale, return false (no locale needed in URL)
+    if (localeCode === defaultLanguage.code) {
+        return false;
+    }
+
+    // Try shorting to neutral language code
+    const neutralLanguageCode = locale.toNeutralLanguageCode();
+    // The code is already as short as possible
+    if (neutralLanguageCode === localeCode) {
+        return localeCode;
+    }
+
+    const matchingLanguagesByNeutralCode = languages.filter(
+        ({ code }) =>
+            LocaleObject.fromAnyCode(code).toNeutralLanguageCode() === neutralLanguageCode ||
+            code === neutralLanguageCode,
+    );
+    if (matchingLanguagesByNeutralCode.length === 1) {
+        return neutralLanguageCode;
+    }
+
+    // Try shorting to region code
+    const shortRegionCode = locale.toRegionCode();
+    const matchingLanguagesByRegionCode = languages.filter(
+        ({ code }) => LocaleObject.fromAnyCode(code).toRegionCode() === shortRegionCode,
+    );
+    // Prevent collision with neutral language codes
+    const mathchingNeutralLanguagesByRegionCode = languages.filter(
+        ({ code }) =>
+            LocaleObject.fromAnyCode(code).toNeutralLanguageCode() === shortRegionCode ||
+            code === shortRegionCode,
+    );
+    if (
+        matchingLanguagesByRegionCode.length === 1 &&
+        !mathchingNeutralLanguagesByRegionCode.length
+    ) {
+        return shortRegionCode;
+    }
+
+    return localeCode;
+}

package/src/data-fetching/api/queries.ts

@@ -0,0 +1,44 @@
+const publishedAndAccessible = [
+    { lifecycle_status: { $in: ['published'] } },
+    { visibility: { $in: ['public', 'private'] } },
+];
+
+const publishedAndPublic = [
+    { lifecycle_status: { $in: ['published'] } },
+    { visibility: { $in: ['public'] } },
+];
+
+export const getSlugQuery = (newsroomUuid: string, slug: string) => ({
+    $and: [
+        { 'newsroom.uuid': { $in: [newsroomUuid] } },
+        { slug: { $eq: slug } },
+        ...publishedAndAccessible,
+    ],
+});
+
+export const getStoriesQuery = (newsroomUuid: string, categoryId?: number, localeCode?: string) => {
+    const query: any = {
+        $and: [...publishedAndPublic, { 'newsroom.uuid': { $in: [newsroomUuid] } }],
+    };
+
+    if (categoryId) {
+        query.$and.push({ 'category.id': { $any: [categoryId] } });
+    }
+
+    if (localeCode) {
+        query.$and.push({ locale: { $in: [localeCode] } });
+    }
+
+    return query;
+};
+
+export const getSortByPublishedDate = (order: 'asc' | 'desc') =>
+    order === 'desc' ? '-published_at' : 'published_at';
+
+export const getGalleriesQuery = () => ({
+    $and: [{ status: { $eq: 'public' } }, { images_number: { $gt: 0 } }],
+});
+
+export const getContactsQuery = () => ({
+    $and: [{ is_featured: { $eq: true } }],
+});

package/src/data-fetching/constants.ts

@@ -0,0 +1,2 @@
+export const ASSETS_URL = 'https://cdn.uc.assets.prezly.com';
+export const DEFAULT_PAGE_SIZE = 12;

package/src/data-fetching/getAssetsUrl.ts

@@ -0,0 +1,5 @@
+import { ASSETS_URL } from './constants';
+
+export function getAssetsUrl(uuid: string) {
+    return `${ASSETS_URL}/${uuid}/`;
+}

package/src/data-fetching/getLocalizedCategoryData.ts

@@ -0,0 +1,47 @@
+import type { Category } from '@prezly/sdk';
+
+import { LocaleObject } from '../intl';
+import { AlgoliaCategoryRef } from '../types';
+
+function isAlgoliaCategory(
+    category: Category | AlgoliaCategoryRef,
+): category is AlgoliaCategoryRef {
+    return 'name' in category && 'slug' in category;
+}
+
+export function getLocalizedCategoryData(
+    category: Category | AlgoliaCategoryRef,
+    locale: LocaleObject,
+) {
+    if (isAlgoliaCategory(category)) {
+        return {
+            description: null,
+            name: category.name,
+            slug: category.slug,
+        };
+    }
+
+    const targetLocaleCode = locale.toUnderscoreCode();
+    const { i18n } = category;
+    const populatedLocales = Object.keys(i18n).filter((localeCode) => i18n[localeCode].name);
+    const targetLocale =
+        populatedLocales.find((localeCode) => localeCode === targetLocaleCode) ||
+        populatedLocales.find((localeCode) => i18n[localeCode].name === category.display_name) ||
+        populatedLocales[0];
+
+    const { locale: _, ...localizedData } = i18n[targetLocale];
+
+    return localizedData;
+}
+
+export function getCategoryUrl(category: Category | AlgoliaCategoryRef, locale: LocaleObject) {
+    const { slug } = getLocalizedCategoryData(category, locale);
+    return `/category/${slug}`;
+}
+
+export function getCategoryHasTranslation(category: Category, locale: LocaleObject) {
+    const targetLocaleCode = locale.toUnderscoreCode();
+    const { i18n } = category;
+    const populatedLocales = Object.keys(i18n).filter((localeCode) => i18n[localeCode].name);
+    return Boolean(populatedLocales.find((localeCode) => localeCode === targetLocaleCode));
+}

package/src/data-fetching/getNewsroomLogoUrl.ts

@@ -0,0 +1,21 @@
+import type { Newsroom } from '@prezly/sdk';
+
+import { getAssetsUrl } from './getAssetsUrl';
+
+export function getNewsroomLogoUrl(newsroom: Newsroom): string {
+    if (newsroom.newsroom_logo) {
+        getAssetsUrl(newsroom.newsroom_logo.uuid);
+    }
+
+    return '';
+}
+
+export function getNewsroomFaviconUrl(newsroom: Newsroom, previewSize = 400): string {
+    if (newsroom.icon) {
+        return `${getAssetsUrl(
+            newsroom.icon.uuid,
+        )}-/preview/${previewSize}x${previewSize}/-/quality/best/`;
+    }
+
+    return '';
+}

package/src/data-fetching/getPrivacyPortalUrl.ts

@@ -0,0 +1,22 @@
+import type { Newsroom } from '@prezly/sdk';
+
+import { LocaleObject } from '../intl';
+
+type PrivacyPortalUrlOptions = { email?: string; action?: 'subscribe' | 'unsubscribe' };
+
+export function getPrivacyPortalUrl(
+    newsroom: Newsroom,
+    locale: LocaleObject,
+    options?: PrivacyPortalUrlOptions,
+) {
+    const { email, action = 'subscribe' } = options || {};
+
+    const url = new URL(
+        `/${locale.toUrlSlug()}/newsroom/${newsroom.uuid}/${action}`,
+        'https://privacy.prezly.com',
+    );
+    if (email) {
+        url.searchParams.append('email', email);
+    }
+    return url.toString();
+}

package/src/data-fetching/getStoryPublicationDate.tsx

@@ -0,0 +1,15 @@
+import type { Story } from '@prezly/sdk';
+
+import { AlgoliaStory } from '../types';
+
+export function getStoryPublicationDate(story: Story | AlgoliaStory): Date | null {
+    const { published_at } = story;
+
+    if (!published_at) {
+        return null;
+    }
+
+    return typeof published_at === 'string'
+        ? new Date(published_at)
+        : new Date(published_at * 1000);
+}

package/src/data-fetching/getUploadcareGroupUrl.ts

@@ -0,0 +1,5 @@
+import { ASSETS_URL } from './constants';
+
+export function getUploadcareGroupUrl(uuid: string, title: string) {
+    return `${ASSETS_URL}/${uuid}/archive/zip/${encodeURI(title)}.zip`;
+}

package/src/data-fetching/index.ts

@@ -0,0 +1,9 @@
+export * from './api';
+export * from './constants';
+export * from './getAssetsUrl';
+export * from './getLocalizedCategoryData';
+export * from './getNewsroomLogoUrl';
+export * from './getPrivacyPortalUrl';
+export * from './getStoryPublicationDate';
+export * from './getUploadcareGroupUrl';
+export * from './types';

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

@@ -0,0 +1,29 @@
+import type { IncomingMessage } from 'http';
+
+import { AlgoliaSettings } from '../types';
+
+import { getEnvVariables } from './getEnvVariables';
+
+export const getAlgoliaSettings = (req?: IncomingMessage): AlgoliaSettings => {
+    if (process.browser) {
+        throw new Error('"getAlgoliaSettings" should only be used on back-end side.');
+    }
+
+    // `getEnvVariables` handles both cases for envs parsing - .env and request headers
+    const {
+        ALGOLIA_API_KEY = '',
+        ALGOLIA_APP_ID = 'UI4CNRAHQB',
+        ALGOLIA_INDEX = 'public_stories_prod',
+    } = getEnvVariables(req);
+
+    if (!ALGOLIA_API_KEY) {
+        // eslint-disable-next-line no-console
+        console.error('"ALGOLIA_API_KEY" is not set in env variables. Search will not be enabled');
+    }
+
+    return {
+        ALGOLIA_API_KEY,
+        ALGOLIA_APP_ID,
+        ALGOLIA_INDEX,
+    };
+};