Skip to content

Commit c785c9c

Browse files
DnzzLDnzzL
committed
feat: propagate ImageWithCredit component
1 parent 34074e9 commit c785c9c

File tree

26 files changed

+140
-83
lines changed

26 files changed

+140
-83
lines changed

‎frontend/src/app/[locale]/about/about.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
'use client';
22

3-
import { useTranslations } from 'next-intl';
43
import {
54
CtaWithImage,
65
EditoCard,
76
LargeTextImage,
87
MembersBlock,
98
PartnersBlock,
10-
Title,
119
TestimoniesCarousel,
10+
Title,
1211
} from '@/components';
1312
import { IMembers } from '@/lib/types';
13+
import { useTranslations } from 'next-intl';
1414
import { AboutPageData } from './page';
1515

1616
function transformTestimonials(
@@ -21,6 +21,7 @@ function transformTestimonials(
2121
author: testimonial.author,
2222
content: testimonial.quote,
2323
image: testimonial.avatar?.url,
24+
imageCredit: testimonial.avatar?.caption ?? null,
2425
}));
2526
}
2627

@@ -41,6 +42,7 @@ function transformMember(
4142
name: member.name,
4243
role: member.role,
4344
image: member.avatar?.url,
45+
imageCredit: member.avatar?.caption ?? null,
4446
linkedin: member.linkedin,
4547
};
4648
}
@@ -131,6 +133,7 @@ export default function AboutPage({ data }: AboutProps) {
131133
rotation: -3.7,
132134
className: 'relative sm:left-[182px] md:-top-4',
133135
}}
136+
imageCredit={data.cta_left?.image?.caption}
134137
/>
135138
</div>
136139

@@ -145,6 +148,7 @@ export default function AboutPage({ data }: AboutProps) {
145148
className: 'sm:left-6',
146149
}}
147150
image={data.cta_right?.image.url ?? ''}
151+
imageCredit={data.cta_right?.image.caption ?? null}
148152
className="w-full lg:w-[770px] overflow-hidden md:overflow-visible"
149153
contentClassName="relative lg:top-24"
150154
cta={{
@@ -166,6 +170,7 @@ export default function AboutPage({ data }: AboutProps) {
166170
<EditoCard
167171
title={data.map_cta?.title}
168172
image={data.map_cta?.image.url}
173+
imageCredit={data.map_cta?.image.caption ?? null}
169174
ctaText={data.map_cta?.cta.text}
170175
ctaLink={data.map_cta?.cta.link}
171176
className="my-lg"
@@ -181,6 +186,7 @@ export default function AboutPage({ data }: AboutProps) {
181186
title={data.volunteer_cta?.title}
182187
content={data.volunteer_cta?.content}
183188
image={data.volunteer_cta?.image.url}
189+
imageCredit={data.volunteer_cta?.image.caption ?? null}
184190
ctaText={data.volunteer_cta.cta.text}
185191
ctaLink={data.volunteer_cta.cta.link}
186192
className="my-lg"

‎frontend/src/app/[locale]/blog/[slug]/article.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ function estimateReadingTime(content: string): string {
1717

1818
export default function ArticlePage({ blog }: BlogPageProps) {
1919
const heroBlock = {
20-
image: blog.thumbnail?.formats?.large?.url ?? '/images/dataforgood.svg',
21-
title: blog.title,
22-
introduction: blog.description,
23-
date: new Date(blog.published_date).toLocaleDateString(undefined, { dateStyle: "long" }),
24-
readTime: estimateReadingTime(blog.content),
20+
image: blog.thumbnail?.url ?? '/images/dataforgood.svg',
21+
imageCredit: blog.thumbnail?.caption ?? null,
22+
title: blog.title || '',
23+
introduction: blog.description || '',
24+
date: new Date(blog.published_date || '').toLocaleDateString(undefined, { dateStyle: "long" }),
25+
readTime: estimateReadingTime(blog.content || ''),
2526
author: {
2627
name: blog.author?.name ?? 'DataForGood',
2728
link: ""

‎frontend/src/app/[locale]/blog/blog.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ function transformBlogsData(resources: NonNullable<BlogsPageData>) {
1919
rawDate: resource.published_date,
2020
date: new Date(resource.published_date).toLocaleString(undefined, {dateStyle: 'medium'}),
2121
image: element.thumbnail?.url ?? "/images/dataforgood.svg",
22+
imageCredit: element.thumbnail?.caption ?? null,
2223
link: isBlog ? `/blog/${element.slug}` : element.article_link,
2324
subInfos: element.tags ? element.tags.map(tag => tag.name) : [],
2425
tags: [new Date(element.published_date).toLocaleDateString(undefined, {dateStyle: 'long'}), element.media_name],

‎frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) {
3434
<ThematicHeroBlock
3535
title={t('title')}
3636
image={data.thematic?.banner_image?.url || ''}
37+
imageCredit={data.thematic?.banner_image?.caption ?? null}
3738
className="my-lg"
3839
/>
3940

@@ -42,6 +43,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) {
4243
<EditoCard
4344
imageText={data.thematic?.quote || ''}
4445
image={data.thematic?.image_1?.url || ''}
46+
imageCredit={data.thematic?.image_1?.caption ?? null}
4547
imagePosition="left"
4648
imageTextRotation={-6}
4749
className="my-lg container"
@@ -53,6 +55,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) {
5355
<EditoCard
5456
imageText={data.thematic?.quote2 || ''}
5557
image={data.thematic?.image_2?.url || ''}
58+
imageCredit={data.thematic?.image_2?.caption ?? null}
5659
className="my-lg container"
5760
contentClassName="lead"
5861
>

‎frontend/src/app/[locale]/democracy/democracy.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
3434
<ThematicHeroBlock
3535
title={t('title')}
3636
image={data.thematic?.banner_image?.url || ''}
37+
imageCredit={data.thematic?.banner_image?.caption ?? null}
3738
className="my-lg"
3839
/>
3940

@@ -42,6 +43,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
4243
<EditoCard
4344
imageText={data.thematic?.quote || ''}
4445
image={data.thematic?.image_1?.url || ''}
46+
imageCredit={data.thematic?.image_1?.caption ?? null}
4547
imagePosition="left"
4648
imageTextRotation={-6}
4749
className="my-lg container"
@@ -53,6 +55,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
5355
<EditoCard
5456
imageText={data.thematic?.quote2 || ''}
5557
image={data.thematic?.image_2?.url || ''}
58+
imageCredit={data.thematic?.image_2?.caption ?? null}
5659
className="my-lg container"
5760
contentClassName="lead"
5861
>

‎frontend/src/app/[locale]/home.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default function Homepage({ data }: HomepageProps) {
1414

1515
const heroData = {
1616
image: data.hero?.image?.url,
17+
imageCredit: data.hero?.image?.caption ?? null,
1718
title: {
1819
level: 1 as TitleProps['level'],
1920
variant: "big" as TitleProps['variant'],
@@ -36,6 +37,7 @@ export default function Homepage({ data }: HomepageProps) {
3637
const projects = data.featured_projects?.map(project => ({
3738
id: (project.id ?? "" ).toString(),
3839
src: project.thumbnail?.url || '',
40+
credit: project.thumbnail?.caption ?? null,
3941
title: project.title || '',
4042
alt: project.title || '',
4143
description: project.short_description || '',
@@ -56,6 +58,7 @@ export default function Homepage({ data }: HomepageProps) {
5658
title: event.name || '',
5759
date: new Date(event.date || '').toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric' }),
5860
image: event.image?.url,
61+
imageCredit: event.image?.caption ?? null,
5962
tag: [t('events.tag')],
6063
link: event.link || '',
6164
})).filter(event => event.title && event.link) ?? [];
@@ -69,6 +72,7 @@ export default function Homepage({ data }: HomepageProps) {
6972
author: isBlog ? ( (resource.blog?.author as { name: string })?.name || t('resources.defaultAuthor')) : (resource.press_release as { media_name: string })?.media_name || '',
7073
talk: isBlog ? (resource.blog as { title: string })?.title || '' : (resource.press_release as { title: string })?.title || '',
7174
image: isBlog ? resource.blog?.thumbnail?.url || '' : resource.press_release?.thumbnail?.url || '',
75+
imageCredit: isBlog ? (resource.blog?.thumbnail?.caption ?? null) : (resource.press_release?.thumbnail?.caption ?? null),
7276
ctaText: isBlog ? t('resources.articleCtaText') : t('resources.pressCtaText'),
7377
ctaLink: isBlog ? `/articles/${resource.blog?.slug || ''}` : (resource.press_release as { article_link: string })?.article_link || '',
7478
}
@@ -87,6 +91,7 @@ export default function Homepage({ data }: HomepageProps) {
8791
talk: thematic.short_description || '',
8892
talkOffset: 10,
8993
image: thematic.thumbnail?.url || '',
94+
imageCredit: thematic.thumbnail?.caption ?? null,
9095
ctaText: thematic.cta_text,
9196
ctaLink: thematic.cta_link,
9297
})).filter(thematic => thematic.talk) ?? [];

‎frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ function getSlides(project: ProjectPageData) {
5858
id: index + 1,
5959
description: image.caption,
6060
image: image.url,
61-
altImage: image.alternativeText
61+
altImage: image.alternativeText,
62+
credit: image.caption
6263
})) || [];
6364
}
6465

@@ -119,6 +120,7 @@ export default function ProjectDetailPage({ project }: ProjectPageProps) {
119120
<>
120121
{project.title && <ProjectHeroBlock
121122
image={project.thumbnail?.url}
123+
imageCredit={project.thumbnail?.caption ?? null}
122124
title={project.title}
123125
introduction={project.short_description}
124126
className='my-lg'

‎frontend/src/app/[locale]/projects/projects.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ function transformThematicsData(thematics: ProjectListPageData["thematics"]) {
2424
talk: thematic.short_description,
2525
talkOffset: 10,
2626
image: thematic.thumbnail?.url || '',
27+
imageCredit: thematic.thumbnail?.caption ?? null,
2728
ctaText: thematic.cta_text,
2829
ctaLink: thematic.cta_link,
2930
})) || [];
@@ -92,27 +93,28 @@ export default function ProjectsPage({ data }: ProjectListProps) {
9293
{data.introduction}
9394
</Title>
9495

95-
<CtaWithImage
96-
title={{
97-
children: data.introduction_cta?.title,
98-
rotation: -4,
99-
}}
100-
content={{
101-
text: data.introduction_cta?.content ?? '',
102-
rotation: 1.5,
103-
className: 'sm:left-6',
104-
}}
105-
image={data.introduction_cta?.image.url ?? ''}
106-
imageClassName="object-fill"
107-
className="overflow-hidden md:overflow-visible md:w-[400px]"
108-
contentClassName="relative md:top-24"
109-
cta={{
110-
text: data.introduction_cta?.cta.text,
111-
link: data.introduction_cta?.cta.link,
112-
rotation: 0.7,
113-
className: 'relative sm:left-48 -top-2',
114-
}}
115-
/>
96+
<CtaWithImage
97+
title={{
98+
children: data.introduction_cta?.title,
99+
rotation: -4,
100+
}}
101+
content={{
102+
text: data.introduction_cta?.content ?? '',
103+
rotation: 1.5,
104+
className: 'sm:left-6',
105+
}}
106+
image={data.introduction_cta?.image.url ?? ''}
107+
imageCredit={data.introduction_cta?.image.caption ?? null}
108+
imageClassName="object-fill"
109+
className="overflow-hidden md:overflow-visible md:w-[400px]"
110+
contentClassName="relative md:top-24"
111+
cta={{
112+
text: data.introduction_cta?.cta.text,
113+
link: data.introduction_cta?.cta.link,
114+
rotation: 0.7,
115+
className: 'relative sm:left-48 -top-2',
116+
}}
117+
/>
116118
</div>
117119

118120
<ThematicsBlock

‎frontend/src/app/[locale]/social-justice/social.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
3434
<ThematicHeroBlock
3535
title={t('title')}
3636
image={data.thematic?.banner_image?.url || ''}
37+
imageCredit={data.thematic?.banner_image?.caption ?? null}
3738
className="my-lg"
3839
/>
3940

@@ -42,6 +43,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
4243
<EditoCard
4344
imageText={data.thematic?.quote || ''}
4445
image={data.thematic?.image_1?.url || ''}
46+
imageCredit={data.thematic?.image_1?.caption ?? null}
4547
imagePosition="left"
4648
imageTextRotation={-6}
4749
className="my-lg container"
@@ -53,6 +55,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) {
5355
<EditoCard
5456
imageText={data.thematic?.quote2 || ''}
5557
image={data.thematic?.image_2?.url || ''}
58+
imageCredit={data.thematic?.image_2?.caption ?? null}
5659
className="my-lg container"
5760
contentClassName="lead"
5861
>

‎frontend/src/components/molecules/BaseCard/BaseCard.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import clsx from 'clsx';
22
import Image from 'next/image';
3+
import ImageWithCredit from '@/components/molecules/ImageWithCredit';
34
import { Tag, Title } from '@/components/atoms';
45
import Link from 'next/link';
56

@@ -8,6 +9,7 @@ export type BaseCardProps = {
89
title: string;
910
tags?: string[];
1011
image?: string;
12+
imageCredit?: string | null;
1113
link: string;
1214
subInfos: string[];
1315
className?: string;
@@ -18,11 +20,11 @@ const BaseCard: React.FC<BaseCardProps> = ({
1820
title,
1921
tags,
2022
image,
23+
imageCredit,
2124
link,
2225
subInfos,
2326
className,
2427
isBlank = false,
25-
...props
2628
}) => {
2729
if (!title || !link) {
2830
return null;
@@ -38,7 +40,6 @@ const BaseCard: React.FC<BaseCardProps> = ({
3840
rel={isBlank ? 'noreferrer' : undefined}
3941
href={link}
4042
aria-label={title}
41-
{...props}
4243
>
4344
<div className="relative flex flex-col z-1 bg-white h-full">
4445
<div className="flex flex-col justify-between flex-1 min-h-64 px-6 py-7 gap-y-2">
@@ -64,7 +65,7 @@ const BaseCard: React.FC<BaseCardProps> = ({
6465
</div>}
6566
<div className="w-full h-[216px] relative">
6667
<div className="absolute top-0 left-0 w-full h-full bg-black/10" />
67-
{image && <Image loading="lazy" src={image} alt="" width={400} height={200} className="w-full h-[216px] object-contain" />}
68+
{image && <ImageWithCredit loading="lazy" src={image} alt="" credit={imageCredit} width={400} height={200} className="w-full h-[216px] object-contain" />}
6869
</div>
6970
</div>
7071
</Link>

0 commit comments

Comments
 (0)