ardatan · hasparus · Jan 15, 2025 · Dec 30, 2024 · Dec 30, 2024 · Dec 30, 2024
diff --git a/website/next.config.js b/website/next.config.js
@@ -6,6 +6,9 @@ export default withGuildDocs({
   eslint: {
     ignoreDuringBuilds: true,
   },
+  nextraConfig: {
+    autoImportThemeStyle: false,
+  },
   redirects: () =>
     Object.entries({
       '/api': '/docs',

diff --git a/website/package.json b/website/package.json
@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@theguild/components": "^7.0.0",
+    "@theguild/components": "^7.6.0",
     "next": "^15.0.0",
     "next-sitemap": "^4.2.3",
     "react": "^19.0.0",

diff --git a/website/public/assets/graphql-logo.svg b/website/public/assets/graphql-logo.svg
diff --git a/website/public/assets/mesh-diagram.svg b/website/public/assets/mesh-diagram.svg
diff --git a/website/public/assets/mesh-example.png b/website/public/assets/mesh-example.png
diff --git a/website/public/assets/open-source.svg b/website/public/assets/open-source.svg
diff --git a/website/public/codesandbox-iframe.html b/website/public/codesandbox-iframe.html
@@ -0,0 +1,51 @@
+<!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"
+      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>
diff --git a/website/public/favicon.ico b/website/public/favicon.ico
diff --git a/website/public/favicon.svg b/website/public/favicon.svg
diff --git a/website/src/components/comparison-table/index.tsx b/website/src/components/comparison-table/index.tsx
@@ -90,17 +90,21 @@ const headers = Object.keys(data[0]);
 export interface ComparisonTableProps extends React.HTMLAttributes<HTMLDivElement> {}
 export function ComparisonTable({ children, className, ...rest }: ComparisonTableProps) {
   return (
-    <section className={cn('py-6 sm:py-12 md:px-6 xl:px-[120px]', className)} {...rest}>
-      <header className="text-center text-balance">
+    <section
+      className={cn('py-6 sm:py-12 md:px-6 xl:px-[120px] lg:py-[120px]', className)}
+      {...rest}
+    >
+      <header className="sm:text-center sm:text-balance">
         <Heading as="h3" size="md">
           Consider switching from other tools?
         </Heading>
-        <p className="mt-4 mb-8 sm:mb-16 text-green-800 text-balance">
+        <p className="mt-4 mb-8 sm:mb-16 text-green-800">
           Learn the differences between Mesh, Apollo Federation, Hasura and GraphQL Tools
         </p>
       </header>
-      <div className="overflow-x-scroll max-sm:p-4 max-sm:-my-4">
-        <Table className="max-sm:text-sm sm:table-fixed">
+      {/* this is focusable (by default) because a keyboard user will scroll through the overflowing table with arrows */}
+      <div className="hive-focus overflow-x-auto nextra-scrollbar [scrollbar-width:auto] max-sm:p-4 max-sm:-my-4 max-sm:-mx-8">
+        <Table className="max-sm:text-sm sm:table-fixed max-sm:rounded-none">
           <thead>
             <TableRow>
               {headers.map(header => (