From 22d9100847883450a92a80ab79020b28cbf6dc1c Mon Sep 17 00:00:00 2001 From: thisisobate Date: Mon, 12 Feb 2024 18:47:18 +0100 Subject: [PATCH 1/4] Feat: Create support page Signed-off-by: thisisobate --- docusaurus.config.ts | 4 ++++ src/pages/support-training.tsx | 29 +++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 src/pages/support-training.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c05462d6..19cb3d67 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -72,6 +72,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/pages/support-training.tsx b/src/pages/support-training.tsx new file mode 100644 index 00000000..053bb873 --- /dev/null +++ b/src/pages/support-training.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { OpenFeatureComponentCard } from '../components/custom/OpenFeatureComponentCard'; +import { faEbay, faYoutube } from '@fortawesome/free-brands-svg-icons'; +import Layout from '@theme/Layout'; + +export default function Support(): JSX.Element { + return ( + +
+
+

Support & Training

+
+
+

Courses

+
+ +
+
+
+

Commercial Support

+
+ +
+
+
+ + ) + } + \ No newline at end of file From 3b96b22c492a39584d0736aac0ce2cf9d08f557f Mon Sep 17 00:00:00 2001 From: thisisobate Date: Mon, 19 Feb 2024 22:25:25 +0100 Subject: [PATCH 2/4] chore: make data dynamic Signed-off-by: thisisobate --- .../custom/OpenFeatureComponentCard/index.tsx | 30 ++++++-- src/datasets/adopters.ts | 23 +++++++ src/datasets/learning-resources.ts | 21 ++++++ src/pages/support-training.tsx | 38 ++++++++--- ...natrace_Logo_color_positive_horizontal.svg | 68 +++++++++++++++++++ static/img/adopters/EBay_logo.svg | 27 ++++++++ 6 files changed, 191 insertions(+), 16 deletions(-) create mode 100644 src/datasets/adopters.ts create mode 100644 src/datasets/learning-resources.ts create mode 100644 static/img/adopters/Dynatrace_Logo_color_positive_horizontal.svg create mode 100644 static/img/adopters/EBay_logo.svg diff --git a/src/components/custom/OpenFeatureComponentCard/index.tsx b/src/components/custom/OpenFeatureComponentCard/index.tsx index 8cd7e907..1d86a556 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,12 +33,30 @@ 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}

+ {!props.image && !props.svgImage && ( + + )} +

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

{this.props.description}

{props.vendorOfficial ? ( diff --git a/src/datasets/adopters.ts b/src/datasets/adopters.ts new file mode 100644 index 00000000..704aaf85 --- /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 00000000..2d6bbe1f --- /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 index 053bb873..941432b9 100644 --- a/src/pages/support-training.tsx +++ b/src/pages/support-training.tsx @@ -1,29 +1,45 @@ import React from 'react'; import { OpenFeatureComponentCard } from '../components/custom/OpenFeatureComponentCard'; -import { faEbay, faYoutube } from '@fortawesome/free-brands-svg-icons'; 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

+
+
+

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.

+
+ + +
- ) + ); } \ 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 00000000..23933ec9 --- /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 00000000..c484c1f8 --- /dev/null +++ b/static/img/adopters/EBay_logo.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + From 4b83cc05a9dbac3c6ea8e90459b14bc615b8c45f Mon Sep 17 00:00:00 2001 From: thisisobate Date: Wed, 21 Feb 2024 22:08:51 +0100 Subject: [PATCH 3/4] chore: fix alignment for logos Signed-off-by: thisisobate --- .../custom/OpenFeatureComponentCard/index.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/custom/OpenFeatureComponentCard/index.tsx b/src/components/custom/OpenFeatureComponentCard/index.tsx index 1d86a556..2ff4ef94 100644 --- a/src/components/custom/OpenFeatureComponentCard/index.tsx +++ b/src/components/custom/OpenFeatureComponentCard/index.tsx @@ -48,7 +48,7 @@ export class OpenFeatureComponentCard extends React.Component )} {props.svgImage && ( -
+
)} @@ -56,16 +56,21 @@ export class OpenFeatureComponentCard extends React.Component )} -

{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. - - )} -
+ + {!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. + + )} +
+ + )} ); } From 448b2e132bc1bb5a509e7bd8f21455d33ffbcde4 Mon Sep 17 00:00:00 2001 From: thisisobate Date: Wed, 21 Feb 2024 22:18:02 +0100 Subject: [PATCH 4/4] chore: udate cta btn for support page Signed-off-by: thisisobate --- src/pages/support-training.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/support-training.tsx b/src/pages/support-training.tsx index 941432b9..f2c9f042 100644 --- a/src/pages/support-training.tsx +++ b/src/pages/support-training.tsx @@ -33,8 +33,11 @@ export default function Support(): JSX.Element {

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