fix: preview pages

next.config.js

@@ -255,12 +255,12 @@ const defaultConfig = {
       },
       {
         source: '/demos/regional-latency',
-        destination: 'https://latencies-ui.vercel.app/demos/regional-latency'
+        destination: 'https://latencies-ui.vercel.app/demos/regional-latency',
       },
       {
         source: '/demos/regional-latency/:asset*',
-        destination: 'https://latencies-ui.vercel.app/demos/regional-latency/:asset*'
-      }
+        destination: 'https://latencies-ui.vercel.app/demos/regional-latency/:asset*',
+      },
     ];
   },
   webpack(config) {

src/app/[slug]/page.jsx → src/app/(wp-pages)/[slug]/page.jsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable react/prop-types */
+import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
+import PreviewWarning from 'components/pages/blog-post/preview-warning';
 import Hero from 'components/pages/landing/hero';
 import CTA from 'components/pages/pricing/cta';
 import Container from 'components/shared/container';
@@ -12,7 +14,12 @@ import replicasIcon from 'icons/landing/replica.svg';
 import scaleIcon from 'icons/landing/scalability.svg';
 import storageIcon from 'icons/landing/storage.svg';
 import timerIcon from 'icons/landing/timer.svg';
-import { getLandingPages, getWpPageBySlug, getStaticPages } from 'utils/api-pages';
+import {
+  getLandingPages,
+  getWpPageBySlug,
+  getStaticPages,
+  getWpPreviewPageData,
+} from 'utils/api-pages';
 import { getHubspotFormData } from 'utils/forms';
 import getMetadata from 'utils/get-metadata';
 import getReactContentWithLazyBlocks from 'utils/get-react-content-with-lazy-blocks';
@@ -24,8 +31,21 @@ const icons = {
   replicas: replicasIcon,
 };
 
-const DynamicPage = async ({ params }) => {
-  const page = await getWpPageBySlug(params.slug);
+const DynamicPage = async ({ params, searchParams }) => {
+  const { isEnabled: isDraftModeEnabled } = draftMode();
+
+  let pageResult;
+
+  // TODO: this is a temporary fix for a known problem with accessing serachParams on the Vercel side - https://github.com/vercel/next.js/issues/54507
+  await Promise.resolve(JSON.stringify(searchParams));
+
+  if (isDraftModeEnabled) {
+    pageResult = await getWpPreviewPageData(searchParams?.id, searchParams?.status);
+  } else {
+    pageResult = await getWpPageBySlug(params.slug);
+  }
+
+  const page = pageResult;
 
   if (!page) return notFound();
 
@@ -80,6 +100,7 @@ const DynamicPage = async ({ params }) => {
           </Container>
         </article>
       )}
+      {isDraftModeEnabled && <PreviewWarning />}
     </Layout>
   );
 };

src/app/(wp-pages)/wp-draft-post-preview-page/page.jsx

@@ -0,0 +1,122 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/prop-types */
+import { notFound } from 'next/navigation';
+
+import PreviewWarning from 'components/pages/blog-post/preview-warning';
+import Hero from 'components/pages/landing/hero';
+import CTA from 'components/pages/pricing/cta';
+import Container from 'components/shared/container';
+import Content from 'components/shared/content';
+import Layout from 'components/shared/layout';
+import SplitViewGrid from 'components/shared/split-view-grid';
+import LINKS from 'constants/links';
+import SEO_DATA from 'constants/seo-data';
+import replicasIcon from 'icons/landing/replica.svg';
+import scaleIcon from 'icons/landing/scalability.svg';
+import storageIcon from 'icons/landing/storage.svg';
+import timerIcon from 'icons/landing/timer.svg';
+import { getWpPreviewPageData } from 'utils/api-pages';
+import { getHubspotFormData } from 'utils/forms';
+import getMetadata from 'utils/get-metadata';
+import getReactContentWithLazyBlocks from 'utils/get-react-content-with-lazy-blocks';
+
+const icons = {
+  scale: scaleIcon,
+  timer: timerIcon,
+  storage: storageIcon,
+  replicas: replicasIcon,
+};
+
+/*
+  NOTE:
+  This page is only needed to show previews for the drafts.
+  Its code is identical to the wp-pages page template, except for the data fetching.
+  If you need to change something here, сhange it first in the wp-pages page
+  and then copy the changes here.
+*/
+/*
+  WARNING:
+  You can't have a page in Wordpress with the "wp-draft-post-preview-page" slug. Please be careful.
+*/
+const WpPageDraft = async ({ searchParams }) => {
+  // TODO: this is a temporary fix for a known problem with accessing serachParams on the Vercel side - https://github.com/vercel/next.js/issues/54507
+  await Promise.resolve(JSON.stringify(searchParams));
+
+  if (!searchParams?.id || !searchParams?.status) {
+    return notFound();
+  }
+
+  const page = await getWpPreviewPageData(searchParams?.id, searchParams?.status);
+
+  if (!page) return notFound();
+
+  const {
+    title,
+    content,
+    template: { templateName },
+  } = page;
+
+  const contentWithLazyBlocks = getReactContentWithLazyBlocks(
+    content,
+    {
+      landinghero: async ({ hubspotFormId, ...restProps }) => {
+        const formData = await getHubspotFormData(hubspotFormId);
+        return <Hero formData={formData} hubspotFormId={hubspotFormId} {...restProps} />;
+      },
+      landingfeatures: ({ features, ...restProps }) => {
+        const items = features.map((feature) => {
+          const icon = icons[feature.iconName];
+          return {
+            ...feature,
+            icon,
+          };
+        });
+
+        return (
+          <SplitViewGrid
+            className="mx-auto mb-32 mt-16 max-w-[1265px] lg:my-14"
+            {...restProps}
+            items={items}
+            size="sm"
+            isGradientLabel
+          />
+        );
+      },
+      landingcta: CTA,
+    },
+    true
+  );
+
+  return (
+    <Layout>
+      {templateName === 'Landing' ? (
+        contentWithLazyBlocks
+      ) : (
+        <article className="safe-paddings py-48 3xl:py-44 2xl:py-40 xl:py-32 lg:pb-24 lg:pt-12 md:pb-20 md:pt-6">
+          <Container size="xs">
+            <h1 className="t-5xl font-title font-semibold">{title}</h1>
+          </Container>
+          <Container size="xs">
+            <Content className="prose-static mt-8 2xl:mt-7 xl:mt-6" content={content} asHTML />
+          </Container>
+        </article>
+      )}
+      <PreviewWarning />
+    </Layout>
+  );
+};
+
+export async function generateMetadata() {
+  const { title, description, imagePath } = SEO_DATA.blog;
+
+  return getMetadata({
+    title,
+    description,
+    keywords: '',
+    robotsNoindex: 'noindex',
+    pathname: `${LINKS.blog}/wp-draft-post-preview-page`,
+    imagePath,
+  });
+}
+
+export default WpPageDraft;

src/app/api/preview/route.js

@@ -18,8 +18,10 @@ export async function GET(request) {
     return new Response('Invalid token', { status: 401 });
   }
 
-  if (postType !== 'post') {
-    return new Response('Preview functionality only works for blog posts', { status: 401 });
+  if (postType !== 'post' && postType !== 'page') {
+    return new Response('Preview functionality only works for blog posts and pages', {
+      status: 401,
+    });
   }
 
   draftMode().enable();
@@ -31,5 +33,7 @@ export async function GET(request) {
 
   const slug = permalink && postStatus === 'publish' ? permalink : 'wp-draft-post-preview-page';
 
-  redirect(`/blog/${slug}?${redirectSearchParams.toString()}`);
+  postType === 'page'
+    ? redirect(`/${slug}?${redirectSearchParams.toString()}`)
+    : redirect(`/blog/${slug}?${redirectSearchParams.toString()}`);
 }

src/app/blog/[slug]/page.jsx

@@ -24,6 +24,9 @@ const BlogPage = async ({ params, searchParams }) => {
 
   let postResult;
 
+  // TODO: this is a temporary fix for a known problem with accessing serachParams on the Vercel side - https://github.com/vercel/next.js/issues/54507
+  await Promise.resolve(JSON.stringify(searchParams));
+
   if (isDraftModeEnabled) {
     postResult = await getWpPreviewPostData(searchParams?.id, searchParams?.status);
   } else {

src/components/shared/button/button.jsx

@@ -7,7 +7,6 @@ import Link from 'components/shared/link';
 import getNodeText from 'utils/get-node-text';
 import sendGtagEvent from 'utils/send-gtag-event';
 
-
 const styles = {
   base: 'inline-flex items-center justify-center font-bold !leading-none text-center whitespace-nowrap rounded-full transition-colors duration-200 outline-none',
   size: {

src/components/shared/code-block-wrapper/code-block-wrapper.jsx

@@ -26,7 +26,7 @@ function extractTextFromNode(node) {
     });
     return text;
   }
-  
+
   // If there's only one child, process that child directly.
   return extractTextFromNode(node.props.children);
 }

src/utils/api-pages.js

@@ -1,4 +1,6 @@
-import { fetchGraphQL, gql, graphQLClient } from 'lib/graphQLClient';
+import { fetchGraphQL, gql, graphQLClient, graphQLClientAdmin } from 'lib/graphQLClient';
+
+import getAuthToken from './api-auth';
 
 const PAGE_SEO_FRAGMENT = gql`
   fragment wpPageSeo on Page {
@@ -72,6 +74,64 @@ const getWpPageBySlug = async (slug) => {
   return data?.page;
 };
 
+const getWpPreviewPageData = async (id, status) => {
+  const {
+    refreshJwtAuthToken: { authToken },
+  } = await getAuthToken();
+
+  const isDraft = status === 'draft';
+  const isRevision = status === 'publish';
+  let query;
+
+  if (isDraft) {
+    query = gql`
+      query wpPageById($id: ID!) {
+        page(id: $id, idType: DATABASE_ID) {
+          content(format: RENDERED)
+          title(format: RENDERED)
+          template {
+            templateName
+          }
+          ...wpPageSeo
+        }
+      }
+      ${PAGE_SEO_FRAGMENT}
+    `;
+
+    const data = await graphQLClientAdmin(authToken).request(query, { id });
+
+    return data?.page;
+  }
+
+  if (isRevision) {
+    query = gql`
+      query wpPageById($id: ID!) {
+        page(id: $id, idType: DATABASE_ID) {
+          revisions(first: 1, where: { orderby: { field: MODIFIED, order: DESC } }) {
+            edges {
+              page: node {
+                content(format: RENDERED)
+                title(format: RENDERED)
+                template {
+                  templateName
+                }
+              }
+            }
+          }
+          ...wpPageSeo
+        }
+      }
+      ${PAGE_SEO_FRAGMENT}
+    `;
+
+    const revisionPageData = await graphQLClientAdmin(authToken).request(query, { id });
+
+    console.log(revisionPageData?.page.revisions?.edges[0]);
+
+    return revisionPageData?.page.revisions?.edges[0].page;
+  }
+};
+
 const getAboutPage = async () => {
   const aboutPageQuery = gql`
     query aboutPage {
@@ -87,4 +147,4 @@ const getAboutPage = async () => {
   return data?.page;
 };
 
-export { getLandingPages, getStaticPages, getWpPageBySlug, getAboutPage };
+export { getLandingPages, getStaticPages, getWpPageBySlug, getAboutPage, getWpPreviewPageData };