Hive Gateway landing page: top sections (#6461)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

package.json

@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "private": true,
-  "packageManager": "pnpm@9.15.5",
+  "packageManager": "pnpm@10.0.0",
   "engines": {
     "node": ">=22",
     "pnpm": ">=9.15.5"

packages/web/docs/package.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-icons": "1.3.2",
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.6",
-    "@theguild/components": "9.2.0",
+    "@theguild/components": "9.3.2",
     "date-fns": "4.1.0",
     "next": "15.1.6",
     "react": "19.0.0",

packages/web/docs/src/app/gateway/gateway-feature-tabs.tsx

@@ -0,0 +1,98 @@
+import { FeatureTab, FeatureTabs, Highlight } from '#components/feature-tabs';
+import { cn } from '@theguild/components';
+import { GatewayMarqueeRows } from './gateway-marquee-rows';
+
+// TODO: the long values here will be bad for mobiles
+type Tab = 'Observability & Performance Monitoring' | 'Security & Access Control';
+
+const highlights: Record<Tab, Highlight[]> = {
+  'Observability & Performance Monitoring': [
+    {
+      title: 'Open Telemetry & Prometheus Integration',
+      description:
+        'Equip your teams with comprehensive tools for monitoring API health, performance, and usage patterns, crucial for maintaining operational excellence.',
+    },
+    {
+      title: 'Response Caching',
+      description:
+        'Enhances response times and reduces load on backend services by intelligently caching frequent requests.',
+    },
+    {
+      title: 'Rate Limiting',
+      description:
+        'Protects your API from overload and abuse, ensuring consistent and reliable service performance.',
+    },
+    {
+      title: 'Schema Explorer',
+      description:
+        'Navigate and analyze the connections within your GraphQL schema using Schema Explorer.',
+    },
+  ],
+  'Security & Access Control': [
+    {
+      title: 'JWT Authentication & Authorization',
+      description:
+        'Provides secure user identification and role-based access control, crucial for protecting sensitive data and operations.',
+    },
+    {
+      title: 'Persisted Operations',
+      description:
+        'Allows only pre-registered GraphQL operations to be executed, safeguarding against arbitrary and potentially harmful requests.',
+    },
+    {
+      title: 'Fine-grained Access Control',
+      description:
+        'Prevents unauthorized access with powerful, centralized policies at the gateway level, reducing the risk of security breaches.',
+    },
+    {
+      title: 'CORS and CSRF Prevention',
+      description:
+        'Shields against common web security vulnerabilities, securing your applications from unauthorized inter-domain interactions.',
+    },
+  ],
+};
+
+export function GatewayFeatureTabs(props: { className?: string }) {
+  return (
+    <FeatureTabs
+      highlights={highlights}
+      icons={[<PerformanceIcon />, <SecurityIcon />]}
+      className={cn(
+        'border-blue-200 [--tab-bg-dark:theme(colors.blue.300)] [--tab-bg:theme(colors.blue.200)]',
+        props.className,
+      )}
+    >
+      <FeatureTab
+        title="Observability & Performance Monitoring"
+        documentationLink="/docs/gateway/monitoring-tracing"
+        highlights={highlights['Observability & Performance Monitoring']}
+      />
+      <FeatureTab
+        title="Security & Access Control"
+        documentationLink={{
+          text: 'Learn more about plugins',
+          href: '/docs/gateway/other-features/custom-plugins',
+        }}
+        highlights={highlights['Security & Access Control']}
+      />
+      {/* todo: these marquee rows should probably be draggable, and connected to one "timeline" */}
+      <GatewayMarqueeRows className="[--pill-bg-hover:#fff] [--pill-bg:#fff] [--pill-text-hover:theme(colors.blue.600)] [--pill-text:theme(colors.blue.400)] max-lg:hidden" />
+    </FeatureTabs>
+  );
+}
+
+function PerformanceIcon() {
+  return (
+    <svg width="24" height="24" fill="currentColor">
+      <path d="M5 3v16h16v2H3V3h2Zm15.293 3.293 1.414 1.414L16 13.414l-3-2.999-4.293 4.292-1.414-1.414L13 7.586l3 2.999 4.293-4.292Z" />
+    </svg>
+  );
+}
+
+function SecurityIcon() {
+  return (
+    <svg width="25" height="24" fill="currentColor">
+      <path d="m12.5 1 8.217 1.826c.2221.04936.4207.17297.563.3504.1424.17744.22.39812.22.6256v9.987c-.0001.9877-.244 1.9602-.7101 2.831-.4661.8708-1.14 1.6131-1.9619 2.161L12.5 23l-6.328-4.219c-.82173-.5478-1.49554-1.2899-1.96165-2.1605-.46611-.8707-.71011-1.8429-.71035-2.8305V3.802c.00004-.22748.07764-.44816.21999-.6256.14235-.17743.34095-.30104.56301-.3504L12.5 1Zm0 2.049-7 1.555v9.185c.00001.6585.16257 1.3067.47326 1.8873.31069.5805.75989 1.0754 1.30774 1.4407l5.219 3.48 5.219-3.48c.5477-.3652.9968-.8599 1.3075-1.4403.3107-.5803.4733-1.2284.4735-1.8867V4.604l-7-1.555ZM12.5 7c.4403-.0002.8684.14492 1.2179.41286.3494.26794.6007.64371.7147 1.06901.1141.42531.0846.87637-.0838 1.28322-.1685.40681-.4665.74671-.8478.96691L13.5 15h-2v-4.268c-.3813-.2201-.6792-.5599-.8477-.96668-.1685-.40675-.198-.85771-.0841-1.28296.114-.42526.3651-.80103.7143-1.06904.3493-.26802.7772-.4133 1.2175-.41332Z" />
+    </svg>
+  );
+}

packages/web/docs/src/app/gateway/gateway-landing-faq.mdx

@@ -0,0 +1,47 @@
+## Frequently Asked Questions
+
+- What do I need to do migrating from another Federation gateway?
+
+  Hive Gateway is a drop-in replacement for gateways alike! Start the gateway using your existing
+  `supergraph.graphql` and you're off.
+  [Read more.](https://the-guild.dev/graphql/hive/docs/gateway/supergraph-proxy-source#supergraph)
+
+- Can I run Hive Gateway on the edge?
+
+  Yes! Hive Gateway is implemented with JavaScript in mind and can be run natively in serverless
+  runtimes like Cloudflare Workers, AWS Lambda, Google Cloud Platform and Azure Functions.
+  [Read more.](https://the-guild.dev/graphql/hive/docs/gateway/deployment/serverless)
+
+- Does Hive Gateway support subscriptions?
+
+  Of course! Hive Gateway fully supports federated subscriptions and behaves just like Federation
+  GraphQL subscriptions in Apollo Router.
+  [Read more.](https://the-guild.dev/graphql/hive/docs/gateway/subscriptions)
+
+- How does Hive Gateway integrate with tracing tools?
+
+  Hive Gateway has extensive monitoring and tracing capabilities allowing you deep insights into its
+  inner workings. Use OpenTelemetry, Prometheus, StatsD and Sentry with simple to use plugins.
+  [Read more.](https://the-guild.dev/graphql/hive/docs/gateway/monitoring-tracing)
+
+- Is customising the supergraph possible?
+
+  Changing the supergraph and adjusting it to your needs, either to accommodate extra fields or
+  allow for gradual migration from non-federated systems, is easily achievable using
+  [GraphQL Mesh](https://the-guild.dev/graphql/mesh). It is a first-class citizen in Hive Gateway
+  and its outputs are directly usable.
+
+- Can I optimize Hive Gateway's performance for large-scale applications?
+
+  The gateway is designed from ground up with performance in mind, capable of handling even the
+  largest of application loads. Using techniques like request caching and deduplication, query
+  batching, HTTP compression and more - you're able to tune Hive Gateway exactly to your needs.
+  [Read more.](https://the-guild.dev/graphql/hive/docs/gateway/other-features/performance)
+
+- Are all Hive Gateway features open source?
+
+  Yes, Hive Gateway, and all of its features, are fully open-source and free to use. Including all
+  the enterprise-grade features offered by other vendors, without licensing restrictions; features
+  like: subscriptions, persisted queries, JWT authentication, query batching, rate-limiting and high
+  security, observability and tracing, advanced caching, deployments everywhere, and much more.
+  [Read more.](https://the-guild.dev/graphql/hive/docs/gateway)

packages/web/docs/src/app/gateway/gateway-marquee-rows.tsx

@@ -0,0 +1,90 @@
+import { Anchor, cn, MarqueeRows } from '@theguild/components';
+
+// todo: a test that checks if none of the links here are 404
+const terms = new Map<string[], string /* href */>([
+  [
+    ['authenticated', 'requiresScopes', 'policy'],
+    '/docs/gateway/authorization-authentication#granular-protection-using-auth-directives-authenticated-requiresscopes-and-policy',
+  ],
+  [['Usage Reporting'], 'https://the-guild.dev/graphql/hive/docs/gateway/usage-reporting'],
+  [['Monitoring', 'Tracing'], '/docs/gateway/monitoring-tracing'],
+  [['@stream', '@defer', 'Incremental Delivery'], '/docs/gateway/defer-stream'],
+  [['Persisted Documents'], '/docs/gateway/persisted-documents'],
+  [['Response Caching'], '/docs/gateway/other-features/performance/response-caching'],
+  [['Content-Encoding'], '/docs/gateway/other-features/performance/compression'],
+  [
+    ['parserAndValidationCache'],
+    '/docs/gateway/other-features/performance/parsing-and-validation-caching',
+  ],
+  [['executionCancellation'], '/docs/gateway/other-features/performance/execution-cancellation'],
+  [['Upstream Cancellation'], '/docs/gateway/other-features/performance/upstream-cancellation'],
+  [['documentCache', 'errorCache', 'validationCache'], '/docs/gateway/other-features/performance'],
+  [['HTTP Caching'], '/docs/gateway/other-features/performance/http-caching'],
+  [['useRequestDeduplication'], '/docs/gateway/other-features/performance/deduplicate-request'],
+  [
+    ['APQ', 'Automatic Persisted Queries'],
+    '/docs/gateway/other-features/performance/automatic-persisted-queries',
+  ],
+  [['Persisted Documents'], '/docs/gateway/persisted-documents'],
+  [
+    ['batching', 'Request Batching'],
+    'https://the-guild.dev/graphql/hive/docs/gateway/other-features/performance/request-batching',
+  ],
+  [['Supergraph', 'Proxy'], '/docs/gateway/supergraph-proxy-source'],
+  [['Authorization', 'Authentication'], '/docs/gateway/authorization-authentication'],
+  [['Header Propagation'], '/docs/gateway/other-features/header-propagation'],
+  [['Subscriptions'], '/docs/gateway/subscriptions'],
+  [['useMock', 'Mocking'], '/docs/gateway/other-features/testing/mocking'],
+  [['Snapshots'], '/docs/gateway/other-features/testing/snapshot'],
+  [['CSRF Prevention'], '/docs/gateway/other-features/security/csrf-prevention'],
+  [['Rate Limiting'], '/docs/gateway/other-features/security/rate-limiting'],
+  [['Cost Limit'], '/docs/gateway/other-features/security/cost-limit'],
+  [['Security'], '/docs/gateway/other-features/security'],
+  [['maskedErrors'], '/docs/gateway/other-features/security/error-masking'],
+]);
+
+export function GatewayMarqueeRows({
+  className,
+  ...rest
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <MarqueeRows
+      pauseOnHover
+      speed="slow"
+      rows={9}
+      className={cn('flex max-w-full flex-col justify-center rounded-2xl p-4 pb-28', className)}
+      {...rest}
+    >
+      {inPlaceShuffle(
+        Array.from(terms.entries()).flatMap(([labels, href], j) =>
+          labels.map((label, i) => (
+            <Anchor
+              key={`${j}-${i}`}
+              className="hive-focus rounded-lg border border-transparent bg-[--pill-bg] px-2 py-1.5 text-[10px] text-[--pill-text] transition duration-500 hover:border-[--pill-hover-text] hover:bg-[--pill-bg-hover] hover:text-[--pill-text-hover] sm:px-4 sm:py-3 sm:text-sm"
+              href={href}
+            >
+              {label}
+            </Anchor>
+          )),
+        ),
+      )}
+    </MarqueeRows>
+  );
+}
+
+/**
+ * @see https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
+ */
+function inPlaceShuffle<T>(xs: T[]): T[] {
+  for (let i = xs.length - 1; i >= 1; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    const temp = xs[i];
+    xs[i] = xs[j];
+    xs[j] = temp;
+  }
+
+  return xs;
+}