diff --git a/frontend/components/software/overview/SoftwareOverviewContent.tsx b/frontend/components/software/overview/SoftwareOverviewContent.tsx index f88a745c0..cf6af4f1d 100644 --- a/frontend/components/software/overview/SoftwareOverviewContent.tsx +++ b/frontend/components/software/overview/SoftwareOverviewContent.tsx @@ -1,5 +1,5 @@ -// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center) -// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center +// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) // SPDX-FileCopyrightText: 2023 dv4all // @@ -9,14 +9,15 @@ 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' import SoftwareOverviewGrid from './cards/SoftwareOverviewGrid' import SoftwareGridCard from './cards/SoftwareGridCard' + import SoftwareMasonryCard from './cards/SoftwareMasonryCard' import SoftwareListItemContent from './list/SoftwareListItemContent' +import SourceBanner from './list/SourceBanner' import OverviewListItem from './list/OverviewListItem' import {getItemKey, getPageUrl} from './useSoftwareOverviewProps' @@ -67,20 +68,14 @@ export default function SoftwareOverviewContent({layout, software, hasRemotes}: data-testid="software-list-item" key={listKey} href={pageUrl} - className='flex-1 hover:text-inherit' + className='flex-1 flex hover:text-inherit group' title={item.brand_name} target={item.domain ? '_blank' : '_self'} > - + - - + } {...item} /> diff --git a/frontend/components/software/overview/cards/ExternalLinkIcon.tsx b/frontend/components/software/overview/cards/ExternalLinkIcon.tsx new file mode 100644 index 000000000..e8b8a4dc0 --- /dev/null +++ b/frontend/components/software/overview/cards/ExternalLinkIcon.tsx @@ -0,0 +1,26 @@ +// SPDX-FileCopyrightText: 2025 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2025 Netherlands eScience Center +// +// SPDX-License-Identifier: Apache-2.0 + +import OpenInNewIcon from '@mui/icons-material/OpenInNew' + +/** + * It requires parent element to have tailwind "relative" class. + * It requires parent element to have tailwind "group" class for changing to primary color on hover. + * If domain is not provided or null it returns null/nothing. + * @param domain string + * @returns JSX.Element | null + */ +export default function ExternalLinkIcon({domain}:Readonly<{domain?:string|null}>) { + if (domain){ + return ( +
+ +
+ ) + } + return null +} diff --git a/frontend/components/software/overview/cards/SoftwareGridCard.tsx b/frontend/components/software/overview/cards/SoftwareGridCard.tsx index 429b3b988..01a0d0aa7 100644 --- a/frontend/components/software/overview/cards/SoftwareGridCard.tsx +++ b/frontend/components/software/overview/cards/SoftwareGridCard.tsx @@ -1,5 +1,5 @@ -// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center) -// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center +// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) // SPDX-FileCopyrightText: 2023 dv4all // @@ -8,6 +8,7 @@ import Link from 'next/link' import {getPageUrl,visibleNumberOfKeywords,visibleNumberOfProgLang} from '../useSoftwareOverviewProps' import SoftwareCardContent from './SoftwareCardContent' +import ExternalLinkIcon from './ExternalLinkIcon' type SoftwareCardProps = { id: string @@ -33,11 +34,15 @@ export default function SoftwareGridCard(item:SoftwareCardProps){ className="flex-1 flex flex-col hover:text-inherit relative group" target={item.domain ? '_blank' : '_self'} > + {/* Requires tailwind classes relative and group */} + + + ) } diff --git a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx index 92e42f7d6..b07260c77 100644 --- a/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx +++ b/frontend/components/software/overview/cards/SoftwareMasonryCard.tsx @@ -1,5 +1,5 @@ -// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center) -// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center +// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all) // SPDX-FileCopyrightText: 2023 dv4all @@ -14,6 +14,7 @@ import SourceRsd from '~/components/cards/SourceRsd' import ProgrammingLanguageList from './ProgrammingLanguageList' import SoftwareMetrics from './SoftwareMetrics' import useSoftwareOverviewProps from '../useSoftwareOverviewProps' +import ExternalLinkIcon from './ExternalLinkIcon' type SoftwareCardProps = { item: SoftwareOverviewItemProps @@ -36,7 +37,7 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){ data-testid="software-masonry-card" href={pageUrl} className="hover:text-inherit"> -
+
{/* Cover image, show only if valid image link */} { validImg === false ? null : @@ -50,6 +51,8 @@ export default function SoftwareMasonryCard({item}:SoftwareCardProps){ width="100%" /> } + {/* Requires tailwind classes relative and group */} + {/* Card content */}
diff --git a/frontend/components/software/overview/list/SoftwareListItemContent.tsx b/frontend/components/software/overview/list/SoftwareListItemContent.tsx index ac8af7296..2455cbbf4 100644 --- a/frontend/components/software/overview/list/SoftwareListItemContent.tsx +++ b/frontend/components/software/overview/list/SoftwareListItemContent.tsx @@ -1,5 +1,5 @@ -// SPDX-FileCopyrightText: 2023 - 2024 Dusan Mijatovic (Netherlands eScience Center) -// SPDX-FileCopyrightText: 2023 - 2024 Netherlands eScience Center +// SPDX-FileCopyrightText: 2023 - 2025 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2023 - 2025 Netherlands eScience Center // SPDX-FileCopyrightText: 2023 Dusan Mijatovic (dv4all) (dv4all) // SPDX-FileCopyrightText: 2023 dv4all // @@ -10,17 +10,12 @@ import SoftwareMetrics from '../cards/SoftwareMetrics' import {getImgUrl} from '../useSoftwareOverviewProps' type SoftwareOverviewListItemProps = { - // id:string brand_name: string short_statement: string image_id: string | null - // updated_at: string | null contributor_cnt: number | null mention_cnt: number | null is_published: boolean - // keywords: string[], - // prog_lang: string[], - // licenses: string, downloads?: number statusBanner?: JSX.Element domain?: string|null diff --git a/frontend/components/software/overview/list/SourceBanner.tsx b/frontend/components/software/overview/list/SourceBanner.tsx new file mode 100644 index 000000000..10ccae91b --- /dev/null +++ b/frontend/components/software/overview/list/SourceBanner.tsx @@ -0,0 +1,33 @@ +// SPDX-FileCopyrightText: 2025 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2025 Netherlands eScience Center +// +// SPDX-License-Identifier: Apache-2.0 + +import OpenInNewIcon from '@mui/icons-material/OpenInNew' + +type SourceRSDType = Readonly<{ + source?:string|null, + domain?:string|null +}> + +export default function SourceBanner({source,domain}:SourceRSDType){ + + if (!source) return null + + return ( +
+
+ {source} +
+ { + domain ? + : null + } +
+ ) +}