docs(website): sidebar mobile

2020-10-05 18:42:51 +02:00
parent 2b0ac017c3
commit 7c460dcf9d
48 changed files with 211 additions and 326 deletions
@@ -53,9 +53,6 @@ module.exports = {
              linkImagesToOriginal: false,
            },
          },
-          {
-            resolve: `gatsby-remark-images-medium-zoom`,
-          },
        ],
      },
    },
@@ -73,18 +70,7 @@ module.exports = {
              linkImagesToOriginal: false,
            },
          },
-          {
-            resolve: `gatsby-remark-responsive-iframe`,
-            options: {
-              wrapperStyle: `margin-bottom: 1.0725rem`,
-            },
-          },
          'gatsby-remark-copy-linked-files',
-          {
-            resolve: `gatsby-remark-images-medium-zoom`, // Important!
-            options: {},
-          },
-          // 'gatsby-remark-unwrap-images',
        ],
        remarkPlugins: [require('remark-unwrap-images')],
        extensions: [`.md`, `.mdx`],
@@ -1446,11 +1446,6 @@
        }
      }
    },
-    "@fastly/performance-observer-polyfill": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@fastly/performance-observer-polyfill/-/performance-observer-polyfill-1.1.1.tgz",
-      "integrity": "sha512-hmXJBYhIs77KPyg/IcPM5sDeQSPLrTzD6DqGfSUUtvEUoQxbW6nxHYCYJE8CP+Ay+OUqLZlTpW+w1OEOZWckzQ=="
-    },
    "@graphql-tools/schema": {
      "version": "6.2.2",
      "resolved": "https://registry.npmjs.org/@graphql-tools/schema/-/schema-6.2.2.tgz",
@@ -12300,98 +12295,6 @@
        }
      }
    },
-    "gatsby-remark-images-medium-zoom": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/gatsby-remark-images-medium-zoom/-/gatsby-remark-images-medium-zoom-1.7.0.tgz",
-      "integrity": "sha512-TLaq+ua+nO2CX/B/FnWB0OvJiLdplzbRCXrgCxYoZs3RkN5IfUu9BJYKEFjzx6J3uhwLvBA7XqE5cFOZ2cu4AQ==",
-      "requires": {
-        "@fastly/performance-observer-polyfill": "^1.1.1",
-        "medium-zoom": "^1.0.4"
-      }
-    },
-    "gatsby-remark-responsive-iframe": {
-      "version": "2.4.14",
-      "resolved": "https://registry.npmjs.org/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-2.4.14.tgz",
-      "integrity": "sha512-BsAyKplgZaLAXGd5d1DNBkuk3xS5rSiQn6J5Rx2ZQi4PznZiCuHAdOzFHRq/K/mQw8rEsesy1bsf6p/gQltwlw==",
-      "requires": {
-        "@babel/runtime": "^7.11.2",
-        "cheerio": "^1.0.0-rc.3",
-        "common-tags": "^1.8.0",
-        "lodash": "^4.17.20",
-        "unist-util-visit": "^1.4.1"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.11.2",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
-          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "cheerio": {
-          "version": "1.0.0-rc.3",
-          "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
-          "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
-          "requires": {
-            "css-select": "~1.2.0",
-            "dom-serializer": "~0.1.1",
-            "entities": "~1.1.1",
-            "htmlparser2": "^3.9.1",
-            "lodash": "^4.15.0",
-            "parse5": "^3.0.1"
-          }
-        },
-        "dom-serializer": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
-          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
-          "requires": {
-            "domelementtype": "^1.3.0",
-            "entities": "^1.1.1"
-          }
-        },
-        "entities": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
-        },
-        "lodash": {
-          "version": "4.17.20",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
-        },
-        "parse5": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
-          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
-          "requires": {
-            "@types/node": "*"
-          }
-        },
-        "unist-util-is": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-          "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
-        },
-        "unist-util-visit": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
-          "requires": {
-            "unist-util-visit-parents": "^2.0.0"
-          }
-        },
-        "unist-util-visit-parents": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
-          "requires": {
-            "unist-util-is": "^3.0.0"
-          }
-        }
-      }
-    },
    "gatsby-remark-unwrap-images": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/gatsby-remark-unwrap-images/-/gatsby-remark-unwrap-images-1.0.2.tgz",
@@ -16300,11 +16203,6 @@
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
    },
-    "medium-zoom": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.0.6.tgz",
-      "integrity": "sha512-UdiUWfvz9fZMg1pzf4dcuqA0W079o0mpqbTnOz5ip4VGYX96QjmbM+OgOU/0uOzAytxC0Ny4z+VcYQnhdifimg=="
-    },
    "memoizerific": {
      "version": "1.11.3",
      "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -36,8 +36,6 @@
    "gatsby-plugin-svgr": "^2.0.2",
    "gatsby-remark-copy-linked-files": "^2.3.15",
    "gatsby-remark-images": "^3.3.30",
-    "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-responsive-iframe": "^2.4.14",
    "gatsby-remark-unwrap-images": "^1.0.2",
    "gatsby-source-filesystem": "^2.3.30",
    "gatsby-transformer-javascript-frontmatter": "^2.3.13",
@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Flex } from 'reflexbox';
+
+import { getThemeSpacePx } from 'utils/css-utils';
+import Icon from 'components/Icon';
+
+const Close = styled(Flex)`
+  padding: ${getThemeSpacePx(1)};
+  line-height: 1;
+  width: 50px;
+  height: 50px;
+`;
+
+export default ({ onClick, ...props }) => {
+  return (
+    <Flex pb={4} alignItems="center" justifyContent="center" {...props}>
+      <Close alignItems="center" justifyContent="center" onClick={onClick}>
+        <Icon name="close" strokeColor="text" colorizeStroke />
+      </Close>
+    </Flex>
+  );
+};
@@ -1,11 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Link } from 'gatsby';
 import styled from '@emotion/styled';
 import { Flex, Box } from 'reflexbox';

 import Icon from 'components/Icon';
 import Button from 'components/Button';
+import Close from 'components/Close';
 import { getThemeColor, getThemeSpacePx, device, px } from 'utils/css-utils';
+import useMenuHeight from 'hooks/useMenuHeight';
+
 import ReactFlowLogo from 'assets/images/react-flow-logo.svg';

 const Centered = styled(Flex)`
@@ -26,7 +29,7 @@ const NavWrapper = styled(Box)`
  left: 0;
  width: 100%;
  padding: ${getThemeSpacePx(3)};
-  z-index: 100;
+  z-index: 500;
  background: ${getThemeColor('background')};
  align-items: center;
  flex-direction: column;
@@ -112,6 +115,18 @@ const NavItem = styled(Link)`
 `;

 const GithubButton = styled.a`
+  font-size: 30px;
+  display: block;
+  padding: ${(p) => (p.isButton ? '8px 16px' : '16px 0')};
+  text-align: center;
+  color: ${getThemeColor('textLight')};
+
+  &:focus,
+  &:visited,
+  &:active {
+    color: ${getThemeColor('textLight')};
+  }
+
  @media ${device.tablet} {
    margin-left: 50px;
    font-size: 16px;
@@ -126,16 +141,6 @@ const GithubButton = styled.a`
  }
 `;

-const Close = styled.div`
-  padding: ${getThemeSpacePx(1)};
-  line-height: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 50px;
-  height: 50px;
-`;
-
 const NavButton = styled.div`
  cursor: pointer;

@@ -166,10 +171,9 @@ const LogoSubtitle = styled(Box)`
 `;

 const Header = () => {
-  const [menuHeight, setMenuHeight] = useState(
-    typeof window !== 'undefined' ? window.innerHeight : 0
-  );
  const [menuOpen, setMenuOpen] = useState(false);
+  const menuHeight = useMenuHeight();
+
  const toggleMenu = () => {
    const nextMenuOpen = !menuOpen;

@@ -178,18 +182,6 @@ const Header = () => {
    setMenuOpen(nextMenuOpen);
  };

-  useEffect(() => {
-    const onResize = () => {
-      setMenuHeight(typeof window !== 'undefined' ? window.innerHeight : 0);
-    };
-
-    window.addEventListener('resize', onResize);
-
-    return () => {
-      window.removeEventListener('resize', onResize);
-    };
-  });
-
  return (
    <Wrapper>
      <Centered>
@@ -228,21 +220,17 @@ const Header = () => {
                Github
              </Button>

-              <a
+              <GithubButton
                href="https://github.com/wbkd/react-flow"
                activeClassName="active"
                className="mobile"
                isButton
              >
                Github
-              </a>
+              </GithubButton>
            </NavInner>
          </Nav>
-          <Flex pb={4} alignItems="center" className="mobile">
-            <Close onClick={toggleMenu}>
-              <Icon name="close" strokeColor="text" colorizeStroke />
-            </Close>
-          </Flex>
+          <Close onClick={toggleMenu} className="mobile" />
        </NavWrapper>
      </Centered>
    </Wrapper>
@@ -9,15 +9,11 @@ const Wrapper = styled(Flex)`
  border-top: 1px solid ${(p) => p.theme.colors.silverLighten30};
 `;

-const left =
-  typeof window !== 'undefined' && window.innerWidth > 1000
-    ? Math.min(350, window.innerWidth * 0.3) / 2
-    : 0;
-
 const DocWrapper = styled(Box)`
  max-width: 620px;
  margin: 0 auto;
  position: relative;
+  padding: 0 16px;
 `;

 export default ({ children, menu = [], ...rest }) => (
@@ -1,14 +1,54 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import Link from 'gatsby-link';
 import styled from '@emotion/styled';
+import { Flex } from 'reflexbox';

-import { getThemeColor, getThemeSpacePx } from 'utils/css-utils';
+import Icon from 'components/Icon';
+import Close from 'components/Close';
+import useMenuHeight from 'hooks/useMenuHeight';
+import { getThemeColor, getThemeSpacePx, device, px } from 'utils/css-utils';

 const Aside = styled.aside`
-  width: 30%;
-  max-width: 300px;
-  padding: 16px;
-  border-right: 1px solid ${getThemeColor('silverLighten30')};
+  display: ${(p) => (p.isOpen ? 'block' : 'none')};
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: ${(p) => px(p.height)};
+  overflow-y: auto;
+  background: white;
+  z-index: 400;
+
+  @media ${device.tablet} {
+    width: 30%;
+    max-width: 300px;
+    padding: 16px;
+    border-right: 1px solid ${getThemeColor('silverLighten30')};
+    display: block;
+    position: relative;
+    height: auto;
+
+    .mobile {
+      display: none;
+    }
+  }
+`;
+
+const AsideInner = styled.div``;
+
+const MobileButton = styled(Flex)`
+  z-index: 10;
+  background: ${getThemeColor('violetLighten5')};
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  color: white;
+  border-radius: 100%;
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
 `;

 const MenuLink = styled(Link)`
@@ -53,10 +93,34 @@ const SideBarParts = ({ items, level }) =>
  });

 const Sidebar = ({ menu }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuHeight = useMenuHeight();
+
+  const toggleSidebar = () => {
+    const nextMenuOpen = !isOpen;
+
+    document.body.classList.toggle('noscroll', nextMenuOpen);
+
+    setIsOpen(nextMenuOpen);
+  };
+
  return (
-    <Aside>
-      <SideBarParts items={menu} level={0} />
-    </Aside>
+    <>
+      <MobileButton onClick={toggleSidebar}>
+        <Icon
+          name="menu"
+          width="24px"
+          colorizeStroke
+          strokeColor="silverLighten60"
+        />
+      </MobileButton>
+      <Aside isOpen={isOpen} height={menuHeight}>
+        <AsideInner>
+          <SideBarParts items={menu} level={0} />
+          <Close className="mobile" onClick={toggleSidebar} />
+        </AsideInner>
+      </Aside>
+    </>
  );
 };

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+const getInnerHeight = () => {
+  return typeof window !== 'undefined' ? window.innerHeight : 0;
+};
+
+export default function useMenuHeight() {
+  const [menuHeight, setMenuHeight] = useState(getInnerHeight());
+
+  useEffect(() => {
+    const onResize = () => {
+      setMenuHeight(getInnerHeight());
+    };
+
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  });
+
+  return menuHeight;
+}
@@ -2,14 +2,34 @@ import React from 'react';
 import ReactFlow from 'react-flow-renderer';

 const elements = [
-  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  // you can also pass a React component as a label
-  { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
+  // input node
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Input Node' },
+    position: { x: 250, y: 25 },
+  },
+  // default node
+  {
+    id: '2',
+    // you can also pass a React component as a label
+    data: { label: <div>Default Node</div> },
+    position: { x: 100, y: 125 },
+  },
+  // output node
+  {
+    id: '3',
+    type: 'output',
+    // you can also pass a React component as a label
+    data: { label: 'Output Node' },
+    position: { x: 250, y: 250 },
+  },
  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e2-3', source: '2', target: '3' },
 ];

 export default () => (
-  <div style={{ height: 400, border: '1px solid #EAEDF1', borderRadius: 5 }}>
+  <div style={{ height: 300, border: '1px solid #EAEDF1', borderRadius: 5 }}>
    <ReactFlow elements={elements} />
  </div>
 );
@@ -25,10 +25,31 @@ import React from 'react';
 import ReactFlow from 'react-flow-renderer';

 const elements = [
-  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
-  // you can also pass a React component as a label
-  { id: '2', data: { label: <div>Node 2</div> }, position: { x: 100, y: 100 } },
+  // input node
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Input Node' },
+    position: { x: 250, y: 25 },
+  },
+  // default node
+  {
+    id: '2',
+    // you can also pass a React component as a label
+    data: { label: <div>Default Node</div> },
+    position: { x: 100, y: 125 },
+  },
+  // output node
+  {
+    id: '3',
+    type: 'output',
+    // you can also pass a React component as a label
+    data: { label: 'Output Node' },
+    position: { x: 250, y: 250 },
+  },
+  // animated edge
  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e2-3', source: '2', target: '3' },
 ];

 const BasicFlow = () => <ReactFlow elements={elements} />;
@@ -100,7 +100,7 @@ const Home = () => {
              <Flex mt={3} alignItems="center">
                <DocsButton
                  as={Link}
-                  to="/docs"
+                  to="/docs/"
                  icon="code"
                  colorizeStroke
                  color="textInverted"
@@ -108,7 +108,7 @@ const Home = () => {
                >
                  Documentation
                </DocsButton>
-                <ExampleButton to="/examples">
+                <ExampleButton to="/examples/">
                  Examples
                  <Icon
                    width="24px"
@@ -9,7 +9,7 @@ import CodeBlock from 'components/CodeBlock/Mdx';

 import { getThemeSpacePx } from 'utils/css-utils';

-const PostWrapper = styled.div`
+const DocWrapper = styled.div`
  ${Text} {
    margin-bottom: ${getThemeSpacePx(3)};
    margin-top: ${getThemeSpacePx(3)};
@@ -18,16 +18,21 @@ const PostWrapper = styled.div`
      background: rgb(246, 248, 250);
      border-radius: 2px;
      padding: 0 3px;
+      font-size: 14px;
    }
  }

  ul,
  ol {
-    padding-left: ${getThemeSpacePx(5)};
+    padding-left: ${getThemeSpacePx(4)};
  }

  li {
    margin-bottom: ${getThemeSpacePx(2)};
+
+    code {
+      font-size: 14px;
+    }
  }

  hr {
@@ -123,9 +128,9 @@ const CustomComponents = {
 const BlogMdx = ({ content = null }) => {
  return (
    <MDXProvider components={CustomComponents}>
-      <PostWrapper>
+      <DocWrapper>
        <MDXRenderer>{content}</MDXRenderer>
-      </PostWrapper>
+      </DocWrapper>
    </MDXProvider>
  );
 };