Add adopter card grid

src/components/Card/CardFooter/index.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx';
+interface CardFooterProps {
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+  textAlign?: string;
+  variant?: string;
+  italic?: boolean;
+  noDecoration?: boolean;
+  transform?: string;
+  breakWord?: boolean;
+  truncate?: boolean;
+  weight?: string;
+}
+const CardFooter: React.FC<CardFooterProps> = ({
+  className,
+  style,
+  children,
+  textAlign,
+  variant,
+  italic = false,
+  noDecoration = false,
+  transform,
+  breakWord = false,
+  truncate = false,
+  weight,
+}) => {
+  const text = textAlign ? `text--${textAlign}` : '';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+  return (
+    <div
+      className={clsx(
+        'card__footer',
+        className,
+        text,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+export default CardFooter;

src/components/Card/CardImage/index.tsx

@@ -0,0 +1,27 @@
+import React, { CSSProperties } from 'react';
+import clsx from 'clsx';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+interface CardImageProps {
+  className?: string;
+  style?: CSSProperties;
+  cardImageUrl: string;
+  alt: string;
+  title: string;
+}
+const CardImage: React.FC<CardImageProps> = ({
+  className,
+  style,
+  cardImageUrl,
+  alt,
+  title,
+}) => {
+  const generatedCardImageUrl = useBaseUrl(cardImageUrl);
+  return (
+    <img
+      className={clsx('card__image', className)}
+      style={style}
+      src={generatedCardImageUrl} alt={alt} title={title}
+    />
+  );
+};
+export default CardImage;

src/components/Card/index.tsx

@@ -0,0 +1,24 @@
+import React, { CSSProperties, ReactNode } from 'react'; // Import types for props
+import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner.
+// Define an interface for the component props
+interface CardProps {
+  className?: string; // Custom classes for the container card
+  style?: CSSProperties; // Custom styles for the container card
+  children: ReactNode; // Content to be included within the card
+  shadow?: 'lw' | 'md' | 'tl'; // Used to add shadow under your card Shadow levels: low (lw), medium (md), top-level (tl)
+}
+// Build the card component with the specified props
+const Card: React.FC<CardProps> = ({
+  className,
+  style,
+  children,
+  shadow,
+}) => {
+  const cardShadow = shadow ? `item shadow--${shadow}` : '';
+  return (
+    <div className={clsx('card', className, cardShadow)} style={style}>
+      {children}
+    </div>
+  );
+};
+export default Card;

src/components/Columns/Column/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+// Import clsx library for conditional classes.
+import clsx from 'clsx'; 
+
+// Define the Column component as a function 
+// with children, className, style as properties
+// Look https://infima.dev/docs/ for learn more
+// Style only affects the element inside the column, but we could have also made the same distinction as for the classes.
+export default function Column({ children , className, style  }) {
+  return (
+
+      <div className={clsx('col' , className)} style={style}>
+        {children}
+      </div>
+
+  );
+}

src/components/Columns/index.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode, CSSProperties } from 'react';
+// Import clsx library for conditional classes.
+import clsx from 'clsx'; 
+interface ColumnsProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+// Define the Columns component as a function 
+// with children, className, and style as properties
+// className will allow you to pass either your custom classes or the native infima classes https://infima.dev/docs/layout/grid.
+// 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.
+export default function Columns({ children, className, style }: ColumnsProps) {
+  return (
+  // This section encompasses the columns that we will integrate with children from a dedicated component to allow the addition of columns as needed 
+    <div className="container center">
+      <div className={clsx('row', className)} style={style}>
+        {children}    
+      </div>
+    </div>
+  );
+}

src/pages/community.md

@@ -62,10 +62,58 @@ You can follow the work we plan to do using the [K3s Roadmap](https://github.com
 
 ## K3s Adopters
 
-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
 
-[![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/)
-<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>
+<Columns>
+  <Column>
+    <Card style={{width: '150px'}}>
+      <CardImage style={{height: '150px'}} cardImageUrl='https://cdn.prod.website-files.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg'/>
+      <CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
+        <a href="https://www.rocket.chat/" target="_blank" className='button button--info'>Website</a>
+      </CardFooter>
+    </Card>
+  </Column>
+  <Column>
+    <Card style={{width: '150px'}}>
+      <CardImage cardImageUrl='https://ayedo.de/ayedo-logo-color.png'/>
+      <CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
+          <a href="https://ayedo.de/" target="_blank" className='button button--info'>Website</a>
+      </CardFooter>
+    </Card>
+  </Column>
+  <Column>
+    <Card style={{width: '150px'}}>
+      <CardImage style={{height: '150px'}} cardImageUrl='https://www.pitsdatarecovery.com/wp-content/uploads/2024/08/PITS-logo_v2.svg'/>
+      <CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
+          <a href="https://www.pitsdatarecovery.com/" target="_blank" className='button button--info'>Website</a>
+      </CardFooter>
+    </Card>
+  </Column>
+</Columns>
+<br/>
+<Columns>
+  <Column>
+    <Card style={{width: '150px'}}>
+      <CardImage style={{height: '150px'}} cardImageUrl='https://cdn.prod.website-files.com/636dbee261df29d4438db278/637680bb6cfab675d6c91e52_header-logo-black.svg'/>
+      <CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
+          <a href="https://www.uffizzi.com/" target="_blank" className='button button--info'>Website</a>
+      </CardFooter>
+    </Card>
+  </Column>
+  <Column>
+    <Card style={{width: '150px'}}>
+      <CardImage style={{height: '150px'}} cardImageUrl='https://github.com/cncf/artwork/blob/main/projects/kairos/stacked/color/kairos-stacked-color.svg?raw=true'/>
+      <CardFooter style={{ backgroundColor: '#ffc61c' }} className='text--center'>
+          <a href="https://kairos.io/" target="_blank" className='button button--info'>Website</a>
+      </CardFooter>
+    </Card>
+  </Column>
+  <!-- Blank for future adopters -->
+  <Column>
+  </Column>
+</Columns>
+
+<br/>
+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
 
 ---
 

src/theme/MDXComponents.tsx

@@ -0,0 +1,17 @@
+  import React from 'react';
+  // Importing the original mapper + our components according to the Docusaurus doc
+  import MDXComponents from '@theme-original/MDXComponents';
+  import Card from '../components/Card';
+  import CardFooter from '../components/Card/CardFooter';
+  import CardImage from '../components/Card/CardImage';
+  import Columns from '../components/Columns';
+  import Column from '../components/Columns/Column';
+  export default {
+    // Reusing the default mapping
+    ...MDXComponents,
+    Card, 
+    CardFooter,
+    CardImage,
+    Columns,
+    Column,
+  };