From 820af18fdfe73deb162ad92cb40ad9d8bf0d56e4 Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@gmail.com>
Date: Thu, 28 Mar 2024 22:15:20 -0700
Subject: [PATCH] Replace next Draft Mode with custom cookie and preview route

---
 app/[...slug]/page.tsx                        | 32 ++----------------
 app/api/draft/disable/route.tsx               |  9 -----
 app/api/draft/route.tsx                       | 13 +++++---
 app/layout.tsx                                | 33 +++++--------------
 app/page.tsx                                  |  4 +--
 app/preview/[...slug]/page.tsx                | 32 ++++++++++++++++++
 .../elements/drupal-window-sync.tsx           | 27 +++++++--------
 src/components/elements/user-analytics.tsx    | 18 ++++++++++
 src/components/global/page-header.tsx         |  4 +--
 src/components/layouts/interior-page.tsx      |  4 +--
 src/components/nodes/cards/node-card.tsx      |  6 ++--
 .../nodes/list-item/node-list-item.tsx        |  6 ++--
 src/components/nodes/pages/node-page.tsx      |  6 ++--
 .../stanford-course/stanford-course-page.tsx  |  4 +--
 .../stanford-event/stanford-event-page.tsx    |  4 +--
 .../stanford-news/stanford-news-page.tsx      |  4 +--
 src/components/paragraphs/paragraph.tsx       |  6 ++--
 src/components/paragraphs/rows/one-column.tsx |  4 +--
 .../paragraphs/rows/three-column.tsx          |  4 +--
 src/components/paragraphs/rows/two-column.tsx |  4 +--
 src/lib/drupal/get-access-token.tsx           |  4 +--
 src/lib/drupal/utils.tsx                      | 25 ++++++++++----
 src/lib/gql/gql-queries.tsx                   |  8 ++---
 23 files changed, 140 insertions(+), 121 deletions(-)
 delete mode 100644 app/api/draft/disable/route.tsx
 create mode 100644 app/preview/[...slug]/page.tsx
 create mode 100644 src/components/elements/user-analytics.tsx

diff --git a/app/[...slug]/page.tsx b/app/[...slug]/page.tsx
index f71fb39..fde7eb7 100644
--- a/app/[...slug]/page.tsx
+++ b/app/[...slug]/page.tsx
@@ -1,11 +1,10 @@
 import NodePage from "@components/nodes/pages/node-page";
-import UnpublishedBanner from "@components/elements/unpublished-banner";
 import {Metadata} from "next";
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d";
 import {getAllNodePaths, getEntityFromPath} from "@lib/gql/gql-queries";
 import {getNodeMetadata} from "./metadata";
-import {isDraftMode} from "@lib/drupal/utils";
 import {notFound, redirect} from "next/navigation";
+import {getPathFromContext, PageProps} from "@lib/drupal/utils";
 
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 export const revalidate = false;
@@ -13,28 +12,17 @@ export const dynamic = 'force-static';
 
 const Page = async ({params}: PageProps) => {
   const path = getPathFromContext({params})
-  const inDraft = isDraftMode();
 
-  const {redirect: redirectPath, entity, error} = await getEntityFromPath<NodeUnion>(path, inDraft)
+  const {redirect: redirectPath, entity, error} = await getEntityFromPath<NodeUnion>(path)
 
   if (error) throw new Error(error);
   if (redirectPath?.url) redirect(redirectPath.url)
   if (!entity) notFound();
 
-  return (
-    <>
-      <UnpublishedBanner status={entity.status}>
-        Unpublished Page
-      </UnpublishedBanner>
-      <NodePage node={entity}/>
-    </>
-  )
+  return <NodePage node={entity}/>
 }
 
 export const generateMetadata = async ({params}: PageProps): Promise<Metadata> => {
-  // If the user is in draft mode, there's no need to emit any customized metadata.
-  if (isDraftMode()) return {};
-
   const path = getPathFromContext({params})
   const {entity} = await getEntityFromPath<NodeUnion>(path)
   return entity ? getNodeMetadata(entity) : {};
@@ -46,18 +34,4 @@ export const generateStaticParams = async (): Promise<PageProps["params"][]> =>
   return nodePaths.map(path => ({slug: path.split('/').filter(part => !!part)}));
 }
 
-const getPathFromContext = (context: PageProps, prefix = ""): string => {
-  let {slug} = context.params
-
-  slug = Array.isArray(slug) ? slug.map((s) => encodeURIComponent(s)).join("/") : slug
-  slug = slug.replace(/^\//, '');
-  return prefix ? `${prefix}/${slug}` : `/${slug}`
-}
-
-type PageProps = {
-  params: { slug: string | string[] }
-  searchParams?: Record<string, string | string[] | undefined>
-}
-
-
 export default Page;
\ No newline at end of file
diff --git a/app/api/draft/disable/route.tsx b/app/api/draft/disable/route.tsx
deleted file mode 100644
index 8b38373..0000000
--- a/app/api/draft/disable/route.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import {NextResponse} from "next/server";
-import {draftMode} from 'next/headers'
-
-export const revalidate = 0;
-
-export async function GET() {
-  draftMode().disable()
-  return NextResponse.json({disabled: true});
-}
\ No newline at end of file
diff --git a/app/api/draft/route.tsx b/app/api/draft/route.tsx
index 77ff042..e0d78e7 100644
--- a/app/api/draft/route.tsx
+++ b/app/api/draft/route.tsx
@@ -1,6 +1,6 @@
 import {NextRequest, NextResponse} from "next/server";
-import {draftMode} from 'next/headers'
 import {redirect} from 'next/navigation'
+import {cookies} from "next/headers";
 
 export const revalidate = 0;
 
@@ -18,10 +18,15 @@ export async function GET(request: NextRequest) {
   if (!slug) {
     return NextResponse.json({message: 'Invalid slug path'}, {status: 401})
   }
-
-  draftMode().enable()
+  cookies().set('preview', secret, {
+    maxAge: 60 * 60,
+    httpOnly: true,
+    sameSite: 'none',
+    secure: true,
+    partitioned: true,
+  });
 
   // Redirect to the path from the fetched post
   // We don't redirect to searchParams.slug as that might lead to open redirect vulnerabilities
-  redirect(slug)
+  redirect(`/preview/${slug}`)
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index a333494..dc5ec28 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,17 +1,12 @@
 import '../src/styles/index.css';
 import BackToTop from "@components/elements/back-to-top";
-import DrupalWindowSync from "@components/elements/drupal-window-sync";
-import Editori11y from "@components/tools/editorially";
-import Link from "@components/elements/link";
 import PageFooter from "@components/global/page-footer";
 import PageHeader from "@components/global/page-header";
-import Script from "next/script";
-import {GoogleAnalytics} from "@next/third-parties/google";
 import {Icon} from "next/dist/lib/metadata/types/metadata-types";
-import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d";
-import {getConfigPage} from "@lib/gql/gql-queries";
-import {isDraftMode} from "@lib/drupal/utils";
 import {sourceSans3} from "../src/styles/fonts";
+import DrupalWindowSync from "@components/elements/drupal-window-sync";
+import {isPreviewMode} from "@lib/drupal/utils";
+import UserAnalytics from "@components/elements/user-analytics";
 
 const appleIcons: Icon[] = [60, 72, 76, 114, 120, 144, 152, 180].map(size => ({
   url: `https://www-media.stanford.edu/assets/favicon/apple-touch-icon-${size}x${size}.png`,
@@ -47,30 +42,20 @@ export const metadata = {
 // https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 export const revalidate = false;
 
-const RootLayout = async ({children, modal}: { children: React.ReactNode, modal: React.ReactNode }) => {
-  const draftMode = isDraftMode();
-  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>('StanfordBasicSiteSetting')
+const RootLayout = ({children, modal}: { children: React.ReactNode, modal: React.ReactNode }) => {
+  const isPreview = isPreviewMode();
   return (
     <html lang="en" className={sourceSans3.className}>
-    {draftMode && <><Editori11y/><DrupalWindowSync/></>}
-
-    {/* Add Google Analytics and SiteImprove when not in draft mode. */}
-    {(!draftMode && siteSettingsConfig?.suGoogleAnalytics) &&
-      <>
-        <Script async src="//siteimproveanalytics.com/js/siteanalyze_80352.js"/>
-        <GoogleAnalytics gaId={siteSettingsConfig?.suGoogleAnalytics}/>
-      </>
+    {/* Add Google Analytics and SiteImprove when not in preview mode. */}
+    {!isPreview &&
+      <UserAnalytics/>
     }
+    <DrupalWindowSync/>
     <body>
     <nav aria-label="Skip Links">
       <a href="#main-content" className="skiplink">Skip to main content</a>
     </nav>
 
-    {/* Automatically exit "Draft" mode upon the page loading. This prevents unwanted uncached data fetching. */}
-    {draftMode &&
-      <Link href="/api/draft/disable" tabIndex={-1} className="sr-only">Disable Draft Mode</Link>
-    }
-
     <div className="flex flex-col min-h-screen">
       <PageHeader/>
       <main id="main-content" className="flex-grow mb-32">
diff --git a/app/page.tsx b/app/page.tsx
index 1307f06..226d54d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,7 +2,7 @@ import Rows from "@components/paragraphs/rows/rows";
 import {notFound} from "next/navigation";
 import {getEntityFromPath} from "@lib/gql/gql-queries";
 import {NodeStanfordPage, NodeUnion} from "@lib/gql/__generated__/drupal.d";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 import {Metadata} from "next";
 import {getNodeMetadata} from "./[...slug]/metadata";
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph";
@@ -12,7 +12,7 @@ export const revalidate = false;
 export const dynamic = 'force-static';
 
 const Home = async () => {
-  const {entity, error} = await getEntityFromPath<NodeStanfordPage>('/', isDraftMode());
+  const {entity, error} = await getEntityFromPath<NodeStanfordPage>('/', isPreviewMode());
 
   if (error) throw new Error(error);
   if (!entity) notFound();
diff --git a/app/preview/[...slug]/page.tsx b/app/preview/[...slug]/page.tsx
new file mode 100644
index 0000000..a8ea004
--- /dev/null
+++ b/app/preview/[...slug]/page.tsx
@@ -0,0 +1,32 @@
+import NodePage from "@components/nodes/pages/node-page";
+import UnpublishedBanner from "@components/elements/unpublished-banner";
+import {NodeUnion} from "@lib/gql/__generated__/drupal.d";
+import {getEntityFromPath} from "@lib/gql/gql-queries";
+import {notFound} from "next/navigation";
+import Editori11y from "@components/tools/editorially";
+import {getPathFromContext, isPreviewMode, PageProps} from "@lib/drupal/utils";
+
+const Page = async ({params}: PageProps) => {
+  const path = getPathFromContext({params})
+  if (!isPreviewMode()) notFound();
+
+  const { entity, error} = await getEntityFromPath<NodeUnion>(path, true)
+
+  if (error) throw new Error(error);
+  if (!entity) notFound();
+
+  return (
+    <>
+      <Editori11y/>
+      <UnpublishedBanner status={false}>
+        Preview Mode
+      </UnpublishedBanner>
+      <UnpublishedBanner status={entity.status}>
+        Unpublished Page
+      </UnpublishedBanner>
+      <NodePage node={entity}/>
+    </>
+  )
+}
+
+export default Page;
\ No newline at end of file
diff --git a/src/components/elements/drupal-window-sync.tsx b/src/components/elements/drupal-window-sync.tsx
index bcf232c..64466f7 100644
--- a/src/components/elements/drupal-window-sync.tsx
+++ b/src/components/elements/drupal-window-sync.tsx
@@ -1,23 +1,24 @@
 "use client";
 
 import {usePathname} from "next/navigation";
-import {useEffect} from "react";
+import {useIsClient} from "usehooks-ts";
 
 const DrupalWindowSync = () => {
   const pathname = usePathname();
+  if (!useIsClient()) return;
 
-  useEffect(() => {
-    if (!pathname) return;
-
-    if (
-      pathname &&
-      !pathname?.startsWith('/gallery/') &&
-      window &&
-      window.top !== window.self
-    ) {
-      window.parent.postMessage({type: "NEXT_DRUPAL_ROUTE_SYNC", path: pathname}, process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string)
-    }
-  }, [pathname]);
+  if (
+    pathname &&
+    !pathname?.startsWith('/gallery/') &&
+    !pathname?.startsWith('/preview/') &&
+    window &&
+    window.top !== window.self
+  ) {
+    window.parent.postMessage({
+      type: "NEXT_DRUPAL_ROUTE_SYNC",
+      path: pathname
+    }, process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string)
+  }
   return null;
 }
 
diff --git a/src/components/elements/user-analytics.tsx b/src/components/elements/user-analytics.tsx
new file mode 100644
index 0000000..9a2c699
--- /dev/null
+++ b/src/components/elements/user-analytics.tsx
@@ -0,0 +1,18 @@
+import {getConfigPage} from "@lib/gql/gql-queries";
+import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal";
+import Script from "next/script";
+import {GoogleAnalytics} from "@next/third-parties/google";
+import {isPreviewMode} from "@lib/drupal/utils";
+
+const UserAnalytics = async () => {
+  if (isPreviewMode()) return;
+  const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>('StanfordBasicSiteSetting')
+  if (!siteSettingsConfig?.suGoogleAnalytics) return;
+  return (
+    <>
+      <Script async src="//siteimproveanalytics.com/js/siteanalyze_80352.js"/>
+      <GoogleAnalytics gaId={siteSettingsConfig?.suGoogleAnalytics}/>
+    </>
+  )
+}
+export default UserAnalytics;
\ No newline at end of file
diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
index 0df6264..aa2abae 100644
--- a/src/components/global/page-header.tsx
+++ b/src/components/global/page-header.tsx
@@ -9,10 +9,10 @@ import {
   StanfordBasicSiteSetting,
   StanfordGlobalMessage
 } from "@lib/gql/__generated__/drupal.d";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 const PageHeader = async () => {
-  const menuItems = await getMenu(MenuAvailable.Main, isDraftMode());
+  const menuItems = await getMenu(MenuAvailable.Main, isPreviewMode());
   const globalMessageConfig = await getConfigPage<StanfordGlobalMessage>('StanfordGlobalMessage');
   const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>('StanfordBasicSiteSetting')
   const lockupSettingsConfig = await getConfigPage<LockupSetting>('LockupSetting')
diff --git a/src/components/layouts/interior-page.tsx b/src/components/layouts/interior-page.tsx
index c0f237b..674cba7 100644
--- a/src/components/layouts/interior-page.tsx
+++ b/src/components/layouts/interior-page.tsx
@@ -1,7 +1,7 @@
 import {getMenu} from "@lib/gql/gql-queries";
 import SideNav from "@components/menu/side-nav";
 import {HtmlHTMLAttributes} from "react";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 import {MenuAvailable} from "@lib/gql/__generated__/drupal.d";
 import useActiveTrail from "@lib/hooks/useActiveTrail";
 import {twMerge} from "tailwind-merge";
@@ -14,7 +14,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const InteriorPage = async ({children, currentPath, ...props}: Props) => {
-  const menu = await getMenu(MenuAvailable.Main, isDraftMode());
+  const menu = await getMenu(MenuAvailable.Main, isPreviewMode());
   const activeTrail: string[] = useActiveTrail(menu, currentPath);
 
   // Peel off the menu items from the parent.
diff --git a/src/components/nodes/cards/node-card.tsx b/src/components/nodes/cards/node-card.tsx
index 03a743c..e518b30 100644
--- a/src/components/nodes/cards/node-card.tsx
+++ b/src/components/nodes/cards/node-card.tsx
@@ -6,7 +6,7 @@ import StanfordPageCard from "@components/nodes/cards/stanford-page/stanford-pag
 import StanfordPersonCard from "@components/nodes/cards/stanford-person/stanford-person-card";
 import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford-policy-card";
 import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d";
 
 type Props = {
@@ -21,9 +21,9 @@ type Props = {
 }
 
 const NodeCard = ({node, headingLevel}: Props) => {
-  const draftMode = isDraftMode();
+  const previewMode = isPreviewMode();
   const itemProps: { [key: string]: string } = {};
-  if (draftMode) {
+  if (previewMode) {
     itemProps['data-type'] = node.__typename || 'unknown';
     itemProps['data-id'] = node.id;
   }
diff --git a/src/components/nodes/list-item/node-list-item.tsx b/src/components/nodes/list-item/node-list-item.tsx
index 271b48d..0d60933 100644
--- a/src/components/nodes/list-item/node-list-item.tsx
+++ b/src/components/nodes/list-item/node-list-item.tsx
@@ -8,7 +8,7 @@ import StanfordPersonListItem from "@components/nodes/list-item/stanford-person/
 import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/stanford-policy-list-item";
 import StanfordPublicationListItem
   from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d";
 
 type Props = {
@@ -23,9 +23,9 @@ type Props = {
 }
 
 const NodeListItem = ({node, headingLevel}: Props) => {
-  const draftMode = isDraftMode();
+  const previewMode = isPreviewMode();
   const itemProps: { [key: string]: string } = {};
-  if (draftMode) {
+  if (previewMode) {
     itemProps['data-type'] = node.__typename || 'unknown';
     itemProps['data-id'] = node.id;
   }
diff --git a/src/components/nodes/pages/node-page.tsx b/src/components/nodes/pages/node-page.tsx
index 8dade72..37e0868 100644
--- a/src/components/nodes/pages/node-page.tsx
+++ b/src/components/nodes/pages/node-page.tsx
@@ -6,14 +6,14 @@ import StanfordPolicyPage from "@components/nodes/pages/stanford-policy/stanford
 import StanfordPublicationPage from "@components/nodes/pages/stanford-publication/stanford-publication-page";
 import StanfordCoursePage from "@components/nodes/pages/stanford-course/stanford-course-page";
 import StanfordEventSeriesPage from "@components/nodes/pages/stanford-event-series/stanford-event-series-page";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d";
 
 const NodePage = ({node}: { node: NodeUnion }) => {
-  const draftMode = isDraftMode();
+  const previewMode = isPreviewMode();
   const itemProps: { [key: string]: string } = {};
 
-  if (draftMode) {
+  if (previewMode) {
     itemProps['data-type'] = node.__typename || 'unknown';
     itemProps['data-id'] = node.id;
   }
diff --git a/src/components/nodes/pages/stanford-course/stanford-course-page.tsx b/src/components/nodes/pages/stanford-course/stanford-course-page.tsx
index d70cd68..0974c24 100644
--- a/src/components/nodes/pages/stanford-course/stanford-course-page.tsx
+++ b/src/components/nodes/pages/stanford-course/stanford-course-page.tsx
@@ -3,7 +3,7 @@ import Wysiwyg from "@components/elements/wysiwyg";
 import {H1} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordCourse} from "@lib/gql/__generated__/drupal.d";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordCourse
@@ -11,7 +11,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordCoursePage = ({node, ...props}: Props) => {
-  if (node.suCourseLink?.url && !isDraftMode()) redirect(node.suCourseLink?.url);
+  if (node.suCourseLink?.url && !isPreviewMode()) redirect(node.suCourseLink?.url);
   return (
     <article className="centered my-32" {...props}>
       <H1>
diff --git a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
index 4ac06ea..bf70048 100644
--- a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
+++ b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
@@ -12,7 +12,7 @@ import {NodeStanfordEvent, ParagraphStanfordSchedule} from "@lib/gql/__generated
 import Email from "@components/elements/email";
 import Telephone from "@components/elements/telephone";
 import Link from "@components/elements/link";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordEvent
@@ -20,7 +20,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordEventPage = ({node, ...props}: Props) => {
-  if (node.suEventSource?.url && !isDraftMode()) redirect(node.suEventSource.url)
+  if (node.suEventSource?.url && !isPreviewMode()) redirect(node.suEventSource.url)
 
   const startTime = new Date(node.suEventDateTime.value * 1000);
   const endTime = new Date(node.suEventDateTime.end_value * 1000);
diff --git a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
index abbf50d..ca5564c 100644
--- a/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
+++ b/src/components/nodes/pages/stanford-news/stanford-news-page.tsx
@@ -5,7 +5,7 @@ import SocialIcons from "@components/nodes/pages/stanford-news/social-icons";
 import {H1} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {NodeStanfordNews} from "@lib/gql/__generated__/drupal.d";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews
@@ -13,7 +13,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const StanfordNewsPage = ({node, ...props}: Props) => {
-  if (node.suNewsSource?.url && !isDraftMode()) redirect(node.suNewsSource.url)
+  if (node.suNewsSource?.url && !isPreviewMode()) redirect(node.suNewsSource.url)
 
   const publishDate = node.suNewsPublishingDate ? new Date(node.suNewsPublishingDate.time).toLocaleDateString("en-us", {
     month: "long",
diff --git a/src/components/paragraphs/paragraph.tsx b/src/components/paragraphs/paragraph.tsx
index e4761d3..fca8606 100644
--- a/src/components/paragraphs/paragraph.tsx
+++ b/src/components/paragraphs/paragraph.tsx
@@ -6,7 +6,7 @@ import SpacerParagraph from "@components/paragraphs/stanford-spacer/spacer-parag
 import WysiwygParagraph from "@components/paragraphs/stanford-wysiwyg/wysiwyg-paragraph";
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph";
 import ListParagraph from "@components/paragraphs/stanford-lists/list-paragraph";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d";
 import {Suspense} from "react";
 
@@ -18,10 +18,10 @@ type Props = {
 }
 
 const Paragraph = async ({paragraph}: Props) => {
-  const draftMode = isDraftMode()
+  const previewMode = isPreviewMode()
 
   const itemProps: Record<string, string> = {}
-  if (draftMode) {
+  if (previewMode) {
     itemProps['data-type'] = paragraph.__typename || 'unknown';
     itemProps['data-id'] = paragraph.id;
   }
diff --git a/src/components/paragraphs/rows/one-column.tsx b/src/components/paragraphs/rows/one-column.tsx
index c7076f5..570fd42 100644
--- a/src/components/paragraphs/rows/one-column.tsx
+++ b/src/components/paragraphs/rows/one-column.tsx
@@ -1,10 +1,10 @@
 import Paragraph from "@components/paragraphs/paragraph";
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 const OneColumn = ({items}: { items: ParagraphUnion[] }) => {
   const draftProps: Record<string, string> = {};
-  if (isDraftMode()) {
+  if (isPreviewMode()) {
     draftProps["data-columns"] = "1";
   }
   return (
diff --git a/src/components/paragraphs/rows/three-column.tsx b/src/components/paragraphs/rows/three-column.tsx
index 4846bea..58d3733 100644
--- a/src/components/paragraphs/rows/three-column.tsx
+++ b/src/components/paragraphs/rows/three-column.tsx
@@ -1,7 +1,7 @@
 import OneColumn from "@components/paragraphs/rows/one-column";
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d";
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 const ThreeColumn = ({items}: { items: ParagraphUnion[] }) => {
   const leftItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === 'left');
@@ -9,7 +9,7 @@ const ThreeColumn = ({items}: { items: ParagraphUnion[] }) => {
   const rightItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === 'right');
 
   const draftProps: Record<string, string> = {};
-  if (isDraftMode()) {
+  if (isPreviewMode()) {
     draftProps["data-columns"] = "3";
   }
 
diff --git a/src/components/paragraphs/rows/two-column.tsx b/src/components/paragraphs/rows/two-column.tsx
index 73d3287..6b96ab7 100644
--- a/src/components/paragraphs/rows/two-column.tsx
+++ b/src/components/paragraphs/rows/two-column.tsx
@@ -1,7 +1,7 @@
 import OneColumn from "@components/paragraphs/rows/one-column";
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d";
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors";
-import {isDraftMode} from "@lib/drupal/utils";
+import {isPreviewMode} from "@lib/drupal/utils";
 
 const TwoColumn = ({items, config}: { items: ParagraphUnion[], config?: Record<string, any> }) => {
   const leftItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === 'left');
@@ -15,7 +15,7 @@ const TwoColumn = ({items, config}: { items: ParagraphUnion[], config?: Record<s
   }
 
   const draftProps: Record<string, string> = {};
-  if (isDraftMode()) {
+  if (isPreviewMode()) {
     draftProps["data-columns"] = "2";
   }
 
diff --git a/src/lib/drupal/get-access-token.tsx b/src/lib/drupal/get-access-token.tsx
index d670884..921680b 100644
--- a/src/lib/drupal/get-access-token.tsx
+++ b/src/lib/drupal/get-access-token.tsx
@@ -9,9 +9,9 @@ type AccessToken = {
 
 const CACHE_KEY = "NEXT_DRUPAL_ACCESS_TOKEN"
 
-export const getAccessToken = async (draftMode: boolean = false): Promise<AccessToken | undefined> => {
+export const getAccessToken = async (previewMode: boolean = false): Promise<AccessToken | undefined> => {
 
-  if (!(process.env.DRUPAL_DRAFT_CLIENT && process.env.DRUPAL_DRAFT_SECRET && draftMode)) return;
+  if (!(process.env.DRUPAL_DRAFT_CLIENT && process.env.DRUPAL_DRAFT_SECRET && previewMode)) return;
 
   const cached = cache.get<AccessToken | false>(CACHE_KEY)
   if (cached && cached?.access_token) return cached
diff --git a/src/lib/drupal/utils.tsx b/src/lib/drupal/utils.tsx
index e6cc784..5fdf4cf 100644
--- a/src/lib/drupal/utils.tsx
+++ b/src/lib/drupal/utils.tsx
@@ -1,13 +1,13 @@
 import {stringify} from "qs"
 import {AccessToken} from "next-drupal";
 import {getAccessToken} from "@lib/drupal/get-access-token";
-import {draftMode} from "next/headers";
+import {cookies} from "next/headers";
 
 /*
  * Draft mode works when in normal builds. Use environment variable during development.
  */
-export const isDraftMode = (): boolean => {
-  return process.env.NODE_ENV === 'development' || draftMode().isEnabled;
+export const isPreviewMode = (): boolean => {
+  return process.env.NODE_ENV === 'development' || cookies()?.get('preview')?.value === process.env.DRUPAL_PREVIEW_SECRET;
 }
 
 export const buildUrl = (
@@ -21,17 +21,30 @@ export const buildUrl = (
   return url
 }
 
-export const buildHeaders = async ({accessToken, headers = {}, draftMode = false}: {
+export const buildHeaders = async ({accessToken, headers = {}, previewMode = false}: {
   accessToken?: AccessToken
   headers?: HeadersInit
-  draftMode?: boolean
+  previewMode?: boolean
 } = {}): Promise<Headers> => {
   if (process.env.REQUEST_HEADERS) headers = {...headers, ...JSON.parse(process.env.REQUEST_HEADERS)};
 
   const requestHeaders = new Headers(headers);
 
-  const token = accessToken || (await getAccessToken(draftMode))
+  const token = accessToken || (await getAccessToken(previewMode))
   if (token) requestHeaders.set('Authorization', `Bearer ${token.access_token}`)
 
   return requestHeaders
 }
+
+export type PageProps = {
+  params: { slug: string | string[] }
+  searchParams?: Record<string, string | string[] | undefined>
+}
+
+export const getPathFromContext = (context: PageProps, prefix = ""): string => {
+  let {slug} = context.params
+
+  slug = Array.isArray(slug) ? slug.map((s) => encodeURIComponent(s)).join("/") : slug
+  slug = slug.replace(/^\//, '');
+  return prefix ? `${prefix}/${slug}` : `/${slug}`
+}
\ No newline at end of file
diff --git a/src/lib/gql/gql-queries.tsx b/src/lib/gql/gql-queries.tsx
index eb32d3a..34a1b99 100644
--- a/src/lib/gql/gql-queries.tsx
+++ b/src/lib/gql/gql-queries.tsx
@@ -16,14 +16,14 @@ import {buildHeaders} from "@lib/drupal/utils";
 import {cache as nodeCache} from "@lib/drupal/get-cache";
 import {graphqlClient} from "@lib/gql/gql-client";
 
-export const getEntityFromPath = cache(async <T extends NodeUnion | TermUnion, >(path: string, draftMode: boolean = false): Promise<{
+export const getEntityFromPath = cache(async <T extends NodeUnion | TermUnion, >(path: string, previewMode: boolean = false): Promise<{
   entity?: T,
   redirect?: RouteRedirect
   error?: string
 }> => {
   "use server";
 
-  const headers = await buildHeaders({draftMode})
+  const headers = await buildHeaders({previewMode})
   let entity: T | undefined;
   let query: RouteQuery;
 
@@ -71,10 +71,10 @@ const getConfigPagesData = cache(async (): Promise<ConfigPagesQuery> => {
   return query;
 })
 
-export const getMenu = cache(async (name?: MenuAvailable, draftMode?: boolean): Promise<MenuItem[]> => {
+export const getMenu = cache(async (name?: MenuAvailable, previewMode?: boolean): Promise<MenuItem[]> => {
   "use server";
 
-  const headers = await buildHeaders({draftMode});
+  const headers = await buildHeaders({previewMode});
   const menu = await graphqlClient({headers, next: {tags: ['menus', `menu:${name || "main"}`]}}).Menu({name});
   const menuItems = (menu.menu?.items || []) as MenuItem[];