switch to codesandbox examples

.changeset/gold-kings-fix.md

@@ -0,0 +1,5 @@
+---
+'@gqless/react': patch
+---
+
+[usePaginatedQuery] pause cache changes while merge

internal/website/fix-typedoc.js

@@ -47,6 +47,10 @@ async function main() {
       );
     })
   );
+
+  spawnSync('node', ['./node_modules/pretty-quick/bin/pretty-quick.js'], {
+    stdio: 'ignore',
+  });
 }
 
 main().catch((err) => {

internal/website/src/components/Examples/App.tsx

@@ -93,7 +93,7 @@ const App = ({ children }: { children?: AppChildren }) => {
   return (
     <Flex flexDirection="column">
       <Topbar />
-      <Flex flex="1" overflow="hidden" h="calc(100vh - 80px)" m="2px">
+      <Flex flex="1" m="2px">
         <Sidebar display={{ base: 'none', md: 'flex' }} />
 
         <Box

internal/website/src/components/Examples/Embed.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import { useWindowSize } from 'react-use';
+
+import { Box, Spinner, Stack } from '@chakra-ui/react';
+
+const EmbedSpinner = ({ frameHeight }: { frameHeight: number }) => {
+  const [hideSpinner, setHideSpinner] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    const timeout = setTimeout(() => {
+      if (isMounted) setHideSpinner(true);
+    }, 5000);
+    return () => {
+      isMounted = false;
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  if (hideSpinner) return null;
+
+  return (
+    <Box
+      pos="absolute"
+      width="100%"
+      height={frameHeight}
+      minHeight={frameHeight}
+    >
+      <Spinner
+        size="xl"
+        thickness="3px"
+        position="absolute"
+        left="50%"
+        top="50%"
+        zIndex={-1}
+        emptyColor="gray.200"
+        color="blue.500"
+        speed="0.8s"
+      />
+    </Box>
+  );
+};
+
+export interface EmbedProps {
+  file: string;
+  initialPath: string;
+}
+
+export function CodeSandboxEmbed({ file, initialPath }: EmbedProps) {
+  const { height } = useWindowSize(0, 400);
+
+  if (!file.startsWith('/')) file = '/' + file;
+
+  const src = `https://codesandbox.io/embed/prod-framework-b3m2q?fontsize=14&hidenavigation=1&module=${encodeURIComponent(
+    file
+  )}&theme=dark&initialpath=${encodeURIComponent(initialPath)}`;
+
+  const frameHeight = height - 150;
+
+  return (
+    <Stack height="100%" width="100%">
+      <EmbedSpinner frameHeight={frameHeight} />
+
+      <Box
+        as="iframe"
+        width="100%"
+        height={frameHeight}
+        minHeight={frameHeight}
+        src={src}
+        onMouseOver={() => {
+          document.body.style.overflowY = 'hidden';
+          document.body.style.overflowX = 'hidden';
+        }}
+        onMouseOut={() => {
+          document.body.style.overflowY = 'auto';
+          document.body.style.overflowX = 'auto';
+        }}
+      />
+    </Stack>
+  );
+}

internal/website/src/pages/examples/index.tsx

@@ -33,8 +33,8 @@ export default function Page() {
         <Heading as="h2">Online Editor and Visualization</Heading>
         <Text>
           These examples are made using{' '}
-          <Link to="http://stackblitz.io/">
-            <b>StackBlitz</b>
+          <Link to="https://codesandbox.io/">
+            <b>CodeSandbox</b>
           </Link>
           , which allows you to modify the examples and play with gqless{' '}
           <b>without installing anything</b>.

internal/website/src/pages/examples/suspense/auth.tsx

@@ -12,14 +12,14 @@ import { useLocation } from '@docusaurus/router';
 
 import { ExamplesPage } from '../../../components/Examples/App';
 import {
-  StackBlitzEmbed,
-  StackBlitzProps,
-} from '../../../components/Examples/StackblitzEmbed';
+  CodeSandboxEmbed,
+  EmbedProps,
+} from '../../../components/Examples/Embed';
 
 export default function Page() {
   const { hash } = useLocation();
 
-  const { file, initialPath } = useMemo<StackBlitzProps>(() => {
+  const { file, initialPath } = useMemo<EmbedProps>(() => {
     switch (hash) {
       case '#headers': {
         return {
@@ -77,7 +77,7 @@ export default function Page() {
           </ListItem>
         </UnorderedList>
       </Stack>
-      <StackBlitzEmbed file={file} initialPath={initialPath} />
+      <CodeSandboxEmbed file={file} initialPath={initialPath} />
     </ExamplesPage>
   );
 }

internal/website/src/pages/examples/suspense/query.tsx

@@ -4,7 +4,7 @@ import { Heading, Text } from '@chakra-ui/react';
 import Link from '@docusaurus/Link';
 
 import { ExamplesPage } from '../../../components/Examples/App';
-import { StackBlitzEmbed } from '../../../components/Examples/StackblitzEmbed';
+import { CodeSandboxEmbed } from '../../../components/Examples/Embed';
 
 export default function Page() {
   return (
@@ -15,7 +15,7 @@ export default function Page() {
         <Link to="/react/query#usequery">useQuery</Link> and{' '}
         <Link to="/react/query#graphql-hoc">graphql HOC</Link>.
       </Text>
-      <StackBlitzEmbed file="src/components/Hello.tsx" initialPath="/" />
+      <CodeSandboxEmbed file="src/components/Hello.tsx" initialPath="/" />
     </ExamplesPage>
   );
 }