feat: ✨ implement sanity preview mode

allows for previewing pages from the CMS in real time

GH-8

Author: EmilEinarsen

app/components/app/ExitPreview.tsx

@@ -0,0 +1,12 @@
+
+export const ExitPreview = () => {
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center w-screen h-screen pointer-events-none">
+      <form className="pointer-events-auto" action="/resource/preview" method="POST">
+        <button className="p-4 font-bold text-white bg-black" type="submit">
+          Exit Preview Mode
+        </button>
+      </form>
+    </div>
+  )
+}

app/components/app/Page.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { RouteData } from '~/loaders'
+import { Module } from '../modules'
+
+interface PageProps {
+  page: RouteData['page']
+}
+
+export const Page = ({ page }: PageProps) => {
+  
+  return (
+    <>
+      {page?.modules?.map((module, i) => (
+        <Module key={i} index={i} data={module} />
+      ))}
+    </>
+  )
+}

app/components/app/PagePreview.tsx

@@ -0,0 +1,21 @@
+import { PreviewSuspense } from '@sanity/preview-kit'
+import { QueryParams } from 'sanity';
+import { usePreview } from '~/utils/sanityClient';
+import { ExitPreview } from './ExitPreview'
+import { Page } from './Page'
+
+interface PagePreviewProps {
+  query: string;
+  params: QueryParams;
+}
+
+export const PagePreview = ({ query, params }: PagePreviewProps) => {
+  const page = usePreview(null, query, params)
+  
+  return (
+    <>
+      <ExitPreview />
+      <Page page={page} />
+    </>
+  )
+}

app/loaders/index.ts

@@ -10,19 +10,23 @@ import type { BlogPost } from './groq-fragments/documents/blog-post'
 import type { Page } from './groq-fragments/documents/page'
 import type { Site } from './groq-fragments/documents/site'
 import type { Modules } from './groq-fragments/objects/modules'
-import { Params } from '@remix-run/react'
+import type { Params } from '@remix-run/react'
+
 export type { Page, Site, BlogPost, Modules }
 
+export const getPageQueryAndParams = (params: Params) => {
+	const { lang, slug } = getLangAndSlugFromParams(params)
+  const query = slug === lang ? pageQueryById.replace('$id', queryHomeID) : pageQueryBySlug
+
+  return { query, params: { slug, lang } }
+}
+
 export async function getPage(params: Params) {
 	let page: Page | undefined
-	const { lang, slug } = getLangAndSlugFromParams(params)
+  const args = getPageQueryAndParams(params)
 
 	try {
-		if(slug === lang) {
-			page = await client.fetch<Page>(pageQueryById.replace('$id', queryHomeID), { lang })
-		} else {
-			page = await client.fetch<Page>(pageQueryBySlug, { slug, lang })
-		}
+		page = await client.fetch<Page>(args.query, args.params)
 	} catch (error: unknown) {
 		if(
 			error &&
@@ -33,23 +37,23 @@ export async function getPage(params: Params) {
 	}
 
 	page && assert(
-		page.lang === lang, 
+		page.lang === args.params.lang, 
 		`pathname language didn't match the page results language`
 	)
 
 	return { 
 		page: page ? Object.assign(page, {
 			images: buildPageImages(page)
 		}) : undefined,
-		lang,
+		lang: args.params.lang,
 		notFound: !page
 	}
 }
 
 export async function getSite(params: Params) {
 	const { lang } = getLangAndSlugFromParams(params)
 
-	const site = await client.fetch<Site>(siteQuery, { lang })
+	const site: Site = await client.fetch(siteQuery, { lang })
 	assert(site, 'site was undefined')
 
 	return { 

app/routes/__app/($lang)/$.tsx

@@ -1,9 +1,14 @@
-import { Module } from "~/components/modules";
-import { getPage, getSite } from "~/loaders";
+import { useLoaderData } from "@remix-run/react";
+import { PreviewSuspense } from "@sanity/preview-kit";
+
+import { getPage, getPageQueryAndParams, getSite } from "~/loaders";
 import { metadata } from "~/loaders/metadata";
 import { dynamicLinks } from "~/loaders/dynamicLinks";
 import { useRouteData } from "~/hooks/useRouteData";
 import { merge } from "~/utils/utils";
+import { getSession } from "~/sessions";
+import { Page } from "~/components/app/Page";
+import { PagePreview } from "~/components/app/PagePreview";
 
 import type { ActionArgs, LoaderArgs, MetaFunction } from "@remix-run/node";
 
@@ -17,7 +22,15 @@ export const handle = {
 	dynamicLinks
 }
 
-export const loader = async ({ params }: LoaderArgs) => {
+export const loader = async ({ request, params }: LoaderArgs) => {
+  const isPreview = !!(await getSession(request.headers.get('Cookie'))).get('preview')
+
+  if(isPreview) return { 
+    ...await getSite(params), 
+    isPreview, 
+    ...getPageQueryAndParams(params) 
+  }
+
 	const data = await merge([
 		getSite(params),
 		getPage(params)
@@ -26,7 +39,7 @@ export const loader = async ({ params }: LoaderArgs) => {
   if (!data.page) 
     throw new Response("Not Found", { status: 404 })
 
-  return data
+  return { ...data, isPreview }
 }
 
 export const action = async ({ request }: ActionArgs) => {
@@ -52,14 +65,18 @@ export const action = async ({ request }: ActionArgs) => {
 
 export type ActionData = Awaited<ReturnType<typeof action>> | undefined
 
-export default function Page() {
+export default function Component() {
 	const data = useRouteData()
+  const { isPreview, query, params } = useLoaderData()
 
   return (
 		<>
-			{data?.page?.modules?.map((module, i) => (
-        <Module key={i} index={i} data={module} />
-      ))}
+      {isPreview ?
+        <PreviewSuspense fallback="Loading...">
+          <PagePreview query={query} params={params} />
+        </PreviewSuspense>
+        : <Page page={data.page} />
+      }
 		</>
 	);
 }

app/routes/resource/preview.tsx

@@ -0,0 +1,34 @@
+import { json, redirect } from '@remix-run/node'
+
+import { getSession, commitSession, destroySession } from '~/sessions'
+
+import type { ActionFunction, LoaderArgs } from '@remix-run/node'
+
+// A `POST` request to this route will exit preview mode
+export const action: ActionFunction = async ({request}) => {
+  if (request.method !== 'POST') {
+    return json({message: 'Method not allowed'}, 405)
+  }
+
+  const session = await getSession(request.headers.get('Cookie'))
+
+  return redirect('/', {
+    headers: {
+      'Set-Cookie': await destroySession(session),
+    },
+  })
+}
+
+// A `GET` request to this route will enter preview mode
+export const loader = async ({request}: LoaderArgs) => {
+  const session = await getSession(request.headers.get('Cookie'))
+  // For a more advanced use case, you could use this 
+  // to store a read token from sanity.io/manage
+  session.set(`preview`, `a-random-string`)
+
+  return redirect(`/`, {
+    headers: {
+      'Set-Cookie': await commitSession(session),
+    },
+  })
+}

app/sessions.tsx

@@ -0,0 +1,12 @@
+import {createCookieSessionStorage} from '@remix-run/node'
+
+const {getSession, commitSession, destroySession} = createCookieSessionStorage({
+  cookie: {
+    name: '__session',
+    sameSite: 'lax',
+    secrets: [process.env.SESSION_SECRET!],
+    secure: process.env.NODE_ENV === "production",
+  },
+})
+
+export {getSession, commitSession, destroySession}

app/utils/sanityClient.ts

@@ -1,4 +1,5 @@
-import createSanityClient from "@sanity/client";
+import { createClient } from "@sanity/client";
+import { definePreview } from "@sanity/preview-kit";
 import { projectDetails } from "sanity/projectDetails";
 
 import { IS_PROD } from "~/utils/constants";
@@ -10,4 +11,5 @@ const options = {
 	useCdn: IS_PROD,
 }
 
-export const client = createSanityClient(options)
+export const client = createClient(options)
+export const usePreview = definePreview(options);