feat(vth): integrate preview button into vth

frameless · Nov 21, 2023 · 81f2548 · 81f2548
1 parent 47d66f4
commit 81f2548
Show file tree

Hide file tree

Showing 14 changed files with 222 additions and 106 deletions.
diff --git a/apps/vth-dashboard/config/plugins.ts b/apps/vth-dashboard/config/plugins.ts
@@ -1,8 +1,38 @@
 const { apolloPrometheusPlugin } = require('strapi-prometheus');
 
-export default () => ({
-  ckeditor5: {
-    enabled: false,
+export default ({ env }) => ({
+  'preview-button': {
+    enabled: true,
+    config: {
+      contentTypes: [
+        {
+          uid: 'api::homepage.homepage',
+          query: {
+            type: 'Homepage',
+          },
+        },
+        {
+          uid: 'api::hoofditem.hoofditem',
+          query: {
+            type: 'Hoofditem',
+          },
+        },
+        {
+          uid: 'api::thema-content.thema-content',
+          query: {
+            type: 'ThemaContent',
+          },
+        },
+        {
+          uid: 'api::thema.thema',
+          query: {
+            type: 'Thema',
+          },
+        },
+      ],
+      domain: env('FRONTEND_PUBLIC_URL'),
+      token: env('PREVIEW_SECRET_TOKEN'),
+    },
   },
   'strapi-tiptap-editor': {
     enabled: true,

diff --git a/apps/vth-dashboard/package.json b/apps/vth-dashboard/package.json
@@ -16,6 +16,7 @@
     "clean": "rimraf build .cache dist"
   },
   "dependencies": {
+    "@frameless/preview-button": "0.0.0-semantically-released",
     "@frameless/strapi-tiptap-editor": "0.0.0-semantically-released",
     "@strapi/plugin-graphql": "4.14.4",
     "@strapi/plugin-i18n": "4.14.4",

diff --git a/apps/vth-frontend/src/app/[locale]/[...not-found]/page.tsx b/apps/vth-frontend/src/app/[locale]/[...not-found]/page.tsx
@@ -5,13 +5,11 @@ import { createStrapiURL } from '@/util/createStrapiURL';
 import { fetchData } from '@/util/fetchData';
 import { getImageBaseUrl } from '@/util/getImageBaseUrl';
 
-const NotFoundPage = async ({ params: { locale } }: { params: { locale: string } }) => {
+const NotFoundPage = async () => {
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_NOT_FOUND_PAGE,
-    variables: { locale: locale },
   });
-
   return (
     <div>
       <Heading1>{data?.notFoundPage?.data?.attributes?.title}</Heading1>

diff --git a/apps/vth-frontend/src/app/[locale]/[hoofditemSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/[hoofditemSlug]/page.tsx
@@ -1,6 +1,8 @@
 import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
 import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
 import { Metadata } from 'next';
+import { draftMode } from 'next/headers';
+import { notFound } from 'next/navigation';
 import React from 'react';
 import { AccordionProvider, Heading1, Markdown } from '@/components';
 import { BreadcrumbWithBacklink } from '@/components/BreadcrumbWithBacklink';
@@ -21,27 +23,32 @@ export async function generateMetadata({ params: { locale, hoofditemSlug } }: Pa
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_HOOFDITEM_BY_SLUG,
-    variables: { slug: hoofditemSlug, locale: locale },
+    variables: { slug: hoofditemSlug, locale },
   });
   return {
-    title: data.findSlug.data.attributes.title,
-    description: data.findSlug.data.attributes.description,
+    title: data.findSlug?.data?.attributes?.title,
+    description: data.findSlug?.data?.attributes?.description,
   };
 }
 
 const Hoofditem = async ({ params: { locale, hoofditemSlug } }: Params) => {
+  const { isEnabled } = draftMode();
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_HOOFDITEM_BY_SLUG,
-    variables: { slug: hoofditemSlug, locale: locale },
+    variables: { slug: hoofditemSlug, locale, pageMode: isEnabled ? 'preview' : 'live' },
   });
-
-  const { title, content, themas, contents } = data.findSlug.data.attributes;
+  const hoofditemData = data.findSlug?.data;
+  if (!hoofditemData) return notFound();
+  const hoofditemContent = hoofditemData?.attributes?.content;
+  const hoofditemContents = hoofditemData?.attributes?.contents?.data;
+  const hoofditemTitle = hoofditemData?.attributes?.title;
+  const hoofditemThemas = hoofditemContent?.attributes?.themas.data;
 
   const DynamicContent = () =>
-    content &&
-    content.length > 0 &&
-    content?.map((component: any, index: number) => {
+    hoofditemContent &&
+    hoofditemContent?.length > 0 &&
+    hoofditemContent?.map((component: any, index: number) => {
       switch (component?.__typename) {
         case 'ComponentComponentsBlockContent':
           return component.content ? (
@@ -75,27 +82,26 @@ const Hoofditem = async ({ params: { locale, hoofditemSlug } }: Params) => {
       </div>
       <Grid className={'utrecht-grid__two-third'}>
         <div className={'utrecht-grid__full-width'}>
-          <Heading1>{title}</Heading1>
+          <Heading1>{hoofditemTitle}</Heading1>
           <DynamicContent />
         </div>
         <Grid className={'utrecht-grid__full-width'}>
-          {themas.data[0] &&
-            themas.data.map((thema: any) => {
-              const { title, description, slug: childSlug, previewImage: imageData } = thema.attributes;
-              const imageUrl = imageData?.data?.attributes?.url;
+          {hoofditemThemas?.length > 0 &&
+            hoofditemThemas.map((thema: any) => {
+              const imageUrl = thema?.attributes?.imageData?.data?.attributes?.url;
               return (
                 <Card
                   className={'utrecht-grid__half-width'}
                   image={{ url: imageUrl && `${getImageBaseUrl()}${imageUrl}`, alt: '' }}
-                  title={title}
-                  description={description}
-                  key={`thema-${childSlug}`}
-                  link={{ href: `/${locale}/thema/${childSlug}` }}
+                  title={hoofditemTitle}
+                  description={thema?.attributes?.description}
+                  key={`thema-${thema?.attributes?.childSlug}`}
+                  link={{ href: `/${locale}/thema/${thema?.attributes?.childSlug}` }}
                 />
               );
             })}
-          {contents.data[0] &&
-            contents.data.map((content: any) => {
+          {hoofditemContents?.length > 0 &&
+            hoofditemContents.map((content: any) => {
               const { title, description, slug: contentSlug, previewImage: imageData } = content.attributes;
               const imageUrl = imageData?.data?.attributes?.url;
               return (

diff --git a/apps/vth-frontend/src/app/[locale]/content/[contentSlug]/page.tsx b/apps/vth-frontend/src/app/[locale]/content/[contentSlug]/page.tsx
@@ -1,6 +1,8 @@
 import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiURL';
 import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
 import { Metadata } from 'next';
+import { draftMode } from 'next/headers';
+import { notFound } from 'next/navigation';
 import React from 'react';
 import { AccordionProvider, Heading1 } from '@/components';
 import { BreadcrumbNavigationElement } from '@/components/BreadcrumbNavigation';
@@ -24,31 +26,35 @@ export async function generateMetadata({ params: { locale, contentSlug } }: Para
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_CONTENT_BY_SLUG,
-    variables: { slug: contentSlug, locale: locale },
+    variables: { slug: contentSlug, locale },
   });
   return {
-    title: data.findSlug.data.attributes.title,
-    description: data.findSlug.data.attributes.description,
+    title: data.findSlug.data?.attributes?.title,
+    description: data.findSlug.data?.attributes?.description,
   };
 }
 
 const Thema = async ({ params: { locale, contentSlug } }: Params) => {
+  const { isEnabled } = draftMode();
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_CONTENT_BY_SLUG,
-    variables: { slug: contentSlug, locale: locale },
+    variables: { slug: contentSlug, locale, pageMode: isEnabled ? 'preview' : 'live' },
   });
 
-  const { title, content, themas, hoofditems } = data.findSlug.data.attributes;
-  const parentThemaSlug = themas?.data[0]?.attributes?.slug;
-  const parentHoofditemSlug = hoofditems?.data[0]?.attributes?.slug;
+  if (!data.findSlug?.data) return notFound();
+
+  const parentThemaSlug = data.findSlug.data?.attributes?.themas?.data[0]?.attributes?.slug;
+  const parentHoofditemSlug = data.findSlug.data?.attributes?.hoofditems?.data[0]?.attributes?.slug;
 
   const hasHoofditemParentOnly = !parentThemaSlug && parentHoofditemSlug;
 
-  const siblingThemas: SiblingData[] = hasHoofditemParentOnly ? hoofditems?.data[0]?.attributes?.themas?.data : [];
+  const siblingThemas: SiblingData[] = hasHoofditemParentOnly
+    ? data.findSlug.data?.attributes?.hoofditems?.data[0]?.attributes?.themas?.data
+    : [];
   const siblingContent: SiblingData[] = hasHoofditemParentOnly
-    ? hoofditems?.data[0]?.attributes?.contents?.data
-    : themas?.data[0]?.attributes?.contents?.data;
+    ? data.findSlug.data?.attributes?.hoofditems?.data[0]?.attributes?.contents?.data
+    : data.findSlug.data?.attributes?.themas?.data[0]?.attributes?.contents?.data;
 
   const themasLinks =
     siblingThemas?.map(({ attributes: { slug, title } }: SiblingData) => ({
@@ -70,29 +76,29 @@ const Thema = async ({ params: { locale, contentSlug } }: Params) => {
 
   const breadcrumbNavigationElements: BreadcrumbNavigationElement[] = [];
 
-  if (themas?.data[0]?.attributes?.hoofditems?.data[0]) {
+  if (data.findSlug.data?.attributes?.themas?.data[0]?.attributes?.hoofditems?.data[0]) {
     breadcrumbNavigationElements.push({
-      title: themas?.data[0]?.attributes?.hoofditems?.data[0]?.attributes?.title,
-      href: `/${locale}/${themas?.data[0]?.attributes?.hoofditems?.data[0]?.attributes?.slug}`,
+      title: data.findSlug.data?.attributes?.themas?.data[0]?.attributes?.hoofditems?.data[0]?.attributes?.title,
+      href: `/${locale}/${data.findSlug.data?.attributes?.themas?.data[0]?.attributes?.hoofditems?.data[0]?.attributes?.slug}`,
     });
   }
 
   const parentElement: BreadcrumbNavigationElement = hasHoofditemParentOnly
     ? {
-        title: hoofditems?.data[0]?.attributes?.title,
+        title: data.findSlug.data?.attributes?.hoofditems?.data[0]?.attributes?.title,
         href: `/${locale}/${parentHoofditemSlug}`,
       }
     : {
-        title: themas?.data[0]?.attributes?.title,
+        title: data.findSlug.data?.attributes?.themas?.data[0]?.attributes?.title,
         href: `/thema/${parentThemaSlug}`,
       };
 
   breadcrumbNavigationElements.push(parentElement);
 
   const DynamicContent = () =>
-    content &&
-    content.length > 0 &&
-    content?.map((component: any, index: number) => {
+    data.findSlug.data?.attributes?.content &&
+    data.findSlug.data?.attributes?.content.length > 0 &&
+    data.findSlug.data?.attributes?.content?.map((component: any, index: number) => {
       switch (component?.__typename) {
         case 'ComponentComponentsBlockContent':
           return component.content ? (
@@ -128,7 +134,7 @@ const Thema = async ({ params: { locale, contentSlug } }: Params) => {
         />
       </div>
       <div className={'utrecht-grid__two-third'}>
-        <Heading1>{title}</Heading1>
+        <Heading1>{data.findSlug.data?.attributes?.title}</Heading1>
         <DynamicContent />
       </div>
       {sideNavigationLinks.length > 1 && (

diff --git a/apps/vth-frontend/src/app/[locale]/layout.tsx b/apps/vth-frontend/src/app/[locale]/layout.tsx
@@ -1,9 +1,10 @@
 import classnames from 'classnames';
 import { dir } from 'i18next';
 import type { Metadata } from 'next';
+import { draftMode } from 'next/headers';
 import React from 'react';
 import { QueryClientProvider } from '@/client';
-import { Navigation, NavigationListType, Page, PageContent, PageHeader, SkipLink } from '@/components';
+import { Navigation, NavigationListType, Page, PageContent, PageHeader, PreviewAlert, SkipLink } from '@/components';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
 import '@utrecht/design-tokens/dist/index.css';
@@ -50,7 +51,8 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
 }
 
 const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
-  const { t } = await useTranslation(locale, ['layout']);
+  const { t } = await useTranslation(locale, ['layout', 'common']);
+  const { isEnabled } = draftMode();
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_HOOFDITEMS,
@@ -156,6 +158,15 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
         className={classnames('utrecht-theme', 'utrecht-document', 'utrecht-surface')}
         suppressHydrationWarning={true}
       >
+        {isEnabled && (
+          <PreviewAlert
+            link={{
+              href: '/api/clear-preview',
+              text: t('preview-alert.link'),
+            }}
+            message={t('preview-alert.message')}
+          />
+        )}
         <QueryClientProvider>
           <Page className="utrecht-page--full-width">
             <PageHeader>

diff --git a/apps/vth-frontend/src/app/[locale]/not-found.tsx b/apps/vth-frontend/src/app/[locale]/not-found.tsx
@@ -1,19 +1,15 @@
 import { Heading1 } from '@utrecht/component-library-react/dist/css-module';
-import { cookies } from 'next/headers';
 import { Markdown } from '@/components/Markdown';
 import { GET_NOT_FOUND_PAGE } from '@/query';
 import { createStrapiURL } from '@/util/createStrapiURL';
 import { fetchData } from '@/util/fetchData';
 import { getImageBaseUrl } from '@/util/getImageBaseUrl';
 
 const NotFoundPage = async () => {
-  const locale = cookies().get('i18next')?.value;
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_NOT_FOUND_PAGE,
-    variables: { locale: locale },
   });
-
   return (
     <div>
       <Heading1>{data?.notFoundPage?.data?.attributes?.title}</Heading1>

diff --git a/apps/vth-frontend/src/app/[locale]/page.tsx b/apps/vth-frontend/src/app/[locale]/page.tsx
@@ -2,7 +2,9 @@ import { createStrapiURL } from '@frameless/vth-frontend/src/util/createStrapiUR
 import { fetchData } from '@frameless/vth-frontend/src/util/fetchData';
 import { Heading1 } from '@utrecht/component-library-react';
 import { Metadata } from 'next';
+import { draftMode } from 'next/headers';
 import Image from 'next/image';
+import { notFound } from 'next/navigation';
 import React from 'react';
 import { Card } from '@/components/Card';
 import { Grid } from '@/components/Grid';
@@ -32,16 +34,16 @@ export async function generateMetadata({ params: { locale } }: Params): Promise<
 }
 
 const Home = async ({ params: { locale } }: { params: any }) => {
+  const { isEnabled } = draftMode();
   const { data } = await fetchData({
     url: createStrapiURL(),
     query: GET_HOMEPAGE,
-    variables: { locale: locale },
+    variables: { locale: locale, pageMode: isEnabled ? 'PREVIEW' : 'LIVE' },
   });
 
-  const { title, content, bannerImage } = data?.homepage?.data?.attributes;
   const hoofditems = data?.hoofditems?.data;
-  const bannerAttributes = bannerImage?.data?.attributes;
-
+  const bannerAttributes = data?.homepage?.data?.attributes?.bannerImage?.data?.attributes;
+  if (!data.homepage.data) return notFound();
   return (
     <div>
       {bannerAttributes?.url && (
@@ -56,8 +58,8 @@ const Home = async ({ params: { locale } }: { params: any }) => {
       )}
       <Grid className={'utrecht-grid--content-padding'}>
         <div className={'utrecht-grid__two-third'}>
-          <Heading1>{title}</Heading1>
-          <Markdown imageUrl={getImageBaseUrl()}>{content}</Markdown>
+          <Heading1>{data?.homepage?.data?.attributes?.title}</Heading1>
+          <Markdown imageUrl={getImageBaseUrl()}>{data?.homepage?.data?.attributes?.content}</Markdown>
         </div>
         <Grid className={'utrecht-grid__full-width'}>
           {hoofditems &&