alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(website): getting started section

Browse Source
This commit is contained in:
moklick
2020-10-14 18:09:39 +02:00
parent 0afcf6f776
commit a08f89fa14
2 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/TeaserFlow/C.js
+2
View File
@@ -4,6 +4,7 @@ import ReactFlow, {
Background, Background,
Controls, Controls,
addEdge, addEdge,
MiniMap,
} from 'react-flow-renderer'; } from 'react-flow-renderer';
import TeaserFlow from 'components/TeaserFlow'; import TeaserFlow from 'components/TeaserFlow';
@@ -187,6 +188,7 @@ export default () => {
> >
<Background variant="lines" gap={20} /> <Background variant="lines" gap={20} />
<Controls showInteractive={false} /> <Controls showInteractive={false} />
<MiniMap />
</ReactFlow> </ReactFlow>
</ReactFlowProvider> </ReactFlowProvider>
</TeaserFlow> </TeaserFlow>
website/src/pages/index.js
+43 -36
View File
@@ -118,6 +118,11 @@ const CenterHeadline = styled(CenterContent)`
} }
`; `;
const GettingStartedWrapper = styled(Box)`
max-width: 800px;
margin: 0 auto;
`;
const Home = () => { const Home = () => {
return ( return (
<Page metaTags={metaTags}> <Page metaTags={metaTags}>
@@ -165,28 +170,29 @@ const Home = () => {
text="React Flow enables you to build node-based applications. From simple static diagrams to complex interactive editors." text="React Flow enables you to build node-based applications. From simple static diagrams to complex interactive editors."
color={baseColors.textLight} color={baseColors.textLight}
/> />
<Paragraph mb={3} color={baseColors.textLight}> <GettingStartedWrapper>
React Flow is published on{' '} <Paragraph mb={3} color={baseColors.textLight}>
<a React Flow is published on{' '}
href="https://www.npmjs.com/package/react-flow-renderer" <a
target="_blank" href="https://www.npmjs.com/package/react-flow-renderer"
rel="noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
npm >
</a> npm
. You can install it via: </a>
</Paragraph> . You can install it via:
<CodeBlock </Paragraph>
code={`npm install --save react-flow-renderer`} <CodeBlock
language="bash" code={`npm install --save react-flow-renderer`}
/> language="bash"
<Paragraph my={3} color={baseColors.textLight}> />
A flow consists of nodes and edges (or just nodes). Together we call <Paragraph my={3} color={baseColors.textLight}>
them elements. You can pass a set of elements as a prop to the A flow consists of nodes and edges (or just nodes). Together we
ReactFlow component. A simple flow could look like this: call them elements. You can pass a set of elements as a prop to
</Paragraph> the ReactFlow component. A simple flow could look like this:
<CodeBlock </Paragraph>
code={`import React from 'react'; <CodeBlock
code={`import React from 'react';
import ReactFlow from 'react-flow-renderer'; import ReactFlow from 'react-flow-renderer';
const elements = [ const elements = [
@@ -197,20 +203,21 @@ const elements = [
]; ];
export default () => <ReactFlow elements={elements} />;`} export default () => <ReactFlow elements={elements} />;`}
/> />
<Paragraph mt={3} color={baseColors.textLight}> <Paragraph mt={3} color={baseColors.textLight}>
You can find a detailed{' '} You can find a detailed{' '}
<Link to="/docs/getting-started/">entry point</Link> in the docs or <Link to="/docs/getting-started/">entry point</Link> in the docs
read our{' '} or read our{' '}
<a <a
href="https://webkid.io/blog/react-flow-node-based-graph-library/" href="https://webkid.io/blog/react-flow-node-based-graph-library/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
blog post blog post
</a>{' '} </a>{' '}
to get started. to get started.
</Paragraph> </Paragraph>
</GettingStartedWrapper>
</CenterContent> </CenterContent>
</ContentSection> </ContentSection>