Added preview functionality for pages

app/(site)/[locale]/[...slug]/page.tsx

@@ -1,13 +1,14 @@
 import CategoryPage from '@/components/pages/category-page';
 import ProductPage from '@/components/pages/product-page';
 import SinglePage from '@/components/pages/single-page';
+import SinglePagePreview from '@/components/pages/single-page-preview';
+import PreviewProvider from '@/components/preview-provider';
 import getQueryFromSlug from '@/helpers/get-query-from-slug';
 import { getCachedClient } from 'lib/sanity/sanity.client';
 import type { Metadata } from 'next';
+import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
-export const revalidate = 43200; // 12 hours in seconds
-
 export async function generateMetadata({
   params
 }: {
@@ -40,6 +41,8 @@ interface PageParams {
 }
 
 export default async function Page({ params }: PageParams) {
+  const preview = draftMode().isEnabled ? { token: process.env.SANITY_API_READ_TOKEN } : undefined;
+
   const { slug, locale } = params;
 
   const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
@@ -58,6 +61,14 @@ export default async function Page({ params }: PageParams) {
 
   if (!pageData) return notFound();
 
+  if (preview && preview.token) {
+    return (
+      <PreviewProvider token={preview.token}>
+        {docType === 'page' && <SinglePagePreview initialData={pageData} params={queryParams} />}
+      </PreviewProvider>
+    );
+  }
+
   return (
     <>
       {docType === 'page' && <SinglePage data={pageData} />}

app/api/preview/route.ts

@@ -3,7 +3,7 @@ import { draftMode } from 'next/headers'
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)
   const secret = searchParams.get('secret')
-  // const slug = searchParams.get('slug')
+  const slug = searchParams.get('slug')
   const type = searchParams.get('type')
   const locale = searchParams.get('locale')
 
@@ -15,7 +15,6 @@ export async function GET(request: Request) {
 
   draftMode().enable()
 
-
   if (type === 'home') {
     return new Response(null, {
         status: 307,
@@ -24,4 +23,13 @@ export async function GET(request: Request) {
         },
     })
   }
+
+  if (type === 'page') {
+    return new Response(null, {
+        status: 307,
+        headers: {
+            Location: `/${locale}${slug}`,
+        },
+    })
+  }
 }

components/pages/home-page-preview.tsx

@@ -18,7 +18,7 @@ export default function HomePagePreview({ initialData, params }: HomePagePreview
   return (
     <>
       <HomePage data={data} />;{/* @ts-ignore */}
-      <PreviewBanner title={data?.title} />
+      <PreviewBanner title={data?.title} type={data?._type} />
     </>
   );
 }

components/pages/single-page-preview.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import PreviewBanner from '@/components/ui/preview-banner';
+import { pageQuery } from '@/lib/sanity/queries';
+import { useLiveQuery } from '@sanity/preview-kit';
+import SinglePage from './single-page';
+
+interface SinglePagePreviewParams {
+  initialData: [];
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export default function SinglePagePreview({ initialData, params }: SinglePagePreviewParams) {
+  const [data] = useLiveQuery(initialData, pageQuery, params);
+
+  return (
+    <>
+      <SinglePage data={data && data} />
+      {/* @ts-ignore */}
+      <PreviewBanner title={data?.title} type={data?._type} />
+    </>
+  );
+}

components/ui/preview-banner/preview-banner.tsx

@@ -4,16 +4,20 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 interface PreviewBannerProps {
-  title?: string;
+  title: string;
+  type?: string;
 }
 
-const PreviewBanner = ({ title }: PreviewBannerProps) => {
+const PreviewBanner = ({ title, type }: PreviewBannerProps) => {
   const t = useTranslations('ui.previewBanner');
   return (
-    <div className="fixed bottom-0 right-0 z-50 flex w-full items-center justify-between border-t border-high-contrast bg-app p-6">
+    <div className="fixed bottom-0 right-0 z-50 flex w-full items-center justify-between border-t border-ui-border bg-app p-4">
       {title && (
         <p className="text-lg">
-          {t('titlePart')} <span className="font-bold italic">{title}</span>
+          {t('titlePart')}{' '}
+          <span className="font-bold italic">
+            {title} {type && `(${type})`}
+          </span>
         </p>
       )}
       <Link

lib/sanity/constants.ts

@@ -41,8 +41,6 @@ export const SANITY_API_VERSION = '2022-10-25'
 // Set this to enable helper links in document status banners and shortcut links on products and collections.
 export const STORM_STORE_ID = ''
 
-export const SANITY_STUDIO_API_READ_TOKEN = process.env.SANITY_STUDIO_API_READ_TOKEN;
-
 // Project preview URLs
 export const localStorefrontUrl = 'http://localhost:3000';
 export const localStorefrontPreviewUrl = 'http://localhost:3000/api/preview';

lib/sanity/desk/page-structure.ts

@@ -1,9 +1,8 @@
-import {ListItemBuilder} from 'sanity/desk'
-import defineStructure from '../utils/define-structure'
-import {DocumentsIcon} from '@sanity/icons'
+import { DocumentsIcon, EyeOpenIcon, MasterDetailIcon } from '@sanity/icons'
+import { SanityDocument } from 'sanity'
 import Iframe from 'sanity-plugin-iframe-pane'
-import {SanityDocument} from 'sanity'
-import {EyeOpenIcon, MasterDetailIcon} from '@sanity/icons'
+import { ListItemBuilder } from 'sanity/desk'
+import defineStructure from '../utils/define-structure'
 import getPreviewUrl from '../utils/get-preview-url'
 
 export default defineStructure<ListItemBuilder>((S) =>