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

docs(website): texts, docs, examples, favicon, cleanup

Browse Source
This commit is contained in:
moklick
2020-10-05 17:03:00 +02:00
parent 277e032770
commit aafae0ea70
41 changed files with 390 additions and 653 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/CodeBlock/Mdx.js
+17 -12
View File
@@ -18,21 +18,26 @@ export default ({ children, className = 'javascript', language }) => {
style={{
...style,
overflowX: 'auto',
padding: '20px',
borderRadius: '6px',
margin: '40px 0 40px 0',
padding: 16,
borderRadius: 4,
margin: '20px 0 20px 0',
fontSize: 14,
}}
>
{tokens
.filter((line) => line.some((l) => l.content))
.map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
))}
{tokens.map(
(line, i, lines) =>
!(
line.length === 1 &&
line[0].empty &&
(i === 0 || i === lines.length - 1)
) && (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
)
)}
</pre>
)}
</Highlight>
website/src/components/CodeBlock/index.js
+2 -2
View File
@@ -3,11 +3,11 @@ import styled from '@emotion/styled';
import { Box } from 'reflexbox';
import { colors } from 'themes';
import CodeBlock from 'components/Mdx/CodeBlock';
import CodeBlock from './Mdx';
import { H4, AttributionText } from 'components/Typo';
const Wrapper = styled(Box)`
max-width: 800px;
max-width: 750px;
margin: 0 auto;
h4 {
website/src/components/CollaborationButton/index.js
-30
View File
@@ -1,30 +0,0 @@
import React from 'react';
import styled from '@emotion/styled';
import { Flex } from 'reflexbox';
import { Link } from 'gatsby';
import Button from 'components/Button';
import { H3 } from 'components/Typo';
import { getThemeSpacePx } from 'utils/css-utils';
const Wrapper = styled(Flex)`
text-align: center;
${H3} {
margin-bottom: ${getThemeSpacePx(3)};
}
`;
export default ({
caption = 'Are you interested in a collaboration?',
...props
}) => {
return (
<Wrapper alignItems="center" px={2} flexDirection="column" {...props}>
<H3 as="div">{caption}</H3>
<Button as={Link} to="/contact" icon="mail">
Contact us
</Button>
</Wrapper>
);
};
website/src/components/Header/index.js
+2 -2
View File
@@ -209,10 +209,10 @@ const Header = () => {
<NavItem to="/" activeClassName="active" className="mobile">
Home
</NavItem>
<NavItem to="/docs" activeClassName="active">
<NavItem to="/docs/" activeClassName="active">
Docs
</NavItem>
<NavItem to="/examples" activeClassName="active">
<NavItem to="/examples/" activeClassName="active">
Examples
</NavItem>
website/src/components/Mdx/CodeBlock/index.js
-33
View File
@@ -1,33 +0,0 @@
import React from 'react';
import Highlight, { defaultProps } from 'prism-react-renderer';
import dracula from 'prism-react-renderer/themes/github';
export default ({ children, className = 'javascript', language }) => {
const lang = language ? language : className.replace(/language-/, '');
return (
<Highlight
{...defaultProps}
theme={dracula}
code={children}
language={lang}
>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre
className={className}
style={{ ...style, overflowX: 'auto', padding: '20px' }}
>
{tokens
.filter((line) => line.some((l) => l.content))
.map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
))}
</pre>
)}
</Highlight>
);
};
website/src/components/Mdx/index.js
-58
View File
@@ -1,58 +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/Mdx/CodeBlock';
import CenterContent from 'components/CenterContent';
const doNotWrap = ['BlogpostAd'];
const MdxWrapper = ({ children }) => {
return children.map((child, i) =>
doNotWrap.includes(child.props?.mdxType) ? (
child
) : (
<CenterContent key={i} mb={2} maxWidth="680px">
{child}
</CenterContent>
)
);
};
const PostWrapper = styled.div`
img {
width: 100%;
}
.gatsby-resp-image-wrapper {
border: 1px solid ${(p) => p.theme.colors.silver};
border-radius: 2px;
overflow: hidden;
}
`;
const CustomComponents = {
h1: H1,
h2: H2,
h3: H3,
h4: H4,
p: Text,
pre: (props) => <div {...props} />,
code: CodeBlock,
wrapper: MdxWrapper,
};
const Mdx = ({ content = null }) => {
return (
<MDXProvider components={CustomComponents}>
<PostWrapper>
<MDXRenderer>{content}</MDXRenderer>
</PostWrapper>
</MDXProvider>
);
};
export default Mdx;
website/src/components/ProjectTeaser/Large.js
-100
View File
@@ -1,100 +0,0 @@
import React from 'react';
import styled from '@emotion/styled';
import { Box } from 'reflexbox';
import { Link } from 'gatsby';
import Img from 'gatsby-image';
import { H2, H4, TextLight } from 'components/Typo';
import { getThemeColor, getThemeSpacePx, device } from 'utils/css-utils';
const Teaser = styled(Box)`
position: relative;
.gatsby-image-wrapper {
transition: transform 200ms ease, box-shadow 200ms ease;
}
&:hover {
.gatsby-image-wrapper {
transform-origin: center center;
transform: scale(1.025);
box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.25);
}
}
`;
const StyledImg = styled(Img)`
border-radius: 4px;
margin-bottom: ${getThemeSpacePx(3)};
`;
const ReadMore = styled(Box)`
color: ${(p) => p.theme.colors.text};
&:hover {
opacity: 0.6;
}
`;
const TextWrapper = styled.div`
padding: 0;
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 10;
&& {
a,
a:visited,
a:hover,
a:focus,
a:active {
color: ${getThemeColor('silverLighten60')};
}
}
${TextLight} {
color: ${getThemeColor('silverDarken30')};
}
${H2} {
color: ${getThemeColor('silverLighten60')};
margin-top: 5px;
}
${H4} {
font-weight: 400;
color: ${getThemeColor('silverDarken30')};
}
@media ${device.tablet} {
width: 80%;
}
`;
const ProjectTeaser = ({
kicker = '',
title = '',
text = '',
fluid = null,
slug = '/',
}) => {
return (
<Link to={slug}>
<Teaser mb={[4, 5, 6]}>
<StyledImg fluid={fluid} />
<TextWrapper>
<TextLight>{kicker}</TextLight>
<H2 as="div">{title}</H2>
<H4 as="div">{text}</H4>
<ReadMore mt={3}>Read more</ReadMore>
</TextWrapper>
</Teaser>
</Link>
);
};
export default ProjectTeaser;
website/src/components/ProjectTeaser/Small.js
-133
View File
@@ -1,133 +0,0 @@
import React from 'react';
import styled from '@emotion/styled';
import { Box } from 'reflexbox';
import { Link } from 'gatsby';
import { H3, H2, H4, TextLight, Text } from 'components/Typo';
import {
px,
getThemeColor,
getThemeSpacePx,
rgba,
device,
} from 'utils/css-utils';
const Wrapper = styled(Box)`
border-radius: 6px;
background: ${(props) =>
props.isDark
? props.theme.colors.dark.cardBackground
: props.theme.colors.light.background};
background-image: ${(props) =>
props.imgSrc ? `url(${props.imgSrc})` : 'none'};
background-repeat: no-repeat;
background-position: ${(props) => props.imgPosition};
color: ${(p) => p.theme.colors[p.isDark ? 'dark' : 'light'].text};
background-size: cover;
flex-grow: 1;
height: 270px;
display: flex;
align-items: center;
&.scale {
transition: transform 200ms ease, box-shadow 200ms ease;
transform-style: preserve-3d;
backface-visibility: hidden;
&:hover {
transform-origin: center center;
transform: scale(1.02);
box-shadow: 0 2px 12px 2px rgba(0, 0, 0, 0.45);
}
}
&& {
a,
a:visited,
a:hover,
a:focus,
a:active {
color: ${(p) => p.theme.colors[p.isDark ? 'dark' : 'light'].text};
}
}
`;
const getTextShadow = (props) => {
const color = props.theme.colors[props.isDark ? 'light' : 'dark'].text;
const rgbaColor = rgba(color, props.isDark ? 0.2 : 0.8);
return `-1px 0 14px ${rgbaColor}, 0 1px 14px ${rgbaColor}, 1px 0 14px ${rgbaColor}, 0 -1px 14px ${rgbaColor};`;
};
const TextWrapper = styled.div`
padding: ${getThemeSpacePx(3)};
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 10;
text-shadow: ${getTextShadow};
${H2} {
margin-top: 5px;
}
${H3} {
margin-top: 5px;
}
${TextLight} {
color: ${(p) =>
p.isDark
? getThemeColor('silverDarken30')
: getThemeColor('silverDarken60')};
}
${Text} {
color: ${(p) =>
p.isDark
? getThemeColor('silverDarken30')
: getThemeColor('silverDarken60')};
}
${H4} {
color: ${getThemeColor('silverDarken30')};
}
@media ${device.tablet} {
width: 50%;
}
`;
const ProjectTeaser = ({
kicker = '',
title = '',
text = '',
imgSrc = null,
isDark = false,
imgPosition = null,
imgSize = '100%',
slug = '/',
hoverEffect = null,
}) => {
const imagePosition = imgPosition ? imgPosition : 'center right';
return (
<Link to={slug}>
<Wrapper
imgSrc={imgSrc}
isDark={isDark}
imgPosition={imagePosition}
imgSize={imgSize}
className={hoverEffect}
>
<TextWrapper isDark={isDark}>
<TextLight>{kicker}</TextLight>
<H3 as="div">{title}</H3>
<Text as="div">{text}</Text>
</TextWrapper>
</Wrapper>
</Link>
);
};
export default ProjectTeaser;
website/src/components/Showcases/index.js
+32 -3
View File
@@ -5,13 +5,25 @@ import Img from 'gatsby-image';
import CenterContent from 'components/CenterContent';
import useShowcaseImages from 'hooks/useShowcaseImages';
import { H4 } from 'components/Typo';
import { H4, Text } from 'components/Typo';
import { getThemeColor } from 'utils/css-utils';
import reactFlowIconSrc from 'assets/images/react-flow-logo.svg';
const gridPadding = 2;
const RoundImage = styled(Img)`
border-radius: 4px;
height: 250px;
transition: transform 200ms ease;
`;
const EmptyCase = styled(Box)`
border-radius: 4px;
height: 250px;
background: ${(p) => p.theme.colors.silverLighten60};
display: flex;
justify-content: center;
align-items: center;
`;
const Title = styled(H4)`
@@ -26,25 +38,42 @@ const Link = styled.a`
&:hover {
color: ${getThemeColor('silverLighten15')};
${RoundImage} {
transform: scale(1.025);
}
}
}
`;
const Showcases = () => {
const showcases = useShowcaseImages();
const emptyShowCases = [...Array(3 - showcases.length).keys()];
return (
<CenterContent>
<Flex marginX={-gridPadding}>
{showcases.map((showcase) => (
<Box key={showcase.title} width={1 / 3} px={gridPadding}>
<RoundImage fluid={showcase.image.childImageSharp.fluid} />
<Title>{showcase.title}</Title>
<Link href={showcase.url} target="_blank" rel="noopener noreferrer">
<RoundImage fluid={showcase.image.childImageSharp.fluid} />
<Title>{showcase.title}</Title>
{showcase.url}
</Link>
</Box>
))}
{emptyShowCases.map((index) => (
<Box key={index} width={1 / 3} px={gridPadding}>
<EmptyCase>
<img src={reactFlowIconSrc} alt="react flow logo" />
</EmptyCase>
<Title>Your Project here</Title>
<Text color="silverDarken15">
Let us know if you made something with React Flow.
</Text>
</Box>
))}
</Flex>
</CenterContent>
);
website/src/components/TeaserFlow/A.js
+1 -1
View File
@@ -80,7 +80,7 @@ const flowProps = {
export default () => (
<TeaserFlow
title="Feature-rich"
description="You only need a few lines to get started. You get seamless zooming & panning, different edge and node types, single and multi-selection, controls and more."
description="React Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls, several event handlers and more."
flowProps={flowProps}
withControls
fitView
website/src/components/TeaserFlow/B.js
+3 -3
View File
@@ -62,7 +62,7 @@ const nodeTypes = {
result: ResultNode,
};
const onLoad = (rf) => rf.fitView({ padding: 0.2 });
const onLoad = (rf) => setTimeout(() => rf.fitView({ padding: 0.1 }), 1);
const findNodeById = (id) => (n) => n.id === id;
@@ -96,7 +96,7 @@ export default () => {
resultNode.data = {
...resultNode.data,
value: result,
value: !forname && !lastname ? '*please enter a name*' : result,
};
return nextElements;
@@ -161,7 +161,7 @@ export default () => {
return (
<TeaserFlow
title="Customizable"
description="You can create your own node and edge types. Implement complex UIs inside your nodes or add functionality to your edges. React Flow comes with a lot of event handlers."
description="You can create your own node and edge types or just pass a custom style. You can implement custom UIs inside your nodes and add functionality to your edges."
textPosition="right"
fitView
isDark