diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b607837bec..35e4673159 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -124,6 +124,51 @@ To add or remove a resource to this page, follow our [development guide](#develo The content for this page is located in [various directories under `src/code`](./src/code). Everything is written and formatted in [Markdown](https://nextra.site/docs/guide/markdown). +### Add a vendor to the Vendors page + +The [Vendors page](https://graphql.org/resources/vendors) lists GraphQL companies in one place. It is separate from the [Code page](#add-a-library-tool-or-service-to-the-code-page), which catalogs individual libraries, tools, and services. + +#### When to list a vendor here + +- Add a **company** that builds GraphQL products or platforms. +- Add individual **products** to the Code page under [`src/code`](./src/code) instead. +- Add vendor **community chat channels** to the [Community page](#add-a-resource-to-the-community-page) (`vendor-channels.mdx`). + +#### General guidelines + +**Adding a vendor:** + +- Include a logo (SVG preferred), company name, short description, and website URL. +- Descriptions should be 1–3 sentences, plain text, and written in a neutral tone. Avoid marketing superlatives. +- Include a GitHub organization or repository link when relevant. +- Logo files should be recognizable brand marks or icons suitable for display at roughly 32×32px. Full wordmarks are acceptable when sourced from official brand assets. + +**Removing a vendor:** + +- Companies that no longer exist or have shut down GraphQL-related products +- Any website link that consistently 404s + +#### Workflow + +To add or remove a vendor, follow our [development guide](#development-guide) to [open a pull request](https://github.com/graphql/graphql.github.io/pulls). + +1. Add a logo using one of these patterns in [`vendor-logo.tsx`](<./src/app/(main)/resources/vendors/vendor-logo.tsx>): + - **Icon component**: If an SVG icon already exists in [`src/icons/`](../../icons/), register the slug in the `iconLogos` map (see Apollo, ChilliCream, Graphile, Stellate). + - **SVG file**: Add an SVG to [`public/img/vendors/`](../../public/img/vendors/), import it with the `?svgr` suffix, and register the slug in the `iconLogos` map (square brand marks) or `wordmarkLogos` map (wide wordmarks). SVGs should use `fill="currentColor"` so the mark inherits the surrounding text color and stays legible in both light and dark mode (see the WunderGraph mark and the Hasura/The Guild/Hygraph/Tyk wordmarks). +2. Add an entry to the `vendors` array in [`src/resources/vendors/data.ts`](./src/resources/vendors/data.ts): + +```ts +{ + name: "Example Co", + slug: "example-co", + description: "One to three sentences describing what the company builds.", + url: "https://example.com/", + github: "example-org", +}, +``` + +The `slug` links the entry to its logo registered in `vendor-logo.tsx`. The `github` field is optional. Descriptions support light Markdown (links, bold, inline code). Entries are sorted alphabetically by `name` automatically. + ### Add a resource to the Community page The [Community page](https://graphql.org/community) highlights resources and groups that help people get more involved with GraphQL. diff --git a/public/img/vendors/apollo.svg b/public/img/vendors/apollo.svg new file mode 100644 index 0000000000..61da635407 --- /dev/null +++ b/public/img/vendors/apollo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/vendors/aws.svg b/public/img/vendors/aws.svg new file mode 100644 index 0000000000..516a58c9f6 --- /dev/null +++ b/public/img/vendors/aws.svg @@ -0,0 +1,3 @@ + + aws + diff --git a/public/img/vendors/chillicream.svg b/public/img/vendors/chillicream.svg new file mode 100644 index 0000000000..f9dd86e13f --- /dev/null +++ b/public/img/vendors/chillicream.svg @@ -0,0 +1,16 @@ + + + + + + + + + \ No newline at end of file diff --git a/public/img/vendors/dgraph.svg b/public/img/vendors/dgraph.svg new file mode 100644 index 0000000000..b71185c1bb --- /dev/null +++ b/public/img/vendors/dgraph.svg @@ -0,0 +1,3 @@ + + Dgraph + diff --git a/public/img/vendors/escape.svg b/public/img/vendors/escape.svg new file mode 100644 index 0000000000..bfeeae89fb --- /dev/null +++ b/public/img/vendors/escape.svg @@ -0,0 +1,3 @@ + + Escape + diff --git a/public/img/vendors/grafbase.svg b/public/img/vendors/grafbase.svg new file mode 100644 index 0000000000..0bddee8541 --- /dev/null +++ b/public/img/vendors/grafbase.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/img/vendors/graphile.svg b/public/img/vendors/graphile.svg new file mode 100644 index 0000000000..09aab76559 --- /dev/null +++ b/public/img/vendors/graphile.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/public/img/vendors/graphql-security.svg b/public/img/vendors/graphql-security.svg new file mode 100644 index 0000000000..978bcfd3c6 --- /dev/null +++ b/public/img/vendors/graphql-security.svg @@ -0,0 +1,3 @@ + + GraphQL.Security + diff --git a/public/img/vendors/hasura.svg b/public/img/vendors/hasura.svg new file mode 100644 index 0000000000..102b229e4e --- /dev/null +++ b/public/img/vendors/hasura.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/img/vendors/hygraph.svg b/public/img/vendors/hygraph.svg new file mode 100644 index 0000000000..fc4e6ba852 --- /dev/null +++ b/public/img/vendors/hygraph.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/img/vendors/kong.svg b/public/img/vendors/kong.svg new file mode 100644 index 0000000000..2c328b1e55 --- /dev/null +++ b/public/img/vendors/kong.svg @@ -0,0 +1 @@ + diff --git a/public/img/vendors/the-guild.svg b/public/img/vendors/the-guild.svg new file mode 100644 index 0000000000..272513673e --- /dev/null +++ b/public/img/vendors/the-guild.svg @@ -0,0 +1,8 @@ + + + + diff --git a/public/img/vendors/tyk.svg b/public/img/vendors/tyk.svg new file mode 100644 index 0000000000..190571c9e7 --- /dev/null +++ b/public/img/vendors/tyk.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/img/vendors/wundergraph.svg b/public/img/vendors/wundergraph.svg new file mode 100644 index 0000000000..ccd2941a21 --- /dev/null +++ b/public/img/vendors/wundergraph.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/(main)/resources/vendors/page.tsx b/src/app/(main)/resources/vendors/page.tsx new file mode 100644 index 0000000000..1b32bef480 --- /dev/null +++ b/src/app/(main)/resources/vendors/page.tsx @@ -0,0 +1,90 @@ +import Link from "next/link" + +import { NavbarFixed } from "@/components/navbar/navbar-fixed" +import { LookingForMore } from "@/components/looking-for-more" +import { Breadcrumbs } from "@/_design-system/breadcrumbs" +import { readVendors } from "@/resources/vendors/data" + +import { ResourcesHero } from "../resources-hero" +import { VendorCard } from "./vendor-card" + +export const metadata = { + title: "Vendors", + description: + "Discover companies building GraphQL products and platforms in the GraphQL ecosystem.", +} + +export default async function VendorsPage() { + const vendors = await readVendors() + + return ( +
+ + + +
+ + +
+

Browse GraphQL Vendors

+

+ Explore companies in the GraphQL ecosystem. For product-level + listings, see the{" "} + + Tools & Libraries + {" "} + catalog. For vendor community chat channels, visit{" "} + + Vendor Channels + + . +

+
+ +
    + {vendors.map(vendor => ( + + ))} +
+ + +
+
+ ) +} diff --git a/src/app/(main)/resources/vendors/vendor-card.tsx b/src/app/(main)/resources/vendors/vendor-card.tsx new file mode 100644 index 0000000000..222e9627b6 --- /dev/null +++ b/src/app/(main)/resources/vendors/vendor-card.tsx @@ -0,0 +1,79 @@ +import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr" +import { GitHubIcon } from "@/icons" +import { MicroMarkdown } from "@/components/micro-markdown" +import type { VendorMetadata } from "@/resources/vendors/types" + +import { VendorLogo, hasVendorLogo } from "./vendor-logo" + +function githubUrl(github: string) { + if (github.startsWith("http")) return github + return `https://github.com/${github}` +} + +export function VendorCard({ vendor }: { vendor: VendorMetadata }) { + const showLogo = hasVendorLogo(vendor.slug) + + return ( +
  • +
    + + {showLogo ? ( + + + + ) : null} +

    + {vendor.name} +

    +     + + + +
    +
    + + Visit website + + {vendor.github ? ( + + + + ) : null} +
    + + + +
    +
    +
    • + ) +} diff --git a/src/app/(main)/resources/vendors/vendor-logo.tsx b/src/app/(main)/resources/vendors/vendor-logo.tsx new file mode 100644 index 0000000000..0b49bc61c0 --- /dev/null +++ b/src/app/(main)/resources/vendors/vendor-logo.tsx @@ -0,0 +1,51 @@ +import HasuraWordmark from "public/img/vendors/hasura.svg?svgr" +import HygraphWordmark from "public/img/vendors/hygraph.svg?svgr" +import KongMark from "public/img/vendors/kong.svg?svgr" +import TheGuildWordmark from "public/img/vendors/the-guild.svg?svgr" +import TykWordmark from "public/img/vendors/tyk.svg?svgr" +import WundergraphMark from "public/img/vendors/wundergraph.svg?svgr" + +import { ApolloIcon, ChillicreamIcon, GraphileIcon } from "@/icons" + +type LogoComponent = ({ className }: { className?: string }) => React.ReactNode + +const iconLogos: Record = { + apollo: ApolloIcon, + chillicream: ChillicreamIcon, + graphile: GraphileIcon, + kong: KongMark, + wundergraph: WundergraphMark, +} + +const wordmarkLogos: Record = { + hasura: HasuraWordmark, + "the-guild": TheGuildWordmark, + hygraph: HygraphWordmark, + tyk: TykWordmark, +} + +const logoClassName = "shrink-0" + +export function hasVendorLogo(slug: string) { + return slug in iconLogos || slug in wordmarkLogos +} + +export function VendorLogo({ slug }: { slug: string }) { + const Icon = iconLogos[slug] + + if (Icon) { + return + } + + const Wordmark = wordmarkLogos[slug] + if (Wordmark) { + return ( + + ) + } + + return null +} diff --git a/src/icons/index.ts b/src/icons/index.ts index aaed687191..0c5a6b56e9 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -28,6 +28,7 @@ export { default as StellateIcon } from "./stellate.svg" export { default as ChillicreamIcon } from "./chillicream.svg" export { default as ApolloIcon } from "./apollo.svg" export { default as GraphileIcon } from "./graphile.svg" +export { default as WundergraphIcon } from "./wundergraph.svg" export { default as CodeIcon } from "./code.svg" export { default as TextIcon } from "./text.svg" export { default as LocationIcon } from "./location.svg" diff --git a/src/icons/wundergraph.svg b/src/icons/wundergraph.svg new file mode 100644 index 0000000000..0213e103cd --- /dev/null +++ b/src/icons/wundergraph.svg @@ -0,0 +1,8 @@ + + + diff --git a/src/pages/_meta.tsx b/src/pages/_meta.tsx index 8e59c4342c..cb878d1b9e 100644 --- a/src/pages/_meta.tsx +++ b/src/pages/_meta.tsx @@ -28,6 +28,7 @@ export default { // for now, until we have bandwidth to migrate it to App Router href: "/community/tools-and-libraries", }, + vendors: "Vendors", spec: { type: "page", title: "Specification", diff --git a/src/pages/community/vendor-channels.mdx b/src/pages/community/vendor-channels.mdx index 1755e5fea7..8fb47f704f 100644 --- a/src/pages/community/vendor-channels.mdx +++ b/src/pages/community/vendor-channels.mdx @@ -3,6 +3,7 @@ import { ChillicreamIcon, ApolloIcon, GraphileIcon, + WundergraphIcon, } from "../../icons" import { Cards } from '../../components/cards' @@ -32,5 +33,10 @@ The following channels are maintained by vendors, and may be a good place to fin title: "Stellate Discord", link: "https://go.stellate.co/community", }, + { + icon: WundergraphIcon, + title: "WunderGraph Discord", + link: "https://discord.com/invite/Jjmc8TC", + }, ]} /> diff --git a/src/resources/vendors/data.ts b/src/resources/vendors/data.ts new file mode 100644 index 0000000000..4dcba46bca --- /dev/null +++ b/src/resources/vendors/data.ts @@ -0,0 +1,159 @@ +import { cache } from "react" + +import { VendorMetadata } from "./types" + +/** + * Single source of truth for the GraphQL vendors directory. + * + * Entries are a mix of companies (e.g. Apollo, The Guild) and product/platform + * brands (e.g. Azure API Management, Kong Gateway, WSO2 API Manager) with + * free-form descriptions. This is intentionally decoupled from the `/code` + * Tools & Libraries catalog, which catalogs individual products/services — a + * company (e.g. Apollo) and one of its products (e.g. Apollo Router) are + * different things and can carry different copy. + * + * Descriptions support light Markdown (links, bold, inline code) and should + * stay within a sentence or two. The `slug` maps to a logo in `vendor-logo.tsx`. + */ +const vendors: VendorMetadata[] = [ + { + name: "Apigee", + slug: "apigee", + description: + "Apigee is Google Cloud's API management platform, letting teams proxy, secure, and observe GraphQL APIs with policies for validation, threat protection, and analytics.", + url: "https://cloud.google.com/apigee", + github: "apigee", + }, + { + name: "Apollo", + slug: "apollo", + description: + "Apollo builds an end-to-end GraphQL platform — Apollo Server, Apollo Client, the Apollo Router, and the GraphOS schema management and observability suite — for building and scaling federated GraphQL APIs, with over 1 billion open-source downloads.", + url: "https://www.apollographql.com/", + github: "apollographql", + }, + { + name: "AWS", + slug: "aws", + description: + "AWS offers AWS AppSync, a fully managed service for building GraphQL APIs with real-time subscriptions, offline data synchronization, and fine-grained security controls.", + url: "https://aws.amazon.com/appsync/", + }, + { + name: "Azure API Management", + slug: "azure-api-management", + description: + "Azure API Management is Microsoft's fully managed API gateway, with support for pass-through and synthetic GraphQL APIs and policies for security, caching, rate limiting, and GraphQL request validation.", + url: "https://azure.microsoft.com/en-us/products/api-management", + github: "Azure", + }, + { + name: "ChilliCream", + slug: "chillicream", + description: + "ChilliCream builds the Hot Chocolate GraphQL server for .NET, the Strawberry Shake client, and Banana Cake Pop, an IDE for exploring and managing GraphQL APIs.", + url: "https://chillicream.com/", + github: "ChilliCream", + }, + { + name: "Dgraph", + slug: "dgraph", + description: + "Dgraph is a distributed, native GraphQL database with a graph backend, designed from the ground up for GraphQL and optimized for speed and scale.", + url: "https://dgraph.io/", + github: "dgraph-io", + }, + { + name: "Escape", + slug: "escape", + description: + "Escape provides automated GraphQL security testing and compliance, scanning endpoints for vulnerabilities during development across any language or framework.", + url: "https://escape.tech/", + }, + { + name: "Graphile", + slug: "graphile", + description: + "Graphile builds PostGraphile and related open-source tooling that generate a powerful, extensible, and performant GraphQL API from a PostgreSQL database.", + url: "https://www.graphile.org/", + github: "graphile", + }, + { + name: "GraphQL.Security", + slug: "graphql-security", + description: + "GraphQL.Security offers a fast, free scan that runs a battery of security tests against a GraphQL endpoint — no login required.", + url: "https://graphql.security/", + }, + { + name: "Hasura", + slug: "hasura", + description: + "Hasura connects to your databases and services to instantly deliver production-ready GraphQL APIs with built-in authorization and real-time capabilities.", + url: "https://hasura.io/", + github: "hasura", + }, + { + name: "Hygraph", + slug: "hygraph", + description: + "Hygraph is a federated content platform that unifies content and data from multiple sources and exposes it through a single GraphQL API.", + url: "https://hygraph.com/", + }, + { + name: "IBM StepZen", + slug: "stepzen", + description: + "IBM API Connect for GraphQL, formerly StepZen, lets teams declaratively build and deploy GraphQL APIs that compose data from REST services, databases, and other GraphQL endpoints.", + url: "https://www.ibm.com/products/api-connect/graphql", + github: "stepzen-dev", + }, + { + name: "Kong Gateway", + slug: "kong", + description: + "Kong Gateway is a cloud-native API gateway that fronts GraphQL APIs with plugins for proxy caching, rate limiting, authentication, and observability.", + url: "https://konghq.com/products/kong-gateway", + github: "Kong", + }, + { + name: "The Guild", + slug: "the-guild", + description: + "Builds [[Hive](https://the-guild.dev/graphql/hive)](https://the-guild.dev/graphql/hive), the fully open-source (MIT) GraphQL federation platform — schema registry, gateway, router, and observability — run self-hosted and in the cloud at some of the world's largest enterprises, exposing GraphQL APIs as governed MCP tools for AI agents. Maintains many of the ecosystem's most-used libraries, including [[GraphQL Code Generator](https://the-guild.dev/graphql/codegen)](https://the-guild.dev/graphql/codegen), [[Yoga](https://the-guild.dev/graphql/yoga-server)](https://the-guild.dev/graphql/yoga-server), [[Mesh](https://the-guild.dev/graphql/mesh)](https://the-guild.dev/graphql/mesh), and [[GraphQL Tools](https://the-guild.dev/graphql/tools)](https://the-guild.dev/graphql/tools), with tens of millions of downloads every month. Also runs [[Stellate](https://stellate.co/)](https://stellate.co), the CDN for GraphQL.", + url: "https://the-guild.dev/", + github: "the-guild-org", + }, + { + name: "Tyk", + slug: "tyk", + description: + "Tyk is an open-source API management platform with GraphQL support for proxying, federation, subscriptions, and its Universal Data Graph.", + url: "https://tyk.io/", + github: "TykTechnologies", + }, + { + name: "WSO2 API Manager", + slug: "wso2-api-manager", + description: + "WSO2 API Manager is an open-source platform for designing, securing, and managing APIs, with support for GraphQL queries, mutations, and subscriptions alongside REST.", + url: "https://wso2.com/api-manager/", + github: "wso2", + }, + { + name: "WunderGraph", + slug: "wundergraph", + description: + "WunderGraph builds Cosmo, an open-source platform for GraphQL Federation at scale with a schema registry, composition, routing, and analytics.", + url: "https://wundergraph.com/", + github: "wundergraph", + }, +] + +export const readVendors = cache(async () => + vendors + .map(vendor => VendorMetadata.assert(vendor)) + .sort((a, b) => + a.name.localeCompare(b.name, "en", { sensitivity: "base" }), + ), +) diff --git a/src/resources/vendors/types.ts b/src/resources/vendors/types.ts new file mode 100644 index 0000000000..c0445f0c0d --- /dev/null +++ b/src/resources/vendors/types.ts @@ -0,0 +1,11 @@ +import { type } from "arktype" + +export const VendorMetadata = type({ + name: "string>0", + slug: "string>0", + description: "string>0", + url: "string.url", + "github?": "string>0", +}) + +export type VendorMetadata = typeof VendorMetadata.inferOut