feat(website): show source code for examples

website/gatsby-config.js

@@ -13,6 +13,13 @@ module.exports = {
         path: `${__dirname}/src/pages`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: 'exampleflows',
+        path: `${__dirname}/src/example-flows`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

website/gatsby-node.js

@@ -2,13 +2,15 @@ const path = require('path');
 const { createFilePath } = require('gatsby-source-filesystem');
 
 const docsGenerator = require('./generators/docs');
+const exampleGenerator = require('./generators/examples');
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions;
 
   const generateDocs = docsGenerator(createPage, graphql);
+  const generateExamples = exampleGenerator(createPage, graphql);
 
-  return Promise.all([generateDocs]);
+  return Promise.all([generateDocs, generateExamples]);
 };
 
 exports.onCreateNode = ({ node, actions, getNode }) => {

website/generators/examples.js

@@ -0,0 +1,55 @@
+const path = require('path');
+
+const exampleTemplate = path.resolve('./src/templates/example-page.js');
+
+const examplePagesQuery = `{
+  allExamplesJson {
+    edges {
+      node {
+        slug
+        title
+        source
+      }
+    }
+  }
+}
+`;
+
+const createExamplePage = (createPage, examplePages) => {
+  examplePages.forEach((page) => {
+    const { slug, title, source } = page.node;
+
+    createPage({
+      path: slug,
+      component: exampleTemplate,
+      context: {
+        slug: slug,
+        title: title,
+        source: source,
+        sourceSlug: `/example-flows/${source}/`,
+      },
+    });
+  });
+};
+
+const exampleGenerator = (createPage, graphql) =>
+  new Promise((resolve, reject) => {
+    resolve(
+      graphql(examplePagesQuery).then((result) => {
+        if (result.errors) {
+          console.log(result.errors);
+          reject(result.errors);
+        }
+
+        const pages = result.data.allExamplesJson.edges;
+
+        try {
+          createExamplePage(createPage, pages);
+        } catch (e) {
+          console.log(e);
+        }
+      })
+    );
+  });
+
+module.exports = exampleGenerator;

website/package-lock.json

@@ -17547,7 +17547,7 @@
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
     "ow": {
@@ -22622,7 +22622,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {

website/src/assets/data/examples.json

@@ -0,0 +1,57 @@
+[
+  {
+    "title": "Overview",
+    "slug": "examples/",
+    "source": "Overview"
+  },
+  {
+    "title": "Custom Node",
+    "slug": "examples/custom-node",
+    "source": "CustomNode"
+  },
+  {
+    "title": "Edges",
+    "slug": "examples/edges",
+    "source": "Edges"
+  },
+  {
+    "title": "Horizontal",
+    "slug": "examples/horizontal",
+    "source": "Horizontal"
+  },
+  {
+    "title": "Interaction",
+    "slug": "examples/interaction",
+    "source": "Interaction"
+  },
+  {
+    "title": "Provider",
+    "slug": "examples/provider",
+    "source": "Provider"
+  },
+  {
+    "title": "Stress",
+    "slug": "examples/stress",
+    "source": "Stress"
+  },
+  {
+    "title": "Validation",
+    "slug": "examples/validation",
+    "source": "Validation"
+  },
+  {
+    "title": "Custom Connectionline",
+    "slug": "examples/custom-connectionline",
+    "source": "CustomConnectionLine"
+  },
+  {
+    "title": "Edge Types",
+    "slug": "examples/edge-types",
+    "source": "EdgeTypes"
+  },
+  {
+    "title": "Hidden",
+    "slug": "examples/hidden",
+    "source": "Hidden"
+  }
+]

website/src/components/CodeBlock/index.js

@@ -7,7 +7,6 @@ import CodeBlock from './Mdx';
 import { H4, AttributionText } from 'components/Typo';
 
 const Wrapper = styled(Box)`
-  max-width: 750px;
   margin: 0 auto;
   padding: 5px 0;
 

website/src/components/HeroFlow/index.js

@@ -9,6 +9,8 @@ import ReactFlow, {
 import ColorPickerNode from './ColorPickerNode';
 
 const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
+const hasTouch = typeof window !== 'undefined' && 'ontouchstart' in window;
+
 const isSmallScreen = windowWidth < 800;
 
 const getOffset = () => {
@@ -139,6 +141,7 @@ export default () => {
         zoomOnScroll={false}
         nodeTypes={nodeTypes}
         onConnect={onConnect}
+        paneMoveable={!hasTouch}
       >
         <Background />
         <Controls showInteractive={false} />

website/src/components/Page/Example.js

@@ -1,20 +1,47 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Flex } from 'reflexbox';
+import { Flex, Box } from 'reflexbox';
 
 import Page from 'components/Page';
 import Sidebar from 'components/Sidebar';
 import useExamplePages from 'hooks/useExamplePages';
+import CodeBlock from 'components/CodeBlock';
+import { H4 } from 'components/Typo';
+
+import 'example-flows/Overview';
 
 const Wrapper = styled(Flex)`
   border-top: 1px solid ${(p) => p.theme.colors.silverLighten30};
   flex-grow: 1;
-  position: absolute;
-  width: 100%;
-  height: 100%;
 `;
 
-export default ({ children, title, slug }) => {
+const ReactFlowWrapper = styled(Box)`
+  flex-grow: 1;
+
+  .react-flow {
+    height: 65vh;
+  }
+`;
+
+const SourceWrapper = styled(Box)`
+  border-top: 1px solid #eee;
+  max-width: 1000px;
+  margin: 0 auto;
+`;
+
+const SourceCodeBlock = ({ absolutePath, internal }) => {
+  const splittedPath = absolutePath.split('/');
+  const fileName = splittedPath[splittedPath.length - 1];
+
+  return (
+    <Box>
+      <Box>{fileName}</Box>
+      <CodeBlock code={internal.content} />
+    </Box>
+  );
+};
+
+export default ({ children, title, slug, sourceCodeFiles = [] }) => {
   const menu = useExamplePages();
 
   const metaTags = {
@@ -23,11 +50,23 @@ export default ({ children, title, slug }) => {
     robots: 'index, follow',
   };
 
+  const hasSource = sourceCodeFiles.length > 0;
+
   return (
     <Page metaTags={metaTags} footerBorder>
       <Wrapper>
         <Sidebar menu={menu} />
-        {children}
+        <ReactFlowWrapper>
+          {children}
+          {hasSource && (
+            <SourceWrapper p={3}>
+              <H4 as="div">Source Code</H4>
+              {sourceCodeFiles.map((source) => (
+                <SourceCodeBlock key={source.absolutePath} {...source} />
+              ))}
+            </SourceWrapper>
+          )}
+        </ReactFlowWrapper>
       </Wrapper>
     </Page>
   );

website/src/components/TeaserFlow/B.js

@@ -170,8 +170,6 @@ export default () => {
     setElements(initialElements);
   }, []);
 
-  console.log(elements);
-
   return (
     <TeaserFlow
       title="Customizable"

website/src/example-flows/Overview/index.js

@@ -6,142 +6,15 @@ import ReactFlow, {
   MiniMap,
   Controls,
   Background,
-  isNode,
 } from 'react-flow-renderer';
 
-const onNodeDragStart = (event, node) => console.log('drag start', node);
-const onNodeDragStop = (event, node) => console.log('drag stop', node);
-const onSelectionDrag = (event, nodes) => console.log('selection drag', nodes);
-const onSelectionDragStart = (event, nodes) =>
-  console.log('selection drag start', nodes);
-const onSelectionDragStop = (event, nodes) =>
-  console.log('selection drag stop', nodes);
-const onSelectionContextMenu = (event, nodes) => {
-  event.preventDefault();
-  console.log('selection context menu', nodes);
-};
-const onElementClick = (event, element) =>
-  console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
-const onSelectionChange = (elements) =>
-  console.log('selection change', elements);
+import initialElements from './initial-elements';
+
 const onLoad = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
   reactFlowInstance.fitView();
 };
 
-const onMoveEnd = (transform) => console.log('zoom/move end', transform);
-
-const initialElements = [
-  {
-    id: '1',
-    type: 'input',
-    data: {
-      label: (
-        <>
-          Welcome to <strong>React Flow!</strong>
-        </>
-      ),
-    },
-    position: { x: 250, y: 0 },
-  },
-  {
-    id: '2',
-    data: {
-      label: (
-        <>
-          This is a <strong>default node</strong>
-        </>
-      ),
-    },
-    position: { x: 100, y: 100 },
-  },
-  {
-    id: '3',
-    data: {
-      label: (
-        <>
-          This one has a <strong>custom style</strong>
-        </>
-      ),
-    },
-    position: { x: 400, y: 100 },
-    style: {
-      background: '#D6D5E6',
-      color: '#333',
-      border: '1px solid #222138',
-      width: 180,
-    },
-  },
-  {
-    id: '4',
-    position: { x: 250, y: 200 },
-    data: {
-      label: 'Another default node',
-    },
-  },
-  {
-    id: '5',
-    data: {
-      label: 'Node id: 5',
-    },
-    position: { x: 250, y: 325 },
-  },
-  {
-    id: '6',
-    type: 'output',
-    data: {
-      label: (
-        <>
-          An <strong>output node</strong>
-        </>
-      ),
-    },
-    position: { x: 100, y: 480 },
-  },
-  {
-    id: '7',
-    type: 'output',
-    data: { label: 'Another output node' },
-    position: { x: 400, y: 450 },
-  },
-  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
-  { id: 'e1-3', source: '1', target: '3' },
-  {
-    id: 'e3-4',
-    source: '3',
-    target: '4',
-    animated: true,
-    label: 'animated edge',
-  },
-  {
-    id: 'e4-5',
-    source: '4',
-    target: '5',
-    arrowHeadType: 'arrowclosed',
-    label: 'edge with arrow head',
-  },
-  {
-    id: 'e5-6',
-    source: '5',
-    target: '6',
-    type: 'smoothstep',
-    label: 'smooth step edge',
-  },
-  {
-    id: 'e5-7',
-    source: '5',
-    target: '7',
-    type: 'step',
-    style: { stroke: '#f6ab6c' },
-    label: 'a step edge',
-    animated: true,
-    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
-  },
-];
-
-const connectionLineStyle = { stroke: '#ddd' };
-const snapGrid = [16, 16];
-
 const OverviewFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onElementsRemove = (elementsToRemove) =>
@@ -151,21 +24,11 @@ const OverviewFlow = () => {
   return (
     <ReactFlow
       elements={elements}
-      onElementClick={onElementClick}
       onElementsRemove={onElementsRemove}
       onConnect={onConnect}
-      onNodeDragStart={onNodeDragStart}
-      onNodeDragStop={onNodeDragStop}
-      onSelectionDragStart={onSelectionDragStart}
-      onSelectionDrag={onSelectionDrag}
-      onSelectionDragStop={onSelectionDragStop}
-      onSelectionContextMenu={onSelectionContextMenu}
-      onSelectionChange={onSelectionChange}
-      onMoveEnd={onMoveEnd}
       onLoad={onLoad}
-      connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
-      snapGrid={snapGrid}
+      snapGrid={[15, 15]}
     >
       <MiniMap
         nodeStrokeColor={(n) => {

website/src/example-flows/Overview/initial-elements.js

@@ -0,0 +1,109 @@
+import React from 'react';
+
+export default [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: (
+        <>
+          Welcome to <strong>React Flow!</strong>
+        </>
+      ),
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: (
+        <>
+          This is a <strong>default node</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: (
+        <>
+          This one has a <strong>custom style</strong>
+        </>
+      ),
+    },
+    position: { x: 400, y: 100 },
+    style: {
+      background: '#D6D5E6',
+      color: '#333',
+      border: '1px solid #222138',
+      width: 180,
+    },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: 'Another default node',
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: 'Node id: 5',
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: (
+        <>
+          An <strong>output node</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 480 },
+  },
+  {
+    id: '7',
+    type: 'output',
+    data: { label: 'Another output node' },
+    position: { x: 400, y: 450 },
+  },
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  {
+    id: 'e3-4',
+    source: '3',
+    target: '4',
+    animated: true,
+    label: 'animated edge',
+  },
+  {
+    id: 'e4-5',
+    source: '4',
+    target: '5',
+    arrowHeadType: 'arrowclosed',
+    label: 'edge with arrow head',
+  },
+  {
+    id: 'e5-6',
+    source: '5',
+    target: '6',
+    type: 'smoothstep',
+    label: 'smooth step edge',
+  },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+];

website/src/example-flows/Stress/index.js

@@ -1,6 +1,13 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
+import ReactFlow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  isNode,
+  Controls,
+  Background,
+} from 'react-flow-renderer';
 import { getElements } from './utils';
 
 const onLoad = (reactFlowInstance) => {
@@ -12,7 +19,8 @@ const initialElements = getElements(10, 10);
 
 const StressFlow = () => {
   const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
+  const onElementsRemove = (elementsToRemove) =>
+    setElements((els) => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements((els) => addEdge(params, els));
 
   const updatePos = () => {
@@ -34,12 +42,20 @@ const StressFlow = () => {
   };
 
   return (
-    <ReactFlow elements={elements} onLoad={onLoad} onElementsRemove={onElementsRemove} onConnect={onConnect}>
+    <ReactFlow
+      elements={elements}
+      onLoad={onLoad}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+    >
       <MiniMap />
       <Controls />
       <Background />
 
-      <button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
+      <button
+        onClick={updatePos}
+        style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
+      >
         change pos
       </button>
     </ReactFlow>

website/src/hooks/useExamplePages.js

@@ -4,14 +4,11 @@ import { useStaticQuery, graphql } from 'gatsby';
 export default function useFeaturedProjects() {
   const rawData = useStaticQuery(graphql`
     query ExamplePages {
-      allJavascriptFrontmatter {
+      allExamplesJson {
         edges {
           node {
-            frontmatter {
-              title
-              slug
-              order
-            }
+            title
+            slug
           }
         }
       }
@@ -19,14 +16,10 @@ export default function useFeaturedProjects() {
   `);
 
   const data = useMemo(() => {
-    return rawData.allJavascriptFrontmatter.edges
-      .sort((a, b) => {
-        return a.node.frontmatter.order - b.node.frontmatter.order;
-      })
-      .map(({ node }) => ({
-        slug: `/examples/${node.frontmatter.slug}`,
-        title: node.frontmatter.title,
-      }));
+    return rawData.allExamplesJson.edges.map(({ node }) => ({
+      slug: `/${node.slug}`,
+      title: node.title,
+    }));
   }, [rawData]);
 
   return data;

website/src/pages/examples/custom-connectionline.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/CustomConnectionLine';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Custom Connectionline',
-  slug: 'custom-connectionline',
-  order: 10,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/custom-node.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/CustomNode';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Custom Node',
-  slug: 'custom-node',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/edge-types.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/EdgeTypes';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Edge Types',
-  slug: 'edge-types',
-  order: 11,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>{' '}
-    </ExamplePage>
-  );
-};

website/src/pages/examples/edges.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Edges';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Edges',
-  slug: 'edges',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/hidden.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Hidden';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Hidden',
-  slug: 'hidden',
-  order: 12,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/horizontal.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Horizontal';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Horizontal',
-  slug: 'horizontal',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Overview';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Overview',
-  slug: '',
-  order: 0,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/interaction.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Interaction';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Interaction',
-  slug: 'interaction',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/provider.js

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Provider';
-
-export const frontmatter = {
-  title: 'Provider',
-  slug: 'provider',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <Flow />
-    </ExamplePage>
-  );
-};

website/src/pages/examples/stress.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Stress';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Stress',
-  slug: 'stress',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/pages/examples/validation.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import ExamplePage from 'components/Page/Example';
-import Flow from 'example-flows/Validation';
-import { ReactFlowProvider } from 'react-flow-renderer';
-
-export const frontmatter = {
-  title: 'Validation',
-  slug: 'validation',
-  order: 4,
-};
-
-export default () => {
-  return (
-    <ExamplePage title={frontmatter.title} slug={frontmatter.slug}>
-      <ReactFlowProvider>
-        <Flow />
-      </ReactFlowProvider>
-    </ExamplePage>
-  );
-};

website/src/templates/example-page.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+
+import ExamplePage from 'components/Page/Example';
+import { ReactFlowProvider } from 'react-flow-renderer';
+
+export default ({ data, pageContext }) => {
+  const [flow, setFlow] = useState(null);
+  const sourceCodeFiles = data?.allFile?.edges
+    ?.map(({ node }) => node)
+    .sort((a, b) => {
+      if (a.absolutePath.includes('index.js')) {
+        return -1;
+      }
+    })
+    .filter((node) => node.internal.content);
+
+  useEffect(() => {
+    const load = async () => {
+      const nextFlow = await import(`example-flows/${pageContext.source}`);
+      setFlow(nextFlow);
+    };
+
+    load();
+  }, [pageContext]);
+
+  console.log(pageContext, data);
+
+  return (
+    <ExamplePage
+      title={pageContext.title}
+      slug={pageContext.slug}
+      sourceCodeFiles={sourceCodeFiles}
+    >
+      <ReactFlowProvider>{flow && <flow.default />}</ReactFlowProvider>
+    </ExamplePage>
+  );
+};
+
+export const pageQuery = graphql`
+  query SourceBySourceSlug($sourceSlug: String!) {
+    allFile(filter: { absolutePath: { regex: $sourceSlug } }) {
+      edges {
+        node {
+          id
+          absolutePath
+          internal {
+            content
+          }
+        }
+      }
+    }
+  }
+`;