Skip to content

Commit 09b0c32

Browse files
hasparusgithub-actions[bot]dimaMachina
authored
Rebranding UI new landing page (#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 <[email protected]> * 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 <[email protected]>
1 parent 27b5ecc commit 09b0c32

28 files changed

+2552
-2311
lines changed

‎website/next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ export default withGuildDocs({
66
eslint: {
77
ignoreDuringBuilds: true,
88
},
9+
nextraConfig: {
10+
autoImportThemeStyle: false,
11+
},
912
redirects: () =>
1013
Object.entries({
1114
'/api': '/docs',

‎website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"start": "next start"
1111
},
1212
"dependencies": {
13-
"@theguild/components": "^7.0.0",
13+
"@theguild/components": "^7.6.0",
1414
"next": "^15.0.0",
1515
"next-sitemap": "^4.2.3",
1616
"react": "^19.0.0",

‎website/public/assets/graphql-logo.svg‎

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

‎website/public/assets/mesh-diagram.svg‎

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

‎website/public/assets/mesh-example.png‎

-829 KB
Binary file not shown.

‎website/public/assets/open-source.svg‎

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

‎website/public/codesandbox-iframe.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>GraphQL Mesh Example</title>
7+
<style>
8+
html,
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
background-color: #0d0d0d;
16+
}
17+
iframe {
18+
position: fixed;
19+
border: 0;
20+
width: 100%;
21+
height: 100%;
22+
}
23+
.error {
24+
padding: 1rem;
25+
font-family: system-ui, sans-serif;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<noscript>JavaScript is required to load the example.</noscript>
31+
<iframe
32+
src="about:blank"
33+
loading="eager"
34+
title="Example"
35+
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
36+
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
37+
tabindex="-1"
38+
onload="window.scrollTo(0,0)"
39+
></iframe>
40+
<script>
41+
const params = new URLSearchParams(window.location.search);
42+
const example = params.get('example');
43+
if (!example) {
44+
document.body.innerHTML = '<div class="error">Error: No source URL provided</div>';
45+
} else {
46+
const iframe = document.querySelector('iframe');
47+
iframe.src = `https://codesandbox.io/embed/github/ardatan/graphql-mesh/tree/master/examples/${example}`;
48+
}
49+
</script>
50+
</body>
51+
</html>

‎website/public/favicon.ico‎

-18.3 KB
Binary file not shown.

‎website/public/favicon.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎website/src/components/comparison-table/index.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,17 +90,21 @@ const headers = Object.keys(data[0]);
9090
export interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {}
9191
export function ComparisonTable({ children, className, ...rest }: ComparisonTableProps) {
9292
return (
93-
<section className={cn('py-6 sm:py-12 md:px-6 xl:px-[120px]', className)} {...rest}>
94-
<header className="text-center text-balance">
93+
<section
94+
className={cn('py-6 sm:py-12 md:px-6 xl:px-[120px] lg:py-[120px]', className)}
95+
{...rest}
96+
>
97+
<header className="sm:text-center sm:text-balance">
9598
<Heading as="h3" size="md">
9699
Consider switching from other tools?
97100
</Heading>
98-
<p className="mt-4 mb-8 sm:mb-16 text-green-800 text-balance">
101+
<p className="mt-4 mb-8 sm:mb-16 text-green-800">
99102
Learn the differences between Mesh, Apollo Federation, Hasura and GraphQL Tools
100103
</p>
101104
</header>
102-
<div className="overflow-x-scroll max-sm:p-4 max-sm:-my-4">
103-
<Table className="max-sm:text-sm sm:table-fixed">
105+
{/* this is focusable (by default) because a keyboard user will scroll through the overflowing table with arrows */}
106+
<div className="hive-focus overflow-x-auto nextra-scrollbar [scrollbar-width:auto] max-sm:p-4 max-sm:-my-4 max-sm:-mx-8">
107+
<Table className="max-sm:text-sm sm:table-fixed max-sm:rounded-none">
104108
<thead>
105109
<TableRow>
106110
{headers.map(header => (

0 commit comments

Comments
 (0)