@prezly/theme-kit-nextjs 4.2.0-alpha.2 → 4.2.0-alpha.4

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

@@ -1,21 +0,0 @@
-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/adapter-nextjs/page-props/sitemap/getServerSideProps.ts

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

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

@@ -1,5 +0,0 @@
-export { getSitemapServerSideProps } from './getServerSideProps';
-
-export { SitemapBuilder } from './SitemapBuilder';
-export { createPaths } from './createPaths';
-export * from './types';

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

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

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

@@ -1,96 +0,0 @@
-import type {
-    GetServerSidePropsContext,
-    GetServerSidePropsResult,
-    GetStaticPropsContext,
-    GetStaticPropsResult,
-} from 'next';
-
-import { getNextPrezlyApi } 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';
-
-export function getStoryPageServerSideProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps>,
-) {
-    return async function getServerSideProps(
-        context: GetServerSidePropsContext,
-    ): Promise<GetServerSidePropsResult<CustomProps>> {
-        const api = getNextPrezlyApi(context.req);
-
-        const { slug } = context.params as { slug?: string };
-        const story = slug ? await api.getStoryBySlug(slug) : null;
-        if (!story) {
-            return { notFound: true };
-        }
-
-        const { serverSideProps } = await getNewsroomServerSideProps(context, { story });
-
-        const { locale } = context;
-        if (locale && locale !== DUMMY_DEFAULT_LOCALE) {
-            return {
-                redirect: {
-                    destination: `/${slug}`,
-                    permanent: true,
-                },
-            };
-        }
-
-        serverSideProps.newsroomContextProps.currentStory = story;
-
-        return processRequest(context, {
-            ...serverSideProps,
-            ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, serverSideProps)
-                : customProps),
-        });
-    };
-}
-
-export function getStoryPageStaticProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps, GetStaticPropsContext>,
-) {
-    return async function getStaticProps(
-        context: GetStaticPropsContext,
-    ): Promise<GetStaticPropsResult<CustomProps>> {
-        const api = getNextPrezlyApi();
-
-        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 });
-
-        staticProps.newsroomContextProps.currentStory = story;
-
-        return processStaticRequest(context, {
-            ...staticProps,
-            ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps, GetStaticPropsContext>)(
-                      context,
-                      staticProps,
-                  )
-                : customProps),
-        });
-    };
-}
-
-export async function getStoryPageStaticPaths(options: { pinning?: boolean } = {}) {
-    const api = getNextPrezlyApi();
-    const stories = await api.getAllStories({
-        pinning: options.pinning ?? false,
-    });
-
-    const paths = stories.map(({ slug }) => ({ params: { slug } }));
-
-    return {
-        paths,
-        fallback: 'blocking',
-    };
-}

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

@@ -1,33 +0,0 @@
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
-
-import { getNextPrezlyApi } from '../../data-fetching';
-import { getNewsroomServerSideProps } from '../getNewsroomServerSideProps';
-import { processRequest } from '../processRequest';
-
-import type { PropsFunction } from './lib/types';
-
-export function getStoryPreviewPageServerSideProps<CustomProps extends Record<string, any>>(
-    customProps: CustomProps | PropsFunction<CustomProps>,
-) {
-    return async function getServerSideProps(
-        context: GetServerSidePropsContext,
-    ): Promise<GetServerSidePropsResult<CustomProps>> {
-        const api = getNextPrezlyApi(context.req);
-        const { uuid } = context.params as { uuid: string };
-        const story = await api.getStory(uuid);
-        if (!story) {
-            return { notFound: true };
-        }
-
-        const { serverSideProps } = await getNewsroomServerSideProps(context, { story });
-
-        serverSideProps.newsroomContextProps.currentStory = story;
-
-        return processRequest(context, {
-            ...serverSideProps,
-            ...(typeof customProps === 'function'
-                ? await (customProps as PropsFunction<CustomProps>)(context, serverSideProps)
-                : customProps),
-        });
-    };
-}

package/src/adapter-nextjs/processRequest.ts

@@ -1,50 +0,0 @@
-import { getShortestLocaleCode, LocaleObject } from '@prezly/theme-kit-core';
-import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
-
-import { getRedirectToCanonicalLocale } from '../intl';
-import type { PageProps, ServerSidePageProps } from '../types';
-
-/**
- * This function combines the props returned from `getNewsroomServerSideProps` and your optional custom props for the page.
- * It also handles locale redirects, if `canonicalUrl` parameter is provided.
- * See README for usage examples.
- *
- * @param context Next.js context passed to the `getServerSideProps` method of the page
- * @param props Object containing the return of `getNewsroomServerSideProps` and your optional custom props.
- * @param canonicalUrl Optional: a canonical URL for the current page without locale part. If provided, locale redirects will be handled by the function.
- */
-export function processRequest<Props>(
-    context: GetServerSidePropsContext,
-    props: Props & PageProps & ServerSidePageProps,
-    canonicalUrl?: string,
-): GetServerSidePropsResult<Props> {
-    const { locale: nextLocale, query } = 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 };
-    }
-
-    if (canonicalUrl) {
-        const { languages, localeCode } = pageProps.newsroomContextProps;
-        const currentLocale = LocaleObject.fromAnyCode(localeCode);
-        const shortestLocaleCode = getShortestLocaleCode(languages, currentLocale);
-
-        const redirect = getRedirectToCanonicalLocale(
-            shortestLocaleCode,
-            nextLocale,
-            canonicalUrl,
-            query,
-        );
-        if (redirect) {
-            return { redirect };
-        }
-    }
-
-    return {
-        props: pageProps as Props & PageProps,
-    };
-}

package/src/adapter-nextjs/processStaticRequest.ts

@@ -1,32 +0,0 @@
-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/components-nextjs/PageSeo/PageSeo.tsx

@@ -1,132 +0,0 @@
-import {
-    getAlternateLanguageLinks,
-    getNewsroomLogoUrl,
-    getUsedLanguages,
-} from '@prezly/theme-kit-core';
-import type { AlternateLanguageLink } from '@prezly/theme-kit-core';
-import { useRouter } from 'next/router';
-import { NextSeo } from 'next-seo';
-import type { NextSeoProps } from 'next-seo';
-import { useMemo } from 'react';
-
-import {
-    useCompanyInformation,
-    useCurrentLocale,
-    useCurrentStory,
-    useGetLinkLocaleSlug,
-    useGetTranslationUrl,
-    useLanguages,
-    useNewsroom,
-} from '../../newsroom-context';
-
-import { getAbsoluteUrl } from './lib';
-
-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 site = useNewsroom();
-    const currentLocale = useCurrentLocale();
-    const languages = useLanguages();
-    const getTranslationUrl = useGetTranslationUrl();
-    const getLinkLocaleSlug = useGetLinkLocaleSlug();
-    const currentStory = useCurrentStory();
-    const { asPath } = useRouter();
-
-    const pageTitle =
-        companyInformation.seo_settings.meta_title ||
-        companyInformation.seo_settings.default_meta_title ||
-        title ||
-        companyInformation.name;
-    const pageDescription =
-        companyInformation.seo_settings.meta_description ||
-        companyInformation.seo_settings.default_meta_description ||
-        description ||
-        companyInformation.about_plaintext;
-    const canonicalUrl =
-        canonical || getAbsoluteUrl(asPath, site.url, getLinkLocaleSlug(currentLocale));
-    const siteName = companyInformation.name;
-    const logoUrl = imageUrl || getNewsroomLogoUrl(site);
-
-    const alternateLanguageLinks: AlternateLanguageLink[] = useMemo(() => {
-        if (!languages.length) {
-            return [];
-        }
-
-        const usedLanguages = getUsedLanguages(languages);
-
-        return getAlternateLanguageLinks(usedLanguages, (locale) => {
-            const translationUrl = getTranslationUrl(locale);
-
-            if (!translationUrl) {
-                return undefined;
-            }
-
-            return getAbsoluteUrl(
-                translationUrl,
-                site.url,
-                currentStory && translationUrl !== '/' ? false : getLinkLocaleSlug(locale),
-            );
-        });
-    }, [currentStory, getLinkLocaleSlug, getTranslationUrl, languages, site.url]);
-
-    return (
-        <NextSeo
-            title={pageTitle}
-            description={pageDescription}
-            canonical={canonicalUrl}
-            noindex={nextSeoProps.noindex ?? !site.is_indexable}
-            nofollow={nextSeoProps.nofollow ?? !site.is_indexable}
-            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 },
-                site.google_search_console_key && {
-                    name: 'google-site-verification',
-                    content: site.google_search_console_key,
-                },
-            ].filter((tag): tag is Exclude<typeof tag, string | null> => Boolean(tag))}
-            additionalLinkTags={[
-                {
-                    rel: 'alternate',
-                    type: 'application/rss+xml',
-                    href: getAbsoluteUrl('/feed', site.url),
-                },
-            ]}
-            languageAlternates={alternateLanguageLinks}
-            {...nextSeoProps}
-        />
-    );
-}

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

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

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

@@ -1,7 +0,0 @@
-// 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/index.ts

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

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

@@ -1,87 +0,0 @@
-import type { ExtendedStory } from '@prezly/sdk';
-import { Story } from '@prezly/sdk';
-import { ArticleJsonLd, NextSeo } from 'next-seo';
-
-type Props = {
-    story: ExtendedStory;
-    noindex?: boolean;
-};
-
-/**
- * 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, noindex }: Props) {
-    const { title, subtitle, published_at, updated_at, author, oembed, newsroom, summary } = story;
-
-    const authorName = author?.display_name || author?.email || 'Unknown';
-    const seoTitle =
-        story.seo_settings.meta_title || story.seo_settings.default_meta_title || title;
-    const seoDescription =
-        story.seo_settings.meta_description ||
-        story.seo_settings.default_meta_description ||
-        subtitle ||
-        summary;
-    const canonical = story.seo_settings.canonical_url || oembed.url;
-    const indexable = newsroom.is_indexable && story.visibility === Story.Visibility.PUBLIC;
-
-    return (
-        <>
-            <NextSeo
-                title={seoTitle}
-                description={seoDescription}
-                canonical={canonical}
-                noindex={noindex ?? !indexable}
-                nofollow={noindex ?? !indexable}
-                openGraph={{
-                    title,
-                    description: seoDescription,
-                    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
-                }
-                additionalLinkTags={[
-                    {
-                        rel: 'alternate',
-                        type: 'application/json',
-                        href: `${oembed.url}.json`,
-                    },
-                ]}
-            />
-            <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={seoDescription}
-            />
-        </>
-    );
-}

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

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

package/src/components-nextjs/document.tsx

@@ -1,37 +0,0 @@
-import { DEFAULT_LOCALE, getLocaleDirection, LocaleObject } from '@prezly/theme-kit-core';
-import Document, { Head, Html, Main, NextScript } from 'next/document';
-
-import type { PageProps } from '../types';
-
-export class PrezlyThemeDocument extends Document {
-    getLocaleCode() {
-        const {
-            newsroomContextProps,
-            // eslint-disable-next-line no-underscore-dangle
-        } = this.props.__NEXT_DATA__.props.pageProps as PageProps;
-
-        // In some cases (like server errors) the newsroom context props will not be loaded.
-        // We need to fall back to default locale to keep the app working.
-        const { localeCode } = newsroomContextProps ?? { localeCode: DEFAULT_LOCALE };
-
-        return localeCode;
-    }
-
-    render() {
-        const locale = LocaleObject.fromAnyCode(this.getLocaleCode());
-        // TODO: The direction can be pulled from the Language object
-        const direction = getLocaleDirection(locale);
-
-        return (
-            <Html lang={locale.toHyphenCode()} dir={direction}>
-                <Head>
-                    <meta name="og:locale" content={locale.toHyphenCode()} />
-                </Head>
-                <body>
-                    <Main />
-                    <NextScript />
-                </body>
-            </Html>
-        );
-    }
-}

package/src/components-nextjs/index.ts

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

package/src/data-fetching/NextPrezlyApi.ts

@@ -1,57 +0,0 @@
-import type { Story } from '@prezly/sdk';
-import {
-    getAlgoliaSettings,
-    getCompanyInformation,
-    getDefaultLanguage,
-    getLanguageFromStory,
-    getNotifications,
-    LocaleObject,
-    PrezlyApi,
-} from '@prezly/theme-kit-core';
-import type { IncomingMessage } from 'http';
-
-import { getLanguageFromNextLocaleIsoCode } from '../intl';
-import type { PageProps, ServerSidePageProps } from '../types';
-
-export class NextPrezlyApi extends PrezlyApi {
-    async getNewsroomServerSideProps(
-        request?: IncomingMessage,
-        nextLocaleIsoCode?: string,
-        story?: Story,
-    ): Promise<PageProps & ServerSidePageProps> {
-        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);
-
-        // TODO: if no information given for current language, show boilerplate from default language
-        const companyInformation = getCompanyInformation(languages, locale);
-
-        const notifications = getNotifications(languages, locale);
-        const algoliaSettings = getAlgoliaSettings(request);
-
-        return {
-            newsroomContextProps: {
-                newsroom,
-                companyInformation,
-                categories,
-                languages,
-                localeCode,
-                notifications,
-                themePreset,
-                algoliaSettings,
-            },
-            localeResolved: Boolean(currentLanguage),
-        };
-    }
-}

package/src/data-fetching/getNextPrezlyApi.ts

@@ -1,23 +0,0 @@
-import { getEnvVariables } from '@prezly/theme-kit-core';
-import type { IncomingMessage } from 'http';
-
-import { NextPrezlyApi } from './NextPrezlyApi';
-
-export function getNextPrezlyApi(req?: IncomingMessage): NextPrezlyApi {
-    if (typeof window !== 'undefined') {
-        throw new Error('"getNextPrezlyApi" 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, PREZLY_THEME_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 NextPrezlyApi(PREZLY_ACCESS_TOKEN, PREZLY_NEWSROOM_UUID, PREZLY_THEME_UUID);
-}

package/src/data-fetching/index.ts

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

package/src/index.ts

@@ -1,8 +0,0 @@
-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 './sentry';
-export * from './types';

package/src/infinite-loading/index.ts

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