+
+
+
}, position: { x: 100, y: 100 } },
- { id: 'e1-2', source: '1', target: '2', animated: true },
-];
-
-export default () =>
;`}
- />
-
- You can find a detailed{' '}
- entry point in the docs or
- read our{' '}
-
- blog post
- {' '}
- to get started.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Contact us
-
-
- View other work
-
-
-
-
- );
-};
-
-export default Home;
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
deleted file mode 100644
index 60a1d1f4..00000000
--- a/website/src/styles/global.css
+++ /dev/null
@@ -1,56 +0,0 @@
-@font-face {
- font-family: 'nt-dapper';
- src: url('https://webkid.io/fonts/NTDapper-regular.woff2') format('woff2'),
- url('https://webkid.io/fonts/NTDapper-regular.woff') format('woff'),
- url('https://webkid.io/fonts/NTDapper-regular.eot');
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'nt-dapper';
- src: url('https://webkid.io/fonts/NTDapper-bold.woff2') format('woff2'),
- url('https://webkid.io/fonts/NTDapper-bold.woff') format('woff'),
- url('https://webkid.io/fonts/NTDapper-bold.eot');
- font-weight: 700;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'nt-dapper';
- src: url('https://webkid.io/fonts/NTDapper-black.woff2') format('woff2'),
- url('https://webkid.io/fonts/NTDapper-black.woff') format('woff'),
- url('https://webkid.io/fonts/NTDapper-black.eot');
- font-weight: 900;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'jetbrains-mono';
- src: url('../../static/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
- url('../../static/fonts/JetBrainsMono-Regular.woff') format('woff'),
- url('../../static/fonts/JetBrainsMono-Regular.eot');
- font-weight: 400;
- font-style: normal;
-}
-
-.noscroll {
- height: 100vh;
- overflow: hidden;
- position: fixed;
- width: 100%;
-}
-
-.react-flow {
- font-family: 'jetbrains-mono';
- text-transform: uppercase;
-}
-
-.react-flow .react-flow__node {
- font-size: 14px;
-}
-
-.react-flow__controls-button {
- width: 16px;
- height: 16px;
-}
diff --git a/website/src/templates/doc-page.js b/website/src/templates/doc-page.js
deleted file mode 100644
index cafb8a3a..00000000
--- a/website/src/templates/doc-page.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react';
-import { graphql } from 'gatsby';
-import { Box } from 'reflexbox';
-import styled from '@emotion/styled';
-
-import DocPage from 'components/Page/Doc';
-import Mdx from './mdx-renderer/DocMdx';
-import { H1 } from 'components/Typo';
-import Icon from 'components/Icon';
-
-const docsMenu = [
- { title: 'Introduction' },
- { title: 'Getting Started' },
- {
- group: 'API Reference',
- items: [
- { title: 'Prop Types' },
- { title: 'Helper Functions' },
- {
- group: 'Nodes',
- items: [
- { title: 'Node Options' },
- { title: 'Node Types & Custom Nodes' },
- { title: 'Handle Component' },
- ],
- },
- {
- group: 'Edges',
- items: [
- { title: 'Edge Options' },
- { title: 'Edge Types & Custom Edges' },
- { title: 'Edge Utils' },
- ],
- },
- { title: 'Instance' },
- { title: 'Internal State and Actions' },
- {
- group: 'Components',
- items: [
- { title: 'Background' },
- { title: 'Mini Map' },
- { title: 'Controls' },
- { title: 'Provider' },
- ],
- },
- ],
- },
-];
-
-const EditLink = styled.a`
- display: flex;
- align-items: center;
-
- &:hover {
- opacity: 0.6;
- }
-
- .icon {
- margin-right: 5px;
- }
-`;
-
-const EditButton = ({ slug }) => (
-
-
-
- Edit this page
-
-
-);
-
-function extendMenu(items, menuData) {
- items.forEach((menuItem) => {
- if (menuItem.group) {
- return extendMenu(menuItem.items, menuData);
- }
-
- menuItem.slug =
- menuData.find((m) => m.title === menuItem.title)?.slug || '/';
- });
-}
-
-const DocPageTemplate = ({ data, pageContext }) => {
- const { content } = data;
- const { title } = content.frontmatter;
-
- const metaTags = {
- title: `React Flow - ${title} Docs`,
- description: content.excerpt,
- siteUrl: `https://reactflow.dev${content.fields.slug}`,
- robots: 'index, follow',
- };
-
- extendMenu(docsMenu, pageContext.menu);
-
- const slug = content.fileAbsolutePath.split('markdown')[1];
-
- return (
-
- {title}
-
-
-
- );
-};
-
-export default DocPageTemplate;
-
-export const pageQuery = graphql`
- query DocPageBySlug($slug: String!) {
- content: mdx(fields: { slug: { eq: $slug } }) {
- id
- fileAbsolutePath
- excerpt
- body
- fields {
- slug
- }
- frontmatter {
- title
- }
- }
- }
-`;
diff --git a/website/src/templates/example-page.js b/website/src/templates/example-page.js
deleted file mode 100644
index 5e40bc01..00000000
--- a/website/src/templates/example-page.js
+++ /dev/null
@@ -1,53 +0,0 @@
-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 (
-
- {flow && }
-
- );
-};
-
-export const pageQuery = graphql`
- query SourceBySourceSlug($sourceSlug: String!) {
- allFile(filter: { absolutePath: { regex: $sourceSlug } }) {
- edges {
- node {
- id
- absolutePath
- internal {
- content
- }
- }
- }
- }
- }
-`;
diff --git a/website/src/templates/mdx-renderer/DefaultMdx.js b/website/src/templates/mdx-renderer/DefaultMdx.js
deleted file mode 100644
index a1c24d20..00000000
--- a/website/src/templates/mdx-renderer/DefaultMdx.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import { MDXRenderer } from 'gatsby-plugin-mdx';
-
-const Mdx = ({ content = null }) => {
- return (
-
- {content}
-
- );
-};
-
-export default Mdx;
diff --git a/website/src/templates/mdx-renderer/DocMdx.js b/website/src/templates/mdx-renderer/DocMdx.js
deleted file mode 100644
index 2c049acc..00000000
--- a/website/src/templates/mdx-renderer/DocMdx.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-
-import { MDXProvider } from '@mdx-js/react';
-import { MDXRenderer } from 'gatsby-plugin-mdx';
-
-import { H1, H2, H3, H4, Text } from 'components/Typo';
-import CodeBlock from 'components/CodeBlock/Mdx';
-import InfoBox from 'components/InfoBox';
-
-import { getThemeSpacePx } from 'utils/css-utils';
-
-const DocWrapper = styled.div`
- ${Text} {
- margin-bottom: ${getThemeSpacePx(3)};
- margin-top: ${getThemeSpacePx(3)};
-
- code {
- background: rgb(246, 248, 250);
- border-radius: 2px;
- padding: 0 3px;
- font-size: 14px;
- }
- }
-
- ul,
- ol {
- padding-left: ${getThemeSpacePx(4)};
- }
-
- li {
- margin-bottom: ${getThemeSpacePx(2)};
-
- code {
- font-size: 14px;
- }
- }
-
- hr {
- max-width: calc(680px - 32px);
- }
-
- h1 {
- margin-top: ${getThemeSpacePx(6)};
- }
-
- h2 {
- margin-top: ${getThemeSpacePx(5)};
- }
-
- h3 {
- margin-top: ${getThemeSpacePx(4)};
- }
-
- h1,
- h2,
- h3,
- h4,
- h5 {
- a {
- color: ${(p) => p.theme.colors.text};
- }
- }
-
- iframe {
- display: block;
- width: 100%;
- }
-
- .gatsby-resp-image-wrapper {
- border: 1px solid ${(p) => p.theme.colors.silver};
- border-radius: 2px;
- overflow: hidden;
- margin-bottom: ${getThemeSpacePx(5)};
- margin-top: ${getThemeSpacePx(5)};
- }
-
- em {
- .gatsby-resp-image-figure {
- margin: 0;
- }
-
- .gatsby-resp-image-figcaption {
- font-style: normal;
- }
- }
-
- .gatsby-resp-image-figure {
- max-width: 1200px;
- }
-
- .gatsby-resp-image-figcaption {
- color: ${(p) => p.theme.colors.textLight};
- margin-top: -${getThemeSpacePx(5)};
- text-align: center;
- }
-
- a:hover {
- opacity: 0.6;
- }
-`;
-
-const DocH1 = styled(H1)`
- margin: ${getThemeSpacePx(6)} 0 ${getThemeSpacePx(3)} 0;
-`;
-
-const DocH2 = styled(H2)`
- margin: ${getThemeSpacePx(6)} 0 ${getThemeSpacePx(3)} 0;
-`;
-
-const DocH3 = styled(H3)`
- margin: ${getThemeSpacePx(6)} 0 ${getThemeSpacePx(3)} 0;
-`;
-
-const DocH4 = styled(H4)`
- margin: ${getThemeSpacePx(6)} 0 ${getThemeSpacePx(3)} 0;
-`;
-
-const CustomComponents = {
- h1: DocH1,
- h2: DocH2,
- h3: DocH3,
- h4: DocH4,
- p: Text,
- pre: (props) =>
,
- code: CodeBlock,
- InfoBox,
-};
-
-const BlogMdx = ({ content = null }) => {
- return (
-
-
- {content}
-
-
- );
-};
-
-export default BlogMdx;
diff --git a/website/src/themes/global.js b/website/src/themes/global.js
deleted file mode 100644
index 55564caa..00000000
--- a/website/src/themes/global.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { useTheme } from 'emotion-theming';
-import { Global, css } from '@emotion/core';
-
-const GlobalStyle = () => {
- const theme = useTheme();
-
- const globalStyles = css`
- html,
- body {
- background-color: ${theme.colors.background};
- font-family: ${theme.fonts.sans};
- font-weight: 400;
- letter-spacing: 0.5px;
- line-height: 1.5;
- font-size: 16px;
- padding: 0;
- margin: 0;
- min-height: 100vh;
- }
-
- a {
- color: ${theme.colors.red};
- text-decoration: none;
- }
-
- a:visited,
- a:focus,
- a:active {
- color: ${theme.colors.red};
- text-decoration: none;
- }
-
- a:hover {
- color: ${theme.colors.red};
- text-decoration: none;
- }
-
- .fullOpacity {
- opacity: 1;
- }
-
- code,
- pre {
- font-family: ${theme.fonts.mono};
- background: rgb(246, 248, 250);
- padding: 2px 6px;
- border-radius: 5px;
- }
- `;
-
- return
;
-};
-
-export default GlobalStyle;
diff --git a/website/src/themes/index.js b/website/src/themes/index.js
deleted file mode 100644
index 461626e2..00000000
--- a/website/src/themes/index.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import { px, breakpoints } from 'utils/css-utils';
-
-const space = [0, 4, 8, 16, 32, 48, 64, 96, 128];
-const spacePx = space.map(px);
-
-const fontSizes = [12, 16, 20, 24, 36, 48, 54];
-const fontSizesPx = fontSizes.map(px);
-const breakpointsPx = Object.values(breakpoints).map(px);
-
-const base = {
- fonts: {
- sans:
- "'nt-dapper', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif",
- mono: "'jetbrains-mono', monospace",
- },
- maxWidth: '1200px',
- maxWidthBig: '1800px',
- space,
- spacePx,
- fontSizes,
- fontSizesPx,
- breakpoints: breakpointsPx,
- boxShadow: '0px 16px 64px rgba(26, 25, 43, 0.32);',
-};
-
-export const baseColors = {
- orange: '#FF6700',
- blue: '#0041D0',
- red: '#FF0072',
- redLighten15: '#FF2687',
- redLighten30: '#FE4C9C',
- redLighten60: '#FF99C6',
- redLighten90: '#FFE5F1',
- purple: '#784BE8',
- mint: '#00D7CA',
- lightGrey: '#D9D9D9',
- textDark: '#1A192B',
- textLight: '#ffffff',
- violet: '#1A192B',
- violetLighten5: '#222138',
- violetLighten15: '#333154',
- violetLighten30: '#4C497E',
- violetLighten45: '#6865A5',
- violetLighten60: '#918FBE',
- violetLighten85: '#D6D5E6',
- violetLighten95: '#F1F1F6',
- silver: '#EEF0F2',
- silverDarken15: '#C5CBD2',
- silverDarken30: '#9CA8B3',
- silverDarken60: '#53606C',
- silverDarken75: '#343C43',
- silverLighten15: '#F0F2F3',
- silverLighten30: '#F3F4F5',
- silverLighten60: '#F8F9F9',
-};
-
-export const darkColors = {
- background: baseColors.violet,
- sectionBackground: baseColors.violetLighten5,
- cardBackground: '#222138',
- text: baseColors.textLight,
- textLight: baseColors.silverDarken30,
- textInverted: '#16152E',
- stroke: '#2E2D3F',
- button: '#ffffff',
- footerBackground: baseColors.silverLighten60,
-};
-
-export const lightColors = {
- background: '#ffffff',
- sectionBackground: '#f2f2f2',
- cardBackground: '#eeeeee',
- text: baseColors.textDark,
- textLight: '#808080',
- textInverted: '#ffffff',
- stroke: '#E9E9E9',
- button: baseColors.violet,
- footerBackground: baseColors.violet,
-};
-
-export const colors = {
- ...baseColors,
- dark: darkColors,
- light: lightColors,
-};
-
-const dark = {
- ...base,
- name: 'dark',
- colors: {
- ...colors,
- ...colors.dark,
- },
-};
-
-const light = {
- ...base,
- name: 'light',
- colors: {
- ...colors,
- ...colors.light,
- },
-};
-
-export default {
- dark,
- light,
-};
diff --git a/website/src/themes/normalize.js b/website/src/themes/normalize.js
deleted file mode 100644
index 25a61b4e..00000000
--- a/website/src/themes/normalize.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { memo } from 'react';
-import { Global, css } from '@emotion/core';
-import emotionNormalize from 'emotion-normalize';
-
-const NormalizeStyle = memo(() => {
- const globalStyles = css`
- ${emotionNormalize}
-
- input {
- box-sizing: border-box;
- }
- `;
-
- return
;
-});
-
-export default NormalizeStyle;
diff --git a/website/src/utils/browser-utils.js b/website/src/utils/browser-utils.js
deleted file mode 100644
index af48ff3d..00000000
--- a/website/src/utils/browser-utils.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export function isOldIE() {
- if (typeof navigator === 'undefined') {
- return false;
- }
-
- // https://stackoverflow.com/a/22242528
- return (
- navigator.userAgent.indexOf('MSIE') !== -1 ||
- navigator.appVersion.indexOf('Trident/') > -1
- );
-}
-
-export default {
- isOldIE,
-};
diff --git a/website/src/utils/css-utils.js b/website/src/utils/css-utils.js
deleted file mode 100644
index b236a78c..00000000
--- a/website/src/utils/css-utils.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { css } from '@emotion/core';
-
-export const breakpoints = {
- s: 460,
- m: 768,
- l: 1024,
- xl: 1280,
-};
-
-export const device = {
- phone: `(min-width: ${breakpoints.s}px)`,
- tablet: `(min-width: ${breakpoints.m}px)`,
- desktop: `(min-width: ${breakpoints.l}px)`,
- desktopL: `(min-width: ${breakpoints.xl}px)`,
-};
-
-// https://github.com/styled-components/styled-components/blob/master/packages/styled-components/docs/tips-and-tricks.md#more-powerful-example
-const getMediaQuery = (size) => {
- return (...styleDefinition) => css`
- @media (min-width: ${size}px) {
- ${css(...styleDefinition)}
- }
- `;
-};
-
-export const media = {
- s: getMediaQuery(breakpoints.s),
- m: getMediaQuery(breakpoints.m),
- l: getMediaQuery(breakpoints.l),
- xl: getMediaQuery(breakpoints.xl),
-};
-
-export const rgba = (hex, alpha) => {
- const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
- return `rgba(${r},${g},${b},${alpha})`;
-};
-
-export const px = (val) => `${val}px`;
-
-export const getThemeColor = (colorName) => (props) =>
- props.theme.colors[colorName];
-
-export const getThemeSpacePx = (spaceIndex) => (props) =>
- props.theme.spacePx[spaceIndex];
-
-export default {
- rgba,
- px,
- getThemeColor,
- getThemeSpacePx,
-};
diff --git a/website/src/utils/project-utils.js b/website/src/utils/project-utils.js
deleted file mode 100644
index fc54afbd..00000000
--- a/website/src/utils/project-utils.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export const parseProjectDate = (dateString) => {
- const parts = dateString.split('/');
- return new Date(+parts[0], +parts[1] - 1, +parts[2]);
-};
-
-export const groupProjectsByYear = (projects) => {
- return projects.reduce((grouped, project) => {
- const year = project.date.getFullYear();
- grouped[year] = grouped.hasOwnProperty(year)
- ? grouped[year].concat([project])
- : [project];
- return grouped;
- }, {});
-};
-
-export const getMainCategory = (categoryArray = []) => {
- const matchingCategory = mainTags.find((mc) =>
- categoryArray.find((cat) => mc.id === cat)
- );
-
- return matchingCategory ? matchingCategory.id : null;
-};
-
-export const shuffleProjects = (projects) => {
- return projects.sort((a, b) => Math.random() - 0.5);
-};
-
-export default {
- parseProjectDate,
- groupProjectsByYear,
- getMainCategory,
- shuffleProjects,
-};
diff --git a/website/static/favicon.ico b/website/static/favicon.ico
deleted file mode 100644
index 731acd59..00000000
Binary files a/website/static/favicon.ico and /dev/null differ
diff --git a/website/static/fonts/JetBrainsMono-Bold.eot b/website/static/fonts/JetBrainsMono-Bold.eot
deleted file mode 100644
index 00495b45..00000000
Binary files a/website/static/fonts/JetBrainsMono-Bold.eot and /dev/null differ
diff --git a/website/static/fonts/JetBrainsMono-Bold.woff b/website/static/fonts/JetBrainsMono-Bold.woff
deleted file mode 100644
index f57d10b8..00000000
Binary files a/website/static/fonts/JetBrainsMono-Bold.woff and /dev/null differ
diff --git a/website/static/fonts/JetBrainsMono-Bold.woff2 b/website/static/fonts/JetBrainsMono-Bold.woff2
deleted file mode 100644
index 8ce6502f..00000000
Binary files a/website/static/fonts/JetBrainsMono-Bold.woff2 and /dev/null differ
diff --git a/website/static/fonts/JetBrainsMono-Regular.eot b/website/static/fonts/JetBrainsMono-Regular.eot
deleted file mode 100644
index dd3c98df..00000000
Binary files a/website/static/fonts/JetBrainsMono-Regular.eot and /dev/null differ
diff --git a/website/static/fonts/JetBrainsMono-Regular.woff b/website/static/fonts/JetBrainsMono-Regular.woff
deleted file mode 100644
index 20b54f1e..00000000
Binary files a/website/static/fonts/JetBrainsMono-Regular.woff and /dev/null differ
diff --git a/website/static/fonts/JetBrainsMono-Regular.woff2 b/website/static/fonts/JetBrainsMono-Regular.woff2
deleted file mode 100644
index e57de0b1..00000000
Binary files a/website/static/fonts/JetBrainsMono-Regular.woff2 and /dev/null differ
diff --git a/website/static/images/react-flow-header.jpg b/website/static/images/react-flow-header.jpg
deleted file mode 100644
index 57fe478b..00000000
Binary files a/website/static/images/react-flow-header.jpg and /dev/null differ
diff --git a/website/static/robots.txt b/website/static/robots.txt
deleted file mode 100644
index eb053628..00000000
--- a/website/static/robots.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-User-agent: *
-Disallow: