feat: add OFREP API section to Ecosystem page (#1049)

## This PR
- Adds a section to the Ecosystems page for listing the OFREP API
compatible vendors/projects.

---------

Signed-off-by: Jonathan Norris <[email protected]>

Author: jonathannorris

src/datasets/index.ts

@@ -1,15 +1,22 @@
 import { ECOSYSTEM_HOOKS } from './hooks';
+import { ECOSYSTEM_OFREP_APIS, OFREPElement } from './ofrep-api';
 import { ECOSYSTEM_PROVIDERS } from './providers';
 import { ECOSYSTEM_SDKS } from './sdks/ecosystem';
 import { EcosystemElement, Technology, Type } from './types';
 
-export const ECOSYSTEM: EcosystemElement[] = [...ECOSYSTEM_SDKS, ...ECOSYSTEM_PROVIDERS, ...ECOSYSTEM_HOOKS].map(
-  (s) => ({
-    // Creates a unique id per item for the search index
-    id: `${s.type}/${s.category}/${s.technology}/${s.vendor}/${s.href}`,
-    ...s,
-  }),
-);
+export const ECOSYSTEM: (EcosystemElement | OFREPElement)[] = [
+  ...ECOSYSTEM_SDKS,
+  ...ECOSYSTEM_PROVIDERS,
+  ...ECOSYSTEM_HOOKS,
+  ...ECOSYSTEM_OFREP_APIS,
+].map((s) => ({
+  // Creates a unique id per item for the search index
+  id:
+    'technology' in s && 'category' in s
+      ? `${s.type}/${s.category}/${s.technology}/${s.vendor}/${s.href}`
+      : `${s.type}/${s.vendor}/${s.href}`,
+  ...s,
+}));
 
 export const TECHNOLOGY_COLOR_MAP: Record<Technology, string> = {
   JavaScript: 'bg-yellow-50 text-yellow-600 ring-yellow-500/10',
@@ -33,4 +40,5 @@ export const TYPE_COLOR_MAP: Record<Type, string> = {
   Hook: 'bg-green-50 text-green-600 ring-green-500/10',
   Provider: 'bg-blue-50 text-blue-600 ring-blue-500/10',
   SDK: 'bg-violet-50 text-violet-600 ring-violet-500/10',
+  'OFREP API': 'bg-orange-50 text-orange-600 ring-orange-500/10',
 };

src/datasets/ofrep-api/devcycle.ts

@@ -0,0 +1,10 @@
+import DevCycleSvg from '@site/static/img/devcycle-no-fill.svg';
+import { OFREP_API } from '.';
+
+export const DevCycle: OFREP_API = {
+  name: 'DevCycle',
+  logo: DevCycleSvg,
+  description: 'DevCycle Bucketing API implementation of the OFREP API',
+  href: 'https://docs.devcycle.com/integrations/openfeature#openfeature-remote-evaluation-api',
+  vendorOfficial: true,
+};

src/datasets/ofrep-api/flagd.ts

@@ -0,0 +1,9 @@
+import FlagdSvg from '@site/static/img/flagd-no-fill.svg';
+import { OFREP_API } from '.';
+
+export const Flagd: OFREP_API = {
+  name: 'flagd',
+  logo: FlagdSvg,
+  href: 'https://flagd.dev/reference/flagd-ofrep/?h=ofrep',
+  vendorOfficial: true,
+};

src/datasets/ofrep-api/flipt.ts

@@ -0,0 +1,9 @@
+import FliptSvg from '@site/static/img/flipt-no-fill.svg';
+import { OFREP_API } from '.';
+
+export const Flipt: OFREP_API = {
+  name: 'Flipt',
+  logo: FliptSvg,
+  href: 'https://docs.flipt.io/integration/openfeature#remote-evaluation-protocol',
+  vendorOfficial: true,
+};

src/datasets/ofrep-api/goff.ts

@@ -0,0 +1,9 @@
+import GoffSvg from '@site/static/img/goff-no-fill.svg';
+import { OFREP_API } from '.';
+
+export const Goff: OFREP_API = {
+  name: 'GO Feature Flag',
+  logo: GoffSvg,
+  href: 'https://gofeatureflag.org/docs/sdk/ofrep',
+  vendorOfficial: true,
+};

src/datasets/ofrep-api/index.ts

@@ -0,0 +1,34 @@
+import type { ComponentType, SVGProps } from 'react';
+import { DevCycle } from './devcycle';
+import { EcosystemElement } from '../types';
+import { Goff } from './goff';
+import { Flipt } from './flipt';
+import { Flagd } from './flagd';
+export type OFREPElement = Omit<EcosystemElement, 'allTechnologies' | 'technology' | 'category'>;
+
+export const ECOSYSTEM_OFREP_APIS: OFREPElement[] = [DevCycle, Flipt, Goff, Flagd]
+  .map(
+    (api): OFREPElement => ({
+      vendor: api.name,
+      title: `${api.name} OFREP API`,
+      description:
+        typeof api.description === 'string' ? api.description : createDefaultDescription(api.name, api.vendorOfficial),
+      type: 'OFREP API',
+      logo: api.logo,
+      href: api.href,
+      vendorOfficial: api.vendorOfficial,
+    }),
+  )
+  .flat();
+
+function createDefaultDescription(vendor: string, official: boolean): string {
+  return official ? `The official ${vendor} OFREP API` : `A community-maintained ${vendor} OFREP API`;
+}
+
+export type OFREP_API = {
+  name: string;
+  logo: ComponentType<SVGProps<SVGSVGElement>>;
+  description?: string;
+  href: string;
+  vendorOfficial: boolean;
+};

src/datasets/types.ts

@@ -33,7 +33,7 @@ export type Technology =
   | 'SvelteKit';
 
 export type Category = 'Server' | 'Client';
-export type Type = 'Hook' | 'Provider' | 'SDK';
+export type Type = 'Hook' | 'Provider' | 'SDK' | 'OFREP API';
 
 export type SdkCompatibility = {
   /**

src/partials/ecosystem/hit.tsx

@@ -6,8 +6,9 @@ import Link from '@docusaurus/Link';
 import Pill from './pill';
 import { TECHNOLOGY_COLOR_MAP, TYPE_COLOR_MAP } from '../../datasets';
 import { EcosystemElement } from '../../datasets/types';
+import type { OFREPElement } from '../../datasets/ofrep-api';
 
-export default function Hit({ hit }: { hit: EcosystemElement }) {
+export default function Hit({ hit }: { hit: EcosystemElement | OFREPElement }) {
   const external = hit.href.startsWith('http');
   const Svg: ComponentType<SVGProps<SVGSVGElement>> = hit.logo;
 
@@ -25,11 +26,15 @@ export default function Hit({ hit }: { hit: EcosystemElement }) {
       <h3>{hit.title}</h3>
       <p className="leading-snug line-clamp-3">{hit.description}</p>
       <div className="flex gap-2 flex-wrap-reverse mt-auto pt-4">
-        <Pill color={TECHNOLOGY_COLOR_MAP[hit.technology]}>{hit.technology}</Pill>
-        {hit.parentTechnology && (
-          <Pill color={TECHNOLOGY_COLOR_MAP[hit.parentTechnology]}>{hit.parentTechnology}</Pill>
+        {'technology' in hit && (
+          <>
+            <Pill color={TECHNOLOGY_COLOR_MAP[hit.technology]}>{hit.technology}</Pill>
+            {hit.parentTechnology && (
+              <Pill color={TECHNOLOGY_COLOR_MAP[hit.parentTechnology]}>{hit.parentTechnology}</Pill>
+            )}
+            <Pill>{hit.category}</Pill>
+          </>
         )}
-        <Pill>{hit.category}</Pill>
         <Pill color={TYPE_COLOR_MAP[hit.type]}>{hit.type}</Pill>
       </div>
     </Link>