Refactor

FilecoinFoundationWeb · Oct 10, 2024 · 0742d5c · 0742d5c
1 parent e9fe88e
commit 0742d5c
Show file tree

Hide file tree

Showing 16 changed files with 124 additions and 93 deletions.
diff --git a/src/app/_components/Card.tsx b/src/app/_components/Card.tsx
@@ -1,27 +1,38 @@
+import Image, { type ImageProps } from 'next/image'
+
 import { ArrowUpRight } from '@phosphor-icons/react/dist/ssr'
 import { clsx } from 'clsx'
 import theme from 'tailwindcss/defaultTheme'
 
 import { type CTAProps } from '@/types/ctaType'
+import type { ImageObjectFit, StaticImageProps } from '@/types/imageType'
+
+import { graphicsData } from '@/data/graphicsData'
 
+import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 import { isExternalLink } from '@/utils/linkUtils'
 
 import { AvatarGroup, type AvatarGroupProps } from '@/components/AvatarGroup'
 import { CustomLink } from '@/components/CustomLink'
-import { DynamicImage, type DynamicImageProps } from '@/components/DynamicImage'
 import { Heading } from '@/components/Heading'
 import { Icon } from '@/components/Icon'
 import { Meta, type MetaDataType } from '@/components/Meta'
-import { StaticImage, type StaticImageProps } from '@/components/StaticImage'
 import { type TagGroupProps, TagGroup } from '@/components/TagGroup'
 
+type CardImageProps = (StaticImageProps | Partial<ImageProps>) & {
+  objectFit?: ImageObjectFit
+  padding?: boolean
+  priority?: boolean
+  sizes?: string
+}
+
 type CardProps = {
   title: string | React.ReactNode
   tagLabel?: TagGroupProps['label']
   metaData?: MetaDataType
   description?: string
   cta?: CTAProps
-  image?: (DynamicImageProps | StaticImageProps) & { padding?: boolean }
+  image?: CardImageProps
   borderColor?: 'brand-300' | 'brand-400' | 'brand-500' | 'brand-600'
   textIsClamped?: boolean
   as?: React.ElementType
@@ -81,26 +92,53 @@ export function Card({
   )
 }
 
-Card.Image = function Image({ image }: Pick<CardProps, 'image'>) {
-  if (!image) return null
-
-  const { padding, ...rest } = image
+Card.Image = function ImageComponent({ image }: Pick<CardProps, 'image'>) {
   const isDynamicImage = 'src' in image
   const isStaticImage = 'data' in image
 
-  if (!isDynamicImage && !isStaticImage) return null
+  const commonProps = {
+    priority: image?.priority || true,
+    quality: 100,
+    sizes:
+      image?.sizes || buildImageSizeProp({ startSize: '100vw', lg: '490px' }),
+    className: clsx(
+      'rounded-lg px-1 pt-1',
+      image?.objectFit === 'cover' && 'object-cover',
+      image?.objectFit === 'contain' && 'object-contain',
+      image?.padding && isDynamicImage && 'px-6 pt-4',
+    ),
+  }
+
+  function getImageProps() {
+    if (isStaticImage) {
+      return {
+        src: image.data,
+        alt: image.alt,
+      }
+    }
+
+    if (isDynamicImage) {
+      return {
+        fill: true,
+        src: image?.src || graphicsData.imageFallback.data.src,
+        alt:
+          image?.alt !== undefined && image?.alt !== null
+            ? image.alt
+            : graphicsData.imageFallback.alt,
+      }
+    }
+
+    return {
+      src: graphicsData.imageFallback.data,
+      alt: graphicsData.imageFallback.alt,
+    }
+  }
 
-  const renderImage = (ImageComponent: React.ElementType) => (
+  return (
     <div className="relative aspect-video">
-      <ImageComponent
-        {...rest}
-        fill
-        className={clsx('rounded-lg px-1 pt-1', padding && 'px-6 pt-4')}
-      />
+      <Image {...commonProps} {...getImageProps()} alt={getImageProps().alt} />
     </div>
   )
-
-  return isDynamicImage ? renderImage(DynamicImage) : renderImage(StaticImage)
 }
 
 Card.MetaAndTags = function MetaAndTags({

diff --git a/src/app/_components/FeaturedBlogPosts.tsx b/src/app/_components/FeaturedBlogPosts.tsx
@@ -49,11 +49,8 @@ export function FeaturedBlogPosts() {
                 text: 'Learn More',
               }}
               image={{
+                ...image,
                 alt: '',
-                ...(image || {
-                  ...graphicsData.imageFallback,
-                }),
-                fallback: graphicsData.imageFallback,
                 sizes: buildImageSizeProp({
                   startSize: '100vw',
                   sm: '350px',

diff --git a/src/app/_components/FeaturedEcosystemProjects.tsx b/src/app/_components/FeaturedEcosystemProjects.tsx
@@ -37,13 +37,10 @@ export function FeaturedEcosystemProjects({
             icon: MagnifyingGlass,
           }}
           image={{
+            ...image,
             alt: '',
-            ...(image || {
-              ...graphicsData.imageFallback,
-            }),
-            fallback: graphicsData.imageFallback,
-            padding: true,
             objectFit: 'contain',
+            padding: true,
             sizes: buildImageSizeProp({
               startSize: '100vw',
               sm: '320px',

diff --git a/src/app/_components/FeaturedGrantGraduates.tsx b/src/app/_components/FeaturedGrantGraduates.tsx
@@ -36,11 +36,9 @@ export function FeaturedGrantsGraduates({
             icon: BookOpen,
           }}
           image={{
+            ...image,
             alt: '',
-            ...(image || {
-              ...graphicsData.imageFallback,
-            }),
-            fallback: graphicsData.imageFallback,
+
             objectFit: 'contain',
             padding: true,
             sizes: buildImageSizeProp({

diff --git a/src/app/_components/MarkdownContent.tsx b/src/app/_components/MarkdownContent.tsx
@@ -22,11 +22,15 @@ export function MarkdownContent({ children }: MarkdownContentProps) {
         img: ({ src, alt }) => (
           <Image
             priority
-            src={src || graphicsData.imageFallback.data.src}
-            alt={!src ? graphicsData.imageFallback.alt : alt || ''}
+            src={src || graphicsData.imageFallback.data}
             width={800}
             height={450}
             sizes={buildImageSizeProp({ startSize: '100vw', md: '660px' })}
+            alt={
+              alt !== undefined && alt !== null
+                ? alt
+                : graphicsData.imageFallback.alt
+            }
           />
         ),
       }}

diff --git a/src/app/_components/PageHeader.tsx b/src/app/_components/PageHeader.tsx
@@ -1,5 +1,11 @@
+import Image, { type ImageProps } from 'next/image'
+
 import { clsx } from 'clsx'
 
+import type { StaticImageProps } from '@/types/sharedProps/imageType'
+
+import { graphicsData } from '@/data/graphicsData'
+
 import { buildImageSizeProp } from '@/utils/buildImageSizeProp'
 
 import {
@@ -10,19 +16,17 @@ import {
   DescriptionText,
   type DescriptionTextType,
 } from '@/components/DescriptionText'
-import { DynamicImage, type DynamicImageProps } from '@/components/DynamicImage'
 import { Heading } from '@/components/Heading'
 import { Meta, type MetaDataType } from '@/components/Meta'
 import { SectionDivider } from '@/components/SectionDivider'
-import { StaticImage, type StaticImageProps } from '@/components/StaticImage'
 
 type TitleProps = {
   children: string
 }
 
 type PageHeaderProps = {
   title: TitleProps['children']
-  image?: StaticImageProps | DynamicImageProps
+  image?: StaticImageProps | Partial<ImageProps>
   isFeatured?: boolean
   metaData?: MetaDataType
   description?: DescriptionTextType
@@ -40,24 +44,18 @@ export function PageHeader({
   return (
     <header className="grid gap-4">
       {isFeatured && <SectionDivider title="Featured" />}
-
-      <div className="flex flex-col gap-6 lg:flex-row">
-        <div className="flex flex-col gap-4 lg:w-1/2">
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="flex flex-col gap-4">
           <PageHeader.Title>{title}</PageHeader.Title>
-
           {metaData && (
             <span className="mb-2">
               <Meta metaData={metaData} />
             </span>
           )}
-
           {description && <DescriptionText>{description}</DescriptionText>}
           {cta && <CTAButtonGroup cta={cta} />}
         </div>
-
-        <div className="lg:w-1/2">
-          <PageHeader.Image image={image} />
-        </div>
+        {image && <PageHeader.Image image={image} />}
       </div>
     </header>
   )
@@ -74,8 +72,6 @@ PageHeader.Title = function Title({ children }: TitleProps) {
 PageHeader.Image = function PageHeaderImage({
   image,
 }: Pick<PageHeaderProps, 'image'>) {
-  if (!image) return null
-
   const isDynamicImage = 'src' in image
   const isStaticImage = 'data' in image
 
@@ -85,14 +81,31 @@ PageHeader.Image = function PageHeaderImage({
     priority: true,
     quality: 100,
     sizes: buildImageSizeProp({ startSize: '100vw', lg: '490px' }),
-    className: clsx('h-full w-full', 'rounded-lg border border-brand-100'),
+    className: 'h-full w-full rounded-lg border border-brand-100',
+  }
+
+  function getImageProps() {
+    if (isStaticImage) {
+      return {
+        src: image.data,
+        alt: image.alt,
+      }
+    }
+
+    return {
+      src: image?.src || graphicsData.imageFallback.data.src,
+      alt:
+        image?.alt !== undefined && image?.alt !== null
+          ? image.alt
+          : graphicsData.imageFallback.alt,
+      width: 490,
+      height: 275,
+    }
   }
 
-  const renderImage = (ImageComponent: React.ElementType) => (
+  return (
     <div className={clsx('relative', 'aspect-video')}>
-      <ImageComponent {...image} fill={isDynamicImage} {...commonProps} />
+      <Image {...commonProps} {...getImageProps()} alt={getImageProps().alt} />
     </div>
   )
-
-  return isDynamicImage ? renderImage(DynamicImage) : renderImage(StaticImage)
 }
diff --git a/src/app/_data/graphicsData.ts b/src/app/_data/graphicsData.ts
@@ -1,4 +1,4 @@
-import type { StaticImageProps } from '@/components/StaticImage'
+import type { StaticImageProps } from '@/types/sharedProps/imageType'
 
 import about from '@/assets/graphics/Filorg_About.png'
 import digestCoverIssue1 from '@/assets/graphics/Filorg_Digest_Cover_Issue_1.webp'

diff --git a/src/app/about/data/reportsData.ts b/src/app/about/data/reportsData.ts
@@ -1,6 +1,6 @@
-import { FILECOIN_FOUNDATION_URLS } from '@/constants/siteMetadata'
+import type { StaticImageProps } from '@/types/sharedProps/imageType'
 
-import type { StaticImageProps } from '@/components/StaticImage'
+import { FILECOIN_FOUNDATION_URLS } from '@/constants/siteMetadata'
 
 import annualReport from '@/assets/images/022624-ff-anualreport.png'
 

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -88,16 +88,6 @@ export default function About() {
       <PageSection kicker="Insights" title="Reports">
         <CardGrid cols="lgTwo" hasGridAutoRows={false}>
           {reportsData.map(({ title, description, link, image }, index) => {
-            const imageProp = image && {
-              ...image,
-              sizes: buildImageSizeProp({
-                startSize: '100vw',
-                sm: '710px',
-                md: '980px',
-                lg: '480px',
-              }),
-            }
-
             return (
               <li
                 key={title}
@@ -107,7 +97,15 @@ export default function About() {
                   as="div"
                   title={title}
                   description={description}
-                  image={imageProp}
+                  image={{
+                    ...image,
+                    sizes: buildImageSizeProp({
+                      startSize: '100vw',
+                      sm: '710px',
+                      md: '980px',
+                      lg: '480px',
+                    }),
+                  }}
                   cta={{
                     href: link,
                     text: 'View Report',

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -114,9 +114,8 @@ export default function Blog({ searchParams }: Props) {
         description={featuredPost.description}
         metaData={getBlogPostMetaData(featuredPost.publishedOn)}
         image={{
+          ...featuredPost.image,
           alt: '',
-          ...(featuredPost.image || graphicsData.imageFallback),
-          fallback: graphicsData.imageFallback,
         }}
         cta={{
           href: `${PATHS.BLOG.path}/${featuredPostSlug}`,
@@ -211,11 +210,8 @@ export default function Blog({ searchParams }: Props) {
                             icon: BookOpen,
                           }}
                           image={{
+                            ...image,
                             alt: '',
-                            ...(image || {
-                              ...graphicsData.imageFallback,
-                            }),
-                            fallback: graphicsData.imageFallback,
                             priority: isFirstTwoImages,
                             sizes: buildImageSizeProp({
                               startSize: '100vw',

diff --git a/src/app/digest/page.tsx b/src/app/digest/page.tsx
@@ -76,11 +76,7 @@ export default function Digest() {
                   icon: BookOpen,
                 }}
                 image={{
-                  alt: '',
-                  ...(image || {
-                    ...graphicsData.imageFallback,
-                  }),
-                  fallback: graphicsData.imageFallback,
+                  ...image,
                   sizes: buildImageSizeProp({
                     startSize: '100vw',
                     sm: '350px',

diff --git a/src/app/ecosystem-explorer/page.tsx b/src/app/ecosystem-explorer/page.tsx
@@ -172,14 +172,12 @@ export default function EcosystemExplorer({ searchParams }: Props) {
                             icon: BookOpen,
                           }}
                           image={{
+                            ...image,
                             alt: '',
-                            ...(image || {
-                              ...graphicsData.imageFallback,
-                            }),
+
+                            objectFit: 'contain',
                             padding: true,
                             priority: isFirstTwoImages,
-                            objectFit: 'contain',
-                            fallback: graphicsData.imageFallback,
                             sizes: buildImageSizeProp({
                               startSize: '100vw',
                               sm: '320px',

diff --git a/src/app/events/[slug]/page.tsx b/src/app/events/[slug]/page.tsx
@@ -64,9 +64,8 @@ export default function EventEntry({ params }: EventProps) {
           metaData={getEventMetaData(data)}
           cta={buildCtaArray({ externalLink, lumaCalendarLink })}
           image={{
+            ...image,
             alt: '',
-            ...(image || graphicsData.imageFallback),
-            fallback: graphicsData.imageFallback,
           }}
         />
       </div>