diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 46b95087b..bc7bfa5aa 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -73,6 +73,10 @@ const themeConfig: ThemeCommonConfig & AlgoliaThemeConfig = { docsPluginId: 'community', label: 'Community', }, + { + to: '/support-training', + label: 'Support & Training', + }, { type: 'doc', docId: 'tutorials/five-minutes-to-feature-flags', diff --git a/src/components/custom/OpenFeatureComponentCard/index.tsx b/src/components/custom/OpenFeatureComponentCard/index.tsx index 8cd7e907a..2ff4ef943 100644 --- a/src/components/custom/OpenFeatureComponentCard/index.tsx +++ b/src/components/custom/OpenFeatureComponentCard/index.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { ComponentType, SVGProps } from 'react'; import { FontAwesomeCardData, SvgCardData, SvgOrFonticon } from '../SvgOrFonticon'; import { faCircleCheck, faSadCry } from '@fortawesome/free-regular-svg-icons'; import styles from './styles.module.css'; @@ -9,7 +9,7 @@ import Link from '@docusaurus/Link'; type CardData = { href: string; title: string; - description: string; + description?: string; /** * Cards with "vendorOfficial:true" will have a badge indicating they are vendor maintained and supported. * This should only be used for providers/hooks released and maintained by vendors, not in OpenFeature contrib repositories. @@ -20,6 +20,8 @@ type CardData = { * Defaults to false. */ showLast?: boolean; + image?: string; + svgImage?: ComponentType>; }; export type OpenFeatureComponentCardData = CardData & (SvgCardData | FontAwesomeCardData); @@ -31,21 +33,44 @@ export class OpenFeatureComponentCard extends React.Component; const external = props.href.startsWith('http'); + let SvgComponent: ComponentType>; + + if (props.svgImage) { + SvgComponent = props.svgImage; + } + return ( -
{external ? '🔗' : ''}
+
{external && !props.image && !props.svgImage ? '🔗' : ''}
+ {props.image && ( +
+ {`${props.title} +
+ )} + {props.svgImage && ( +
+ +
+ )} - -

{this.props.title}

-

{this.props.description}

-
- {props.vendorOfficial ? ( - - ) : ( - // visibility: 'hidden' is important here. This icon is only here for consistent sizing. - - )} -
+ {!props.image && !props.svgImage && ( + + )} + + {!props.image && !props.svgImage && ( + <> +

{this.props.title && !props.image && !props.svgImage ? this.props.title : ''}

+

{this.props.description}

+
+ {props.vendorOfficial ? ( + + ) : ( + // visibility: 'hidden' is important here. This icon is only here for consistent sizing. + + )} +
+ + )} ); } diff --git a/src/datasets/adopters.ts b/src/datasets/adopters.ts new file mode 100644 index 000000000..704aaf853 --- /dev/null +++ b/src/datasets/adopters.ts @@ -0,0 +1,23 @@ +import EbaySvg from '@site/static/img/adopters/EBay_logo.svg'; +import DynatraceSvg from '@site/static/img/adopters/Dynatrace_Logo_color_positive_horizontal.svg'; +import { ComponentType, SVGProps } from 'react'; + +type AdoptersType = { + name: string; + href: string; + svg?: ComponentType>; + image?: string; +}; + +export const Adopters: AdoptersType[] = [ + { + name: 'ebay', + href: 'http://ebay.com/', + svg: EbaySvg, + }, + { + name: 'Dynatrace', + href: 'http://dynatrace.com/', + svg: DynatraceSvg, + }, +]; \ No newline at end of file diff --git a/src/datasets/learning-resources.ts b/src/datasets/learning-resources.ts new file mode 100644 index 000000000..2d6bbe1f5 --- /dev/null +++ b/src/datasets/learning-resources.ts @@ -0,0 +1,21 @@ +import { ComponentType, SVGProps } from 'react'; +import { IconDefinition as BrandsIconDefinition } from '@fortawesome/free-brands-svg-icons'; +import { IconDefinition as FreeIconDefinition } from '@fortawesome/free-solid-svg-icons'; +import { faYoutube } from '@fortawesome/free-brands-svg-icons'; + +type ResourcesType = { + title: string; + description?: string; + href: string; + svg?: ComponentType>; + iconDefinition?: BrandsIconDefinition | FreeIconDefinition; +}; + +export const LearningResources: ResourcesType[] = [ + { + title: 'OpenFeature Basics and Core concepts', + description: 'This youtube playlist covers the fundamental of openFeature', + href: 'https://www.youtube.com/watch?v=heQ83k15ZE4&list=PLiQt8D1ofl8zs2zoiMNI8WRdNQ8GUy84I', + iconDefinition: faYoutube, + } +]; \ No newline at end of file diff --git a/src/pages/support-training.tsx b/src/pages/support-training.tsx new file mode 100644 index 000000000..f2c9f0428 --- /dev/null +++ b/src/pages/support-training.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { OpenFeatureComponentCard } from '../components/custom/OpenFeatureComponentCard'; +import Layout from '@theme/Layout'; +import { Adopters } from '../datasets/adopters'; +import { LearningResources } from '../datasets/learning-resources'; +import Link from '@docusaurus/Link'; + +export default function Support(): JSX.Element { + return ( + +
+
+

Support & Training

+
+
+

Courses

+
+ {LearningResources.map(resource => ( + + ))} +
+
+
+

Commercial Support

+
+ {Adopters.map(adopter => ( + + ))} + +
+
+
+

Add a resource

+

Anyone who has developed an OpenFeature training program or offers related services can add themselves to this page by opening a pull request against it.

+
+ + ADD YOUR COMPANY + +
+
+
+ + ); + } + \ No newline at end of file diff --git a/static/img/adopters/Dynatrace_Logo_color_positive_horizontal.svg b/static/img/adopters/Dynatrace_Logo_color_positive_horizontal.svg new file mode 100644 index 000000000..23933ec9c --- /dev/null +++ b/static/img/adopters/Dynatrace_Logo_color_positive_horizontal.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/img/adopters/EBay_logo.svg b/static/img/adopters/EBay_logo.svg new file mode 100644 index 000000000..c484c1f8d --- /dev/null +++ b/static/img/adopters/EBay_logo.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + +