Skip to content

Commit 6d65fa1

Browse files
dereknoladereknola
authored
Add adopter card grid (#26)
* Add column and card components Signed-off-by: Derek Nola <[email protected]> * Overhaul Adopters section with Card Grid Signed-off-by: Derek Nola <[email protected]> --------- Signed-off-by: Derek Nola <[email protected]>
1 parent 4a7ea64 commit 6d65fa1

File tree

7 files changed

+215
-3
lines changed

7 files changed

+215
-3
lines changed

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { CSSProperties, ReactNode } from 'react';
2+
import clsx from 'clsx';
3+
interface CardFooterProps {
4+
className?: string;
5+
style?: CSSProperties;
6+
children: ReactNode;
7+
textAlign?: string;
8+
variant?: string;
9+
italic?: boolean;
10+
noDecoration?: boolean;
11+
transform?: string;
12+
breakWord?: boolean;
13+
truncate?: boolean;
14+
weight?: string;
15+
}
16+
const CardFooter: React.FC<CardFooterProps> = ({
17+
className,
18+
style,
19+
children,
20+
textAlign,
21+
variant,
22+
italic = false,
23+
noDecoration = false,
24+
transform,
25+
breakWord = false,
26+
truncate = false,
27+
weight,
28+
}) => {
29+
const text = textAlign ? `text--${textAlign}` : '';
30+
const textColor = variant ? `text--${variant}` : '';
31+
const textItalic = italic ? 'text--italic' : '';
32+
const textDecoration = noDecoration ? 'text-no-decoration' : '';
33+
const textType = transform ? `text--${transform}` : '';
34+
const textBreak = breakWord ? 'text--break' : '';
35+
const textTruncate = truncate ? 'text--truncate' : '';
36+
const textWeight = weight ? `text--${weight}` : '';
37+
return (
38+
<div
39+
className={clsx(
40+
'card__footer',
41+
className,
42+
text,
43+
textType,
44+
textColor,
45+
textItalic,
46+
textDecoration,
47+
textBreak,
48+
textTruncate,
49+
textWeight
50+
)}
51+
style={style}
52+
>
53+
{children}
54+
</div>
55+
);
56+
};
57+
export default CardFooter;

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { CSSProperties } from 'react';
2+
import clsx from 'clsx';
3+
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
interface CardImageProps {
5+
className?: string;
6+
style?: CSSProperties;
7+
cardImageUrl: string;
8+
alt: string;
9+
title: string;
10+
}
11+
const CardImage: React.FC<CardImageProps> = ({
12+
className,
13+
style,
14+
cardImageUrl,
15+
alt,
16+
title,
17+
}) => {
18+
const generatedCardImageUrl = useBaseUrl(cardImageUrl);
19+
return (
20+
<img
21+
className={clsx('card__image', className)}
22+
style={style}
23+
src={generatedCardImageUrl} alt={alt} title={title}
24+
/>
25+
);
26+
};
27+
export default CardImage;

‎src/components/Card/index.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { CSSProperties, ReactNode } from 'react'; // Import types for props
2+
import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner.
3+
// Define an interface for the component props
4+
interface CardProps {
5+
className?: string; // Custom classes for the container card
6+
style?: CSSProperties; // Custom styles for the container card
7+
children: ReactNode; // Content to be included within the card
8+
shadow?: 'lw' | 'md' | 'tl'; // Used to add shadow under your card Shadow levels: low (lw), medium (md), top-level (tl)
9+
}
10+
// Build the card component with the specified props
11+
const Card: React.FC<CardProps> = ({
12+
className,
13+
style,
14+
children,
15+
shadow,
16+
}) => {
17+
const cardShadow = shadow ? `item shadow--${shadow}` : '';
18+
return (
19+
<div className={clsx('card', className, cardShadow)} style={style}>
20+
{children}
21+
</div>
22+
);
23+
};
24+
export default Card;

‎src/components/Columns/Column/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
// Import clsx library for conditional classes.
3+
import clsx from 'clsx';
4+
5+
// Define the Column component as a function
6+
// with children, className, style as properties
7+
// Look https://infima.dev/docs/ for learn more
8+
// Style only affects the element inside the column, but we could have also made the same distinction as for the classes.
9+
export default function Column({ children , className, style }) {
10+
return (
11+
12+
<div className={clsx('col' , className)} style={style}>
13+
{children}
14+
</div>
15+
16+
);
17+
}

‎src/components/Columns/index.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { ReactNode, CSSProperties } from 'react';
2+
// Import clsx library for conditional classes.
3+
import clsx from 'clsx';
4+
interface ColumnsProps {
5+
children: ReactNode;
6+
className?: string;
7+
style?: CSSProperties;
8+
}
9+
// Define the Columns component as a function
10+
// with children, className, and style as properties
11+
// className will allow you to pass either your custom classes or the native infima classes https://infima.dev/docs/layout/grid.
12+
// Style" will allow you to either pass your custom styles directly, which can be an alternative to the "styles.module.css" file in certain cases.
13+
export default function Columns({ children, className, style }: ColumnsProps) {
14+
return (
15+
// This section encompasses the columns that we will integrate with children from a dedicated component to allow the addition of columns as needed
16+
<div className="container center">
17+
<div className={clsx('row', className)} style={style}>
18+
{children}
19+
</div>
20+
</div>
21+
);
22+
}

‎src/pages/community.md‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,58 @@ You can follow the work we plan to do using the [K3s Roadmap](https://github.com
6262

6363
## K3s Adopters
6464

65-
If you are adopter and want your logo to be shown here please open PR against: https://github.com/k3s-io/k3s/blob/master/ADOPTERS.md
6665

67-
[![Rocket Chat](https://cdn.prod.website-files.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg)](https://www.rocket.chat/)<a href="[default.asp](https://ayedo.de/)"><img src="https://ayedo.de/ayedo-logo-color.png" alt="drawing" width="150"/></a>[![Pits](https://www.pitsdatarecovery.com/wp-content/uploads/2024/08/PITS-logo_v2.svg)](https://www.pitsdatarecovery.com/)
68-
<a href="https://www.uffizzi.com/"><img src="https://cdn.prod.website-files.com/636dbee261df29d4438db278/637680bb6cfab675d6c91e52_header-logo-black.svg" alt="drawing" width="150"/></a><a href="https://kairos.io/"><img src="https://github.com/cncf/artwork/blob/main/projects/kairos/horizontal/color/kairos-horizontal-color.png?raw=true" alt="kairos logo" width="150"/></a>
66+
<Columns>
67+
<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>
73+
</Card>
74+
</Column>
75+
<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>
81+
</Card>
82+
</Column>
83+
<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>
89+
</Card>
90+
</Column>
91+
</Columns>
92+
<br/>
93+
<Columns>
94+
<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>
100+
</Card>
101+
</Column>
102+
<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>
108+
</Card>
109+
</Column>
110+
<!-- Blank for future adopters -->
111+
<Column>
112+
</Column>
113+
</Columns>
114+
115+
<br/>
116+
If you are adopter and want your logo to be shown here please open PR against: https://github.com/k3s-io/k3s/blob/master/ADOPTERS.md
69117

70118
---
71119

‎src/theme/MDXComponents.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
// Importing the original mapper + our components according to the Docusaurus doc
3+
import MDXComponents from '@theme-original/MDXComponents';
4+
import Card from '../components/Card';
5+
import CardFooter from '../components/Card/CardFooter';
6+
import CardImage from '../components/Card/CardImage';
7+
import Columns from '../components/Columns';
8+
import Column from '../components/Columns/Column';
9+
export default {
10+
// Reusing the default mapping
11+
...MDXComponents,
12+
Card,
13+
CardFooter,
14+
CardImage,
15+
Columns,
16+
Column,
17+
};

0 commit comments

Comments
 (0)