Skip to content

Commit 457fc3d

Browse files
hasparushasparus
authored
Gateway landing info cards (#6521)
1 parent 728b9b4 commit 457fc3d

File tree

9 files changed

+192
-37
lines changed

9 files changed

+192
-37
lines changed

‎packages/web/docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"@radix-ui/react-icons": "1.3.2",
1717
"@radix-ui/react-tabs": "1.1.2",
1818
"@radix-ui/react-tooltip": "1.1.6",
19-
"@theguild/components": "9.3.3",
19+
"@theguild/components": "9.3.4",
2020
"date-fns": "4.1.0",
2121
"next": "15.1.6",
2222
"react": "19.0.0",

‎packages/web/docs/src/app/federation/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { ReactElement, ReactNode } from 'react';
22
import Image from 'next/image';
3-
import { Anchor, CallToAction, cn, ContactButton, Heading } from '@theguild/components';
3+
import { Anchor, CallToAction, cn, ContactButton, Heading, InfoCard } from '@theguild/components';
44
import { ArrowIcon } from '../../components/arrow-icon';
55
import { FrequentlyAskedFederationQuestions } from '../../components/frequently-asked-questions';
66
import { Hero, HeroLinks } from '../../components/hero';
7-
import { InfoCard } from '../../components/info-card';
87
import { LandingPageContainer } from '../../components/landing-page-container';
98
import { metadata as rootMetadata } from '../layout';
109
import federationDiagram from '../../../public/federation-diagram.png';

‎packages/web/docs/src/app/gateway/cloud-native-section.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { cn, DecorationIsolation, Heading } from '@theguild/components';
2+
3+
export function CloudNativeSection({ className, ...rest }: React.HTMLAttributes<HTMLElement>) {
4+
return (
5+
<section
6+
className={cn(
7+
'bg-green-1000 relative rounded-3xl px-4 py-6 text-white md:px-8 md:py-16 xl:p-24',
8+
className,
9+
)}
10+
{...rest}
11+
>
12+
<div className="lg:w-[630px]">
13+
<Heading as="h2" size="md">
14+
Cloud Native Nature
15+
</Heading>
16+
<p className="mt-6 text-white/80">
17+
As modern teams expect their tools to work seamlessly in serverless environments, Hive
18+
Gateway is highly versatile and cloud-ready.
19+
</p>
20+
<div className="mt-8 flex gap-2 max-sm:flex-col max-sm:border-t max-sm:border-green-700 max-sm:pt-4 sm:mt-12 sm:gap-12">
21+
<strong className="block basis-1/2 font-medium md:text-xl/7">
22+
Cloud-Native & Serverless Support
23+
</strong>
24+
<p className="basis-1/2 text-white/80">
25+
Optimized for deployment in modern cloud and serverless environments such as AWS Lambda
26+
and Cloudflare Workers, demonstrating high scalability and flexibility.
27+
</p>
28+
</div>
29+
</div>
30+
<DecorationIsolation className="max-lg:hidden">
31+
<svg
32+
width="642"
33+
height="709"
34+
fill="none"
35+
className="absolute right-0 top-1/2 size-[709px] -translate-y-1/2"
36+
>
37+
<path
38+
d="M203.098 554.406h344.1c17.726.082 35.289-3.387 51.654-10.201 16.364-6.814 31.198-16.836 43.628-29.474 12.43-12.638 22.203-27.637 28.744-44.113 6.541-16.475 9.717-34.093 9.341-51.816-.376-17.722-4.297-35.19-11.531-51.373-7.234-16.183-17.635-30.754-30.59-42.853-12.955-12.1-28.201-21.483-44.84-27.596-16.485-6.057-34.005-8.783-51.547-8.023-2.533-40.625-20.424-78.773-50.055-106.698-29.751-28.037-69.089-43.68-109.969-43.677-56.531 0-106.159 29.263-134.697 73.365-23.813-6.223-48.677-7.325-72.95-3.232-24.392 4.113-47.627 13.378-68.157 27.177-20.5297 13.799-37.8824 31.816-50.9014 52.849-13.019 21.034-21.4053 44.6-24.5998 69.13-3.1946 24.529-1.1241 49.457 6.0734 73.124 7.1976 23.666 19.3569 45.526 35.6675 64.123 16.3105 18.597 36.3973 33.504 58.9223 43.728 22.525 10.223 46.971 15.528 71.707 15.56Z"
39+
stroke="url(#a)"
40+
/>
41+
<path
42+
d="M350.288 242v-.5h-37.636v.5l.001 61.813c0 10.224-8.316 18.508-18.587 18.508H231.5v37.487h40.473c5.131 0 10.052-2.03 13.68-5.644l58.969-58.737c3.628-3.613 5.666-8.514 5.666-13.625V242Zm8.924-.5h-.5v40.302c0 5.111 2.038 10.012 5.666 13.625l58.969 58.737c3.628 3.614 8.549 5.644 13.68 5.644H477.5v-37.487h-62.566c-10.271 0-18.586-8.284-18.586-18.508V241.5h-37.136Zm-9.424 245h.5v-40.302c0-5.111-2.038-10.012-5.666-13.625l-58.969-58.737c-3.628-3.614-8.549-5.644-13.68-5.644H231.5v37.487h62.566c10.271 0 18.587 8.284 18.587 18.508L312.652 486v.5h37.136Zm8.924-.5v.5h37.636v-62.313c0-10.224 8.315-18.508 18.586-18.508H477.5v-37.487h-40.473c-5.131 0-10.052 2.03-13.68 5.644l-58.969 58.737c-3.628 3.613-5.666 8.514-5.666 13.625V486Zm14.366-140.004v-.5h-37.156v37.008h37.156v-36.508Z"
43+
stroke="url(#b)"
44+
/>
45+
<defs>
46+
<linearGradient
47+
id="a"
48+
x1="29.7701"
49+
y1="139.082"
50+
x2="405.93"
51+
y2="728.791"
52+
gradientUnits="userSpaceOnUse"
53+
>
54+
<stop stopColor="#fff" stopOpacity=".1" />
55+
<stop offset="1" stopColor="#fff" stopOpacity=".4" />
56+
</linearGradient>
57+
<linearGradient
58+
id="b"
59+
x1="232"
60+
y1="242"
61+
x2="475.998"
62+
y2="486.998"
63+
gradientUnits="userSpaceOnUse"
64+
>
65+
<stop stopColor="#fff" stopOpacity=".1" />
66+
<stop offset="1" stopColor="#fff" stopOpacity=".4" />
67+
</linearGradient>
68+
</defs>
69+
</svg>
70+
</DecorationIsolation>
71+
</section>
72+
);
73+
}

‎packages/web/docs/src/app/gateway/lets-get-advanced-section.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import { CallToAction, cn, Heading, InfoCard, TargetIcon } from '@theguild/components';
2+
3+
export function LetsGetAdvancedSection({ className, ...rest }: React.HTMLAttributes<HTMLElement>) {
4+
return (
5+
<section
6+
className={cn('px-4 py-6 sm:py-12 md:px-6 lg:py-16 xl:px-24 xl:pb-24', className)}
7+
{...rest}
8+
>
9+
<Heading as="h2" size="md" className="text-center">
10+
Let's get advanced
11+
</Heading>
12+
<p className="mt-4 text-pretty text-center text-green-800">
13+
Hive Gateway features a set of advanced GraphQL features.
14+
</p>
15+
<div className="nextra-scrollbar overflow-auto max-sm:-m-4 max-sm:p-4">
16+
<ul className="mt-6 flex gap-6 *:flex *:flex-col *:rounded-3xl max-sm:*:w-80 max-sm:*:shrink-0 sm:grid sm:grid-cols-2 md:mt-8 md:*:p-8 lg:mt-12 xl:mt-16 xl:grid-cols-4 [&>*>:last-child]:contents [&>*>h3]:mb-4">
17+
<InfoCard
18+
icon={<ArrowRightWallIcon />}
19+
heading="GraphQL Subscriptions"
20+
// moved to the last place, because it's the shortest
21+
// and it looks like it has too much spacing without seeing other cards
22+
className="max-sm:order-10"
23+
>
24+
Supports real-time data streaming capabilities crucial for dynamic user experiences.
25+
<div
26+
className="grow" /* we're using a spacer div here bcs mt-[min(20px,auto)] is not supported */
27+
/>
28+
<CallToAction
29+
variant="tertiary"
30+
className="!mt-5 xl:w-full"
31+
href="/docs/gateway/deployment/node-frameworks/uwebsockets#subscriptions-with-websockets"
32+
>
33+
Documentation
34+
</CallToAction>
35+
</InfoCard>
36+
<InfoCard icon={<CogIcon />} heading="@defer and @stream Support">
37+
Allows more efficient data loading patterns, improving user interface responsiveness and
38+
system performance.
39+
<div className="grow" />
40+
<CallToAction
41+
variant="tertiary"
42+
className="!mt-5 xl:w-full"
43+
href="/docs/gateway/defer-stream"
44+
>
45+
Documentation
46+
</CallToAction>
47+
</InfoCard>
48+
<InfoCard icon={<StackIcon />} heading="Request Batching">
49+
Reduces network overhead by enabling multiple GraphQL operations in a single HTTP
50+
request, enhancing data retrieval efficiency.
51+
<div className="grow" />
52+
<CallToAction
53+
variant="tertiary"
54+
className="!mt-5 xl:w-full"
55+
href="/docs/gateway/other-features/performance/request-batching"
56+
>
57+
Documentation
58+
</CallToAction>
59+
</InfoCard>
60+
<InfoCard icon={<TargetIcon />} heading="Demand Control">
61+
Facilitates efficient management of API resources by setting limits on query complexity
62+
and execution depth, tailored for high-demand cloud environments.
63+
<div className="grow" />
64+
<CallToAction
65+
variant="tertiary"
66+
className="!mt-5 xl:w-full"
67+
href="/docs/gateway/other-features/security"
68+
>
69+
Documentation
70+
</CallToAction>
71+
</InfoCard>
72+
</ul>
73+
</div>
74+
</section>
75+
);
76+
}
77+
78+
function ArrowRightWallIcon() {
79+
return (
80+
<svg
81+
xmlns="http://www.w3.org/2000/svg"
82+
width="24"
83+
height="24"
84+
viewBox="0 0 24 24"
85+
fill="currentColor"
86+
>
87+
<path d="M12.172 10.9999L7.515 6.34293L8.929 4.92993L15.999 11.9999L8.929 19.0709L7.515 17.6569L12.17 12.9999H3V10.9999H12.172ZM18 18.9999V4.99993H20V18.9999H18Z" />
88+
</svg>
89+
);
90+
}
91+
92+
function CogIcon() {
93+
return (
94+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
95+
<path d="M8.68601 3.99988L11.293 1.39288C11.4805 1.20541 11.7348 1.1001 12 1.1001C12.2652 1.1001 12.5195 1.20541 12.707 1.39288L15.314 3.99988H19C19.2652 3.99988 19.5196 4.10524 19.7071 4.29278C19.8946 4.48031 20 4.73467 20 4.99988V8.68588L22.607 11.2929C22.7945 11.4804 22.8998 11.7347 22.8998 11.9999C22.8998 12.265 22.7945 12.5194 22.607 12.7069L20 15.3139V18.9999C20 19.2651 19.8946 19.5195 19.7071 19.707C19.5196 19.8945 19.2652 19.9999 19 19.9999H15.314L12.707 22.6069C12.5195 22.7944 12.2652 22.8997 12 22.8997C11.7348 22.8997 11.4805 22.7944 11.293 22.6069L8.68601 19.9999H5.00001C4.73479 19.9999 4.48044 19.8945 4.2929 19.707C4.10536 19.5195 4.00001 19.2651 4.00001 18.9999V15.3139L1.39301 12.7069C1.20554 12.5194 1.10022 12.265 1.10022 11.9999C1.10022 11.7347 1.20554 11.4804 1.39301 11.2929L4.00001 8.68588V4.99988C4.00001 4.73467 4.10536 4.48031 4.2929 4.29278C4.48044 4.10524 4.73479 3.99988 5.00001 3.99988H8.68601ZM6.00001 5.99988V9.51488L3.51501 11.9999L6.00001 14.4849V17.9999H9.51501L12 20.4849L14.485 17.9999H18V14.4849L20.485 11.9999L18 9.51488V5.99988H14.485L12 3.51488L9.51501 5.99988H6.00001ZM12 15.9999C10.9391 15.9999 9.92173 15.5785 9.17158 14.8283C8.42143 14.0782 8.00001 13.0608 8.00001 11.9999C8.00001 10.939 8.42143 9.9216 9.17158 9.17146C9.92173 8.42131 10.9391 7.99988 12 7.99988C13.0609 7.99988 14.0783 8.42131 14.8284 9.17146C15.5786 9.9216 16 10.939 16 11.9999C16 13.0608 15.5786 14.0782 14.8284 14.8283C14.0783 15.5785 13.0609 15.9999 12 15.9999ZM12 13.9999C12.5304 13.9999 13.0391 13.7892 13.4142 13.4141C13.7893 13.039 14 12.5303 14 11.9999C14 11.4695 13.7893 10.9607 13.4142 10.5857C13.0391 10.2106 12.5304 9.99988 12 9.99988C11.4696 9.99988 10.9609 10.2106 10.5858 10.5857C10.2107 10.9607 10 11.4695 10 11.9999C10 12.5303 10.2107 13.039 10.5858 13.4141C10.9609 13.7892 11.4696 13.9999 12 13.9999Z" />
96+
</svg>
97+
);
98+
}
99+
100+
function StackIcon() {
101+
return (
102+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
103+
<path d="M20.083 15.2L21.285 15.921C21.3591 15.9654 21.4205 16.0283 21.4631 16.1035C21.5058 16.1787 21.5282 16.2636 21.5282 16.35C21.5282 16.4365 21.5058 16.5214 21.4631 16.5966C21.4205 16.6718 21.3591 16.7347 21.285 16.779L12.515 22.041C12.3594 22.1345 12.1814 22.1839 12 22.1839C11.8185 22.1839 11.6405 22.1345 11.485 22.041L2.71498 16.779C2.64082 16.7347 2.57944 16.6718 2.53682 16.5966C2.4942 16.5214 2.4718 16.4365 2.4718 16.35C2.4718 16.2636 2.4942 16.1787 2.53682 16.1035C2.57944 16.0283 2.64082 15.9654 2.71498 15.921L3.91698 15.2L12 20.05L20.083 15.2ZM20.083 10.5L21.285 11.221C21.3591 11.2654 21.4205 11.3283 21.4631 11.4035C21.5058 11.4787 21.5282 11.5636 21.5282 11.65C21.5282 11.7365 21.5058 11.8214 21.4631 11.8966C21.4205 11.9718 21.3591 12.0347 21.285 12.079L12 17.649L2.71498 12.079C2.64082 12.0347 2.57944 11.9718 2.53682 11.8966C2.4942 11.8214 2.4718 11.7365 2.4718 11.65C2.4718 11.5636 2.4942 11.4787 2.53682 11.4035C2.57944 11.3283 2.64082 11.2654 2.71498 11.221L3.91698 10.5L12 15.35L20.083 10.5ZM12.514 1.30905L21.285 6.57105C21.3591 6.61544 21.4205 6.6783 21.4631 6.75348C21.5058 6.82867 21.5282 6.91362 21.5282 7.00005C21.5282 7.08647 21.5058 7.17142 21.4631 7.24661C21.4205 7.3218 21.3591 7.38465 21.285 7.42905L12 12.999L2.71498 7.43005C2.64082 7.38565 2.57944 7.3228 2.53682 7.24761C2.4942 7.17242 2.4718 7.08747 2.4718 7.00105C2.4718 6.91462 2.4942 6.82967 2.53682 6.75448C2.57944 6.6793 2.64082 6.61644 2.71498 6.57205L11.485 1.31005C11.6405 1.2166 11.8185 1.16724 12 1.16724C12.1814 1.16724 12.3594 1.2166 12.515 1.31005M12 3.33205L5.88698 7.00005L12 10.668L18.113 7.00005L12 3.33205Z" />
104+
</svg>
105+
);
106+
}

‎packages/web/docs/src/app/gateway/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,11 @@ import { ErrorBoundary } from '../../components/error-boundary';
1212
import { GetYourAPIGameRightList } from '../../components/get-your-api-game-right-list';
1313
import { LandingPageContainer } from '../../components/landing-page-container';
1414
import { metadata as rootMetadata } from '../layout';
15+
import { CloudNativeSection } from './cloud-native-section';
1516
import { FederationCompatibleBenchmarksSection } from './federation-compatible-benchmarks';
1617
import { GatewayFeatureTabs } from './gateway-feature-tabs';
1718
import GatewayLandingFAQ from './gateway-landing-faq.mdx';
19+
import { LetsGetAdvancedSection } from './lets-get-advanced-section';
1820
import { OrchestrateYourWay } from './orchestrate-your-way';
1921

2022
export const metadata: Metadata = {
@@ -60,8 +62,8 @@ export default function HiveGatewayPage() {
6062
>
6163
<FederationCompatibleBenchmarksSection />
6264
</ErrorBoundary>
63-
{/* Let's get advanced */}
64-
{/* Cloud-Native Nature */}
65+
<LetsGetAdvancedSection />
66+
<CloudNativeSection className="mx-4 mt-6 md:mx-6" />
6567
<ExploreMainProductCards className="max-lg:mx-4 max-lg:my-8" />
6668
<FrequentlyAskedQuestions
6769
/* todo: I'm pretty sure this prop is redundant, but okay */

‎packages/web/docs/src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
GetYourAPIGameRightSection,
1010
Heading,
1111
HighlightDecoration,
12+
InfoCard,
1213
LargeHiveIconDecoration,
1314
ToolsAndLibrariesCards,
1415
} from '@theguild/components';
@@ -18,7 +19,6 @@ import { CompanyTestimonialsSection } from '../components/company-testimonials';
1819
import { EcosystemManagementSection } from '../components/ecosystem-management';
1920
import { FrequentlyAskedQuestions } from '../components/frequently-asked-questions';
2021
import { Hero, HeroFeatures, HeroLinks } from '../components/hero';
21-
import { InfoCard } from '../components/info-card';
2222
import { LandingPageContainer } from '../components/landing-page-container';
2323
import { LandingPageFeatureTabs } from '../components/landing-page-feature-tabs';
2424
import { StatsItem, StatsList } from '../components/stats';

‎packages/web/docs/src/components/info-card.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎packages/web/docs/src/content/gateway/other-features/security/hmac-signature.mdx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,8 +197,7 @@ Here's an example of an incoming subgraph request with the HMAC signature:
197197

198198
### `hmacSignature`
199199

200-
The `hmacSignature` flag allows you to customize the HMAC signing behavior in the Hive
201-
Gateway:
200+
The `hmacSignature` flag allows you to customize the HMAC signing behavior in the Hive Gateway:
202201

203202
- `secret`: The secret key used for HMAC signing and verification. It should be a random, opaque
204203
string shared between the Hive Gateway and the subgraph services.

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)