Merge pull request #497 from WestpacGEL/feature/site-cloud-image

feature(site): update images to use keystatic cloud image

apps/site/keystatic.config.ts

@@ -253,21 +253,15 @@ export default config({
           label: 'Description',
           multiline: true,
         }),
-        thumbnail: fields.image({
+        thumbnail: fields.cloudImage({
           label: 'Thumbnail image',
-          description: 'Thumbnail image',
-          directory: 'public/images/articles',
-          publicPath: '/images/articles',
         }),
         smallDescription: fields.text({
           label: 'Small description',
           multiline: true,
         }),
-        image: fields.image({
+        image: fields.cloudImage({
           label: 'Main Image',
-          description: 'Main image',
-          directory: 'public/images/articles',
-          publicPath: '/images/articles',
         }),
         author: fields.relationship({
           label: 'Author',

apps/site/next.config.js

@@ -2,6 +2,13 @@
 module.exports = {
   reactStrictMode: false,
   images: {
-    domains: ['res.cloudinary.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+        port: '',
+        pathname: '/westpac-gel/**',
+      },
+    ],
   },
 };

apps/site/src/app/(home)/components/article-tile/article-tile.component.tsx

@@ -13,7 +13,7 @@ export function ArticleTile({ article, slug, className, layout, index }: Article
     <Link href={`/articles/${slug}`} className={styles.base({ className })}>
       {article.thumbnail && (
         <div className={styles.imageWrapper({})}>
-          <Image fill objectFit="cover" src={article.thumbnail} alt="" />
+          <Image fill src={article.thumbnail.src} alt={article.name} className="object-cover" />
         </div>
       )}
       <div className={styles.contentWrapper({})}>

apps/site/src/app/(home)/components/utils.tsx

@@ -17,9 +17,9 @@ export const logoMap: Record<BrandKey, { logo: React.FC<SymbolProps>; name: stri
   wbc: { name: 'Westpac', logo: WBCLogo },
   stg: { name: 'St.George', logo: STGDragonLogo },
   bom: { name: 'Bank of Melbourne', logo: BOMShieldLogo },
-  bsa: { name: 'Bank SA', logo: BSAStackedLogo },
+  bsa: { name: 'BankSA', logo: BSAStackedLogo },
   wbg: { name: 'Westpac Group', logo: WBGLogo },
-  rams: { name: 'Rams', logo: RAMSLogo },
+  rams: { name: 'RAMS', logo: RAMSLogo },
 };
 
 export const logoStyles = tv({

apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx

@@ -2,6 +2,7 @@
 
 import { DocumentRenderer } from '@keystatic/core/renderer';
 import { Container, Grid } from '@westpac/ui';
+import Image from 'next/image';
 
 import { ArticleComponentBlocksComponents } from '@/components/component-blocks/article-component-blocks';
 import { LeadingText } from '@/components/component-blocks/components/leading-text';
@@ -26,7 +27,14 @@ export function ArticlePage({ article, author }: ArticlePageProps) {
             <div className="col-span-12 mb-7 xsl:mb-9">
               {article.image && (
                 <figure>
-                  <img alt={article.name} src={article.image} className="block h-auto w-full" />
+                  <Image
+                    priority
+                    alt={article.image.alt}
+                    src={article.image.src}
+                    height={article.image.height || undefined}
+                    width={article.image.width || undefined}
+                    className="block h-auto w-full"
+                  />
                 </figure>
               )}
             </div>

apps/site/src/app/articles/[article]/components/layout/layout.component.tsx

@@ -1,20 +1,21 @@
 import { Item } from '@westpac/ui';
+import { clsx } from 'clsx';
+import { Children } from 'react';
 
-import { styles } from './layout.styles';
-import { type LayoutProps, type Variants } from './layout.types';
+import { type LayoutProps } from './layout.types';
 import { layoutMap } from './layout.utils';
 
 export const Layout = ({ children, layout }: LayoutProps) => {
   return (
     <>
-      {children.map((child, index) => {
+      {Children.map(children, (child, index) => {
         const width = layout[index];
         return (
           <Item
             key={index}
             span={layoutMap[width].span}
             start={layoutMap[width].start[index]}
-            className={styles({ index: index as Variants['index'] })}
+            className={clsx(index === 0 && 'group')}
           >
             {child}
           </Item>

apps/site/src/app/articles/[article]/components/layout/layout.types.ts

@@ -1,11 +1,6 @@
 import { ReactElement } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './layout.styles.js';
 
 export type LayoutProps = {
   children: ReactElement[];
   layout: [number, ...number[]];
 };
-
-export type Variants = VariantProps<typeof styles>;

apps/site/src/app/articles/[article]/page.tsx

@@ -23,7 +23,7 @@ export async function generateMetadata({ params }: MetadataProps): Promise<Metad
 
   const title = `${article.name} | GEL Design System`;
   const description = article.description;
-  const images = article.image ? [article.image] : [];
+  const images = article.image ? [article.image.src] : [];
 
   return {
     title,

apps/site/src/components/component-blocks/article-component-blocks.tsx

@@ -1,33 +1,25 @@
 import { component, fields } from '@keystatic/core';
+import Image from 'next/image';
 
 import { ArticleBodyImage } from './components/article-body-image';
+import { ArticleImage } from './components/article-image';
 import { LeadingText } from './components/leading-text';
 
 export const ArticleComponentBlocks = {
   // EXAMPLES:
   articleBodyImage: component({
     label: 'Article body image',
-    preview: props => (
-      <img
-        className="w-1/3"
-        src={URL.createObjectURL(
-          new Blob(
-            [props.fields.articleBodyImage.value?.data.buffer || ''],
-            { type: `image/${props.fields.articleBodyImage.value?.extension}` } /* (1) */,
-          ),
+    preview: ({ fields: { image, title } }) => (
+      <figure>
+        {image.fields.src.value && (
+          <Image src={image.fields.src.value} alt={image.fields.alt.value} height={150} width={300} />
         )}
-        alt={props.fields.articleBodyImage.value?.filename}
-      />
+        {title && <figcaption>{title.value}</figcaption>}
+      </figure>
     ),
     schema: {
-      articleBodyImage: fields.image({
-        label: 'Image',
-        description: 'image',
-        directory: 'public/images/articles',
-        publicPath: '/images/articles',
-      }),
-      alt: fields.text({
-        label: 'Alt text',
+      image: fields.cloudImage({
+        label: 'Article Body Image',
       }),
       title: fields.text({
         label: 'Title',
@@ -52,10 +44,40 @@ export const ArticleComponentBlocks = {
       }),
     },
   }),
+  articleImage: component({
+    label: 'Article Image',
+    preview: ({ fields: { image, caption } }) => {
+      return (
+        <figure>
+          {image.fields.src.value && (
+            <Image src={image.fields.src.value} alt={image.fields.alt.value} height={150} width={150} />
+          )}
+          {caption && <figcaption>{caption.value}</figcaption>}
+        </figure>
+      );
+    },
+    schema: {
+      image: fields.cloudImage({
+        label: 'Image',
+      }),
+      caption: fields.text({
+        label: 'Caption',
+      }),
+      spacing: fields.select({
+        label: 'Image spacing',
+        options: [
+          { label: 'Default', value: 'default' },
+          { label: 'Reduced', value: 'reduced' },
+        ],
+        defaultValue: 'default',
+      }),
+    },
+  }),
 };
 
 export const ArticleComponentBlocksComponents = {
   // EXAMPLES:
   articleBodyImage: ArticleBodyImage,
   leadingText: LeadingText,
+  articleImage: ArticleImage,
 };

apps/site/src/components/component-blocks/components/article-body-image/article-body-image.component.tsx

@@ -1,15 +1,23 @@
 import { Item } from '@westpac/ui/grid';
+import Image from 'next/image';
 
 import { styles as ArticleBodyImageStyles } from './article-body-image.style';
 import { type ArticleBodyImageProps } from './article-body-image.types';
 import { layoutMap } from './article-body-image.utils';
 
-export const ArticleBodyImage = ({ articleBodyImage, alt, title, type = 'body' }: ArticleBodyImageProps) => {
+export const ArticleBodyImage = ({ image, title, type = 'body' }: ArticleBodyImageProps) => {
   const styles = ArticleBodyImageStyles({});
   return (
     <Item span={layoutMap[type].span} start={layoutMap[type].start}>
       <figure className={styles.base({})}>
-        <img className={styles.img({})} loading="lazy" alt={alt} src={articleBodyImage} />
+        <Image
+          className={styles.img({})}
+          loading="lazy"
+          alt={image.alt}
+          src={image.src}
+          height={image.height}
+          width={image.width}
+        />
         {title && <figcaption className={styles.caption({})}>{title}</figcaption>}
       </figure>
     </Item>

apps/site/src/components/component-blocks/components/article-body-image/article-body-image.types.ts

@@ -1,8 +1,9 @@
+import { type CloudImageProps } from '@keystatic/core/component-blocks';
+
 export type Width = 'body' | 'bodyWide';
 
 export type ArticleBodyImageProps = {
-  alt?: string;
-  articleBodyImage?: string;
+  image: CloudImageProps;
   title?: string;
   type?: Width;
 };

apps/site/src/components/component-blocks/components/article-image/article-image.component.tsx

@@ -0,0 +1,21 @@
+import Image from 'next/image';
+
+import { styles as imageStyles } from './article-image.style';
+import { type ArticleImageProps } from './article-image.types';
+
+export const ArticleImage = ({ image, caption, spacing = 'default' }: ArticleImageProps) => {
+  const styles = imageStyles({ spacing });
+  return (
+    <figure className={styles.base({})}>
+      <Image
+        className={styles.img({})}
+        loading="lazy"
+        alt={image.alt}
+        src={image.src}
+        height={image.height}
+        width={image.width}
+      />
+      {caption && <figcaption className={styles.caption({})}>{caption}</figcaption>}
+    </figure>
+  );
+};

apps/site/src/components/component-blocks/components/article-image/article-image.style.ts

@@ -0,0 +1,19 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'relative',
+    img: 'block',
+    caption: 'typography-site-10 mt-2 text-gel-muted',
+  },
+  variants: {
+    spacing: {
+      default: {
+        base: 'mb-7 group-[&]:mb-4 xsl:mb-9',
+      },
+      reduced: {
+        base: 'mb-4 xsl:mb-5',
+      },
+    },
+  },
+});

apps/site/src/components/component-blocks/components/article-image/article-image.types.ts

@@ -0,0 +1,8 @@
+import { type CloudImageProps } from '@keystatic/core/component-blocks';
+
+export type ArticleImageProps = {
+  caption?: string;
+  image: CloudImageProps;
+  index: number;
+  spacing?: 'default' | 'reduced' | undefined;
+};

apps/site/src/components/component-blocks/components/article-image/index.ts

@@ -0,0 +1,2 @@
+export * from './article-image.component';
+export * from './article-image.types';

apps/site/src/content/articles/accessible-by-design.yaml

@@ -8,12 +8,18 @@ description: >-
   eyesight, an injured wrist or a recovery from surgery. Disability and
   accessibility requirements will impact all of us at some point in our
   lifetime.”
-thumbnail: >-
-  https://res.cloudinary.com/westpac-gel/image/upload/v1666333819/cl9i44qb7000wtc8ihnxv08ex.png
+thumbnail:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1666333819/cl9i44qb7000wtc8ihnxv08ex.png
+  height: 1212
+  width: 3168
 smallDescription: >-
   The Westpac Group is committed to creating products that are perceivable,
   operable, understandable, and robust for all users. Inclusive design is part
   of our dna.
-image: >-
-  https://res.cloudinary.com/westpac-gel/image/upload/v1666333853/cl9i45goa000xtc8i8wgx5cu2.png
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1666333853/cl9i45goa000xtc8i8wgx5cu2.png
+  height: 1080
+  width: 1920
 author: michael-colibraro

apps/site/src/content/articles/build-strong-brands.yaml

@@ -5,11 +5,17 @@ description: >-
   accessibility standards to ensure our brands are optimised for all of our
   customers. This approach helps us to deliver consistent brand experiences
   across all channels.
-thumbnail: >-
-  https://res.cloudinary.com/westpac-gel/image/upload/v1667097999/cl9ur3rp6000tf58i5s7y3ote.png
+thumbnail:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1667097999/cl9ur3rp6000tf58i5s7y3ote.png
+  height: 1212
+  width: 3168
 smallDescription: >-
   Create consistent, on brand journeys to strengthen brand recognition and
   trust.
-image: >-
-  https://res.cloudinary.com/westpac-gel/image/upload/v1665993797/cl9chovs7000htc8igwry11s4.jpg
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1665993797/cl9chovs7000htc8igwry11s4.jpg
+  height: 1080
+  width: 1920
 author: marita-purins

apps/site/src/content/articles/code-with-gel.yaml

@@ -1,10 +1,16 @@
 name: Code with GEL
 cardTitle: Code with GEL
-thumbnail: >-
-  https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png
+thumbnail:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png
+  height: 1212
+  width: 3168
 smallDescription: Automate your environment, scale your projects and speed up your work flow with our cutting edge code library.
-image: >-
-  https://res.cloudinary.com/westpac-gel/image/upload/v1663300551/cl83y79gg0013am8iddv886ry.jpg
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1663300551/cl83y79gg0013am8iddv886ry.jpg
+  height: 1080
+  width: 1920
 description: >-
   The GEL coding framework has been built with serviceability in mind, supporting multiple platforms across the Bank that may use different libraries, languages and coding technologies.
 author: marita-purins