Skip to content

Commit edc80e9

Browse files
dereknoladereknola
authored
Simplify and correctly scale K3s Adopter section (#28)
Fix dark mode backgrounds Signed-off-by: Derek Nola <[email protected]>
1 parent 80b7c5b commit edc80e9

File tree

2 files changed

+50
-37
lines changed

2 files changed

+50
-37
lines changed

‎src/components/Card/CardImage/index.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,35 @@ interface CardImageProps {
77
cardImageUrl: string;
88
alt: string;
99
title: string;
10+
href?: string;
1011
}
1112
const CardImage: React.FC<CardImageProps> = ({
1213
className,
1314
style,
1415
cardImageUrl,
1516
alt,
1617
title,
18+
href,
1719
}) => {
1820
const generatedCardImageUrl = useBaseUrl(cardImageUrl);
19-
return (
21+
22+
const imageElement = (
2023
<img
2124
className={clsx('card__image', className)}
2225
style={style}
23-
src={generatedCardImageUrl} alt={alt} title={title}
26+
src={generatedCardImageUrl}
27+
alt={alt}
28+
title={title}
2429
/>
2530
);
31+
32+
// If href is provided, wrap the image in an anchor tag
33+
return href ? (
34+
<a href={href} target="_blank" rel="noopener noreferrer">
35+
{imageElement}
36+
</a>
37+
) : (
38+
imageElement
39+
);
2640
};
2741
export default CardImage;

‎src/pages/community.md‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -65,65 +65,64 @@ You can follow the work we plan to do using the [K3s Roadmap](https://github.com
6565

6666
<Columns>
6767
<Column>
68-
<Card style={{width: '150px'}}>
69-
<CardImage style={{height: '150px'}} cardImageUrl='https://cdn.prod.website-files.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg'/>
70-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
71-
<a href="https://www.rocket.chat/" target="_blank" className='button button--info'>Website</a>
72-
</CardFooter>
68+
<Card style={{width: '150px', height: '150px', backgroundColor: '#ffffff'}}>
69+
<CardImage style={{height: '150px', width: '140px', paddingLeft: '5px'}}
70+
cardImageUrl='https://cdn.prod.website-files.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg'
71+
href="https://www.rocket.chat/"
72+
/>
7373
</Card>
7474
</Column>
7575
<Column>
76-
<Card style={{width: '150px'}}>
77-
<CardImage cardImageUrl='https://ayedo.de/ayedo-logo-color.png'/>
78-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
79-
<a href="https://ayedo.de/" target="_blank" className='button button--info'>Website</a>
80-
</CardFooter>
76+
<Card style={{width: '150px', backgroundColor: '#ffffff'}}>
77+
<CardImage
78+
cardImageUrl='https://ayedo.de/ayedo-logo-color.png'
79+
href="https://ayedo.de/"
80+
/>
8181
</Card>
8282
</Column>
8383
<Column>
84-
<Card style={{width: '150px'}}>
85-
<CardImage style={{height: '150px'}} cardImageUrl='https://www.pitsdatarecovery.com/wp-content/uploads/2024/08/PITS-logo_v2.svg'/>
86-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
87-
<a href="https://www.pitsdatarecovery.com/" target="_blank" className='button button--info'>Website</a>
88-
</CardFooter>
84+
<Card style={{width: '150px', height: '150px', backgroundColor: '#ffffff'}}>
85+
<CardImage style={{height: '150px', width: '140px', paddingLeft: '5px'}}
86+
cardImageUrl='https://www.pitsdatarecovery.com/wp-content/uploads/2024/08/PITS-logo_v2.svg'
87+
href="https://www.pitsdatarecovery.com/"
88+
/>
8989
</Card>
9090
</Column>
9191
</Columns>
9292
<br/>
9393
<Columns>
9494
<Column>
95-
<Card style={{width: '150px'}}>
96-
<CardImage style={{height: '150px'}} cardImageUrl='https://cdn.prod.website-files.com/636dbee261df29d4438db278/637680bb6cfab675d6c91e52_header-logo-black.svg'/>
97-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
98-
<a href="https://www.uffizzi.com/" target="_blank" className='button button--info'>Website</a>
99-
</CardFooter>
95+
<Card style={{width: '150px', height: '150px', backgroundColor: '#ffffff'}}>
96+
<CardImage style={{height: '150px', width: '140px', paddingLeft: '5px'}}
97+
href="https://www.uffizzi.com/"
98+
cardImageUrl='https://cdn.prod.website-files.com/636dbee261df29d4438db278/637680bb6cfab675d6c91e52_header-logo-black.svg'
99+
/>
100100
</Card>
101101
</Column>
102102
<Column>
103-
<Card style={{width: '150px'}}>
104-
<CardImage style={{height: '150px'}} cardImageUrl='https://github.com/cncf/artwork/blob/main/projects/kairos/stacked/color/kairos-stacked-color.svg?raw=true'/>
105-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
106-
<a href="https://kairos.io/" target="_blank" className='button button--info'>Website</a>
107-
</CardFooter>
103+
<Card style={{width: '150px', height: '150px', backgroundColor: '#ffffff'}}>
104+
<CardImage style={{height: '140px', width: '140px', paddingLeft: '5px', paddingTop: '5px'}}
105+
cardImageUrl='https://github.com/cncf/artwork/blob/main/projects/kairos/stacked/color/kairos-stacked-color.svg?raw=true'
106+
href="https://kairos.io/"
107+
/>
108108
</Card>
109109
</Column>
110110
<Column>
111-
<Card style={{width: '150px'}}>
112-
<CardImage style={{height: '150px'}} cardImageUrl='https://cdn.prod.website-files.com/67e58472f7387d5202b71e35/67e590086adf6b807bee1e6e_es-logo.svg'/>
113-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
114-
<a href="https://www.externalsecrets.com/" target="_blank" className='button button--info'>Website</a>
115-
</CardFooter>
111+
<Card style={{width: '150px', height: '150px', backgroundColor: '#ffffff'}}>
112+
<CardImage style={{height: '140px', width: '140px', paddingLeft: '5px', paddingTop: '5px'}}
113+
cardImageUrl='https://cdn.prod.website-files.com/67e58472f7387d5202b71e35/67e590086adf6b807bee1e6e_es-logo.svg'
114+
href="https://www.externalsecrets.com/"
115+
/>
116116
</Card>
117117
</Column>
118118
</Columns>
119119
<br/>
120120
<Columns>
121121
<Column>
122-
<Card style={{width: '150px'}}>
123-
<CardImage style={{height: '150px'}} cardImageUrl='https://yt3.googleusercontent.com/ytc/AIdro_kEhdYNMhTKrqW0Vjh63oUhd4AWitqdN69mkqIvdbWlIP8=s160-c-k-c0x00ffffff-no-rj'/>
124-
<CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
125-
<a href="https://childrescuecoalition.org/" target="_blank" className='button button--info'>Website</a>
126-
</CardFooter>
122+
<Card style={{width: '150px', height: '150px'}}>
123+
<CardImage style={{height: '150px'}} cardImageUrl='https://yt3.googleusercontent.com/ytc/AIdro_kEhdYNMhTKrqW0Vjh63oUhd4AWitqdN69mkqIvdbWlIP8=s160-c-k-c0x00ffffff-no-rj'
124+
href="https://childrescuecoalition.org/"
125+
/>
127126
</Card>
128127
</Column>
129128
</Columns>

0 commit comments

Comments
 (0)