Add Mesh Hero #8159

hasparus · 2024-12-16T17:13:15Z

This is ready for review, but not for merge.

Description

Added the Mesh hero component.
I'm doing it in a separate PR to make the review easier and allow us to merge it in a straightforward manner.

I'd like to talk about the copy here.

Do the links make sense?
Does it make sense to postpone the multi-package-manager install button? Even Vercel AI landing page doesn't have it, so it feels a bit like overengineering to build one for this page.

Why don't I want to merge it yet?

It looks kinda off without the navbar and it doesn't support dark mode, so don't merge it without the wiring for the layout.

Type of change

New feature (non-breaking change which adds functionality)

Screenshots/Sandbox (if appropriate/relevant):

.

github-actions · 2024-12-16T17:16:10Z

Apollo Federation Subgraph Compatibility Results

Federation 1 Support Federation 2 Support

`_service`	🟢
`@key (single)`	🟢
`@key (multi)`	🟢
`@key (composite)`	🟢
`repeatable @key`	🟢
`@requires`	🟢
`@provides`	🟢
`federated tracing`	🟢

`@link`	🟢
`@shareable`	🟢
`@tag`	🟢
`@override`	🟢
`@inaccessible`	🟢
`@composeDirective`	🟢
`@interfaceObject`	🟢

Learn more:

github-actions · 2024-12-16T17:17:23Z

💻 Website Preview

The latest changes are available as preview in: https://0f42c662.graphql-mesh.pages.dev

github-actions · 2024-12-30T11:48:55Z

🚀 Snapshot Release (`alpha`)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
`@graphql-mesh/cache-cfw-kv`	`0.104.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/cache-file`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/cache-inmemory-lru`	`0.0.7-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/cache-localforage`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/cache-redis`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/compose-cli`	`1.3.4-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/fusion-composition`	`0.7.17-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/include`	`0.2.10-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/apollo-link`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/cli`	`0.98.16-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/config`	`0.106.16-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/graphql`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/grpc`	`0.106.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/json-schema`	`0.108.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/mongoose`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/mysql`	`0.104.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/neo4j`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/odata`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/openapi`	`0.108.13-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/postgraphile`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/raml`	`0.108.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/soap`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/supergraph`	`0.9.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/thrift`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/tuql`	`0.104.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/http`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/merger-bare`	`0.104.14-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/merger-stitching`	`0.104.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/migrate-config-cli`	`1.4.8-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/runtime`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/store`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-cache`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-encapsulate`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-extend`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-federation`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-filter-schema`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-hive`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-hoist-field`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-naming-convention`	`0.103.13-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-prefix`	`0.103.13-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-prune`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-rate-limit`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-rename`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-replace-field`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-resolvers-composition`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-transfer-schema`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transform-type-merging`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/types`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/urql-exchange`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/utils`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/json-schema`	`0.108.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/mysql`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/neo4j`	`0.9.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/odata`	`0.1.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/openapi`	`0.108.13-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/raml`	`0.108.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/soap`	`0.105.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/sqlite`	`0.7.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@omnigraph/thrift`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-deduplicate-request`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-hive`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-http-cache`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-http-details-extensions`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-jit`	`0.1.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-jwt-auth`	`1.4.1-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-live-query`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-mock`	`0.103.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-newrelic`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-operation-field-permissions`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-operation-headers`	`1.3.12-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-rate-limit`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-response-cache`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-snapshot`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/plugin-statsd`	`0.103.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-grpc`	`0.1.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-mysql`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-neo4j`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-odata`	`0.1.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-rest`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-soap`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-sqlite`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎
`@graphql-mesh/transport-thrift`	`0.8.11-alpha-20241230114702-39f04a1b8b9dd8c45c604c5840ce31d49da7c1f1`	npm ↗︎ unpkg ↗︎

ardatan · 2024-12-30T12:10:51Z

That NPM installation script npm i graphql-mesh is incorrect :/ Let's remove that part completely because Mesh is not a tool like you install and run. It needs a configuration etc.

hasparus · 2025-01-09T13:52:35Z

Closed because it's subsumed by #8207

* Squash merge "Add Mesh Hero #8159" * Squash merge "Add Datasources Illustration #8181" * Remove images and the old landing page * Add all sections (sandbox is BAD) * Add fonts, fix paddings for mobiles * Add .light class to body * Remove Plugins link * Tweak styles, add meta * Set @theguild/components version to 7.4.0 * Hack around CodeSandbox stealing focus. We need something better * chore(dependencies): updated changesets for modified dependencies * Style the select, add a lazy prop * Fix padding * Work around iframe autoscroll with nested iframe and position:fixed * Update website/src/components/mesh-hero.tsx Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com> * Format * Remove redundant tailwind classes * Add target=_blank * Fix Datasources List z-index * Add the links I forgot about * Use whole width of the screen in Comparison Table on mobile * Move shrink-0 to Mesh logo * Add new favicon * Remove InstallButton * Use VersionDropdown * Make one small ugly CSS fix * chore(dependencies): updated changesets for modified dependencies * Move chevron to the right, show newest version at the top * Remove Pricing link * Switch the MDX anchor to fix underlines in Safari * Add arrows to datasources list * Inline Mesh logo in Hero because of Safari blurry rendering * Add color-scheme: light to landing page container * Move color-scheme: light to html (has to be !important bcs of inline styles) * Style the scrollbar in Comparison Table * Set autoImportThemeStyle to false * Highlight some sections in Run Anywhere * Style focus in datasources list * Style focus in comparison table * Add z-index: 40 for $crisp-chatbox * Update Components to 7.6.0 and use themeVersion=hive-rebranding --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>

hasparus requested a review from dimaMachina December 16, 2024 18:10

hasparus added 6 commits December 30, 2024 13:44

Add Mesh Hero

d1924df

Move InstallButton to new file

317a023

Let Prettier format the SVG file

21bd802

Clear copied state after 2 seconds

931f723

Center Hero

df63f2e

Actually accept className prop

39f04a1

hasparus force-pushed the rebranding-ui-mesh-hero branch from a0abf1a to 39f04a1 Compare December 30, 2024 11:45

hasparus added a commit that referenced this pull request Dec 30, 2024

Squash merge "Add Mesh Hero #8159"

90f424d

hasparus closed this Jan 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add Mesh Hero #8159

Add Mesh Hero #8159

Uh oh!

hasparus commented Dec 16, 2024

Uh oh!

github-actions bot commented Dec 16, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Dec 16, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Dec 30, 2024

Uh oh!

ardatan commented Dec 30, 2024

Uh oh!

hasparus commented Jan 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add Mesh Hero #8159

Add Mesh Hero #8159

Uh oh!

Conversation

hasparus commented Dec 16, 2024

Description

Type of change

Screenshots/Sandbox (if appropriate/relevant):

Uh oh!

github-actions bot commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Apollo Federation Subgraph Compatibility Results

Uh oh!

github-actions bot commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💻 Website Preview

Uh oh!

github-actions bot commented Dec 30, 2024

🚀 Snapshot Release (alpha)

Uh oh!

ardatan commented Dec 30, 2024

Uh oh!

hasparus commented Jan 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Dec 16, 2024 •

edited

Loading

github-actions bot commented Dec 16, 2024 •

edited

Loading

🚀 Snapshot Release (`alpha`)