Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rebranding UI new landing page #8207

Open
wants to merge 28 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
90f424d
Squash merge "Add Mesh Hero #8159"
hasparus Dec 30, 2024
05fc4a4
Squash merge "Add Datasources Illustration #8181"
hasparus Dec 30, 2024
c1992f4
Remove images and the old landing page
hasparus Dec 30, 2024
19c92ae
Add all sections (sandbox is BAD)
hasparus Dec 30, 2024
0a94929
Add fonts, fix paddings for mobiles
hasparus Dec 30, 2024
44c2642
Add .light class to body
hasparus Dec 30, 2024
bbd508c
Remove Plugins link
hasparus Dec 30, 2024
18b497f
Tweak styles, add meta
hasparus Dec 30, 2024
b26903d
Set @theguild/components version to 7.4.0
hasparus Dec 30, 2024
caf15f7
Hack around CodeSandbox stealing focus. We need something better
hasparus Jan 1, 2025
cf1c186
chore(dependencies): updated changesets for modified dependencies
github-actions[bot] Jan 1, 2025
c4db35e
Style the select, add a lazy prop
hasparus Jan 1, 2025
47f5e00
Fix padding
hasparus Jan 2, 2025
aa5cd3b
Work around iframe autoscroll with nested iframe and position:fixed
hasparus Jan 2, 2025
d35c595
Update website/src/components/mesh-hero.tsx
hasparus Jan 2, 2025
da8c5e3
Format
hasparus Jan 2, 2025
6825b16
Remove redundant tailwind classes
hasparus Jan 2, 2025
bec0262
Add target=_blank
hasparus Jan 2, 2025
9fe563d
Fix Datasources List z-index
hasparus Jan 2, 2025
13335ee
Add the links I forgot about
hasparus Jan 2, 2025
0839e41
Use whole width of the screen in Comparison Table on mobile
hasparus Jan 2, 2025
e4e6df5
Move shrink-0 to Mesh logo
hasparus Jan 2, 2025
3fd4aad
Add new favicon
hasparus Jan 2, 2025
6b515b6
Remove InstallButton
hasparus Jan 2, 2025
d9ce99c
Use VersionDropdown
hasparus Jan 4, 2025
c71c53d
Make one small ugly CSS fix
hasparus Jan 4, 2025
99cc051
Merge branch 'master' into rebranding-ui-new-landing-page
hasparus Jan 4, 2025
815bbf1
chore(dependencies): updated changesets for modified dependencies
github-actions[bot] Jan 4, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions website/public/codesandbox-iframe.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GraphQL Mesh Example</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #0d0d0d;
}
iframe {
position: fixed;
border: 0;
width: 100%;
height: 100%;
}
.error {
padding: 1rem;
font-family: system-ui, sans-serif;
}
</style>
</head>
<body>
<noscript>JavaScript is required to load the example.</noscript>
<iframe
src="about:blank"
loading="eager"
title="Example"
className="w-full h-full"
hasparus marked this conversation as resolved.
Show resolved Hide resolved
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
tabindex="-1"
onload="window.scrollTo(0,0)"
></iframe>
<script>
const params = new URLSearchParams(window.location.search);
const example = params.get('example');
if (!example) {
document.body.innerHTML = '<div class="error">Error: No source URL provided</div>';
} else {
const iframe = document.querySelector('iframe');
iframe.src = `https://codesandbox.io/embed/github/ardatan/graphql-mesh/tree/master/examples/${example}`;
}
</script>
</body>
</html>
50 changes: 18 additions & 32 deletions website/src/components/examples-sandbox.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
'use client';

import { useEffect, useRef, useState } from 'react';
import { ArrowIcon, CaretSlimIcon, cn } from '@theguild/components';
import { useRouter } from 'next/router';
import { CaretSlimIcon, cn } from '@theguild/components';

export const EXAMPLES = {
OpenAPI: {
Expand Down Expand Up @@ -58,20 +59,18 @@ const CODESANDBOX_OPTIONS = {
};

export interface ExamplesSandboxProps extends React.HTMLAttributes<HTMLElement> {
preventStealingFocusWithUnpleasantDelay?: boolean;
lazy?: boolean;
border?: boolean;
}

export function ExamplesSandbox({
preventStealingFocusWithUnpleasantDelay,
lazy = false,
...rest
}: ExamplesSandboxProps) {
export function ExamplesSandbox({ lazy = false, border = false, ...rest }: ExamplesSandboxProps) {
const [exampleDir, setExampleDir] = useState('json-schema-example');
const [isVisible, setIsVisible] = useState(lazy ? false : true);
const containerRef = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(!lazy);
const containerRef = useRef<HTMLDivElement>(null!);

useEffect(() => {
if (isVisible) return;

const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
Expand All @@ -87,16 +86,14 @@ export function ExamplesSandbox({
},
);

if (containerRef.current) {
observer.observe(containerRef.current);
}
observer.observe(containerRef.current);

return () => observer.disconnect();
}, []);

const repo = 'ardatan/graphql-mesh';
const { basePath } = useRouter();
hasparus marked this conversation as resolved.
Show resolved Hide resolved

const src = `https://codesandbox.io/embed/github/${repo}/tree/master/examples/${exampleDir}?${new URLSearchParams(CODESANDBOX_OPTIONS).toString()}`;
const iframeSrc = `${basePath}/codesandbox-iframe.html?example=${exampleDir}`;

return (
<div {...rest} className={cn('w-full', rest.className)}>
Expand Down Expand Up @@ -125,31 +122,20 @@ export function ExamplesSandbox({
</div>
<div
ref={containerRef}
className="w-full mt-8 h-[520px] sm:h-[720px] bg-beige-100 dark:bg-[#0D0D0D]"
// #0D0D0D is CodeSandbox's background color
className={cn(
'w-full mt-8 h-[520px] sm:h-[720px] bg-[#0D0D0D] overflow-hidden',
border && 'rounded-lg border border-beige-400 dark:border-neutral-800',
)}
>
{isVisible && (
<iframe
loading={lazy ? 'eager' : 'lazy'}
src={src}
className="w-full h-full"
src={iframeSrc}
className="size-full"
title={exampleDir}
allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
style={{ display: preventStealingFocusWithUnpleasantDelay ? 'none' : 'block' }}
// This is such a hack. I hate it.
// The worst part it's that it's dependent on the internet speed to 2s may be too little
// and we'll allow CodeSandbox to steal the focus and scroll to the iframe
// or needlessly too long, and we'll have an empty content, what obviously looks very professional.
onLoad={
preventStealingFocusWithUnpleasantDelay
? e => {
const iframe = e.currentTarget;
setTimeout(() => {
iframe.style.display = 'block';
}, 2500);
}
: undefined
}
/>
)}
</div>
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/index-page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function IndexPage(): ReactElement {
<ManipulateDataSection className="mx-4 mt-6 md:mx-6" />
<ComparisonTable className="mx-4 md:mx-6" />
<RunAnywhereSection className="mx-4 mt-6 md:mx-6" />
<CapabilitiesSection className="mx-4 md:mx-6" />
<CapabilitiesSection className="mx-4 mt-6 md:mx-6" />
<ToolsAndLibrariesCards className="mx-4 md:mx-6" />
{/* TODO: Frequently Asked Questions requires a version bump of @theguild/components */}
</LandingPageContainer>
Expand Down
Loading