From 2fc3a9b5032dd7a84901efd571128ee059a33b62 Mon Sep 17 00:00:00 2001 From: Brendan Bondurant Date: Mon, 29 Jun 2026 16:48:29 -0700 Subject: [PATCH 1/5] vendor page v1 --- CONTRIBUTING.md | 45 ++++++ public/img/vendors/apollo.svg | 9 ++ public/img/vendors/aws.svg | 3 + public/img/vendors/chillicream.svg | 16 ++ public/img/vendors/dgraph.svg | 3 + public/img/vendors/escape.svg | 3 + public/img/vendors/grafbase.svg | 5 + public/img/vendors/graphile.svg | 17 ++ public/img/vendors/graphql-security.svg | 3 + public/img/vendors/hasura.svg | 5 + public/img/vendors/hygraph.svg | 4 + public/img/vendors/stellate.svg | 10 ++ public/img/vendors/the-guild.svg | 8 + public/img/vendors/tyk.svg | 7 + public/img/vendors/wundergraph-graded.svg | 85 ++++++++++ public/img/vendors/wundergraph.svg | 151 ++++++++++++++++++ src/app/(main)/resources/vendors/page.tsx | 90 +++++++++++ .../(main)/resources/vendors/vendor-card.tsx | 72 +++++++++ .../(main)/resources/vendors/vendor-logo.tsx | 76 +++++++++ src/pages/_meta.tsx | 1 + src/resources/vendors/data.ts | 132 +++++++++++++++ src/resources/vendors/types.ts | 11 ++ 22 files changed, 756 insertions(+) create mode 100644 public/img/vendors/apollo.svg create mode 100644 public/img/vendors/aws.svg create mode 100644 public/img/vendors/chillicream.svg create mode 100644 public/img/vendors/dgraph.svg create mode 100644 public/img/vendors/escape.svg create mode 100644 public/img/vendors/grafbase.svg create mode 100644 public/img/vendors/graphile.svg create mode 100644 public/img/vendors/graphql-security.svg create mode 100644 public/img/vendors/hasura.svg create mode 100644 public/img/vendors/hygraph.svg create mode 100644 public/img/vendors/stellate.svg create mode 100644 public/img/vendors/the-guild.svg create mode 100644 public/img/vendors/tyk.svg create mode 100644 public/img/vendors/wundergraph-graded.svg create mode 100644 public/img/vendors/wundergraph.svg create mode 100644 src/app/(main)/resources/vendors/page.tsx create mode 100644 src/app/(main)/resources/vendors/vendor-card.tsx create mode 100644 src/app/(main)/resources/vendors/vendor-logo.tsx create mode 100644 src/resources/vendors/data.ts create mode 100644 src/resources/vendors/types.ts diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b607837bec..36cf0d9cb2 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: + - **Icon component**: If an SVG icon already exists in [`src/icons/`](../../icons/), register it in [`vendor-logo.tsx`](./src/app/(main)/resources/vendors/vendor-logo.tsx) (see Apollo, ChilliCream, Graphile, Stellate). + - **Sponsor wordmark**: Add an SVG to [`public/img/vendors/`](../../public/img/vendors/) and register the slug in `wordmarkSlugs` or `coloredWordmarkSlugs` in [`vendor-logo.tsx`](./src/app/(main)/resources/vendors/vendor-logo.tsx). White wordmarks from conference sponsors work best; they are displayed with a CSS filter for contrast on light backgrounds. +2. Add a JSON file to [`src/resources/vendors/`](./src/resources/vendors/) with the same slug (e.g. `apollo.json`): + +```json +{ + "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` field must match the JSON filename (without `.json`) and the logo filename in `public/img/vendors/` when using a wordmark. The `github` field is optional. + ### 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/stellate.svg b/public/img/vendors/stellate.svg new file mode 100644 index 0000000000..040dcb6d2d --- /dev/null +++ b/public/img/vendors/stellate.svg @@ -0,0 +1,10 @@ + + + + + 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-graded.svg b/public/img/vendors/wundergraph-graded.svg new file mode 100644 index 0000000000..114e16ef90 --- /dev/null +++ b/public/img/vendors/wundergraph-graded.svg @@ -0,0 +1,85 @@ + + + +WunderGraph diff --git a/public/img/vendors/wundergraph.svg b/public/img/vendors/wundergraph.svg new file mode 100644 index 0000000000..97a67f5b9b --- /dev/null +++ b/public/img/vendors/wundergraph.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..1b7958bb1c --- /dev/null +++ b/src/app/(main)/resources/vendors/vendor-card.tsx @@ -0,0 +1,72 @@ +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} +

    +     + {vendor.github ? ( + + + + ) : null} +
    + + + + + + Visit website + +
    + +
    +     +
    +
    • + ) +} 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..f7d7a70d2e --- /dev/null +++ b/src/app/(main)/resources/vendors/vendor-logo.tsx @@ -0,0 +1,76 @@ +import GrafbaseWordmark from "public/img/vendors/grafbase.svg?svgr" +import HasuraWordmark from "public/img/vendors/hasura.svg?svgr" +import HygraphWordmark from "public/img/vendors/hygraph.svg?svgr" +import TheGuildWordmark from "public/img/vendors/the-guild.svg?svgr" +import TykWordmark from "public/img/vendors/tyk.svg?svgr" + +import { + ApolloIcon, + ChillicreamIcon, + GraphileIcon, + StellateIcon, +} from "@/icons" + +type LogoComponent = ({ className }: { className?: string }) => React.ReactNode + +const iconLogos: Record = { + apollo: ApolloIcon, + chillicream: ChillicreamIcon, + graphile: GraphileIcon, + stellate: StellateIcon, +} + +const wordmarkLogos: Record = { + hasura: HasuraWordmark, + "the-guild": TheGuildWordmark, + hygraph: HygraphWordmark, + grafbase: GrafbaseWordmark, + tyk: TykWordmark, +} + +/** Brand marks with native color — no filter. */ +const coloredWordmarkSlugs: Record = { + wundergraph: "/img/vendors/wundergraph-graded.svg", +} + +const logoClassName = "shrink-0" + +export function hasVendorLogo(slug: string) { + return ( + slug in iconLogos || + slug in wordmarkLogos || + slug in coloredWordmarkSlugs + ) +} + +export function VendorLogo({ slug }: { slug: string }) { + const Icon = iconLogos[slug] + + if (Icon) { + return + } + + const Wordmark = wordmarkLogos[slug] + if (Wordmark) { + return ( + + ) + } + + const coloredSrc = coloredWordmarkSlugs[slug] + if (coloredSrc) { + return ( + // eslint-disable-next-line @next/next/no-img-element + + ) + } + + return null +} 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/resources/vendors/data.ts b/src/resources/vendors/data.ts new file mode 100644 index 0000000000..fa45c19e62 --- /dev/null +++ b/src/resources/vendors/data.ts @@ -0,0 +1,132 @@ +import { cache } from "react" + +import { VendorMetadata } from "./types" + +/** + * Single source of truth for the GraphQL vendors directory. + * + * Entries are vendor (company) level with free-form descriptions. This is + * intentionally decoupled from the `/code` Tools & Libraries catalog, which is + * product/service level — 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: "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.", + 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: "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: "Grafbase", + slug: "grafbase", + description: + "Grafbase is a platform for GraphQL Federation with secure self-hosted deployment, fast query performance, governance, and unified access to your data sources.", + url: "https://grafbase.com/", + github: "grafbase", + }, + { + 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 composes content from multiple sources and serves it through a single, flexible GraphQL API.", + url: "https://hygraph.com/", + }, + { + name: "Stellate", + slug: "stellate", + description: + "Stellate provides GraphQL edge caching, analytics, and rate limiting to improve the performance and observability of your APIs.", + url: "https://stellate.co/", + }, + { + name: "The Guild", + slug: "the-guild", + description: + "The Guild maintains a broad suite of open-source GraphQL tooling, including GraphQL Code Generator, GraphQL Yoga, GraphQL Mesh, and Hive for schema registry and federation.", + url: "https://the-guild.dev/", + github: "the-guild-org", + }, + { + name: "Tyk", + slug: "tyk", + description: + "Tyk is an open-source API management platform with full GraphQL support, including schema stitching, federation, subscriptions, and its Universal Data Graph.", + url: "https://tyk.io/", + github: "TykTechnologies", + }, + { + 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 From 78120493dcd1c2784eaa0e4c266a4fa12af7e4b1 Mon Sep 17 00:00:00 2001 From: Brendan Bondurant Date: Tue, 30 Jun 2026 09:51:58 -0700 Subject: [PATCH 2/5] Aesthetic updates to vendor page, add WG to vendor channels --- public/img/vendors/wundergraph-graded.svg | 85 ---------- public/img/vendors/wundergraph.svg | 154 +----------------- .../(main)/resources/vendors/vendor-card.tsx | 88 +++++----- .../(main)/resources/vendors/vendor-logo.tsx | 27 +-- src/icons/index.ts | 1 + src/icons/wundergraph.svg | 3 + src/pages/community/vendor-channels.mdx | 6 + src/resources/vendors/data.ts | 8 - 8 files changed, 62 insertions(+), 310 deletions(-) delete mode 100644 public/img/vendors/wundergraph-graded.svg create mode 100644 src/icons/wundergraph.svg diff --git a/public/img/vendors/wundergraph-graded.svg b/public/img/vendors/wundergraph-graded.svg deleted file mode 100644 index 114e16ef90..0000000000 --- a/public/img/vendors/wundergraph-graded.svg +++ /dev/null @@ -1,85 +0,0 @@ - - - -WunderGraph diff --git a/public/img/vendors/wundergraph.svg b/public/img/vendors/wundergraph.svg index 97a67f5b9b..ccd2941a21 100644 --- a/public/img/vendors/wundergraph.svg +++ b/public/img/vendors/wundergraph.svg @@ -1,151 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + \ No newline at end of file diff --git a/src/app/(main)/resources/vendors/vendor-card.tsx b/src/app/(main)/resources/vendors/vendor-card.tsx index 1b7958bb1c..04e2be2dca 100644 --- a/src/app/(main)/resources/vendors/vendor-card.tsx +++ b/src/app/(main)/resources/vendors/vendor-card.tsx @@ -16,56 +16,60 @@ export function VendorCard({ vendor }: { vendor: VendorMetadata }) { return (
    • ) diff --git a/src/app/(main)/resources/vendors/vendor-logo.tsx b/src/app/(main)/resources/vendors/vendor-logo.tsx index f7d7a70d2e..f8d829a9f2 100644 --- a/src/app/(main)/resources/vendors/vendor-logo.tsx +++ b/src/app/(main)/resources/vendors/vendor-logo.tsx @@ -1,8 +1,8 @@ -import GrafbaseWordmark from "public/img/vendors/grafbase.svg?svgr" import HasuraWordmark from "public/img/vendors/hasura.svg?svgr" import HygraphWordmark from "public/img/vendors/hygraph.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, @@ -18,29 +18,20 @@ const iconLogos: Record = { chillicream: ChillicreamIcon, graphile: GraphileIcon, stellate: StellateIcon, + wundergraph: WundergraphMark, } const wordmarkLogos: Record = { hasura: HasuraWordmark, "the-guild": TheGuildWordmark, hygraph: HygraphWordmark, - grafbase: GrafbaseWordmark, tyk: TykWordmark, } -/** Brand marks with native color — no filter. */ -const coloredWordmarkSlugs: Record = { - wundergraph: "/img/vendors/wundergraph-graded.svg", -} - const logoClassName = "shrink-0" export function hasVendorLogo(slug: string) { - return ( - slug in iconLogos || - slug in wordmarkLogos || - slug in coloredWordmarkSlugs - ) + return slug in iconLogos || slug in wordmarkLogos } export function VendorLogo({ slug }: { slug: string }) { @@ -60,17 +51,5 @@ export function VendorLogo({ slug }: { slug: string }) { ) } - const coloredSrc = coloredWordmarkSlugs[slug] - if (coloredSrc) { - return ( - // eslint-disable-next-line @next/next/no-img-element - - ) - } - 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..b4684e848b --- /dev/null +++ b/src/icons/wundergraph.svg @@ -0,0 +1,3 @@ + + + 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 index fa45c19e62..410e86f9b0 100644 --- a/src/resources/vendors/data.ts +++ b/src/resources/vendors/data.ts @@ -52,14 +52,6 @@ const vendors: VendorMetadata[] = [ "Escape provides automated GraphQL security testing and compliance, scanning endpoints for vulnerabilities during development across any language or framework.", url: "https://escape.tech/", }, - { - name: "Grafbase", - slug: "grafbase", - description: - "Grafbase is a platform for GraphQL Federation with secure self-hosted deployment, fast query performance, governance, and unified access to your data sources.", - url: "https://grafbase.com/", - github: "grafbase", - }, { name: "Graphile", slug: "graphile", From bb314210620a0b729b41078d723124be38d2982b Mon Sep 17 00:00:00 2001 From: Brendan Bondurant Date: Tue, 30 Jun 2026 10:20:20 -0700 Subject: [PATCH 3/5] update contributing --- CONTRIBUTING.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 36cf0d9cb2..8ca23bcc4c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -152,22 +152,22 @@ The [Vendors page](https://graphql.org/resources/vendors) lists GraphQL companie 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: - - **Icon component**: If an SVG icon already exists in [`src/icons/`](../../icons/), register it in [`vendor-logo.tsx`](./src/app/(main)/resources/vendors/vendor-logo.tsx) (see Apollo, ChilliCream, Graphile, Stellate). - - **Sponsor wordmark**: Add an SVG to [`public/img/vendors/`](../../public/img/vendors/) and register the slug in `wordmarkSlugs` or `coloredWordmarkSlugs` in [`vendor-logo.tsx`](./src/app/(main)/resources/vendors/vendor-logo.tsx). White wordmarks from conference sponsors work best; they are displayed with a CSS filter for contrast on light backgrounds. -2. Add a JSON file to [`src/resources/vendors/`](./src/resources/vendors/) with the same slug (e.g. `apollo.json`): +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): -```json +```ts { - "name": "Example Co", - "slug": "example-co", - "description": "One to three sentences describing what the company builds.", - "url": "https://example.com/", - "github": "example-org" -} + 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` field must match the JSON filename (without `.json`) and the logo filename in `public/img/vendors/` when using a wordmark. The `github` field is optional. +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 From 0167fa7d463ec113f4f04598288acb1a20548fb4 Mon Sep 17 00:00:00 2001 From: Brendan Date: Wed, 1 Jul 2026 15:10:07 -0700 Subject: [PATCH 4/5] Update src/resources/vendors/data.ts Co-authored-by: Martin Bonnin --- src/resources/vendors/data.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/resources/vendors/data.ts b/src/resources/vendors/data.ts index 410e86f9b0..6c58f533ba 100644 --- a/src/resources/vendors/data.ts +++ b/src/resources/vendors/data.ts @@ -18,7 +18,7 @@ const vendors: VendorMetadata[] = [ 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.", + "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", }, From 6fb1b9266a07eea0c2f40b905a7a60cd49f73c1d Mon Sep 17 00:00:00 2001 From: Brendan Bondurant Date: Wed, 1 Jul 2026 15:47:30 -0700 Subject: [PATCH 5/5] add more vendors, merge the guild and stellate --- CONTRIBUTING.md | 2 +- public/img/vendors/kong.svg | 1 + public/img/vendors/stellate.svg | 10 ---- .../(main)/resources/vendors/vendor-card.tsx | 9 ++- .../(main)/resources/vendors/vendor-logo.tsx | 10 +--- src/icons/wundergraph.svg | 7 ++- src/resources/vendors/data.ts | 57 +++++++++++++++---- 7 files changed, 63 insertions(+), 33 deletions(-) create mode 100644 public/img/vendors/kong.svg delete mode 100644 public/img/vendors/stellate.svg diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8ca23bcc4c..35e4673159 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -152,7 +152,7 @@ The [Vendors page](https://graphql.org/resources/vendors) lists GraphQL companie 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): +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): 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/stellate.svg b/public/img/vendors/stellate.svg deleted file mode 100644 index 040dcb6d2d..0000000000 --- a/public/img/vendors/stellate.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - diff --git a/src/app/(main)/resources/vendors/vendor-card.tsx b/src/app/(main)/resources/vendors/vendor-card.tsx index 04e2be2dca..222e9627b6 100644 --- a/src/app/(main)/resources/vendors/vendor-card.tsx +++ b/src/app/(main)/resources/vendors/vendor-card.tsx @@ -27,14 +27,14 @@ export function VendorCard({ vendor }: { vendor: VendorMetadata }) { ) : null} -

    +

    {vendor.name}

    @@ -67,7 +67,10 @@ export function VendorCard({ vendor }: { vendor: VendorMetadata }) { tabIndex={-1} className="flex size-[53px] items-center justify-center text-neu-900 md:size-[72px]" > - +
    diff --git a/src/app/(main)/resources/vendors/vendor-logo.tsx b/src/app/(main)/resources/vendors/vendor-logo.tsx index f8d829a9f2..0b49bc61c0 100644 --- a/src/app/(main)/resources/vendors/vendor-logo.tsx +++ b/src/app/(main)/resources/vendors/vendor-logo.tsx @@ -1,15 +1,11 @@ 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, - StellateIcon, -} from "@/icons" +import { ApolloIcon, ChillicreamIcon, GraphileIcon } from "@/icons" type LogoComponent = ({ className }: { className?: string }) => React.ReactNode @@ -17,7 +13,7 @@ const iconLogos: Record = { apollo: ApolloIcon, chillicream: ChillicreamIcon, graphile: GraphileIcon, - stellate: StellateIcon, + kong: KongMark, wundergraph: WundergraphMark, } diff --git a/src/icons/wundergraph.svg b/src/icons/wundergraph.svg index b4684e848b..0213e103cd 100644 --- a/src/icons/wundergraph.svg +++ b/src/icons/wundergraph.svg @@ -1,3 +1,8 @@ - + diff --git a/src/resources/vendors/data.ts b/src/resources/vendors/data.ts index 6c58f533ba..2a6859f3b8 100644 --- a/src/resources/vendors/data.ts +++ b/src/resources/vendors/data.ts @@ -5,15 +5,25 @@ import { VendorMetadata } from "./types" /** * Single source of truth for the GraphQL vendors directory. * - * Entries are vendor (company) level with free-form descriptions. This is - * intentionally decoupled from the `/code` Tools & Libraries catalog, which is - * product/service level — a company (e.g. Apollo) and one of its products - * (e.g. Apollo Router) are different things and can carry different copy. + * 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", @@ -29,6 +39,14 @@ const vendors: VendorMetadata[] = [ "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", @@ -79,21 +97,30 @@ const vendors: VendorMetadata[] = [ name: "Hygraph", slug: "hygraph", description: - "Hygraph is a federated content platform that composes content from multiple sources and serves it through a single, flexible GraphQL API.", + "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: "Stellate", - slug: "stellate", + name: "IBM StepZen", + slug: "stepzen", description: - "Stellate provides GraphQL edge caching, analytics, and rate limiting to improve the performance and observability of your APIs.", - url: "https://stellate.co/", + "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: - "The Guild maintains a broad suite of open-source GraphQL tooling, including GraphQL Code Generator, GraphQL Yoga, GraphQL Mesh, and Hive for schema registry and federation.", + "The Guild maintains a broad suite of GraphQL tooling and services, including GraphQL Code Generator, GraphQL Yoga, GraphQL Mesh, Hive for schema registry and federation, and the Stellate GraphQL CDN for edge caching.", url: "https://the-guild.dev/", github: "the-guild-org", }, @@ -101,10 +128,18 @@ const vendors: VendorMetadata[] = [ name: "Tyk", slug: "tyk", description: - "Tyk is an open-source API management platform with full GraphQL support, including schema stitching, federation, subscriptions, and its Universal Data Graph.", + "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",