@prezly/theme-kit-nextjs 1.14.1 → 1.15.1

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,79 @@ 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, GetStaticPropsContext>)(
+                      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,46 @@ 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, GetStaticPropsContext>)(
+                      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,43 @@ 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, GetStaticPropsContext>)(
+                      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,44 @@ 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, GetStaticPropsContext>)(
+                      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,
-    props: PageProps,
-) => CustomProps | Promise<CustomProps>;
+export type PropsFunction<
+    CustomProps,
+    Context extends GetServerSidePropsContext | GetStaticPropsContext = GetServerSidePropsContext,
+> = (context: Context, props: PageProps) => CustomProps | Promise<CustomProps>;

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

@@ -1,7 +1,13 @@
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type {
+    GetServerSidePropsContext,
+    GetServerSidePropsResult,
+    GetStaticPropsContext,
+} 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 +31,23 @@ 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, GetStaticPropsContext>)(
+                      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,47 @@ 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, GetStaticPropsContext>)(
+                      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

@@ -45,7 +45,7 @@ interface GetStoriesOptions {
 
 interface GetGalleriesOptions {
     page?: number;
-    pageSize: number;
+    pageSize?: number;
 }
 
 export class PrezlyApi {
@@ -210,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(),
         });
     }
@@ -248,7 +251,7 @@ export class PrezlyApi {
     }
 
     async getNewsroomServerSideProps(
-        request: IncomingMessage | undefined,
+        request?: IncomingMessage,
         nextLocaleIsoCode?: string,
         story?: Story,
     ): Promise<PageProps & ServerSidePageProps> {
@@ -285,4 +288,9 @@ export class PrezlyApi {
             localeResolved: Boolean(currentLanguage),
         };
     }
+
+    async getNewsroomDefaultLanguage() {
+        const languages = await this.getNewsroomLanguages();
+        return getDefaultLanguage(languages);
+    }
 }