feat(pdc-frontend): prepare for deploy to vercel

frameless · Sep 26, 2023 · ddbbacf · ddbbacf
1 parent f3cfd22
commit ddbbacf
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 99 deletions.
diff --git a/apps/pdc-frontend/src/app/[locale]/[...not-found]/page.tsx b/apps/pdc-frontend/src/app/[locale]/[...not-found]/page.tsx
@@ -26,7 +26,7 @@ const NotFoundPage = async ({ params: { locale } }: { params: { locale: string }
         ]}
       />
       <PageTitle>{data?.notFoundPage?.data?.attributes?.title}</PageTitle>
-      <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
+      <Markdown>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
     </div>
   );
 };

diff --git a/apps/pdc-frontend/src/app/[locale]/not-found.tsx b/apps/pdc-frontend/src/app/[locale]/not-found.tsx
@@ -29,7 +29,7 @@ const NotFoundPage = async () => {
         ]}
       />
       <PageTitle>{data?.notFoundPage?.data?.attributes?.title}</PageTitle>
-      <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
+      <Markdown>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
     </div>
   );
 };

diff --git a/apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx b/apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx
@@ -1,6 +1,5 @@
 import { Metadata } from 'next';
 import { cookies, draftMode } from 'next/headers';
-import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import React from 'react';
 import { useTranslation } from '@/app/i18n';
@@ -22,7 +21,7 @@ import {
 import { BottomBar, BottomBarItem } from '@/components/BottomBar';
 import { Breadcrumbs } from '@/components/Breadcrumb';
 import { FAQSection } from '@/components/FAQSection';
-import { Markdown } from '@/components/Markdown';
+import { Img, Markdown } from '@/components/Markdown';
 import { PreviewAlert } from '@/components/PreviewAlert';
 import { ReactionLink } from '@/components/ReactionLink';
 import { ScrollToTopButton } from '@/components/ScrollToTopButton';
@@ -135,15 +134,15 @@ const Product = async ({ params: { locale, slug }, searchParams }: ProductProps)
   const { product } = await getAllProducts(locale, slug);
 
   const priceData = product?.attributes.price && product?.attributes.price?.data?.attributes.price;
-  const strapiImageURL = process.env.STRAPI_PUBLIC_URL;
+
   const { t } = await useTranslation(locale, 'common');
   const Sections = () =>
     product?.attributes && product?.attributes.sections.length > 0
       ? product?.attributes.sections.map((component: any, index: number) => {
           switch (component.__typename) {
             case 'ComponentComponentsBlockContent':
               return component.content ? (
-                <Markdown strapiBackendURL={strapiImageURL} locale={locale} key={index} priceData={priceData}>
+                <Markdown locale={locale} key={index} priceData={priceData}>
                   {component.content}
                 </Markdown>
               ) : null;
@@ -170,7 +169,6 @@ const Product = async ({ params: { locale, slug }, searchParams }: ProductProps)
                     accordion={component.faq.data.attributes.faq.accordion}
                     sectionTitle={component.faq.data.attributes.title}
                     priceData={priceData}
-                    strapiBackendURL={strapiImageURL}
                   />
                 );
               }
@@ -183,43 +181,27 @@ const Product = async ({ params: { locale, slug }, searchParams }: ProductProps)
                     label: title,
                     headingLevel: 3, // TODO add this property from CMS
                     body: (
-                      <Markdown priceData={priceData} locale={locale} strapiBackendURL={strapiImageURL}>
+                      <Markdown priceData={priceData} locale={locale}>
                         {body}
                       </Markdown>
                     ),
                   }))}
                 />
               );
             case 'ComponentComponentsImage':
-              if (
-                component.imageData &&
-                component.imageData.data.attributes &&
-                component.imageData.data.attributes.url
-              ) {
-                return (
-                  <Image
-                    src={`${strapiImageURL}${component.imageData.data.attributes.url}`}
-                    alt={component.imageData.data.attributes.alternativeText || ''}
-                    sizes="(max-width: 768px) 100vw,
-                              (max-width: 1200px) 50vw,
-                              33vw"
-                    width={component.imageData.data.attributes.width}
-                    height={component.imageData.data.attributes.height}
-                    style={{
-                      maxWidth: '100%',
-                      height: 'auto',
-                    }}
-                  />
-                );
-              } else {
-                return null;
-              }
+              return (
+                <Img
+                  src={component?.imageData?.data?.attributes?.url}
+                  width={component?.imageData?.data?.attributes?.width}
+                  height={component?.imageData?.data?.attributes?.height}
+                  alt={component?.imageData?.data?.attributes?.alternativeText}
+                />
+              );
+
             case 'ComponentComponentsSpotlight':
               return component.content ? (
                 <SpotlightSection type={component.type} aside={component?.aside}>
-                  <Markdown strapiBackendURL={strapiImageURL} priceData={priceData}>
-                    {component.content}
-                  </Markdown>
+                  <Markdown priceData={priceData}>{component.content}</Markdown>
                 </SpotlightSection>
               ) : null;
             case 'ComponentComponentsButtonLink':

diff --git a/apps/pdc-frontend/src/app/[locale]/search/tips/[query]/page.tsx b/apps/pdc-frontend/src/app/[locale]/search/tips/[query]/page.tsx
@@ -60,7 +60,7 @@ const SearchTips = async ({ params: { locale, query } }: any) => {
         ]}
       />
       <PageTitle>{`${title} "${query}"`}</PageTitle>
-      <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{body}</Markdown>
+      <Markdown>{body}</Markdown>
     </>
   );
 };

diff --git a/apps/pdc-frontend/src/components/FAQSection/index.tsx b/apps/pdc-frontend/src/components/FAQSection/index.tsx
@@ -13,16 +13,9 @@ export interface FAQSectionProps {
   accordion?: AccordionType[];
   locale?: string;
   priceData?: any;
-  strapiBackendURL?: any;
 }
 
-export const FAQSection: React.FC<FAQSectionProps> = ({
-  sectionTitle,
-  accordion,
-  locale,
-  priceData,
-  strapiBackendURL,
-}) => (
+export const FAQSection: React.FC<FAQSectionProps> = ({ sectionTitle, accordion, locale, priceData }) => (
   <section>
     <Heading2>{sectionTitle}</Heading2>
     {accordion && accordion.length > 0 && (
@@ -32,7 +25,7 @@ export const FAQSection: React.FC<FAQSectionProps> = ({
           label: title,
           headingLevel: 3, // TODO add this property from CMS
           body: (
-            <Markdown priceData={priceData} locale={locale} strapiBackendURL={strapiBackendURL}>
+            <Markdown priceData={priceData} locale={locale}>
               {body}
             </Markdown>
           ),

diff --git a/apps/pdc-frontend/src/components/Markdown/index.tsx b/apps/pdc-frontend/src/components/Markdown/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import isAbsoluteUrl from 'is-absolute-url';
 import Image from 'next/image';
 import NextLink from 'next/link';
@@ -26,7 +24,7 @@ import {
   UnorderedList,
   UnorderedListItem,
 } from '@/components';
-import { useTranslation } from '../../app/i18n/client';
+import { useTranslation } from '../../app/i18n';
 import { fallbackLng } from '../../app/i18n/settings';
 
 type PriceTypes = {
@@ -36,17 +34,37 @@ type PriceTypes = {
   id: string;
 };
 
-const components = ({
-  strapiBackendURL,
-  priceData,
-  locale,
-  freeProductLabel,
-}: {
-  strapiBackendURL: string;
-  priceData: PriceTypes[];
-  locale: string;
-  freeProductLabel: string;
-}) =>
+const buildImgURL = (src: string) => {
+  if (!process.env.STRAPI_PUBLIC_URL) {
+    throw new Error('`STRAPI_PUBLIC_URL` is required to construct the image URL in the Markdown component.');
+  }
+  const url = new URL(process.env.STRAPI_PUBLIC_URL as string);
+  if (process.env.DEPLOY_TO_VERCEL && Boolean(process.env.DEPLOY_TO_VERCEL)) {
+    return src;
+  }
+  return `${url?.origin}${src}`;
+};
+interface ImgProps
+  extends Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'ref'> {}
+export const Img = ({ height, width, src, alt, title }: ImgProps) =>
+  width && height && src ? (
+    <Image
+      src={buildImgURL(src)}
+      alt={alt || ''}
+      title={title}
+      sizes="(max-width: 768px) 100vw,
+(max-width: 1200px) 50vw,
+33vw"
+      width={width as number}
+      height={height as number}
+      style={{
+        maxWidth: '100%',
+        height: 'auto',
+      }}
+    />
+  ) : null;
+
+const components = ({ priceData, locale }: { priceData: PriceTypes[]; locale: string }) =>
   ({
     h1: ({ children, node }) => {
       delete node.properties?.style;
@@ -137,33 +155,15 @@ const components = ({
       delete node.properties?.style;
       return <TableCaption {...node.properties}>{children}</TableCaption>;
     },
-    img: ({ width, height, src, alt }) => {
-      if (width && height && src && alt) {
-        return (
-          <Image
-            src={`${strapiBackendURL}${src}`}
-            alt={alt || ''}
-            sizes="(max-width: 768px) 100vw,
-      (max-width: 1200px) 50vw,
-      33vw"
-            width={width as number}
-            height={height as number}
-            style={{
-              maxWidth: '100%',
-              height: 'auto',
-            }}
-          />
-        );
-      } else {
-        return null;
-      }
-    },
-    'react-widget': ({ node }: any) => {
+    img: (props) => <Img {...props} />,
+    'react-widget': async ({ node }: any) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { t } = await useTranslation(locale ?? fallbackLng, 'common');
       if (node.properties?.id && priceData && priceData.length > 0) {
         const product = priceData.find(({ id }) => id === node.properties?.id);
         const price =
           Number(product?.value) === 0
-            ? freeProductLabel
+            ? t('text.free-product')
             : new Intl.NumberFormat(locale, {
                 style: 'currency',
                 currency: product?.currency,
@@ -180,23 +180,16 @@ interface MarkdownProps {
   children: any;
   priceData?: any;
   locale?: string;
-  strapiBackendURL?: string;
 }
 
-export const Markdown: React.FC<MarkdownProps> = ({ children, priceData, locale, strapiBackendURL }) => {
-  const url = strapiBackendURL ? new URL(strapiBackendURL) : null;
-  const { t } = useTranslation(locale ?? fallbackLng, 'common');
-  return (
-    <ReactMarkdown
-      components={components({
-        priceData,
-        locale: locale ?? fallbackLng,
-        strapiBackendURL: url?.origin ?? '',
-        freeProductLabel: t('text.free-product'),
-      })}
-      rehypePlugins={[rehypeRaw]}
-    >
-      {children}
-    </ReactMarkdown>
-  );
-};
+export const Markdown: React.FC<MarkdownProps> = ({ children, priceData, locale }) => (
+  <ReactMarkdown
+    components={components({
+      priceData,
+      locale: locale ?? fallbackLng,
+    })}
+    rehypePlugins={[rehypeRaw]}
+  >
+    {children}
+  </ReactMarkdown>
+);
-Original file line number
+Diff line change
@@ Expand Up @@
             ]}
           />
           <PageTitle>{data?.notFoundPage?.data?.attributes?.title}</PageTitle>
-          <Markdown strapiBackendURL={process.env.STRAPI_PUBLIC_URL}>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
+          <Markdown>{data?.notFoundPage?.data?.attributes?.body}</Markdown>
         </div>
       );
     };
@@ Expand Down @@