feat: include all software sources in the software overview

research-software-directory · Dec 2, 2024 · 5ab2980 · 5ab2980
1 parent f063711
commit 5ab2980
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 59 deletions.
diff --git a/frontend/components/cards/SourceRsd.tsx b/frontend/components/cards/SourceRsd.tsx
@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2024 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export default function SourceRsd({source,domain}:{source?:string|null,domain?:string|null}){
+
+  if (!source) return null
+
+  return (
+    <div
+      title={domain ?? source}
+      className="line-clamp-1 text-sm text-base-content-disabled font-medium tracking-widest uppercase mb-2"
+    >
+      {source}
+    </div>
+  )
+}
diff --git a/frontend/components/organisation/software/list/AdminSoftwareListItem.tsx b/frontend/components/organisation/software/list/AdminSoftwareListItem.tsx
@@ -1,15 +1,15 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 //
 // SPDX-License-Identifier: Apache-2.0
 
 import Link from 'next/link'
 import {SoftwareOfOrganisation} from '~/types/Organisation'
-import {useSoftwareCardActions} from '../card/useSoftwareCardActions'
-import SoftwareListItemContent from '~/components/software/overview/list/SoftwareListItemContent'
 import IconBtnMenuOnAction from '~/components/menu/IconBtnMenuOnAction'
-import OverviewListItem from '~/components/software/overview/list/OverviewListItem'
 import StatusBanner from '~/components/cards/StatusBanner'
+import SoftwareListItemContent from '~/components/software/overview/list/SoftwareListItemContent'
+import OverviewListItem from '~/components/software/overview/list/OverviewListItem'
+import {useSoftwareCardActions} from '~/components/organisation/software/card/useSoftwareCardActions'
 
 type AdminSoftwareListItem = {
   item: SoftwareOfOrganisation

diff --git a/frontend/components/software/overview/SoftwareOverviewContent.tsx b/frontend/components/software/overview/SoftwareOverviewContent.tsx
@@ -1,6 +1,6 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
@@ -9,6 +9,7 @@ import Link from 'next/link'
 
 import {SoftwareOverviewItemProps} from '~/types/SoftwareTypes'
 import NoContent from '~/components/layout/NoContent'
+import SourceRsd from '~/components/cards/SourceRsd'
 import {LayoutType} from './search/ViewToggleGroup'
 import SoftwareOverviewList from './list/SoftwareOverviewList'
 import SoftwareOverviewMasonry from './cards/SoftwareOverviewMasonry'
@@ -17,6 +18,7 @@ import SoftwareGridCard from './cards/SoftwareGridCard'
 import SoftwareMasonryCard from './cards/SoftwareMasonryCard'
 import SoftwareListItemContent from './list/SoftwareListItemContent'
 import OverviewListItem from './list/OverviewListItem'
+import {getItemKey, getPageUrl} from './useSoftwareOverviewProps'
 
 type SoftwareOverviewContentProps = {
   layout: LayoutType
@@ -33,11 +35,14 @@ export default function SoftwareOverviewContent({layout, software}: SoftwareOver
     // Masonry layout (software only)
     return (
       <SoftwareOverviewMasonry>
-        {software.map((item) => (
-          <div key={item.id} className="mb-8 break-inside-avoid">
-            <SoftwareMasonryCard item={item}/>
-          </div>
-        ))}
+        {software.map((item) => {
+          const cardKey = getItemKey({id:item.id,domain:item.domain})
+          return (
+            <div key={cardKey} className="mb-8 break-inside-avoid">
+              <SoftwareMasonryCard item={item}/>
+            </div>
+          )
+        })}
       </SoftwareOverviewMasonry>
     )
   }
@@ -46,16 +51,30 @@ export default function SoftwareOverviewContent({layout, software}: SoftwareOver
     return (
       <SoftwareOverviewList>
         {software.map(item => {
+          const listKey = getItemKey({id:item.id,domain:item.domain})
+          const pageUrl = getPageUrl({domain:item.domain,slug:item.slug})
           return (
             <Link
               data-testid="software-list-item"
-              key={item.id}
-              href={`/software/${item.slug}`}
+              key={listKey}
+              href={pageUrl}
               className='flex-1 hover:text-inherit'
               title={item.brand_name}
+              target={item.domain ? '_blank' : '_self'}
             >
-              <OverviewListItem className="pr-4">
-                <SoftwareListItemContent key={item.id} {...item} />
+              <OverviewListItem className="pr-4 relative">
+                <SoftwareListItemContent
+                  statusBanner={
+                    <div style={{
+                      position:'absolute',
+                      top:'0.125rem',
+                      right: '1rem'
+                    }}>
+                      <SourceRsd source={item?.source} domain={item?.domain}/>
+                    </div>
+                  }
+                  {...item}
+                />
               </OverviewListItem>
             </Link>
           )
@@ -67,9 +86,10 @@ export default function SoftwareOverviewContent({layout, software}: SoftwareOver
   // GRID as default
   return (
     <SoftwareOverviewGrid>
-      {software.map((item) => (
-        <SoftwareGridCard key={item.id} {...item}/>
-      ))}
+      {software.map((item) => {
+        const cardKey = getItemKey({id:item.id,domain:item.domain})
+        return <SoftwareGridCard key={cardKey} {...item}/>
+      })}
     </SoftwareOverviewGrid>
   )
 }
diff --git a/frontend/components/software/overview/cards/SoftwareCardContent.tsx b/frontend/components/software/overview/cards/SoftwareCardContent.tsx
@@ -1,19 +1,19 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import {getImageUrl} from '~/utils/editImage'
 import KeywordList from '~/components/cards/KeywordList'
 import CardTitleSubtitle from '~/components/cards/CardTitleSubtitle'
 import ImageWithPlaceholder from '~/components/layout/ImageWithPlaceholder'
 import CardContentFrame from '~/components/cards/CardContentFrame'
 import CardImageFrame from '~/components/cards/CardImageFrame'
+import SourceRsd from '~/components/cards/SourceRsd'
 import ProgrammingLanguageList from './ProgrammingLanguageList'
 import SoftwareMetrics from './SoftwareMetrics'
+import {getImgUrl} from '../useSoftwareOverviewProps'
 
 type SoftwareCardContentProps = {
-  // slug:string
   brand_name: string
   short_statement: string
   image_id: string | null
@@ -24,18 +24,20 @@ type SoftwareCardContentProps = {
   downloads?: number
   visibleKeywords?: number
   visibleProgLang?: number
+  domain?: string|null
+  source?: string|null
 }
 
 export default function SoftwareCardContent(item:SoftwareCardContentProps) {
-
+  const imgUrl = getImgUrl({domain:item.domain,image_id:item.image_id})
   return (
     <div
       data-testid="software-card-content"
       className="flex flex-col h-full transition overflow-hidden bg-base-100 shadow-md hover:shadow-lg rounded-md" >
 
       <CardImageFrame>
         <ImageWithPlaceholder
-          src={`${getImageUrl(item.image_id) ?? ''}`}
+          src={imgUrl}
           alt={`Logo for ${item.brand_name}`}
           type="gradient"
           className="w-full text-base-content-disabled p-4"
@@ -44,11 +46,11 @@ export default function SoftwareCardContent(item:SoftwareCardContentProps) {
       </CardImageFrame>
 
       <CardContentFrame>
+        <SourceRsd source={item?.source} domain={item?.domain}/>
         <CardTitleSubtitle
           title={item.brand_name}
           subtitle={item.short_statement}
         />
-
         {/* keywords */}
         <div className="flex-1 overflow-auto py-2">
           <KeywordList

diff --git a/frontend/components/software/overview/cards/SoftwareGridCard.tsx b/frontend/components/software/overview/cards/SoftwareGridCard.tsx
@@ -1,16 +1,17 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
 import Link from 'next/link'
+import {getPageUrl,visibleNumberOfKeywords,visibleNumberOfProgLang} from '../useSoftwareOverviewProps'
 import SoftwareCardContent from './SoftwareCardContent'
 
 type SoftwareCardProps = {
-  slug:string
+  id: string
+  slug: string
   brand_name: string
   short_statement: string
   image_id: string | null
@@ -19,19 +20,22 @@ type SoftwareCardProps = {
   contributor_cnt: number | null
   mention_cnt: number | null
   downloads?: number
+  source?: string | null
+  domain?: string | null
 }
 
 export default function SoftwareGridCard(item:SoftwareCardProps){
-
+  const pageUrl = getPageUrl({domain:item.domain,slug:item.slug})
   return (
     <Link
       data-testid="software-grid-card"
-      href={`/software/${item.slug}`}
-      className="flex-1 flex flex-col hover:text-inherit"
+      href={pageUrl}
+      className="flex-1 flex flex-col hover:text-inherit relative group"
+      target={item.domain ? '_blank' : '_self'}
     >
       <SoftwareCardContent
-        visibleKeywords={3}
-        visibleProgLang={3}
+        visibleKeywords={visibleNumberOfKeywords}
+        visibleProgLang={visibleNumberOfProgLang}
         {...item}
       />
     </Link>

diff --git a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx
@@ -1,53 +1,58 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all)
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
 import Link from 'next/link'
 import {SoftwareOverviewItemProps} from '~/types/SoftwareTypes'
-import {getImageUrl} from '~/utils/editImage'
-import useValidateImageSrc from '~/utils/useValidateImageSrc'
 import KeywordList from '~/components/cards/KeywordList'
 import CardTitleSubtitle from '~/components/cards/CardTitleSubtitle'
+import SourceRsd from '~/components/cards/SourceRsd'
 import ProgrammingLanguageList from './ProgrammingLanguageList'
 import SoftwareMetrics from './SoftwareMetrics'
+import useSoftwareOverviewProps from '../useSoftwareOverviewProps'
 
 type SoftwareCardProps = {
   item: SoftwareOverviewItemProps
 }
 
 export default function SoftwareMasonryCard({item}:SoftwareCardProps){
-  const imgSrc = getImageUrl(item.image_id ?? null)
-  const validImg = useValidateImageSrc(imgSrc)
-
-  const visibleNumberOfKeywords: number = 3
-  const visibleNumberOfProgLang: number = 3
+  const {
+    imgUrl,pageUrl,
+    validImg,visibleNumberOfKeywords,
+    visibleNumberOfProgLang
+  } = useSoftwareOverviewProps({
+    id: item.id,
+    domain:item.domain,
+    image_id: item.image_id,
+    slug: item.slug
+  })
 
   return (
     <Link
       data-testid="software-masonry-card"
-      key={item.id}
-      href={`/software/${item.slug}`}
+      href={pageUrl}
       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 === false ? null
           :
           <img
             className="object-cover w-full rounded-tr-lg rounded-tl-lg"
-            src={`${imgSrc ?? ''}`}
+            src={`${imgUrl ?? ''}`}
             alt={`Cover image for ${item.brand_name}`}
-            loading='eager'
+            // loading = "lazy"
             // lighthouse audit requires explicit with and height
             height="100%"
             width="100%"
           />
         }
         {/* Card content */}
         <div className="flex flex-col p-4">
+          <SourceRsd source={item?.source} domain={item?.domain}/>
           <CardTitleSubtitle
             title={item.brand_name}
             subtitle={item.short_statement}

diff --git a/frontend/components/software/overview/list/SoftwareListItemContent.tsx b/frontend/components/software/overview/list/SoftwareListItemContent.tsx
@@ -1,17 +1,16 @@
-// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all)
-// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
 // SPDX-FileCopyrightText: 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import {getImageUrl} from '~/utils/editImage'
 import ListImageWithGradientPlaceholder from '~/components/projects/overview/list/ListImageWithGradientPlaceholder'
 import SoftwareMetrics from '../cards/SoftwareMetrics'
+import {getImgUrl} from '../useSoftwareOverviewProps'
 
 type SoftwareOverviewListItemProps = {
   // id:string
-  // slug:string
   brand_name: string
   short_statement: string
   image_id: string | null
@@ -24,15 +23,16 @@ type SoftwareOverviewListItemProps = {
   // licenses: string,
   downloads?: number
   statusBanner?: JSX.Element
+  domain?: string|null
 }
 
 export default function SoftwareListItemContent(item:SoftwareOverviewListItemProps) {
-  const imgSrc = getImageUrl(item.image_id ?? null)
+  const imgUrl = getImgUrl({domain:item.domain,image_id:item.image_id})
 
   return (
     <>
       <ListImageWithGradientPlaceholder
-        imgSrc={imgSrc}
+        imgSrc={imgUrl}
         alt = {`Cover image for ${item.brand_name}`}
       />
       <div className="flex flex-col md:flex-row gap-3 flex-1 py-2">