From 136f411cf2e5bb89bd1565f0c5700801434601b2 Mon Sep 17 00:00:00 2001
From: "Dusan Mijatovic (PC2020)" <d.mijatovic@dv4all.nl>
Date: Fri, 1 Sep 2023 14:09:30 +0200
Subject: [PATCH] audit: use explicit image size in cards and logos, based on
 lighthouse audit feedback.

---
 frontend/components/AppHeader/index.tsx       | 16 +++++++--
 .../layout/ImageWithPlaceholder.tsx           |  3 ++
 frontend/components/layout/LogoAvatar.tsx     |  7 ++--
 .../list/ListImageWithGradientPlaceholder.tsx | 35 +++++++++++++++++++
 .../overview/list/ProjectListItemContent.tsx  | 19 +++-------
 .../overview/cards/SoftwareMasonryCard.tsx    |  8 +++--
 .../overview/highlights/HighlightsCard.tsx    |  6 +++-
 .../overview/list/SoftwareListItemContent.tsx | 19 ++++------
 8 files changed, 79 insertions(+), 34 deletions(-)
 create mode 100644 frontend/components/projects/overview/list/ListImageWithGradientPlaceholder.tsx

diff --git a/frontend/components/AppHeader/index.tsx b/frontend/components/AppHeader/index.tsx
index 03dd722a1..7e3e3767e 100644
--- a/frontend/components/AppHeader/index.tsx
+++ b/frontend/components/AppHeader/index.tsx
@@ -64,8 +64,20 @@ export default function AppHeader() {
         className="flex-1 flex flex-col px-4 xl:flex-row items-start lg:container lg:mx-auto">
         <div className="w-full flex-1 flex items-center justify-between">
           <Link href="/" passHref className="hover:text-inherit" aria-label="Link to home page">
-            <LogoApp className="hidden 2xl:block"/>
-            <LogoAppSmall className="block 2xl:hidden"/>
+            <LogoApp
+              className="hidden 2xl:block"
+              loading='eager'
+              // lighthouse audit requires explicit width and height
+              width="100%"
+              height="1.5rem"
+            />
+            <LogoAppSmall
+              className="2xl:hidden"
+              loading='eager'
+              // lighthouse audit requires explicit width and height
+              width="100%"
+              height="1.5rem"
+            />
           </Link>
 
           <GlobalSearchAutocomplete className="hidden xl:block ml-12 mr-6"/>
diff --git a/frontend/components/layout/ImageWithPlaceholder.tsx b/frontend/components/layout/ImageWithPlaceholder.tsx
index cc3b41d26..9e43c6684 100644
--- a/frontend/components/layout/ImageWithPlaceholder.tsx
+++ b/frontend/components/layout/ImageWithPlaceholder.tsx
@@ -55,6 +55,9 @@ export default function ImageWithPlaceholder({
       title={placeholder ?? alt}
       role="img"
       src={src}
+      // lighthouse audit requires explicit width and height
+      height="100%"
+      width="100%"
       style={{
         objectFit: bgSize,
         objectPosition: bgPosition
diff --git a/frontend/components/layout/LogoAvatar.tsx b/frontend/components/layout/LogoAvatar.tsx
index 6b0d2f8d2..0e741b67f 100644
--- a/frontend/components/layout/LogoAvatar.tsx
+++ b/frontend/components/layout/LogoAvatar.tsx
@@ -1,5 +1,7 @@
 // SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2022 dv4all
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -19,13 +21,14 @@ export default function LogoAvatar({name,src,sx,...props}:LogoAvatarProps) {
       alt={name}
       src={src}
       sx={{
+        // lighthouse audit requires explicit width and height
         width: '100%',
         height: '100%',
         fontSize: '3rem',
         '& img': {
-          height: 'auto',
+          // height: 'auto',
           maxHeight: '100%',
-          width: 'auto',
+          // width: 'auto',
           maxWidth: '100%'
         },
         ...sx
diff --git a/frontend/components/projects/overview/list/ListImageWithGradientPlaceholder.tsx b/frontend/components/projects/overview/list/ListImageWithGradientPlaceholder.tsx
new file mode 100644
index 000000000..376bce8c4
--- /dev/null
+++ b/frontend/components/projects/overview/list/ListImageWithGradientPlaceholder.tsx
@@ -0,0 +1,35 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import useValidateImageSrc from '~/utils/useValidateImageSrc'
+
+export default function ListImageWithGradientPlaceholder({imgSrc,alt}:{imgSrc:string|null, alt:string|null}) {
+  const validImg = useValidateImageSrc(imgSrc)
+
+  // console.group('ListItemImageWithGradientPlaceholder')
+  // console.log('imgSrc...', imgSrc)
+  // console.log('validImg...', validImg)
+  // console.groupEnd()
+
+  if (validImg === false || imgSrc === null){
+    // return gradient square as placeholder
+    return (
+      <div
+        className="w-12 self-stretch bg-gradient-to-br from-base-300 from-0% via-base-100 via-50% to-base-100"
+      />
+    )
+  }
+
+  return (
+    <img
+      src={`${imgSrc ?? ''}`}
+      alt={alt ?? 'Image'}
+      className="w-12 max-h-[3.5rem] text-base-content-disabled p-2 object-contain object-center"
+      // lighthouse audit requires explicit width and height
+      height="2.5rem"
+      width="100%"
+    />
+  )
+}
diff --git a/frontend/components/projects/overview/list/ProjectListItemContent.tsx b/frontend/components/projects/overview/list/ProjectListItemContent.tsx
index 0ff12d016..ea7b04683 100644
--- a/frontend/components/projects/overview/list/ProjectListItemContent.tsx
+++ b/frontend/components/projects/overview/list/ProjectListItemContent.tsx
@@ -7,8 +7,8 @@
 
 import {JSX} from 'react'
 import {getImageUrl} from '~/utils/editImage'
-import useValidateImageSrc from '~/utils/useValidateImageSrc'
 import ProjectMetrics from '../cards/ProjectMetrics'
+import ListImageWithGradientPlaceholder from './ListImageWithGradientPlaceholder'
 
 type ProjectListItemProps = {
   title: string
@@ -19,23 +19,14 @@ type ProjectListItemProps = {
   statusBanner?: JSX.Element
 }
 
-
 export default function ProjectListItemContent(item: ProjectListItemProps) {
   const imgSrc = getImageUrl(item.image_id ?? null)
-  const validImg = useValidateImageSrc(imgSrc)
   return (
     <>
-      {validImg ?
-        <img
-          src={`${imgSrc ?? ''}`}
-          alt={`Cover image for ${item.title}`}
-          className="w-12 max-h-[3.5rem] text-base-content-disabled p-2 object-contain object-center"
-        />
-        :
-        <div
-          className="w-12 bg-gradient-to-br from-base-300 from-0% via-base-100 via-50% to-base-100"
-        />
-      }
+      <ListImageWithGradientPlaceholder
+        imgSrc={imgSrc}
+        alt = {`Cover image for ${item.title}`}
+      />
       <div className="flex flex-col md:flex-row gap-3 flex-1 py-2">
         <div className="flex-1">
           <div className='line-clamp-2 md:line-clamp-1 break-words font-medium'>
diff --git a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
index 088dadf54..e3189c117 100644
--- a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
+++ b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
@@ -34,12 +34,16 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){
       className="hover:text-inherit">
       <div className="flex-shrink-0 transition bg-base-100 shadow-md hover:shadow-lg rounded-lg hover:cursor-pointer h-full select-none flex-col">
         {/* Cover image, show only if valid image link */}
-        {
-          validImg &&
+        { validImg === false ? null
+          :
           <img
             className="object-cover w-full rounded-tr-lg rounded-tl-lg"
             src={`${imgSrc ?? ''}`}
             alt={`Cover image for ${item.brand_name}`}
+            loading='eager'
+            // lighthouse audit requires explicit with and height
+            height="100%"
+            width="100%"
           />
         }
         {/* Card content */}
diff --git a/frontend/components/software/overview/highlights/HighlightsCard.tsx b/frontend/components/software/overview/highlights/HighlightsCard.tsx
index 18376f951..fee0dad8a 100644
--- a/frontend/components/software/overview/highlights/HighlightsCard.tsx
+++ b/frontend/components/software/overview/highlights/HighlightsCard.tsx
@@ -13,7 +13,6 @@ import CardTitleSubtitle from '~/components/cards/CardTitleSubtitle'
 import ProgrammingLanguageList from '~/components/software/overview/cards/ProgrammingLanguageList'
 import SoftwareMetrics from '~/components/software/overview/cards/SoftwareMetrics'
 import useValidateImageSrc from '~/utils/useValidateImageSrc'
-import {useState} from 'react'
 
 type HighlightsCardProps = {
   id:string
@@ -61,7 +60,12 @@ export default function HighlightsCard(item: HighlightsCardProps) {
             src={`${imgSrc ?? ''}`}
             alt={`Cover image for ${item.brand_name}`}
             style={{maxWidth:'22rem'}}
+            // lighthouse audit requires explicit width and height
+            height="100%"
+            width="100%"
             loading='eager'
+            // this is correct markup but supported yet
+            // fetchPriority="high"
           />
         }
 
diff --git a/frontend/components/software/overview/list/SoftwareListItemContent.tsx b/frontend/components/software/overview/list/SoftwareListItemContent.tsx
index ab98d4828..02bc200f6 100644
--- a/frontend/components/software/overview/list/SoftwareListItemContent.tsx
+++ b/frontend/components/software/overview/list/SoftwareListItemContent.tsx
@@ -5,7 +5,7 @@
 
 import {JSX} from 'react'
 import {getImageUrl} from '~/utils/editImage'
-import useValidateImageSrc from '~/utils/useValidateImageSrc'
+import ListImageWithGradientPlaceholder from '~/components/projects/overview/list/ListImageWithGradientPlaceholder'
 import SoftwareMetrics from '../cards/SoftwareMetrics'
 
 type SoftwareOverviewListItemProps = {
@@ -27,20 +27,13 @@ type SoftwareOverviewListItemProps = {
 
 export default function SoftwareListItemContent(item:SoftwareOverviewListItemProps) {
   const imgSrc = getImageUrl(item.image_id ?? null)
-  const validImg = useValidateImageSrc(imgSrc)
+
   return (
     <>
-      {validImg ?
-        <img
-          src={`${imgSrc ?? ''}`}
-          alt={`Cover image for ${item.brand_name}`}
-          className="w-12 max-h-[3.5rem] text-base-content-disabled p-2 object-contain object-center"
-        />
-        :
-        <div
-          className="w-12 self-stretch bg-gradient-to-br from-base-300 from-0% via-base-100 via-50% to-base-100"
-        />
-      }
+      <ListImageWithGradientPlaceholder
+        imgSrc={imgSrc}
+        alt = {`Cover image for ${item.brand_name}`}
+      />
       <div className="flex flex-col md:flex-row gap-3 flex-1 py-2">
         <div className="flex-1">
           <div className='line-clamp-2 md:line-clamp-1 break-words font-medium'>