From b4f1788acfb97979460a53f838506e40d5d7f50d Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 4 Nov 2024 13:41:42 +0100
Subject: [PATCH] :art: updates to newsroom #2631 (#2635)

* :art: updates to newsroom

* :bug: correct url
---
 web/next.config.js                            |  4 ++
 .../newsroom/NewsSections/NewsHeadliner.tsx   | 40 ++++++++++++------
 .../newsroom/NewsSections/NewsItem.tsx        | 42 +++++++++++++------
 web/types/algoliaIndexPage.ts                 |  1 +
 4 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/web/next.config.js b/web/next.config.js
index e957be184..846cb53b8 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -86,6 +86,10 @@ export default withBundle({
         source: '/legacy/:slug*',
         destination: `${archiveServerHostname}/:slug*`,
       },
+      {
+        source: 'https://envisstoragedev.blob.core.windows.net/:slug*',
+        destination: `${archiveServerHostname}/:slug*`,
+      },
     ].filter((e) => e)
   },
   async headers() {
diff --git a/web/templates/newsroom/NewsSections/NewsHeadliner.tsx b/web/templates/newsroom/NewsSections/NewsHeadliner.tsx
index b740b26dc..fe0f18eba 100644
--- a/web/templates/newsroom/NewsSections/NewsHeadliner.tsx
+++ b/web/templates/newsroom/NewsSections/NewsHeadliner.tsx
@@ -1,5 +1,6 @@
 import { FormattedDate } from '@components/FormattedDateTime'
 import { forwardRef, HTMLAttributes } from 'react'
+import Img from 'next/image'
 import { BaseLink } from '@core/Link'
 import { Typography } from '@core/Typography'
 import Image, { Ratios } from '../../../pageComponents/shared/SanityImage'
@@ -17,23 +18,38 @@ const NewsHeadliner = forwardRef<HTMLLIElement, NewsHeadlinerProps>(function New
   { data, fallbackImage, className = '', ...rest },
   ref,
 ) {
-  const { slug, title, ingress, publishDateTime, heroImage } = data
+  const { slug, title, ingress, publishDateTime, heroImage, thumbnailUrl } = data
 
   return (
     <section ref={ref} {...rest} className={envisTwMerge('', className)}>
       <BaseLink href={slug} className="group flex flex-col gap-2 pb-6">
-        {(heroImage?.image?.asset || fallbackImage) && (
+        {(heroImage?.image?.asset || fallbackImage || thumbnailUrl) && (
           <div className="aspect-video relative max-h-[324px] mb-2">
-            <Image
-              //@ts-ignore: TODO Fix SanityImage to take SanityImageObject
-              image={heroImage?.image?.asset ? heroImage?.image : fallbackImage}
-              fill
-              priority
-              aspectRatio={Ratios.NINE_TO_SIXTEEN}
-              sizes="(max-width: 800px) 100vw, 1440px"
-              className="rounded-xs"
-              aria-hidden
-            />
+            {thumbnailUrl ? (
+              <div className="relative rounded-xs">
+                <Img
+                  src={thumbnailUrl}
+                  alt=""
+                  style={{ objectFit: 'cover' }}
+                  fill
+                  sizes="(max-width: 800px) 100vw, 800px"
+                  role={'presentation'}
+                />
+              </div>
+            ) : (
+              (heroImage?.image?.asset || fallbackImage) && (
+                <Image
+                  //@ts-ignore: TODO Fix SanityImage to take SanityImageObject
+                  image={heroImage?.image?.asset ? heroImage?.image : fallbackImage}
+                  aria-hidden
+                  priority
+                  aspectRatio={Ratios.NINE_TO_SIXTEEN}
+                  sizes="(max-width: 800px) 100vw, 800px"
+                  fill
+                  className="rounded-xs"
+                />
+              )
+            )}
           </div>
         )}
         {publishDateTime && (
diff --git a/web/templates/newsroom/NewsSections/NewsItem.tsx b/web/templates/newsroom/NewsSections/NewsItem.tsx
index 104d9b0d5..9a87f1c64 100644
--- a/web/templates/newsroom/NewsSections/NewsItem.tsx
+++ b/web/templates/newsroom/NewsSections/NewsItem.tsx
@@ -1,5 +1,6 @@
 import { FormattedDate } from '@components/FormattedDateTime'
 import { forwardRef, HTMLAttributes } from 'react'
+import Img from 'next/image'
 import { BaseLink } from '@core/Link'
 import { Typography } from '@core/Typography'
 import Image, { Ratios } from '../../../pageComponents/shared/SanityImage'
@@ -17,12 +18,12 @@ const NewsItem = forwardRef<HTMLLIElement, NewsListItemProps>(function NewsItem(
   { data, fallbackImage, className = '', ...rest },
   ref,
 ) {
-  const { slug, title, publishDateTime, heroImage } = data || {}
+  const { slug, title, publishDateTime, heroImage, thumbnailUrl } = data || {}
 
   return (
     <section ref={ref} className={envisTwMerge('', className)} {...rest}>
       <BaseLink href={slug} className="group flex justify-between gap-4 lg:gap-6">
-        <div className=" max-w-[65%]">
+        <div className="max-w-[65%]">
           {publishDateTime && (
             <FormattedDate datetime={publishDateTime} uppercase className="text-2xs font-normal leading-normal pb-1" />
           )}
@@ -33,16 +34,33 @@ const NewsItem = forwardRef<HTMLLIElement, NewsListItemProps>(function NewsItem(
           )}
         </div>
         <div className="w-[30%] lg:h-full aspect-5/4 lg:aspect-video relative">
-          {(heroImage?.image?.asset || fallbackImage) && (
-            <Image
-              //@ts-ignore: TODO Fix SanityImage to take SanityImageObject
-              image={heroImage?.image?.asset ? heroImage?.image : fallbackImage}
-              aria-hidden
-              aspectRatio={Ratios.NINE_TO_SIXTEEN}
-              sizes="(max-width: 800px) 100vw, 800px"
-              fill
-              className="rounded-xs"
-            />
+          {(heroImage?.image?.asset || fallbackImage || thumbnailUrl) && (
+            <>
+              {thumbnailUrl ? (
+                <div className="relative rounded-xs">
+                  <Img
+                    src={thumbnailUrl}
+                    alt=""
+                    style={{ objectFit: 'cover' }}
+                    fill
+                    sizes="(max-width: 800px) 100vw, 800px"
+                    role={'presentation'}
+                  />
+                </div>
+              ) : (
+                (heroImage?.image?.asset || fallbackImage) && (
+                  <Image
+                    //@ts-ignore: TODO Fix SanityImage to take SanityImageObject
+                    image={heroImage?.image?.asset ? heroImage?.image : fallbackImage}
+                    aria-hidden
+                    aspectRatio={Ratios.NINE_TO_SIXTEEN}
+                    sizes="(max-width: 800px) 100vw, 800px"
+                    fill
+                    className="rounded-xs"
+                  />
+                )
+              )}
+            </>
           )}
         </div>
       </BaseLink>
diff --git a/web/types/algoliaIndexPage.ts b/web/types/algoliaIndexPage.ts
index eb2224990..5b8cac3a0 100644
--- a/web/types/algoliaIndexPage.ts
+++ b/web/types/algoliaIndexPage.ts
@@ -33,6 +33,7 @@ export type NewsRoomNewsItem = {
   publishDateTime?: string
   firstPublishedAt?: string
   heroImage: ImageWithCaptionData
+  thumbnailUrl?: string
   ingress?: string
 }