Merge pull request #30 from strapi/feat/preview-2

add: preview
strapi · Jan 27, 2025 · 516011b · 516011b
2 parents 33cc961 + bed3100
commit 516011b
Show file tree

Hide file tree

Showing 18 changed files with 476 additions and 187 deletions.
diff --git a/next/app/[locale]/(marketing)/[slug]/page.tsx b/next/app/[locale]/(marketing)/[slug]/page.tsx
@@ -1,5 +1,4 @@
 import { Metadata } from 'next';
-
 import PageContent from '@/lib/shared/PageContent';
 import fetchContentType from '@/lib/strapi/fetchContentType';
 import { generateMetadataObject } from '@/lib/shared/metadata';
@@ -11,9 +10,15 @@ export async function generateMetadata({
   params: { locale: string; slug: string };
 }): Promise<Metadata> {
   const pageData = await fetchContentType(
-    'pages',
-    `filters[slug][$eq]=${params.slug}&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`,
-    true
+    "pages",
+    {
+      filters: {
+        slug: params.slug,
+        locale: params.locale,
+      },
+      populate: "seo.metaImage",
+    },
+    true,
   );
 
   const seo = pageData?.seo;
@@ -23,9 +28,14 @@ export async function generateMetadata({
 
 export default async function Page({ params }: { params: { locale: string, slug: string } }) {
   const pageData = await fetchContentType(
-    'pages',
-    `filters[slug][$eq]=${params.slug}&filters[locale][$eq]=${params.locale}`,
-    true
+    "pages",
+    {
+      filters: {
+        slug: params.slug,
+        locale: params.locale,
+      },
+    },
+    true,
   );
 
   const localizedSlugs = pageData.localizations?.reduce(

diff --git a/next/app/[locale]/(marketing)/blog/[slug]/page.tsx b/next/app/[locale]/(marketing)/blog/[slug]/page.tsx
@@ -13,8 +13,13 @@ export default async function SingleArticlePage({
 }) {
   const article = await fetchContentType(
     "articles",
-    `filters[slug]=${params?.slug}&filters[locale][$eq]=${params.locale}`,
-    true
+    {
+      filters: {
+        slug: params.slug,
+        locale: params.locale,
+      }
+    },
+    true,
   );
 
   if (!article) {

diff --git a/next/app/[locale]/(marketing)/blog/page.tsx b/next/app/[locale]/(marketing)/blog/page.tsx
@@ -1,4 +1,5 @@
 import { type Metadata } from "next";
+
 import { Container } from "@/components/container";
 import { Heading } from "@/components/elements/heading";
 import { Subheading } from "@/components/elements/subheading";
@@ -18,7 +19,10 @@ export async function generateMetadata({
 }: {
   params: { locale: string };
 }): Promise<Metadata> {
-  const pageData = await fetchContentType('blog-page', `filters[locale]=${params.locale}&populate=seo.metaImage`, true)
+  const pageData = await fetchContentType('blog-page', {
+    filters: { locale: params.locale },
+    populate: "seo.metaImage",
+  }, true)
 
   const seo = pageData?.seo;
   const metadata = generateMetadataObject(seo);
@@ -30,8 +34,12 @@ export default async function Blog({
 }: {
   params: { locale: string, slug: string };
 }) {
-  const blogPage = await fetchContentType('blog-page', `filters[locale]=${params.locale}`, true)
-  const articles = await fetchContentType('articles', `filters[locale]=${params.locale}`)
+  const blogPage = await fetchContentType('blog-page', {
+    filters: { locale: params.locale },
+  }, true)
+  const articles = await fetchContentType('articles', {
+    filters: { locale: params.locale },
+  }, false)
 
   const localizedSlugs = blogPage.localizations?.reduce(
     (acc: Record<string, string>, localization: any) => {
@@ -43,7 +51,7 @@ export default async function Blog({
 
   return (
     <div className="relative overflow-hidden py-20 md:py-0">
-       <ClientSlugHandler localizedSlugs={localizedSlugs} />
+      <ClientSlugHandler localizedSlugs={localizedSlugs} />
       <AmbientColor />
       <Container className="flex flex-col items-center justify-between pb-20">
         <div className="relative z-20 py-10 md:pt-40">

diff --git a/next/app/[locale]/(marketing)/page.tsx b/next/app/[locale]/(marketing)/page.tsx
@@ -10,9 +10,16 @@ export async function generateMetadata({
 }: {
   params: { locale: string };
 }): Promise<Metadata> {
+
   const pageData = await fetchContentType(
     'pages',
-    `filters[slug][$eq]=homepage&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`,
+    {
+      filters: {
+        slug: "homepage",
+        locale: params.locale,
+      },
+      populate: "seo.metaImage",
+    },
     true
   );
 
@@ -22,9 +29,15 @@ export async function generateMetadata({
 }
 
 export default async function HomePage({ params }: { params: { locale: string } }) {
+
   const pageData = await fetchContentType(
     'pages',
-    `filters[slug][$eq]=homepage&filters[locale][$eq]=${params.locale}`,
+    {
+      filters: {
+        slug: "homepage",
+        locale: params.locale,
+      },
+    },
     true
   );
 

diff --git a/next/app/[locale]/(marketing)/products/[slug]/page.tsx b/next/app/[locale]/(marketing)/products/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+
 import { redirect } from "next/navigation";
 import { Container } from "@/components/container";
 import { AmbientColor } from "@/components/decorations/ambient-color";
@@ -13,7 +14,11 @@ export async function generateMetadata({
 }: {
   params: { locale: string, slug: string };
 }): Promise<Metadata> {
-  const pageData = await fetchContentType("products", `filters[slug]=${params?.slug}&populate=seo.metaImage`, true)
+
+  const pageData = await fetchContentType("products", {
+    filters: { slug: params.slug },
+    populate: "seo.metaImage",
+  }, true)
 
   const seo = pageData?.seo;
   const metadata = generateMetadataObject(seo);
@@ -25,7 +30,10 @@ export default async function SingleProductPage({
 }: {
   params: { slug: string, locale: string };
 }) {
-  const product = await fetchContentType("products", `filters[slug]=${params?.slug}`, true)
+
+  const product = await fetchContentType("products", {
+    filters: { slug: params.slug },
+  }, true)
 
   if (!product) {
     redirect("/products");

diff --git a/next/app/[locale]/(marketing)/products/page.tsx b/next/app/[locale]/(marketing)/products/page.tsx
@@ -18,7 +18,13 @@ export async function generateMetadata({
 }: {
   params: { locale: string };
 }): Promise<Metadata> {
-  const pageData = await fetchContentType("product-page", `filters[locale][$eq]=${params.locale}&populate=seo.metaImage`, true)
+
+  const pageData = await fetchContentType("product-page", {
+    filters: {
+      locale: params.locale,
+    },
+    populate: "seo.metaImage",
+  }, true)
 
   const seo = pageData?.seo;
   const metadata = generateMetadataObject(seo);
@@ -30,9 +36,14 @@ export default async function Products({
 }: {
   params: { locale: string };
 }) {
+
   // Fetch the product-page and products data
-  const productPage = await fetchContentType('product-page', `filters[locale]=${params.locale}`, true);
-  const products = await fetchContentType('products', ``);
+  const productPage = await fetchContentType('product-page', {
+    filters: {
+      locale: params.locale,
+    },
+  }, true);
+  const products = await fetchContentType('products');
 
   const localizedSlugs = productPage.localizations?.reduce(
     (acc: Record<string, string>, localization: any) => {

diff --git a/next/app/[locale]/layout.tsx b/next/app/[locale]/layout.tsx
@@ -25,7 +25,10 @@ export async function generateMetadata({
 }): Promise<Metadata> {
     const pageData = await fetchContentType(
         'global',
-        `&filters[locale][$eq]=${params.locale}&populate=seo.metaImage`,
+        {
+            filters: { locale: params.locale },
+            populate: "seo.metaImage",
+        },
         true
     );
 
@@ -42,7 +45,7 @@ export default async function LocaleLayout({
     params: { locale: string };
 }) {
 
-    const pageData = await fetchContentType('global', `filters[locale][$eq]=${locale}`, true);
+    const pageData = await fetchContentType('global', { filters: { locale } }, true);
     return (
         <html lang={locale}>
             <ViewTransitions>

diff --git a/next/app/api/preview/route.ts b/next/app/api/preview/route.ts
@@ -0,0 +1,43 @@
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export const GET = async (request: Request) => {
+
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  const slug = searchParams.get('slug')
+  const locale = searchParams.get('locale')
+  const uid = searchParams.get('uid')
+  const status = searchParams.get('status');
+
+  if (
+    secret !== process.env.PREVIEW_SECRET
+  ) {
+    return new Response('Invalid token', { status: 401 })
+  }
+
+  const contentType = uid?.split(".").pop();
+
+  // Specific for the application
+  let slugToReturn = `/${locale}/${contentType}`;
+
+  if (contentType === 'page' || contentType === 'global') {
+    if (slug && slug !== 'homepage') {
+      slugToReturn = `/${locale}/${slug}`;
+    } else {
+      slugToReturn = `/${locale}`;
+    }
+  } else if (contentType === 'article' || contentType?.includes('blog')) {
+    slugToReturn = `/${locale}/blog${slug ? `/${slug}` : ''}`;
+  } else if (contentType?.includes('product')) {
+    slugToReturn = `/en/products${slug ? `/${slug}` : ''}`;
+  }
+
+  const draft = await draftMode()
+  if (status === 'draft') {
+    draft.enable()
+  } else {
+    draft.disable()
+  }
+  redirect(slugToReturn)
+};
diff --git a/next/app/layout.tsx b/next/app/layout.tsx
@@ -24,8 +24,8 @@ export default function RootLayout({
   params: { lang: Locale }
 }) {
   return (
-    <html lang={params.lang}>
-      <body>
+    <html lang={params.lang} suppressHydrationWarning>
+      <body suppressHydrationWarning>
         <SlugProvider>
           {children}
         </SlugProvider>

diff --git a/next/components/navbar/mobile-navbar.tsx b/next/components/navbar/mobile-navbar.tsx
@@ -59,7 +59,7 @@ export const MobileNavbar = ({ leftNavbarItems, rightNavbarItems, logo, locale }
           <div className="flex items-center justify-between w-full px-5">
             <Logo locale={locale} image={logo?.image} />
             <div className="flex items-center space-x-2">
-              <LocaleSwitcher />
+              <LocaleSwitcher currentLocale={locale} />
               <IoIosClose
                 className="h-8 w-8 text-white"
                 onClick={() => setOpen(!open)}

diff --git a/next/lib/strapi/fetchContentType.ts b/next/lib/strapi/fetchContentType.ts
@@ -1,3 +1,5 @@
+import { draftMode } from "next/headers";
+import qs from "qs";
 /**
  * Fetches data for a specified Strapi content type.
  *
@@ -27,15 +29,24 @@ export function spreadStrapiData(data: StrapiResponse): StrapiData | null {
 
 export default async function fetchContentType(
   contentType: string,
-  params: string,
-  spreadData?: boolean
+  params: Record<string, unknown> = {},
+  spreadData?: boolean,
 ): Promise<any> {
+  const { isEnabled } = await draftMode()
+
   try {
+
+    const queryParams = { ...params };
+
+    if (isEnabled) {
+      queryParams.status = "draft";
+    }
+
     // Construct the full URL for the API request
     const url = new URL(`api/${contentType}`, process.env.NEXT_PUBLIC_API_URL);
 
     // Perform the fetch request with the provided query parameters
-    const response = await fetch(`${url.href}?${params}`, {
+    const response = await fetch(`${url.href}?${qs.stringify(queryParams)}`, {
       method: 'GET',
       cache: 'no-store',
     });

diff --git a/next/package.json b/next/package.json
@@ -32,6 +32,7 @@
     "negotiator": "^0.6.3",
     "next": "14.2.5",
     "next-view-transitions": "^0.2.0",
+    "qs": "^6.14.0",
     "react": "^18",
     "react-dom": "^18",
     "react-fast-marquee": "^1.6.5",
@@ -46,6 +47,7 @@
   "devDependencies": {
     "@types/negotiator": "^0.6.3",
     "@types/node": "^20",
+    "@types/qs": "^6.9.16",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/three": "^0.167.1",