@prezly/theme-kit-nextjs 1.14.0 → 1.15.0-0

package/src/adapter-nextjs/page-props/category.ts

@@ -1,10 +1,20 @@
 import type { ExtraStoryFields, Story } from '@prezly/sdk';
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPathsResult,
+    GetStaticPropsContext,
+    GetStaticPropsResult,
+} from 'next';
 
+import { getPrezlyApi } from '../../data-fetching';
 import type { PaginationProps } from '../../infinite-loading/types';
-import { DEFAULT_PAGE_SIZE } from '../../utils';
+import { LocaleObject } from '../../intl';
+import { DEFAULT_PAGE_SIZE, getLocalizedCategoryData } from '../../utils';
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
+import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
 import { processRequest } from '../processRequest';
+import { processStaticRequest } from '../processStaticRequest';
 
 import type { PropsFunction } from './lib/types';
 
@@ -73,3 +83,76 @@ export function getCategoryPageServerSideProps<
         );
     };
 }
+
+export function getCategoryPageStaticProps<
+    CustomProps extends Record<string, any>,
+    StoryType extends Story = Story,
+>(customProps: CustomProps | PropsFunction<CustomProps>, options?: Options) {
+    const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields } = options || {};
+
+    return async function getStaticProps(
+        context: GetStaticPropsContext,
+    ): Promise<GetStaticPropsResult<CategoryPageProps<StoryType> & CustomProps>> {
+        const { api, staticProps } = await getNewsroomStaticProps(context);
+
+        const { slug } = context.params as { slug: string };
+        const category = await api.getCategoryBySlug(slug);
+
+        if (!category) {
+            return {
+                notFound: true,
+            };
+        }
+
+        const { localeCode } = staticProps.newsroomContextProps;
+
+        const { stories, storiesTotal } = await api.getStoriesFromCategory(category, {
+            pageSize,
+            include: extraStoryFields,
+            localeCode,
+        });
+
+        return processStaticRequest(context, {
+            ...staticProps,
+            newsroomContextProps: {
+                ...staticProps.newsroomContextProps,
+                currentCategory: category,
+            },
+            // TODO: This is temporary until return types from API are figured out
+            stories: stories as StoryType[],
+            pagination: {
+                itemsTotal: storiesTotal,
+                currentPage: 1,
+                pageSize,
+            },
+            ...(typeof customProps === 'function'
+                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                : customProps),
+        });
+    };
+}
+
+export async function getCategoryPageStaticPaths(): Promise<GetStaticPathsResult> {
+    const api = getPrezlyApi();
+    const [categories, defaultLanguage] = await Promise.all([
+        api.getCategories(),
+        api.getNewsroomDefaultLanguage(),
+    ]);
+    const locale = LocaleObject.fromAnyCode(defaultLanguage.code);
+
+    const paths = categories
+        .map((category) => {
+            const { slug } = getLocalizedCategoryData(category, locale);
+            if (!slug) {
+                return undefined;
+            }
+
+            return { params: { slug } };
+        })
+        .filter<{ params: { slug: string } }>(Boolean as any);
+
+    return {
+        paths,
+        fallback: 'blocking',
+    };
+}

package/src/adapter-nextjs/page-props/gallery.ts

@@ -1,10 +1,17 @@
 import type { NewsroomGallery } from '@prezly/sdk';
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPropsContext,
+    GetStaticPropsResult,
+} from 'next';
 
 import type { PaginationProps } from '../../infinite-loading/types';
 import { DEFAULT_GALLERY_PAGE_SIZE } from '../../utils';
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
+import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
 import { processRequest } from '../processRequest';
+import { processStaticRequest } from '../processStaticRequest';
 
 import type { PropsFunction } from './lib/types';
 
@@ -62,3 +69,43 @@ export function getGalleryPageServerSideProps<CustomProps extends Record<string,
         );
     };
 }
+
+export function getGalleryPageStaticProps<CustomProps extends Record<string, any>>(
+    customProps: CustomProps | PropsFunction<CustomProps>,
+    options?: Options,
+) {
+    const { pageSize = DEFAULT_GALLERY_PAGE_SIZE } = options || {};
+
+    return async function getStaticProps(
+        context: GetStaticPropsContext,
+    ): Promise<GetStaticPropsResult<GalleryPageProps & CustomProps>> {
+        const { api, staticProps } = await getNewsroomStaticProps(context);
+
+        const { galleries, pagination } = await api.getGalleries({ pageSize });
+
+        // If there's only one gallery, redirect to it immediately
+        if (galleries.length === 1) {
+            const { uuid } = galleries[0];
+
+            return {
+                redirect: {
+                    destination: `/media/album/${uuid}`,
+                    permanent: false,
+                },
+            };
+        }
+
+        return processStaticRequest(context, {
+            ...staticProps,
+            galleries,
+            pagination: {
+                itemsTotal: pagination.matched_records_number,
+                currentPage: 1,
+                pageSize,
+            },
+            ...(typeof customProps === 'function'
+                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                : customProps),
+        });
+    };
+}

package/src/adapter-nextjs/page-props/galleryAlbum.ts

@@ -1,8 +1,17 @@
 import type { NewsroomGallery } from '@prezly/sdk';
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPathsResult,
+    GetStaticPropsContext,
+    GetStaticPropsResult,
+} from 'next';
 
+import { getPrezlyApi } from '../../data-fetching';
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
+import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
 import { processRequest } from '../processRequest';
+import { processStaticRequest } from '../processStaticRequest';
 
 import type { PropsFunction } from './lib/types';
 
@@ -38,3 +47,40 @@ export function getGalleryAlbumPageServerSideProps<CustomProps extends Record<st
         );
     };
 }
+
+export function getGalleryAlbumPageStaticProps<CustomProps extends Record<string, any>>(
+    customProps: CustomProps | PropsFunction<CustomProps>,
+) {
+    return async function getStaticProps(
+        context: GetStaticPropsContext,
+    ): Promise<GetStaticPropsResult<GalleryAlbumPageProps & CustomProps>> {
+        const { api, staticProps } = await getNewsroomStaticProps(context);
+
+        const { uuid } = context.params as { uuid: string };
+        const gallery = await api.getGallery(uuid);
+
+        if (!gallery || !gallery.images_number) {
+            return { notFound: true };
+        }
+
+        return processStaticRequest(context, {
+            ...staticProps,
+            gallery,
+            ...(typeof customProps === 'function'
+                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                : customProps),
+        });
+    };
+}
+
+export async function getGalleryAlbumPageStaticPaths(): Promise<GetStaticPathsResult> {
+    const api = getPrezlyApi();
+    const { galleries } = await api.getGalleries({});
+
+    const paths = galleries.map(({ uuid }) => ({ params: { uuid } }));
+
+    return {
+        paths,
+        fallback: 'blocking',
+    };
+}

package/src/adapter-nextjs/page-props/home.ts

@@ -1,10 +1,17 @@
 import type { ExtraStoryFields, Story } from '@prezly/sdk';
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPropsContext,
+    GetStaticPropsResult,
+} from 'next';
 
 import type { PaginationProps } from '../../infinite-loading/types';
 import { DEFAULT_PAGE_SIZE } from '../../utils';
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
+import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
 import { processRequest } from '../processRequest';
+import { processStaticRequest } from '../processStaticRequest';
 
 import type { PropsFunction } from './lib/types';
 
@@ -63,3 +70,41 @@ export function getHomepageServerSideProps<
         );
     };
 }
+
+export function getHomepageStaticProps<
+    CustomProps extends Record<string, any>,
+    StoryType extends Story = Story,
+>(customProps: CustomProps | PropsFunction<CustomProps>, options?: Options) {
+    const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields } = options || {};
+
+    return async function getStaticProps(
+        context: GetStaticPropsContext,
+    ): Promise<GetStaticPropsResult<HomePageProps<StoryType> & CustomProps>> {
+        const { api, staticProps } = await getNewsroomStaticProps(context, {
+            loadHomepageContacts: true,
+        });
+
+        const { localeCode } = staticProps.newsroomContextProps;
+
+        const storiesPaginated = await api.getStories({
+            pageSize,
+            include: extraStoryFields,
+            localeCode,
+        });
+        const { stories, storiesTotal } = storiesPaginated;
+
+        return processStaticRequest(context, {
+            ...staticProps,
+            // TODO: This is temporary until return types from API are figured out
+            stories: stories as StoryType[],
+            pagination: {
+                itemsTotal: storiesTotal,
+                currentPage: 1,
+                pageSize,
+            },
+            ...(typeof customProps === 'function'
+                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                : customProps),
+        });
+    };
+}

package/src/adapter-nextjs/page-props/index.ts

@@ -1,8 +1,26 @@
-export { getCategoryPageServerSideProps, type CategoryPageProps } from './category';
-export { getGalleryPageServerSideProps, type GalleryPageProps } from './gallery';
-export { getGalleryAlbumPageServerSideProps, type GalleryAlbumPageProps } from './galleryAlbum';
-export { getHomepageServerSideProps, type HomePageProps } from './home';
-export { getSearchPageServerSideProps } from './search';
+export {
+    getCategoryPageServerSideProps,
+    getCategoryPageStaticPaths,
+    getCategoryPageStaticProps,
+    type CategoryPageProps,
+} from './category';
+export {
+    getGalleryPageServerSideProps,
+    getGalleryPageStaticProps,
+    type GalleryPageProps,
+} from './gallery';
+export {
+    getGalleryAlbumPageServerSideProps,
+    getGalleryAlbumPageStaticPaths,
+    getGalleryAlbumPageStaticProps,
+    type GalleryAlbumPageProps,
+} from './galleryAlbum';
+export { getHomepageServerSideProps, getHomepageStaticProps, type HomePageProps } from './home';
+export { getSearchPageServerSideProps, getSearchPageStaticProps } from './search';
 export * from './sitemap';
-export { getStoryPageServerSideProps } from './story';
+export {
+    getStoryPageServerSideProps,
+    getStoryPageStaticPaths,
+    getStoryPageStaticProps,
+} from './story';
 export { getStoryPreviewPageServerSideProps } from './storyPreview';

package/src/adapter-nextjs/page-props/lib/types.ts

@@ -1,8 +1,8 @@
-import type { GetServerSidePropsContext } from 'next';
+import type { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
 
 import type { PageProps } from '../../../types';
 
 export type PropsFunction<CustomProps> = (
-    context: GetServerSidePropsContext,
+    context: GetServerSidePropsContext | GetStaticPropsContext,
     props: PageProps,
 ) => CustomProps | Promise<CustomProps>;

package/src/adapter-nextjs/page-props/search.ts

@@ -1,7 +1,9 @@
 import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
 
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
+import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
 import { processRequest } from '../processRequest';
+import { processStaticRequest } from '../processStaticRequest';
 
 import type { PropsFunction } from './lib/types';
 
@@ -25,3 +27,20 @@ export function getSearchPageServerSideProps<CustomProps extends Record<string,
         );
     };
 }
+
+export function getSearchPageStaticProps<CustomProps extends Record<string, any>>(
+    customProps: CustomProps | PropsFunction<CustomProps>,
+) {
+    return async function getStaticProps(
+        context: GetServerSidePropsContext,
+    ): Promise<GetServerSidePropsResult<CustomProps>> {
+        const { staticProps } = await getNewsroomStaticProps(context);
+
+        return processStaticRequest(context, {
+            ...staticProps,
+            ...(typeof customProps === 'function'
+                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                : customProps),
+        });
+    };
+}

package/src/adapter-nextjs/page-props/story.ts

@@ -1,9 +1,16 @@
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPropsContext,
+    GetStaticPropsResult,
+} from 'next';
 
 import { getPrezlyApi } from '../../data-fetching';
 import { DUMMY_DEFAULT_LOCALE } from '../../intl';
 import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
+import { getNewsroomStaticProps } from '../getNewsroomStaticProps';
 import { processRequest } from '../processRequest';
+import { processStaticRequest } from '../processStaticRequest';
 
 import type { PropsFunction } from './lib/types';
 
@@ -45,3 +52,44 @@ export function getStoryPageServerSideProps<CustomProps extends Record<string, a
         });
     };
 }
+
+export function getStoryPageStaticProps<CustomProps extends Record<string, any>>(
+    customProps: CustomProps | PropsFunction<CustomProps>,
+) {
+    return async function getStaticProps(
+        context: GetStaticPropsContext,
+    ): Promise<GetStaticPropsResult<CustomProps>> {
+        const api = getPrezlyApi();
+
+        const { slug } = context.params as { slug?: string };
+        const story = slug ? await api.getStoryBySlug(slug) : null;
+        if (!story) {
+            return { notFound: true };
+        }
+
+        const { staticProps } = await getNewsroomStaticProps(context, { story });
+
+        return processStaticRequest(context, {
+            ...staticProps,
+            newsroomContextProps: {
+                ...staticProps.newsroomContextProps,
+                currentStory: story,
+            },
+            ...(typeof customProps === 'function'
+                ? await (customProps as PropsFunction<CustomProps>)(context, staticProps)
+                : customProps),
+        });
+    };
+}
+
+export async function getStoryPageStaticPaths() {
+    const api = getPrezlyApi();
+    const stories = await api.getAllStories();
+
+    const paths = stories.map(({ slug }) => ({ params: { slug } }));
+
+    return {
+        paths,
+        fallback: 'blocking',
+    };
+}

package/src/adapter-nextjs/processStaticRequest.ts

@@ -0,0 +1,32 @@
+import type { GetStaticPropsContext, GetStaticPropsResult } from 'next';
+
+import type { PageProps, ServerSidePageProps } from '../types';
+
+/**
+ * This function combines the props returned from `getNewsroomStaticProps` and your optional custom props for the page.
+ * See README for usage examples.
+ *
+ * @param context Next.js context passed to the `getStaticProps` method of the page
+ * @param props Object containing the return of `getNewsroomServerSideProps` and your optional custom props.
+ * @param revalidateTimeout Optional: timeout in seconds to use with Next ISR.
+ */
+export function processStaticRequest<Props>(
+    context: GetStaticPropsContext,
+    props: Props & PageProps & ServerSidePageProps,
+    revalidateTimeout?: number,
+): GetStaticPropsResult<Props> {
+    const { locale: nextLocale } = context;
+
+    const { localeResolved, ...pageProps } = props;
+
+    // If no locale was provided by Next, it most likely means that the theme is not supporting multi-language.
+    // In that case we won't show 404 page.
+    if (!localeResolved && nextLocale) {
+        return { notFound: true };
+    }
+
+    return {
+        props: pageProps as Props & PageProps,
+        revalidate: revalidateTimeout,
+    };
+}

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

@@ -30,6 +30,9 @@ import {
 const CATEGORIES_SORT_ORDER = '+order';
 const DEFAULT_SORT_ORDER: SortOrder = 'desc';
 
+const ERROR_CODE_NOT_FOUND = 404;
+const ERROR_CODE_GONE = 410;
+
 type SortOrder = 'desc' | 'asc';
 
 interface GetStoriesOptions {
@@ -42,7 +45,7 @@ interface GetStoriesOptions {
 
 interface GetGalleriesOptions {
     page?: number;
-    pageSize: number;
+    pageSize?: number;
 }
 
 export class PrezlyApi {
@@ -72,7 +75,10 @@ export class PrezlyApi {
         try {
             return await this.sdk.stories.get(uuid);
         } catch (error) {
-            if (isSdkError(error) && error.status === 404) {
+            if (
+                isSdkError(error) &&
+                (error.status === ERROR_CODE_NOT_FOUND || error.status === ERROR_CODE_GONE)
+            ) {
                 return null;
             }
             throw error;
@@ -204,10 +210,13 @@ export class PrezlyApi {
     searchStories: typeof PrezlySDK.prototype.stories.search = (options) =>
         this.sdk.stories.search(options);
 
-    async getGalleries({ page = undefined, pageSize }: GetGalleriesOptions) {
+    async getGalleries({ page, pageSize }: GetGalleriesOptions) {
         return this.sdk.newsroomGalleries.list(this.newsroomUuid, {
             limit: pageSize,
-            offset: typeof page === 'undefined' ? undefined : (page - 1) * pageSize,
+            offset:
+                typeof page === 'undefined' || typeof pageSize === 'undefined'
+                    ? undefined
+                    : (page - 1) * pageSize,
             scope: getGalleriesQuery(),
         });
     }
@@ -242,7 +251,7 @@ export class PrezlyApi {
     }
 
     async getNewsroomServerSideProps(
-        request: IncomingMessage | undefined,
+        request?: IncomingMessage,
         nextLocaleIsoCode?: string,
         story?: Story,
     ): Promise<PageProps & ServerSidePageProps> {
@@ -279,4 +288,9 @@ export class PrezlyApi {
             localeResolved: Boolean(currentLanguage),
         };
     }
+
+    async getNewsroomDefaultLanguage() {
+        const languages = await this.getNewsroomLanguages();
+        return getDefaultLanguage(languages);
+    }
 }

package/src/intl/languages.test.ts

@@ -200,7 +200,12 @@ describe('getShortestLocaleCode', () => {
     });
 
     it('returns neutral language code if it is the only culture with that language', () => {
-        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('es-ES'))).toBe('es');
+        expect(
+            getShortestLocaleCode(
+                ALL_LANGUAGES.filter(({ code }) => code !== 'es_419'),
+                LocaleObject.fromAnyCode('es-ES'),
+            ),
+        ).toBe('es');
     });
 
     it('returns region code if it is the only culture with that region', () => {
@@ -218,4 +223,10 @@ describe('getShortestLocaleCode', () => {
             'nl_BE',
         );
     });
+
+    it('returns full code when trying to shorten to region code for es-419', () => {
+        expect(getShortestLocaleCode(ALL_LANGUAGES, LocaleObject.fromAnyCode('es-419'))).toBe(
+            'es_419',
+        );
+    });
 });

package/src/intl/languages.ts

@@ -212,7 +212,9 @@ export function getShortestLocaleCode(
     if (
         matchingLanguagesByRegionCode.length === 1 &&
         // If there are 2 or more matching neutral languages, it means that there are no languages that can be shortened to neutral code
-        mathchingNeutralLanguagesByRegionCode.length !== 1
+        mathchingNeutralLanguagesByRegionCode.length !== 1 &&
+        // We don't want just numbers in our region code
+        Number.isNaN(Number(shortRegionCode))
     ) {
         return shortRegionCode;
     }

package/src/intl/localeConfig.js

@@ -12,7 +12,11 @@ const lowercaseLocalPermutations = Array.from(
     new Set([
         ...lowercaseLocales,
         ...lowercaseLocales.map((code) => code.split('-')[0]),
-        ...lowercaseLocales.map((code) => code.split('-')[1]).filter(Boolean),
+        ...lowercaseLocales
+            .map((code) => code.split('-')[1])
+            .filter(Boolean)
+            // Remove number-only codes from possible permutations (like `419` for `es-419`)
+            .filter((code) => Number.isNaN(Number(code))),
     ]),
 ).sort();
 

package/src/intl/localeObject.test.ts

@@ -24,6 +24,9 @@ it('accepts any valid code type and converts it to hyphen code consistently', ()
     expect(LocaleObject.fromAnyCode('en_us').toHyphenCode()).toBe('en-US');
     expect(LocaleObject.fromAnyCode('en_US').toHyphenCode()).toBe('en-US');
     expect(LocaleObject.fromAnyCode('EN_US').toHyphenCode()).toBe('en-US');
+
+    expect(LocaleObject.fromAnyCode('es-419').toHyphenCode()).toBe('es-419');
+    expect(LocaleObject.fromAnyCode('es_419').toHyphenCode()).toBe('es-419');
 });
 
 it('converts to underscore code consistently', () => {