@prezly/theme-kit-nextjs 2.1.2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prezly/theme-kit-nextjs",
-  "version": "2.1.2",
+  "version": "3.0.0",
   "description": "Data layer and utility library for developing Prezly themes with NextJS",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -48,7 +48,7 @@
     "react-dom": "^17.x || ^18.x"
   },
   "dependencies": {
-    "@prezly/sdk": "^11.9.1",
+    "@prezly/sdk": "^11.11.0",
     "@prezly/uploadcare": "^2.3.4",
     "@react-hookz/web": "^16.0.0",
     "next-seo": "^5.4.0",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@prezly/eslint-config": "4.3.2",
-    "@sentry/nextjs": "7.24.2",
+    "@sentry/nextjs": "7.26.0",
     "@types/jest": "29.2.4",
     "@types/node": "17.0.14",
     "@types/parse-data-url": "3.0.0",

package/src/__mocks__/languages.ts

@@ -46,6 +46,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 '<p>We maken gebruik van cookies op onze website. Deze helpen ons om u iets beter te leren kennen en te zien hoe u onze website gebruikt. <br>Dit helpt ons een waardevollere en op maat gemaakte ervaring te bieden voor u en anderen.</p>',
             subscribe_disclaimer:
                 '<p>Door uw abonnement te bevestigen, bevestigt u dat u begrijpt dat u zich registreert om materiaal te ontvangen en dat uw gegevens veilig worden verwerkt en opgeslagen.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -87,6 +94,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
             email_disclaimer: '',
             cookie_statement: '',
             subscribe_disclaimer: '',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -134,6 +148,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 '<p>We use cookies on our website. They help us get to know you a little and how you use our website. This helps us provide a more valuable and tailored experience for you and others.</p>',
             subscribe_disclaimer:
                 '<p>By confirming your subscription you are confirming you understand that you are registering to receive content and consent to your information being securely processed and stored.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -181,6 +202,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 '<p>We use cookies on our website. They help us get to know you a little and how you use our website. This helps us provide a more valuable and tailored experience for you and others.</p>',
             subscribe_disclaimer:
                 '<p>By confirming your subscription you are confirming you understand that you are registering to receive content and consent to your information being securely processed and stored.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -228,6 +256,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 '<p>We use cookies on our website. They help us get to know you a little and how you use our website. This helps us provide a more valuable and tailored experience for you and others.</p>',
             subscribe_disclaimer:
                 '<p>By confirming your subscription you are confirming you understand that you are registering to receive content and consent to your information being securely processed and stored.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -275,6 +310,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 "<p>Nous utilisons des cookies sur notre site internet. Ils nous aident à en savoir un tout petit peu plus sur vous et sur votre façon d'utiliser notre site. Ainsi, il nous est possible de vous proposer, à vous comme à d'autres, une expérience plus riche et personnalisée.</p>",
             subscribe_disclaimer:
                 '<p>En confirmant votre inscription, vous confirmez que vous comprenez que vous vous inscrivez pour recevoir du contenu, et consentez à ce que vos données personnelles soient traitées et stockées en toute sécurité.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -322,6 +364,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 "<p>Nous utilisons des cookies sur notre site internet. Ils nous aident à en savoir un tout petit peu plus sur vous et sur votre façon d'utiliser notre site. Ainsi, il nous est possible de vous proposer, à vous comme à d'autres, une expérience plus riche et personnalisée.</p>",
             subscribe_disclaimer:
                 '<p>En confirmant votre inscription, vous confirmez que vous comprenez que vous vous inscrivez pour recevoir du contenu, et consentez à ce que vos données personnelles soient traitées et stockées en toute sécurité.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -366,6 +415,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 '<p>Utilizamos cookies en nuestro sitio web. Nos ayudan a conocerle un poco y saber cómo usa nuestro sitio web, lo que nos sirve para proporcionarle a usted y a los demás una experiencia más valiosa y personalizada.</p>',
             subscribe_disclaimer:
                 '<p>Al confirmar su suscripción, confirma que entiende que se está registrando para recibir contenido y accede a que su información se procese y guarde de manera segura.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },
@@ -410,6 +466,13 @@ export const LANGUAGES: Record<string, NewsroomLanguageSettings> = {
                 '<p>Utilizamos cookies en nuestro sitio web. Nos ayudan a conocerle un poco y saber cómo usa nuestro sitio web, lo que nos sirve para proporcionarle a usted y a los demás una experiencia más valiosa y personalizada.</p>',
             subscribe_disclaimer:
                 '<p>Al confirmar su suscripción, confirma que entiende que se está registrando para recibir contenido y accede a que su información se procese y guarde de manera segura.</p>',
+            seo_settings: {
+                canonical_url: null,
+                default_meta_title: null,
+                default_meta_description: null,
+                meta_title: null,
+                meta_description: null,
+            },
         },
         notifications: [],
     },

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

@@ -23,13 +23,14 @@ export interface HomePageProps<StoryType extends Story = Story> {
 interface Options {
     extraStoryFields?: (keyof Story.ExtraFields)[];
     pageSize?: number;
+    pinning?: boolean;
 }
 
 export function getHomepageServerSideProps<
     CustomProps extends Record<string, any>,
     StoryType extends Story = Story,
 >(customProps: CustomProps | PropsFunction<CustomProps>, options?: Options) {
-    const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields } = options || {};
+    const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields, pinning = false } = options || {};
 
     return async function getServerSideProps(
         context: GetServerSidePropsContext,
@@ -46,6 +47,7 @@ export function getHomepageServerSideProps<
         const storiesPaginated = await api.getStories({
             page,
             pageSize,
+            pinning,
             include: extraStoryFields,
             localeCode,
         });
@@ -75,7 +77,7 @@ export function getHomepageStaticProps<
     CustomProps extends Record<string, any>,
     StoryType extends Story = Story,
 >(customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>, options?: Options) {
-    const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields } = options || {};
+    const { pageSize = DEFAULT_PAGE_SIZE, extraStoryFields, pinning = false } = options || {};
 
     return async function getStaticProps(
         context: GetStaticPropsContext,
@@ -88,6 +90,7 @@ export function getHomepageStaticProps<
 
         const storiesPaginated = await api.getStories({
             pageSize,
+            pinning,
             include: extraStoryFields,
             localeCode,
         });

package/src/adapter-nextjs/page-props/sitemap/getServerSideProps.ts

@@ -5,7 +5,9 @@ import { getPrezlyApi } from '../../../data-fetching';
 import { createPaths } from './createPaths';
 import { SitemapBuilder } from './SitemapBuilder';
 
-export function getSitemapServerSideProps(additionalPaths?: string[]) {
+export function getSitemapServerSideProps(
+    options: { additionalPaths?: string[]; pinning?: boolean } = {},
+) {
     return async function getServerSideProps(ctx: NextPageContext) {
         const { res, req } = ctx;
 
@@ -19,7 +21,9 @@ export function getSitemapServerSideProps(additionalPaths?: string[]) {
         const baseUrl = req.headers.host || '/';
 
         const api = getPrezlyApi(req);
-        const stories = await api.getAllStories();
+        const stories = await api.getAllStories({
+            pinning: options.pinning ?? false,
+        });
         const categories = await api.getCategories();
 
         const paths = createPaths(stories, categories);
@@ -28,9 +32,7 @@ export function getSitemapServerSideProps(additionalPaths?: string[]) {
         sitemapBuilder.addUrl('/');
         paths.forEach((path) => sitemapBuilder.addUrl(path));
 
-        if (additionalPaths) {
-            additionalPaths.forEach((path) => sitemapBuilder.addUrl(path));
-        }
+        options.additionalPaths?.forEach((path) => sitemapBuilder.addUrl(path));
 
         res.setHeader('Content-Type', 'text/xml');
         res.write(sitemapBuilder.serialize());

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

@@ -81,9 +81,11 @@ export function getStoryPageStaticProps<CustomProps extends Record<string, any>>
     };
 }
 
-export async function getStoryPageStaticPaths() {
+export async function getStoryPageStaticPaths(options: { pinning?: boolean } = {}) {
     const api = getPrezlyApi();
-    const stories = await api.getAllStories();
+    const stories = await api.getAllStories({
+        pinning: options.pinning ?? false,
+    });
 
     const paths = stories.map(({ slug }) => ({ params: { slug } }));
 

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

@@ -1,4 +1,4 @@
-import { createPrezlyClient } from '@prezly/sdk';
+import { createPrezlyClient, SortOrder } from '@prezly/sdk';
 import type {
     Category,
     Newsroom,
@@ -22,26 +22,25 @@ import { DEFAULT_PAGE_SIZE } from '../../utils';
 import { getAlgoliaSettings, isSdkError, isUuid } from '../lib';
 
 import {
+    getChronologicalSortOrder,
     getContactsQuery,
     getGalleriesQuery,
     getSlugQuery,
-    getSortByPublishedDate,
     getStoriesQuery,
 } from './queries';
 
 const CATEGORIES_SORT_ORDER = '+order';
-const DEFAULT_SORT_ORDER: SortOrder = 'desc';
+const DEFAULT_SORT_ORDER = SortOrder.Direction.DESC;
 
 const ERROR_CODE_NOT_FOUND = 404;
 const ERROR_CODE_FORBIDDEN = 403;
 const ERROR_CODE_GONE = 410;
 
-type SortOrder = 'desc' | 'asc';
-
 interface GetStoriesOptions {
     page?: number;
     pageSize?: number;
-    order?: SortOrder;
+    order?: `${SortOrder.Direction}`;
+    pinning?: boolean;
     include?: (keyof Story.ExtraFields)[];
     localeCode?: string;
 }
@@ -108,8 +107,8 @@ export class PrezlyApi {
     /**
      * Note: this method returns ALL stories from the newsroom. It's intended to be used for sitemaps and not to display actual content.
      */
-    async getAllStories(order: SortOrder = DEFAULT_SORT_ORDER) {
-        const sortOrder = getSortByPublishedDate(order);
+    async getAllStories({ order = DEFAULT_SORT_ORDER, pinning = false }: GetStoriesOptions = {}) {
+        const sortOrder = getChronologicalSortOrder(order, pinning);
         const newsroom = await this.getNewsroom();
         const query = JSON.stringify(getStoriesQuery(newsroom.uuid));
         const maxStories = newsroom.stories_number;
@@ -136,10 +135,11 @@ export class PrezlyApi {
         page = undefined,
         pageSize = DEFAULT_PAGE_SIZE,
         order = DEFAULT_SORT_ORDER,
+        pinning = false,
         include,
         localeCode,
     }: GetStoriesOptions = {}) {
-        const sortOrder = getSortByPublishedDate(order);
+        const sortOrder = getChronologicalSortOrder(order, pinning);
         const query = JSON.stringify(getStoriesQuery(this.newsroomUuid, undefined, localeCode));
 
         const { stories, pagination } = await this.searchStories({
@@ -163,9 +163,9 @@ export class PrezlyApi {
             order = DEFAULT_SORT_ORDER,
             include,
             localeCode,
-        }: GetStoriesOptions = {},
+        }: Omit<GetStoriesOptions, 'pinning'> = {},
     ) {
-        const sortOrder = getSortByPublishedDate(order);
+        const sortOrder = getChronologicalSortOrder(order);
         const query = JSON.stringify(getStoriesQuery(this.newsroomUuid, category.id, localeCode));
 
         const { stories, pagination } = await this.searchStories({

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

@@ -1,3 +1,5 @@
+import { SortOrder } from '@prezly/sdk';
+
 const publishedAndAccessible = [
     { lifecycle_status: { $in: ['published', 'embargo'] } },
     { visibility: { $in: ['public', 'private', 'embargo'] } },
@@ -34,8 +36,14 @@ export function getStoriesQuery(newsroomUuid: string, categoryId?: number, local
     return query;
 }
 
-export function getSortByPublishedDate(order: 'asc' | 'desc') {
-    return order === 'desc' ? '-published_at' : 'published_at';
+export function getChronologicalSortOrder(direction: `${SortOrder.Direction}`, pinning = false) {
+    const pinnedFirst = SortOrder.desc('is_pinned');
+    const chronological =
+        direction === SortOrder.Direction.ASC
+            ? SortOrder.asc('published_at')
+            : SortOrder.desc('published_at');
+
+    return pinning ? SortOrder.combine(pinnedFirst, chronological) : chronological;
 }
 
 export function getGalleriesQuery() {