From d1924df4cf4a721d706d94c2e3cdfd93ae46f88c Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 16 Dec 2024 18:05:07 +0100 Subject: [PATCH 1/6] Add Mesh Hero --- website/src/components/hero.tsx | 43 ++++++++++ website/src/components/index-page.tsx | 40 +-------- website/src/components/mesh-hero-badge.svg | 35 ++++++++ website/src/components/mesh-hero.tsx | 96 ++++++++++++++++++++++ 4 files changed, 177 insertions(+), 37 deletions(-) create mode 100644 website/src/components/hero.tsx create mode 100644 website/src/components/mesh-hero-badge.svg create mode 100644 website/src/components/mesh-hero.tsx diff --git a/website/src/components/hero.tsx b/website/src/components/hero.tsx new file mode 100644 index 0000000000000..044a280f6d030 --- /dev/null +++ b/website/src/components/hero.tsx @@ -0,0 +1,43 @@ +import { ReactNode } from 'react'; +import { cn, MeshIcon } from '@theguild/components'; + +// TODO: Move these to `@theguild/components` and remove from here, Codegen and Hive. + +export interface HeroContainerProps extends React.HTMLAttributes {} +export function HeroContainer(props: HeroContainerProps) { + return ( +
+ ); +} + +export interface HeroLinksProps extends React.HTMLAttributes {} +export function HeroLinks(props: HeroLinksProps) { + return ( +
+ ); +} + +export interface HeroFeaturesProps extends React.HTMLAttributes {} +export function HeroFeatures(props: HeroFeaturesProps) { + return ( +
    li]:flex [&>li]:items-center [&>li]:gap-2', + props.className, + )} + /> + ); +} diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx index ce9c3a491aa2d..5ba84f30790c6 100644 --- a/website/src/components/index-page.tsx +++ b/website/src/components/index-page.tsx @@ -6,6 +6,7 @@ import meshDiagram from '@/public/assets/mesh-diagram.svg'; import meshExampleLogo from '@/public/assets/mesh-example.png'; import openSourceLogo from '@/public/assets/open-source.svg'; import { Anchor } from '@theguild/components'; +import { MeshHero } from './mesh-hero'; const ButtonLink = ({ children, ...props }: React.ComponentProps) => { return ( @@ -20,40 +21,6 @@ const ButtonLink = ({ children, ...props }: React.ComponentProps) ); }; -function Hero() { - return ( -
    -
    -

    - GraphQL Mesh -

    -

    - The Graph of Everything -

    -

    - Federated architecture for any API service -

    -
    - Documentation - {/* - Examples - */} - - GitHub - - {/* TODO: this button causes hydration error */} - {/* - - */} -
    -
    -
    - ); -} - const FeatureWrapperClass = ` w-full py-24 odd:bg-gray-50 @@ -206,9 +173,8 @@ const datasources: Array = [ export function IndexPage(): ReactElement { return (
    -
    - -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/src/components/mesh-hero.tsx b/website/src/components/mesh-hero.tsx new file mode 100644 index 0000000000000..eb6107b2b16d5 --- /dev/null +++ b/website/src/components/mesh-hero.tsx @@ -0,0 +1,96 @@ +import Image from 'next/image'; +import { + CallToAction, + CheckIcon, + DecorationIsolation, + GitHubIcon, + Heading, + MeshIcon, +} from '@theguild/components'; +import { HeroContainer, HeroFeatures, HeroLinks } from './hero'; +import meshHeroBadge from './mesh-hero-badge.svg'; + +export function MeshHero() { + return ( + + + + + GraphQL Mesh + +

    + Unify your API landscape with Mesh’s federated architecture, integrating any API service + into a cohesive graph. +

    + +
  • + + Compose any API +
    • +
  • + + Granular field access +
    • +
  • + + Works with any schema registry +
    • +     + + + Get started + + + + + GitHub + + +     + ); +} + +function MeshDecorations() { + return ( + + + + + + + + + + + + + ); +} + +// TODO: We'll add more package managers later. +function InstallButton() { + return ( + + npm i graphql-mesh + + + ); +} + +function CopyIcon(props: React.SVGProps) { + return ( + + + + ); +} From 317a0230eef1a6b4fa7116daa471f89c9752d37f Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 16 Dec 2024 18:19:36 +0100 Subject: [PATCH 2/6] Move InstallButton to new file --- website/src/components/hero.tsx | 3 +- website/src/components/install-button.tsx | 36 +++++++++++++++++++++++ website/src/components/mesh-hero.tsx | 26 +--------------- 3 files changed, 38 insertions(+), 27 deletions(-) create mode 100644 website/src/components/install-button.tsx diff --git a/website/src/components/hero.tsx b/website/src/components/hero.tsx index 044a280f6d030..e5d06d7268394 100644 --- a/website/src/components/hero.tsx +++ b/website/src/components/hero.tsx @@ -1,5 +1,4 @@ -import { ReactNode } from 'react'; -import { cn, MeshIcon } from '@theguild/components'; +import { cn } from '@theguild/components'; // TODO: Move these to `@theguild/components` and remove from here, Codegen and Hive. diff --git a/website/src/components/install-button.tsx b/website/src/components/install-button.tsx new file mode 100644 index 0000000000000..ae191e8e5427e --- /dev/null +++ b/website/src/components/install-button.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { useState } from 'react'; +import { CallToAction, CheckIcon } from '@theguild/components'; + +// TODO: We'll add more package managers later. +export function InstallButton() { + const text = 'npm i graphql-mesh'; + + const [copied, setCopied] = useState(false); + + return ( + { + navigator.clipboard.writeText(text); + setCopied(true); + }} + > + {text} + {copied ? : } + + ); +} + +function CopyIcon(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/website/src/components/mesh-hero.tsx b/website/src/components/mesh-hero.tsx index eb6107b2b16d5..8710d00f598ce 100644 --- a/website/src/components/mesh-hero.tsx +++ b/website/src/components/mesh-hero.tsx @@ -8,6 +8,7 @@ import { MeshIcon, } from '@theguild/components'; import { HeroContainer, HeroFeatures, HeroLinks } from './hero'; +import { InstallButton } from './install-button'; import meshHeroBadge from './mesh-hero-badge.svg'; export function MeshHero() { @@ -69,28 +70,3 @@ function MeshDecorations() { ); } - -// TODO: We'll add more package managers later. -function InstallButton() { - return ( - - npm i graphql-mesh - - - ); -} - -function CopyIcon(props: React.SVGProps) { - return ( - - - - ); -} From 21bd80202de4c15afdce20cb35fee1bd93d382ce Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 16 Dec 2024 19:11:13 +0100 Subject: [PATCH 3/6] Let Prettier format the SVG file --- website/src/components/mesh-hero-badge.svg | 98 +++++++++++++++++----- 1 file changed, 76 insertions(+), 22 deletions(-) diff --git a/website/src/components/mesh-hero-badge.svg b/website/src/components/mesh-hero-badge.svg index 7a2c6e61af67e..62e9ed3bce992 100644 --- a/website/src/components/mesh-hero-badge.svg +++ b/website/src/components/mesh-hero-badge.svg @@ -1,35 +1,89 @@ - - + + - + - - + + - - - - - + + + + + - - - + + + - - - + + + - - - + + + - - - + + + From 931f723bc88417a7c1d21b294311e115cfe9b314 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 16 Dec 2024 19:20:11 +0100 Subject: [PATCH 4/6] Clear copied state after 2 seconds --- website/src/components/install-button.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website/src/components/install-button.tsx b/website/src/components/install-button.tsx index ae191e8e5427e..c007a9cb996b9 100644 --- a/website/src/components/install-button.tsx +++ b/website/src/components/install-button.tsx @@ -16,6 +16,9 @@ export function InstallButton() { onClick={() => { navigator.clipboard.writeText(text); setCopied(true); + setTimeout(() => { + setCopied(false); + }, 2000); }} > {text} From df63f2e5e8e71dd3ed995895795172e7d6e0aeaf Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 19 Dec 2024 14:10:34 +0100 Subject: [PATCH 5/6] Center Hero --- website/src/components/index-page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx index 5ba84f30790c6..9735764001c00 100644 --- a/website/src/components/index-page.tsx +++ b/website/src/components/index-page.tsx @@ -173,7 +173,7 @@ const datasources: Array = [ export function IndexPage(): ReactElement { return (
    - + Date: Thu, 19 Dec 2024 14:30:38 +0100 Subject: [PATCH 6/6] Actually accept className prop --- website/src/components/mesh-hero.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/src/components/mesh-hero.tsx b/website/src/components/mesh-hero.tsx index 8710d00f598ce..d8f26036b5455 100644 --- a/website/src/components/mesh-hero.tsx +++ b/website/src/components/mesh-hero.tsx @@ -2,18 +2,19 @@ import Image from 'next/image'; import { CallToAction, CheckIcon, + cn, DecorationIsolation, GitHubIcon, Heading, MeshIcon, } from '@theguild/components'; -import { HeroContainer, HeroFeatures, HeroLinks } from './hero'; +import { HeroContainer, HeroContainerProps, HeroFeatures, HeroLinks } from './hero'; import { InstallButton } from './install-button'; import meshHeroBadge from './mesh-hero-badge.svg'; -export function MeshHero() { +export function MeshHero(props: HeroContainerProps) { return ( - +