@prezly/theme-kit-nextjs 1.6.3 → 1.6.4-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prezly/theme-kit-nextjs",
-  "version": "1.6.3",
+  "version": "1.6.4-0",
   "description": "Data layer and utility library for developing Prezly themes with NextJS",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -48,8 +48,11 @@
     "react-dom": "^17.x"
   },
   "dependencies": {
-    "@prezly/sdk": "^6.11.0",
-    "parse-data-url": "^4.0.1"
+    "@prezly/sdk": "^6.21.0",
+    "@react-hookz/web": "^13.2.1",
+    "next-seo": "^5.4.0",
+    "parse-data-url": "^4.0.1",
+    "string-strip-html": "^9.1.9"
   },
   "devDependencies": {
     "@prezly/eslint-config": "^4.0.0",

package/src/components-nextjs/PageSeo/PageSeo.tsx

@@ -0,0 +1,123 @@
+import { NextSeo } from 'next-seo';
+import type { NextSeoProps } from 'next-seo';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+import { stripHtml } from 'string-strip-html';
+
+import { getNewsroomLogoUrl, getUsedLanguages } from '../../data-fetching';
+import { LocaleObject } from '../../intl';
+import {
+    useCompanyInformation,
+    useCurrentLocale,
+    useCurrentStory,
+    useGetLinkLocaleSlug,
+    useGetTranslationUrl,
+    useLanguages,
+    useNewsroom,
+} from '../../newsroom-context';
+
+import { getAbsoluteUrl } from './lib/getAbsoluteUrl';
+import type { AlternateLanguageLink } from './lib/types';
+
+type Props = NextSeoProps & {
+    imageUrl?: string;
+};
+
+/**
+ * This component provides base page attributes for every Newsroom page.
+ * It depends on information from NewsroomContext, so the component should be placed inside the `NewsroomContextProvider`.
+ * You can pass additional props expected by NextSeo component to override any info that is provided by the NewsroomContext.
+ */
+export function PageSeo({
+    title,
+    description,
+    imageUrl,
+    canonical,
+    openGraph,
+    twitter,
+    ...nextSeoProps
+}: Props) {
+    const companyInformation = useCompanyInformation();
+    const newsroom = useNewsroom();
+    const currentLocale = useCurrentLocale();
+    const languages = useLanguages();
+    const getTranslationUrl = useGetTranslationUrl();
+    const getLinkLocaleSlug = useGetLinkLocaleSlug();
+    const currentStory = useCurrentStory();
+    const { asPath } = useRouter();
+
+    const pageTitle = title || companyInformation.name;
+    const pageDescription = description || stripHtml(companyInformation.about).result;
+    const canonicalUrl =
+        canonical || getAbsoluteUrl(asPath, newsroom.url, getLinkLocaleSlug(currentLocale));
+    const siteName = companyInformation.name;
+    const logoUrl = imageUrl || getNewsroomLogoUrl(newsroom);
+
+    const alternateLanguageLinks: AlternateLanguageLink[] = useMemo(() => {
+        if (!languages.length) {
+            return [];
+        }
+
+        const alternateLanguages = getUsedLanguages(languages).filter(
+            (language) => language.code !== currentLocale.toUnderscoreCode(),
+        );
+
+        return alternateLanguages
+            .map((language) => {
+                const locale = LocaleObject.fromAnyCode(language.code);
+
+                const translationLink = getTranslationUrl(locale, true);
+
+                if (!translationLink) {
+                    return undefined;
+                }
+
+                return {
+                    hrefLang: locale.toHyphenCode(),
+                    href: getAbsoluteUrl(
+                        translationLink,
+                        newsroom.url,
+                        currentStory && translationLink !== '/' ? false : getLinkLocaleSlug(locale),
+                    ),
+                };
+            })
+            .filter<AlternateLanguageLink>(Boolean as any);
+    }, [
+        currentLocale,
+        getLinkLocaleSlug,
+        getTranslationUrl,
+        languages,
+        newsroom.url,
+        currentStory,
+    ]);
+
+    return (
+        <NextSeo
+            title={pageTitle}
+            description={pageDescription}
+            canonical={canonicalUrl}
+            openGraph={{
+                url: canonicalUrl,
+                title: pageTitle,
+                description: pageDescription,
+                locale: currentLocale.toUnderscoreCode(),
+                images: [
+                    {
+                        url: logoUrl,
+                        alt: pageTitle,
+                    },
+                ],
+                site_name: siteName,
+                ...openGraph,
+            }}
+            twitter={{
+                site: siteName,
+                cardType: 'summary',
+                ...twitter,
+            }}
+            additionalMetaTags={[{ name: 'twitter:image', content: logoUrl }]}
+            languageAlternates={alternateLanguageLinks}
+            {...nextSeoProps}
+        />
+    );
+}

package/src/components-nextjs/PageSeo/index.ts

@@ -0,0 +1,2 @@
+export { PageSeo } from './PageSeo';
+export * from './lib/types';

package/src/components-nextjs/PageSeo/lib/getAbsoluteUrl.ts

@@ -0,0 +1,7 @@
+// Returns absolute URL based on the path and without any query parameters
+export function getAbsoluteUrl(path: string, origin: string, localeCode?: string | false): string {
+    const url = new URL(`${localeCode ? `/${localeCode}` : ''}${path || '/'}`, origin);
+    url.search = '';
+
+    return url.toString();
+}

package/src/components-nextjs/PageSeo/lib/types.ts

@@ -0,0 +1,4 @@
+export type AlternateLanguageLink = {
+    href: string;
+    hrefLang: string;
+};

package/src/components-nextjs/Sitemap/SitemapBuilder.ts

@@ -0,0 +1,56 @@
+import type { SitemapUrl } from './types';
+
+export class SitemapBuilder {
+    private baseUrl: string;
+
+    private urls: SitemapUrl[] = [];
+
+    constructor(baseUrl: string) {
+        this.baseUrl = baseUrl;
+    }
+
+    public addUrl(location: string) {
+        this.urls.push({
+            location: this.baseUrl + location,
+            changeFrequency: SitemapBuilder.guessFrequency(location),
+            priority: SitemapBuilder.guessPriority(location),
+        });
+    }
+
+    private static guessFrequency(location: string) {
+        if (location === '/') return 'daily';
+
+        return 'weekly';
+    }
+
+    private static guessPriority(location: string) {
+        if (location === '/') return '0.9';
+
+        if (location.startsWith('/category/')) {
+            return '0.8';
+        }
+
+        return '0.7';
+    }
+
+    static serializeLocation(url: SitemapUrl) {
+        return [
+            '<url>',
+            url.location && `\t<loc>${url.location}</loc>`,
+            url.changeFrequency && `\t<changefreq>${url.changeFrequency}</changefreq>`,
+            url.priority && `\t<priority>${url.priority}</priority>`,
+            '</url>',
+        ]
+            .filter(Boolean)
+            .join('\n');
+    }
+
+    serialize() {
+        return [
+            '<?xml version="1.0" encoding="UTF-8" ?>',
+            '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">',
+            this.urls.map(SitemapBuilder.serializeLocation).join('\n'),
+            '</urlset>',
+        ].join('\n');
+    }
+}

package/src/components-nextjs/Sitemap/createPaths.ts

@@ -0,0 +1,21 @@
+import type { Category, Story } from '@prezly/sdk';
+
+export function createPaths(stories: Story[], categories: Category[]) {
+    const storiesUrls = stories.map(({ slug }) => `/${slug}`);
+    const categoriesUrls = categories
+        .map((category) => {
+            const translations = Object.values(category.i18n);
+            const allSlugs = translations
+                .map(({ slug }) => slug || '')
+                .filter(Boolean)
+                .reduce<string[]>(
+                    (slugs, slug) => (slugs.includes(slug) ? [...slugs] : [...slugs, slug]),
+                    [],
+                );
+
+            return allSlugs.map((slug) => `/category/${slug}`);
+        })
+        .flat();
+
+    return [...storiesUrls, ...categoriesUrls];
+}

package/src/components-nextjs/Sitemap/getInitialProps.ts

@@ -0,0 +1,37 @@
+import type { NextPageContext } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+import { createPaths } from './createPaths';
+import { SitemapBuilder } from './SitemapBuilder';
+
+export async function getInitialProps(ctx: NextPageContext, additionalPaths?: string[]) {
+    const { res, req } = ctx;
+
+    if (!req || !res) {
+        // client side
+        return null;
+    }
+
+    const baseUrl = req.headers.host || '/';
+
+    const api = getPrezlyApi(req);
+    const stories = await api.getAllStories();
+    const categories = await api.getCategories();
+
+    const paths = createPaths(stories, categories);
+    const sitemapBuilder = new SitemapBuilder(baseUrl);
+
+    sitemapBuilder.addUrl('/');
+    paths.forEach((path) => sitemapBuilder.addUrl(path));
+
+    if (additionalPaths) {
+        additionalPaths.forEach((path) => sitemapBuilder.addUrl(path));
+    }
+
+    res.setHeader('Content-Type', 'text/xml');
+    res.write(sitemapBuilder.serialize());
+    res.end();
+
+    return null;
+}

package/src/components-nextjs/Sitemap/index.ts

@@ -0,0 +1,5 @@
+export { getInitialProps as getSitemapInitialProps } from './getInitialProps';
+
+export { SitemapBuilder } from './SitemapBuilder';
+export { createPaths } from './createPaths';
+export * from './types';

package/src/components-nextjs/Sitemap/types.ts

@@ -0,0 +1,5 @@
+export type SitemapUrl = {
+    location: string;
+    changeFrequency?: string;
+    priority?: string;
+};

package/src/components-nextjs/StorySeo/StorySeo.tsx

@@ -0,0 +1,68 @@
+import type { ExtendedStory } from '@prezly/sdk';
+import { ArticleJsonLd, NextSeo } from 'next-seo';
+
+type Props = {
+    story: ExtendedStory;
+};
+
+/**
+ * This components provides additional page attributes for the Story page.
+ * It works in conjunction with `PageSeo` component, overidding some of its attributes.
+ */
+export function StorySeo({ story }: Props) {
+    const { title, subtitle, published_at, updated_at, author, oembed, newsroom, summary } = story;
+
+    const authorName = author?.display_name || author?.email || 'Unknown';
+    const description = subtitle || summary;
+
+    return (
+        <>
+            <NextSeo
+                title={title}
+                description={description}
+                canonical={oembed.url}
+                openGraph={{
+                    title,
+                    description,
+                    url: oembed.url,
+                    site_name: newsroom.display_name,
+                    type: 'article',
+                    article: {
+                        publishedTime: published_at || undefined,
+                        modifiedTime: updated_at,
+                        authors: [authorName],
+                    },
+                    ...(oembed.thumbnail_url && {
+                        images: [
+                            {
+                                url: oembed.thumbnail_url,
+                                alt: oembed.title,
+                                width: oembed.thumbnail_width,
+                                height: oembed.thumbnail_height,
+                            },
+                        ],
+                    }),
+                }}
+                additionalMetaTags={
+                    oembed.thumbnail_url
+                        ? [
+                              { name: 'twitter:card', content: 'summary_large_image' },
+                              { name: 'twitter:image', content: oembed.thumbnail_url },
+                          ]
+                        : undefined
+                }
+            />
+            <ArticleJsonLd
+                url={oembed.url}
+                title={title}
+                images={oembed.thumbnail_url ? [oembed.thumbnail_url] : []}
+                datePublished={published_at || ''}
+                dateModified={updated_at}
+                authorName={[authorName]}
+                publisherName={newsroom.display_name}
+                publisherLogo={newsroom.thumbnail_url}
+                description={description}
+            />
+        </>
+    );
+}

package/src/components-nextjs/StorySeo/index.ts

@@ -0,0 +1 @@
+export { StorySeo } from './StorySeo';

package/src/components-nextjs/index.ts

@@ -0,0 +1,3 @@
+export { PageSeo } from './PageSeo';
+export * from './Sitemap';
+export { StorySeo } from './StorySeo';

package/src/index.ts

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

package/src/infinite-loading/apiHandlers/fetchGalleries.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+export async function fetchGalleries(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        res.status(405);
+        return;
+    }
+
+    const { page, pageSize } = req.body;
+
+    try {
+        const api = getPrezlyApi(req);
+
+        const { galleries } = await api.getGalleries({ page, pageSize });
+
+        res.status(200).json({ galleries });
+    } catch (error) {
+        res.status(500).send({
+            message: (error as Error).message,
+        });
+    }
+}

package/src/infinite-loading/apiHandlers/fetchStories.ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getPrezlyApi } from '../../data-fetching';
+
+export async function fetchStories(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        res.status(405);
+        return;
+    }
+
+    const { page, pageSize, category, include, localeCode } = req.body;
+
+    try {
+        const api = getPrezlyApi(req);
+
+        const { stories } = await (category
+            ? api.getStoriesFromCategory(category, { page, pageSize, include, localeCode })
+            : api.getStories({ page, pageSize, include, localeCode }));
+
+        res.status(200).json({ stories });
+    } catch (error) {
+        res.status(500).send({
+            message: (error as Error).message,
+        });
+    }
+}

package/src/infinite-loading/apiHandlers/index.ts

@@ -0,0 +1,2 @@
+export { fetchGalleries } from './fetchGalleries';
+export { fetchStories } from './fetchStories';

package/src/infinite-loading/index.ts

@@ -0,0 +1,5 @@
+export { useInfiniteLoading } from './useInfiniteLoading';
+export { useInfiniteStoriesLoading } from './useInfiniteStoriesLoading';
+export { useInfiniteGalleriesLoading } from './useInfiniteGalleriesLoading';
+export * from './apiHandlers';
+export * from './types';

package/src/infinite-loading/types.ts

@@ -0,0 +1,5 @@
+export interface PaginationProps {
+    itemsTotal: number;
+    currentPage: number;
+    pageSize: number;
+}

package/src/infinite-loading/useInfiniteGalleriesLoading.ts

@@ -0,0 +1,53 @@
+import type { NewsroomGallery } from '@prezly/sdk';
+
+import type { PaginationProps } from './types';
+import { useInfiniteLoading } from './useInfiniteLoading';
+
+async function fetchGalleries(
+    page: number,
+    pageSize: number,
+): Promise<{ galleries: NewsroomGallery[] }> {
+    const result = await fetch('/api/fetch-galleries', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            page,
+            pageSize,
+        }),
+    });
+
+    if (!result.ok) {
+        const { message } = await result.json();
+        throw new Error(message);
+    }
+
+    return result.json();
+}
+
+/**
+ * NOTE: This hook depends on the presence of a Next API route (/api/fetch-galleries)!
+ * The handler for this route is exported from `apiHandlers/fetchGalleries.ts` file.
+ * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/media/index.tsx#L23 for usage example
+ */
+export function useInfiniteGalleriesLoading(
+    initialGalleries: NewsroomGallery[],
+    pagination: PaginationProps,
+) {
+    const { canLoadMore, data, isLoading, loadMore } = useInfiniteLoading<NewsroomGallery>({
+        fetchingFn: async (nextPage, pageSize) => {
+            const { galleries } = await fetchGalleries(nextPage, pageSize);
+            return galleries;
+        },
+        initialData: initialGalleries,
+        pagination,
+    });
+
+    return {
+        canLoadMore,
+        galleries: data,
+        isLoading,
+        loadMoreGalleries: loadMore,
+    };
+}

package/src/infinite-loading/useInfiniteLoading.ts

@@ -0,0 +1,66 @@
+import { useAsync } from '@react-hookz/web';
+import { useCallback, useEffect, useState } from 'react';
+
+import type { PaginationProps } from './types';
+
+interface Parameters<T> {
+    fetchingFn: (page: number, pageSize: number) => Promise<T[]>;
+    initialData: T[];
+    pagination: PaginationProps;
+}
+
+interface State<T> {
+    canLoadMore: boolean;
+    currentPage: number;
+    data: T[];
+    isLoading: boolean;
+    loadMore: () => void;
+    resetData: () => void;
+}
+
+export function useInfiniteLoading<T>({
+    fetchingFn,
+    initialData,
+    pagination,
+}: Parameters<T>): State<T> {
+    const [data, setData] = useState<T[]>(initialData);
+    const [currentPage, setCurrentPage] = useState(pagination.currentPage);
+
+    const { itemsTotal, pageSize } = pagination;
+    const pagesTotal = Math.ceil(itemsTotal / pageSize);
+    const canLoadMore = currentPage < pagesTotal;
+
+    const [{ error, status }, { execute: loadMoreFn }] = useAsync(async () => {
+        const nextPage = currentPage + 1;
+        const newData = await fetchingFn(nextPage, pageSize);
+        setCurrentPage(nextPage);
+        setData((currentData) => [...currentData, ...newData]);
+    });
+
+    const loadMore = useCallback(() => {
+        if (canLoadMore) {
+            loadMoreFn();
+        }
+    }, [canLoadMore, loadMoreFn]);
+
+    const resetData = useCallback(() => {
+        setData(initialData);
+        setCurrentPage(pagination.currentPage);
+    }, [pagination.currentPage, initialData]);
+
+    useEffect(() => {
+        if (error) {
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    }, [error]);
+
+    return {
+        canLoadMore,
+        currentPage,
+        data,
+        isLoading: status === 'loading',
+        loadMore,
+        resetData,
+    };
+}

package/src/infinite-loading/useInfiniteStoriesLoading.ts

@@ -0,0 +1,81 @@
+import type { Category, ExtraStoryFields, Story } from '@prezly/sdk';
+import { useEffect } from 'react';
+
+import type { LocaleObject } from '../intl';
+import { useCurrentLocale } from '../newsroom-context';
+
+import type { PaginationProps } from './types';
+import { useInfiniteLoading } from './useInfiniteLoading';
+
+async function fetchStories<T extends Story = Story>(
+    page: number,
+    pageSize: number,
+    category?: Category,
+    locale?: LocaleObject,
+    include?: (keyof ExtraStoryFields)[],
+): Promise<{ stories: T[] }> {
+    const result = await fetch('/api/fetch-stories', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            page,
+            pageSize,
+            category,
+            include,
+            ...(locale && {
+                localeCode: locale.toUnderscoreCode(),
+            }),
+        }),
+    });
+
+    if (!result.ok) {
+        const { message } = await result.json();
+        throw new Error(message);
+    }
+
+    return result.json();
+}
+
+/**
+ * NOTE: This hook depends on the presence of a Next API route (/api/fetch-stories)!
+ * The handler for this route is exported from `apiHandlers/fetchStories.ts` file.
+ * See https://github.com/prezly/theme-nextjs-bea/blob/d381e9878187ca98815d240d3ffdf10a75993c14/pages/index.tsx#L24 for usage example
+ */
+export function useInfiniteStoriesLoading<T extends Story = Story>(
+    initialStories: T[],
+    pagination: PaginationProps,
+    category?: Category,
+    include?: (keyof ExtraStoryFields)[],
+) {
+    const currentLocale = useCurrentLocale();
+
+    const { canLoadMore, data, isLoading, loadMore, resetData } = useInfiniteLoading<T>({
+        fetchingFn: async (nextPage, pageSize) => {
+            const { stories } = await fetchStories<T>(
+                nextPage,
+                pageSize,
+                category,
+                currentLocale,
+                include,
+            );
+            return stories;
+        },
+        initialData: initialStories,
+        pagination,
+    });
+
+    useEffect(() => {
+        if (category?.id) {
+            resetData();
+        }
+    }, [category?.id, resetData]);
+
+    return {
+        canLoadMore,
+        isLoading,
+        loadMoreStories: loadMore,
+        stories: data,
+    };
+}