···

       
61
       
61
       
 
       
    "eslint": "^6.8.0",

     

       
62
       
62
       
 
       
    "eslint-config-prettier": "^6.10.0",

     

       
63
       
63
       
 
       
    "eslint-plugin-import": "^2.20.1",

     

       
64
       
64
       
+
       
    "eslint-plugin-prettier": "^3.1.2",

     

       
64
       
65
       
 
       
    "eslint-plugin-react": "^7.18.0",

     

       
65
       
66
       
 
       
    "eslint-plugin-react-hooks": "^2.3.0",

     

       
66
       
67
       
 
       
    "execa": "^4.0.0",

     

···

       
1
       
1
       
-
       
import React, { Suspense} from "react";

     

       
2
       
2
       
-
       
import { Routes, Root } from "react-static";

     

       
3
       
3
       
-
       
import Analytics from "react-router-ga";

     

       
1
       
1
       
+
       
import React, { Suspense } from 'react';

     

       
2
       
2
       
+
       
import { Routes, Root } from 'react-static';

     

       
3
       
3
       
+
       
import Analytics from 'react-router-ga';

     

       
4
       
4
       
 
       


     

       
5
       
5
       
-
       
import { GlobalStyle } from "./global-style";

     

       
6
       
6
       
-
       
import { ScrollToTop } from "./scroll-to-top";

     

       
5
       
5
       
+
       
import { GlobalStyle } from './global-style';

     

       
6
       
6
       
+
       
import { ScrollToTop } from './scroll-to-top';

     

       
7
       
7
       
 
       


     

       
8
       
8
       
-
       
import "prismjs/themes/prism.css";

     

       
8
       
8
       
+
       
import 'prismjs/themes/prism.css';

     

       
9
       
9
       
 
       


     

       
10
       
10
       
 
       
const App = () => (

     

       
11
       
11
       
 
       
  <Root>

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const H1 = styled.h1`

     

       
4
       
4
       
 
       
  font-size: 3.2rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const H2 = styled.h2`

     

       
4
       
4
       
 
       
  font-size: 2.2rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const H3 = styled.h3`

     

       
4
       
4
       
 
       
  font-size: 1.5rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const H4 = styled.h4`

     

       
4
       
4
       
 
       
  font-size: 1.5rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const H5 = styled.h5`

     

       
4
       
4
       
 
       
  font-size: 1.5rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const H6 = styled.h6`

     

       
4
       
4
       
 
       
  font-size: 1.3rem;

     

···

       
1
       
1
       
-
       
export { default as H1 } from "./h1";

     

       
2
       
2
       
-
       
export { default as H2 } from "./h2";

     

       
3
       
3
       
-
       
export { default as H3 } from "./h3";

     

       
4
       
4
       
-
       
export { default as H4 } from "./h4";

     

       
5
       
5
       
-
       
export { default as H5 } from "./h5";

     

       
6
       
6
       
-
       
export { default as H6 } from "./h6";

     

       
7
       
7
       
-
       
export { default as P } from "./p";

     

       
1
       
1
       
+
       
export { default as H1 } from './h1';

     

       
2
       
2
       
+
       
export { default as H2 } from './h2';

     

       
3
       
3
       
+
       
export { default as H3 } from './h3';

     

       
4
       
4
       
+
       
export { default as H4 } from './h4';

     

       
5
       
5
       
+
       
export { default as H5 } from './h5';

     

       
6
       
6
       
+
       
export { default as H6 } from './h6';

     

       
7
       
7
       
+
       
export { default as P } from './p';

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
const P = styled.p`

     

       
4
       
4
       
 
       
  font-size: 1.5rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const BodyCopy = styled.p`

     

       
4
       
4
       
 
       
  font-size: 1.4rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const BounceAnimation = styled.span`

     

       
4
       
4
       
 
       
  display: block;

     

       
5
       
5
       
 
       
  transition: all 0.1s;

     

       
6
       
6
       
 
       
  transform: ${props =>

     

       
7
       
7
       
-
       
    props.bouncing ? "translateY(-0.6rem)" : "translateY(0)"};

     

       
7
       
7
       
+
       
    props.bouncing ? 'translateY(-0.6rem)' : 'translateY(0)'};

     

       
8
       
8
       
 
       
`;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
2
       
2
       
-
       
import { Link } from "react-router-dom";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
+
       
import { Link } from 'react-router-dom';

     

       
3
       
3
       
 
       


     

       
4
       
4
       
 
       
export const Button = styled(Link)`

     

       
5
       
5
       
-
       
  background: ${props => (props.light ? "white" : "#202020")};

     

       
6
       
6
       
-
       
  color: ${props => (props.light ? "#202020" : "white")};

     

       
5
       
5
       
+
       
  background: ${props => (props.light ? 'white' : '#202020')};

     

       
6
       
6
       
+
       
  color: ${props => (props.light ? '#202020' : 'white')};

     

       
7
       
7
       
 
       
  display: block;

     

       
8
       
8
       
 
       
  font-size: 1.5rem;

     

       
9
       
9
       
 
       
  height: 4rem;

     

       
10
       
10
       
 
       
  letter-spacing: 0.05em;

     

       
11
       
11
       
 
       
  line-height: 4rem;

     

       
12
       
12
       
-
       
  margin: ${props => (props.noMargin ? "0" : "5rem auto 3rem")};

     

       
12
       
12
       
+
       
  margin: ${props => (props.noMargin ? '0' : '5rem auto 3rem')};

     

       
13
       
13
       
 
       
  max-width: 21rem;

     

       
14
       
14
       
 
       
  min-width: 10rem;

     

       
15
       
15
       
 
       
  text-align: center;

     
···

       
17
       
17
       
 
       
  transition: background 0.4s;

     

       
18
       
18
       
 
       
  width: 100%;

     

       
19
       
19
       
 
       
  &:hover {

     

       
20
       
20
       
-
       
    background: ${props => (props.light ? "#f6f6f6" : "#333")};

     

       
20
       
20
       
+
       
    background: ${props => (props.light ? '#f6f6f6' : '#333')};

     

       
21
       
21
       
 
       
  }

     

       
22
       
22
       
 
       
  &:active {

     

       
23
       
23
       
 
       
    opacity: 0.6;

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import { Wrapper } from "./wrapper";

     

       
3
       
3
       
-
       
import styled from "styled-components";

     

       
4
       
4
       
-
       
import logoFormidableWhite from "../static/svgs/logo_formidable_white.svg";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import { Wrapper } from './wrapper';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       
import logoFormidableWhite from '../static/svgs/logo_formidable_white.svg';

     

       
5
       
5
       
 
       


     

       
6
       
6
       
 
       
const Container = styled.footer`

     

       
7
       
7
       
 
       
  background: #1f1f1f;

     
···

       
95
       
95
       
 
       
        Formidable is a Seattle, Denver, and London-based engineering

     

       
96
       
96
       
 
       
        consultancy and open source software organization, specializing in

     

       
97
       
97
       
 
       
        React.js, React Native, GraphQL, Node.js, and the extended JavaScript

     

       
98
       
98
       
-
       
        ecosystem. For more information about Formidable, please visit{" "}

     

       
98
       
98
       
+
       
        ecosystem. For more information about Formidable, please visit{' '}

     

       
99
       
99
       
 
       
        <a href="https://www.formidable.com">formidable.com</a>.

     

       
100
       
100
       
 
       
      </FooterDescription>

     

       
101
       
101
       
 
       
    </Wrapper>

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import Hero from "../screens/home/hero";

     

       
3
       
3
       
-
       
import styled from "styled-components";

     

       
4
       
4
       
-
       
import logoFormidableWhite from "../static/svgs/logo_formidable_white.svg";

     

       
5
       
5
       
-
       
import LeftTriangles from "../static/svgs/left-triangles.svg";

     

       
6
       
6
       
-
       
import RightTriangles from "../static/svgs/right-triangles.svg";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import Hero from '../screens/home/hero';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       
import logoFormidableWhite from '../static/svgs/logo_formidable_white.svg';

     

       
5
       
5
       
+
       
import LeftTriangles from '../static/svgs/left-triangles.svg';

     

       
6
       
6
       
+
       
import RightTriangles from '../static/svgs/right-triangles.svg';

     

       
7
       
7
       
 
       


     

       
8
       
8
       
 
       
const Container = styled.header`

     

       
9
       
9
       
 
       
  background: rgb(109, 117, 153);

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const Markdown = styled.article`

     

       
4
       
4
       
 
       
  width: 60vw;

     
···

       
6
       
6
       
 
       
    width: 75vw;

     

       
7
       
7
       
 
       
  }

     

       
8
       
8
       
 
       
  & h1 {

     

       
9
       
9
       
-
       
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
9
       
9
       
+
       
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
10
       
10
       
 
       
    font-size: 3.4rem;

     

       
11
       
11
       
 
       
    margin: 0 0 2rem;

     

       
12
       
12
       
 
       


     
···

       
20
       
20
       
 
       
  }

     

       
21
       
21
       
 
       


     

       
22
       
22
       
 
       
  & h2 {

     

       
23
       
23
       
-
       
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
23
       
23
       
+
       
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
24
       
24
       
 
       
    font-size: 2.8rem;

     

       
25
       
25
       
 
       
    margin: 6rem 0 2rem;

     

       
26
       
26
       
 
       
    @media (min-width: 1024px) {

     
···

       
29
       
29
       
 
       
  }

     

       
30
       
30
       
 
       


     

       
31
       
31
       
 
       
  & h3 {

     

       
32
       
32
       
-
       
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
32
       
32
       
+
       
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
33
       
33
       
 
       
    font-size: 1.8rem;

     

       
34
       
34
       
 
       
    margin: 2rem 0;

     

       
35
       
35
       
 
       
    @media (min-width: 1024px) {

     
···

       
59
       
59
       
 
       
  th,

     

       
60
       
60
       
 
       
  td {

     

       
61
       
61
       
 
       
    font-size: 1.7rem;

     

       
62
       
62
       
-
       
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
62
       
62
       
+
       
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
63
       
63
       
 
       
    tr:nth-child(even) {

     

       
64
       
64
       
 
       
      background-color: #f2f2f2;

     

       
65
       
65
       
 
       
    }

     
···

       
78
       
78
       
 
       
  }

     

       
79
       
79
       
 
       


     

       
80
       
80
       
 
       
  & p {

     

       
81
       
81
       
-
       
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
81
       
81
       
+
       
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
82
       
82
       
 
       
    font-size: 1.7rem;

     

       
83
       
83
       
 
       
    line-height: 1.6;

     

       
84
       
84
       
 
       
  }

     
···

       
104
       
104
       
 
       
  }

     

       
105
       
105
       
 
       


     

       
106
       
106
       
 
       
  & li {

     

       
107
       
107
       
-
       
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
107
       
107
       
+
       
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
108
       
108
       
 
       
    font-size: 1.7rem;

     

       
109
       
109
       
 
       
    line-height: 1.6;

     

       
110
       
110
       
 
       
    padding: 0.5rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
2
       
2
       
-
       
import { Link } from "react-router-dom";

     

       
3
       
3
       
-
       
import collapsedSidebarBackground from "../static/svgs/collapsed-sidebar-background.svg";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
+
       
import { Link } from 'react-router-dom';

     

       
3
       
3
       
+
       
import collapsedSidebarBackground from '../static/svgs/collapsed-sidebar-background.svg';

     

       
4
       
4
       
 
       


     

       
5
       
5
       
 
       
export const Navigation = styled.div`

     

       
6
       
6
       
 
       
  align-items: center;

     
···

       
41
       
41
       
 
       
`;

     

       
42
       
42
       
 
       


     

       
43
       
43
       
 
       
export const SidebarWrapper = styled.aside`

     

       
44
       
44
       
-
       
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
44
       
44
       
+
       
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
45
       
45
       
 
       
  background-size: 100% 100%;

     

       
46
       
46
       
 
       
  background: linear-gradient(

     

       
47
       
47
       
 
       
      rgba(223, 223, 223, 0.4),

     
···

       
60
       
60
       
 
       


     

       
61
       
61
       
 
       
  @media (max-width: 768px) {

     

       
62
       
62
       
 
       
    background: #dfdfdf;

     

       
63
       
63
       
-
       
    min-width: ${props => (props.overlay ? "24rem" : "2.5rem")};

     

       
64
       
64
       
-
       
    width: ${props => (props.overlay ? "24rem" : "2.5rem")};

     

       
63
       
63
       
+
       
    min-width: ${props => (props.overlay ? '24rem' : '2.5rem')};

     

       
64
       
64
       
+
       
    width: ${props => (props.overlay ? '24rem' : '2.5rem')};

     

       
65
       
65
       
 
       
    background-size: cover;

     

       
66
       
66
       
 
       
  }

     

       
67
       
67
       
 
       
`;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const SecondaryTitle = styled.h3`

     

       
4
       
4
       
 
       
  font-size: 2rem;

     

       
5
       
5
       
 
       
  line-height: 2.4rem;

     

       
6
       
6
       
 
       
  margin: 2rem auto 1rem;

     

       
7
       
7
       
-
       
  color: ${p => (p.pop ? "white" : "inherit")};

     

       
7
       
7
       
+
       
  color: ${p => (p.pop ? 'white' : 'inherit')};

     

       
8
       
8
       
 
       
  @media (min-width: 768px) {

     

       
9
       
9
       
 
       
    font-size: 2.2rem;

     

       
10
       
10
       
 
       
    line-height: 2.6rem;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const SectionTitle = styled.h2`

     

       
4
       
4
       
 
       
  color: #fff;

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import PropTypes from "prop-types";

     

       
3
       
3
       
-
       
import DocumentMeta from "react-document-meta";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
+
       
import DocumentMeta from 'react-document-meta';

     

       
4
       
4
       
 
       


     

       
5
       
5
       
 
       
class TitleMeta extends React.Component {

     

       
6
       
6
       
 
       
  render() {

     
···

       
8
       
8
       
 
       
      title: this.props.title,

     

       
9
       
9
       
 
       
      meta: {

     

       
10
       
10
       
 
       
        property: {

     

       
11
       
11
       
-
       
          "og:title": this.props.title

     

       
12
       
12
       
-
       
        }

     

       
13
       
13
       
-
       
      }

     

       
11
       
11
       
+
       
          'og:title': this.props.title,

     

       
12
       
12
       
+
       
        },

     

       
13
       
13
       
+
       
      },

     

       
14
       
14
       
 
       
    };

     

       
15
       
15
       
 
       


     

       
16
       
16
       
 
       
    return <div {...titleMeta}>{this.props.children}</div>;

     
···

       
19
       
19
       
 
       


     

       
20
       
20
       
 
       
TitleMeta.propTypes = {

     

       
21
       
21
       
 
       
  children: PropTypes.node,

     

       
22
       
22
       
-
       
  title: PropTypes.string

     

       
22
       
22
       
+
       
  title: PropTypes.string,

     

       
23
       
23
       
 
       
};

     

       
24
       
24
       
 
       


     

       
25
       
25
       
 
       
export default TitleMeta;

     

···

       
1
       
1
       
-
       
import styled from "styled-components";

     

       
1
       
1
       
+
       
import styled from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const Wrapper = styled.div`

     

       
4
       
4
       
 
       
  display: flex;

     
···

       
6
       
6
       
 
       
  flex-wrap: wrap;

     

       
7
       
7
       
 
       
  justify-content: space-between;

     

       
8
       
8
       
 
       
  margin: 0;

     

       
9
       
9
       
-
       
  padding: ${props => (props.noPadding ? "0 4rem" : "4rem")};

     

       
9
       
9
       
+
       
  padding: ${props => (props.noPadding ? '0 4rem' : '4rem')};

     

       
10
       
10
       
 
       
  text-align: center;

     

       
11
       
11
       
 
       
  width: 100%;

     

       
12
       
12
       
 
       
  @media (min-width: 768px) {

     

       
13
       
13
       
 
       
    flex-direction: row;

     

       
14
       
14
       
 
       
    max-width: 116rem;

     

       
15
       
15
       
-
       
    padding: ${props => (props.noPadding ? "0 4rem" : "4rem 8rem")};

     

       
15
       
15
       
+
       
    padding: ${props => (props.noPadding ? '0 4rem' : '4rem 8rem')};

     

       
16
       
16
       
 
       
  }

     

       
17
       
17
       
 
       
  @media (max-width: 768px) {

     

       
18
       
18
       
-
       
    padding: ${props => (props.noPadding ? "0 4rem" : "0 8rem")};

     

       
18
       
18
       
+
       
    padding: ${props => (props.noPadding ? '0 4rem' : '0 8rem')};

     

       
19
       
19
       
 
       
    text-align: center;

     

       
20
       
20
       
 
       
    img {

     

       
21
       
21
       
 
       
      max-width: 240px;

     

···

       
1
       
1
       
 
       
const constants = {

     

       
2
       
2
       
-
       
  docsTitle: "URQL",

     

       
3
       
3
       
-
       
  githubIssues: "https://www.github.com/FormidableLabs/urql/issues",

     

       
4
       
4
       
-
       
  github: "https://www.github.com/FormidableLabs/urql",

     

       
5
       
5
       
-
       
  readme: "https://github.com/FormidableLabs/urql/blob/master/README.md",

     

       
6
       
6
       
-
       
  color: "#8196FF"

     

       
2
       
2
       
+
       
  docsTitle: 'URQL',

     

       
3
       
3
       
+
       
  githubIssues: 'https://www.github.com/FormidableLabs/urql/issues',

     

       
4
       
4
       
+
       
  github: 'https://www.github.com/FormidableLabs/urql',

     

       
5
       
5
       
+
       
  readme: 'https://github.com/FormidableLabs/urql/blob/master/README.md',

     

       
6
       
6
       
+
       
  color: '#8196FF',

     

       
7
       
7
       
 
       
};

     

       
8
       
8
       
 
       


     

       
9
       
9
       
 
       
export default constants;

     

···

       
1
       
1
       
-
       
import { createGlobalStyle } from "styled-components";

     

       
1
       
1
       
+
       
import { createGlobalStyle } from 'styled-components';

     

       
2
       
2
       
 
       


     

       
3
       
3
       
 
       
export const GlobalStyle = createGlobalStyle`

     

       
4
       
4
       
 
       
  html {

     

···

       
1
       
1
       
-
       
import React from 'react'

     

       
2
       
2
       
-
       
import { render, hydrate } from 'react-dom'

     

       
3
       
3
       
-
       
import { AppContainer } from 'react-hot-loader'

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import { render, hydrate } from 'react-dom';

     

       
3
       
3
       
+
       
import { AppContainer } from 'react-hot-loader';

     

       
4
       
4
       
 
       


     

       
5
       
5
       
-
       
import App from './app'

     

       
5
       
5
       
+
       
import App from './app';

     

       
6
       
6
       
 
       


     

       
7
       
7
       
-
       
export default App

     

       
7
       
7
       
+
       
export default App;

     

       
8
       
8
       
 
       


     

       
9
       
9
       
 
       
// Render your app

     

       
10
       
10
       
 
       
if (typeof document !== 'undefined') {

     

       
11
       
11
       
-
       
  const renderMethod = module.hot ? render : hydrate

     

       
11
       
11
       
+
       
  const renderMethod = module.hot ? render : hydrate;

     

       
12
       
12
       
 
       
  const mount = Comp => {

     

       
13
       
13
       
 
       
    renderMethod(

     

       
14
       
14
       
 
       
      <AppContainer>

     

       
15
       
15
       
 
       
        <Comp />

     

       
16
       
16
       
 
       
      </AppContainer>,

     

       
17
       
17
       
 
       
      document.getElementById('root')

     

       
18
       
18
       
-
       
    )

     

       
19
       
19
       
-
       
  }

     

       
18
       
18
       
+
       
    );

     

       
19
       
19
       
+
       
  };

     

       
20
       
20
       
 
       


     

       
21
       
21
       
-
       
  mount(App)

     

       
21
       
21
       
+
       
  mount(App);

     

       
22
       
22
       
 
       
  if (module.hot) {

     

       
23
       
23
       
-
       
    module.hot.accept('./app', () => mount(require('./app').default))

     

       
23
       
23
       
+
       
    module.hot.accept('./app', () => mount(require('./app').default));

     

       
24
       
24
       
 
       
  }

     

       
25
       
25
       
 
       
}

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import PropTypes from "prop-types";

     

       
3
       
3
       
-
       
import styled from "styled-components";

     

       
4
       
4
       
-
       
import { withRouteData } from "react-static";

     

       
5
       
5
       
-
       
import { Markdown } from "../../components/markdown";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       
import { withRouteData } from 'react-static';

     

       
5
       
5
       
+
       
import { Markdown } from '../../components/markdown';

     

       
6
       
6
       
 
       


     

       
7
       
7
       
 
       
const Container = styled.div`

     

       
8
       
8
       
 
       
  max-width: 80rem;

     
···

       
33
       
33
       
 
       
}

     

       
34
       
34
       
 
       


     

       
35
       
35
       
 
       
Article.propTypes = {

     

       
36
       
36
       
-
       
  renderedMd: PropTypes.string

     

       
36
       
36
       
+
       
  renderedMd: PropTypes.string,

     

       
37
       
37
       
 
       
};

     

       
38
       
38
       
 
       


     

       
39
       
39
       
 
       
Article.defaultProps = {

     

       
40
       
40
       
-
       
  params: null

     

       
40
       
40
       
+
       
  params: null,

     

       
41
       
41
       
 
       
};

     

       
42
       
42
       
 
       


     

       
43
       
43
       
 
       
export default withRouteData(Article);

     

···

       
1
       
1
       
-
       
import React, { forwardRef } from "react";

     

       
2
       
2
       
-
       
import styled from "styled-components";

     

       
3
       
3
       
-
       
import PropTypes from "prop-types";

     

       
4
       
4
       
-
       
import { withRouteData } from "react-static";

     

       
5
       
5
       
-
       
import { Link } from "react-router-dom";

     

       
1
       
1
       
+
       
import React, { forwardRef } from 'react';

     

       
2
       
2
       
+
       
import styled from 'styled-components';

     

       
3
       
3
       
+
       
import PropTypes from 'prop-types';

     

       
4
       
4
       
+
       
import { withRouteData } from 'react-static';

     

       
5
       
5
       
+
       
import { Link } from 'react-router-dom';

     

       
6
       
6
       
 
       


     

       
7
       
7
       
-
       
import Article from "./article";

     

       
8
       
8
       
-
       
import Sidebar from "./sidebar";

     

       
9
       
9
       
-
       
import burger from "../../static/svgs/burger.svg";

     

       
10
       
10
       
-
       
import logoFormidableDark from "../../static/svgs/logo_formidable_dark.svg";

     

       
11
       
11
       
-
       
import constants from "../../constants";

     

       
7
       
7
       
+
       
import Article from './article';

     

       
8
       
8
       
+
       
import Sidebar from './sidebar';

     

       
9
       
9
       
+
       
import burger from '../../static/svgs/burger.svg';

     

       
10
       
10
       
+
       
import logoFormidableDark from '../../static/svgs/logo_formidable_dark.svg';

     

       
11
       
11
       
+
       
import constants from '../../constants';

     

       
12
       
12
       
 
       


     

       
13
       
13
       
 
       
const Container = styled.div`

     

       
14
       
14
       
 
       
  display: flex;

     
···

       
59
       
59
       
 
       


     

       
60
       
60
       
 
       
  @media (max-width: 768px) {

     

       
61
       
61
       
 
       
    display: block;

     

       
62
       
62
       
-
       
    visibility: ${props => (props.overlay ? "hidden" : "visible")};

     

       
62
       
62
       
+
       
    visibility: ${props => (props.overlay ? 'hidden' : 'visible')};

     

       
63
       
63
       
 
       
    padding-left: 2.5rem;

     

       
64
       
64
       
 
       
    position: absolute;

     

       
65
       
65
       
 
       
    left: 0;

     
···

       
91
       
91
       
 
       
  }

     

       
92
       
92
       
 
       
`;

     

       
93
       
93
       
 
       


     

       
94
       
94
       
+
       
// eslint-disable-next-line react/display-name

     

       
94
       
95
       
 
       
const SideBarWithRef = forwardRef((props, ref) => {

     

       
95
       
96
       
 
       
  return (

     

       
96
       
97
       
 
       
    <div ref={ref}>

     
···

       
131
       
132
       
 
       
            <img src={burger} alt="Menu" onClick={() => this.openSidebar()} />

     

       
132
       
133
       
 
       
          </CollapsedMenu>

     

       
133
       
134
       
 
       
          <DocsTitle>

     

       
134
       
134
       
-
       
            <Link to={"/"} style={{ color: "#3b3b3b" }}>

     

       
135
       
135
       
+
       
            <Link to={'/'} style={{ color: '#3b3b3b' }}>

     

       
135
       
136
       
 
       
              {constants.docsTitle}

     

       
136
       
137
       
 
       
            </Link>

     

       
137
       
138
       
 
       
          </DocsTitle>

     

       
138
       
138
       
-
       
          <Link to={"https://formidable.com"}>

     

       
139
       
139
       
+
       
          <Link to={'https://formidable.com'}>

     

       
139
       
140
       
 
       
            <HeaderLogo src={logoFormidableDark} alt="Formidable Logo" />

     

       
140
       
141
       
 
       
          </Link>

     

       
141
       
142
       
 
       
        </Wrapper>

     
···

       
151
       
152
       
 
       
}

     

       
152
       
153
       
 
       


     

       
153
       
154
       
 
       
Docs.propTypes = {

     

       
154
       
154
       
-
       
  params: PropTypes.object

     

       
155
       
155
       
+
       
  params: PropTypes.object,

     

       
155
       
156
       
 
       
};

     

       
156
       
157
       
 
       


     

       
157
       
158
       
 
       
Docs.defaultProps = {

     

       
158
       
158
       
-
       
  params: null

     

       
159
       
159
       
+
       
  params: null,

     

       
159
       
160
       
 
       
};

     

       
160
       
161
       
 
       


     

       
161
       
162
       
 
       
export default withRouteData(Docs);

     

···

       
1
       
1
       
-
       
import React, { Fragment } from "react";

     

       
2
       
2
       
-
       
import PropTypes from "prop-types";

     

       
3
       
3
       
-
       
import styled from "styled-components";

     

       
4
       
4
       
-
       
import { withRouteData } from "react-static";

     

       
5
       
5
       
-
       
import { withRouter, Link } from "react-router-dom";

     

       
1
       
1
       
+
       
import React, { Fragment } from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       
import { withRouteData } from 'react-static';

     

       
5
       
5
       
+
       
import { withRouter, Link } from 'react-router-dom';

     

       
6
       
6
       
 
       


     

       
7
       
7
       
 
       
import {

     

       
8
       
8
       
 
       
  SidebarNavItem,

     

       
9
       
9
       
 
       
  SidebarNavSubItem,

     

       
10
       
10
       
 
       
  SidebarContainer,

     

       
11
       
11
       
 
       
  SidebarWrapper,

     

       
12
       
12
       
-
       
  SideBarSvg

     

       
13
       
13
       
-
       
} from "../../components/navigation";

     

       
12
       
12
       
+
       
  SideBarSvg,

     

       
13
       
13
       
+
       
} from '../../components/navigation';

     

       
14
       
14
       
 
       


     

       
15
       
15
       
-
       
import closeButton from "../../static/svgs/x.svg";

     

       
16
       
16
       
-
       
import logoSidebar from "../../static/sidebar-badge.svg";

     

       
17
       
17
       
-
       
import constants from "../../constants";

     

       
15
       
15
       
+
       
import closeButton from '../../static/svgs/x.svg';

     

       
16
       
16
       
+
       
import logoSidebar from '../../static/sidebar-badge.svg';

     

       
17
       
17
       
+
       
import constants from '../../constants';

     

       
18
       
18
       
 
       


     

       
19
       
19
       
 
       
const HeroLogo = styled.img`

     

       
20
       
20
       
 
       
  position: absolute;

     
···

       
23
       
23
       
 
       
  width: 14rem;

     

       
24
       
24
       
 
       


     

       
25
       
25
       
 
       
  @media (max-width: 768px) {

     

       
26
       
26
       
-
       
    display: ${props => (props.overlay ? "" : "none")};

     

       
26
       
26
       
+
       
    display: ${props => (props.overlay ? '' : 'none')};

     

       
27
       
27
       
 
       
  }

     

       
28
       
28
       
 
       
`;

     

       
29
       
29
       
 
       


     
···

       
33
       
33
       
 
       
  margin: 3rem 0rem 0rem 2.5rem;

     

       
34
       
34
       
 
       
  height: auto;

     

       
35
       
35
       
 
       
  @media (max-width: 768px) {

     

       
36
       
36
       
-
       
    display: ${props => (props.overlay ? "" : "none")};

     

       
36
       
36
       
+
       
    display: ${props => (props.overlay ? '' : 'none')};

     

       
37
       
37
       
 
       
  }

     

       
38
       
38
       
 
       
`;

     

       
39
       
39
       
 
       


     
···

       
51
       
51
       
 
       
  display: none;

     

       
52
       
52
       
 
       


     

       
53
       
53
       
 
       
  @media (max-width: 768px) {

     

       
54
       
54
       
-
       
    display: ${props => (props.overlay ? "block" : "none")};

     

       
54
       
54
       
+
       
    display: ${props => (props.overlay ? 'block' : 'none')};

     

       
55
       
55
       
 
       
    right: 1rem;

     

       
56
       
56
       
 
       
  }

     

       
57
       
57
       
 
       
`;

     
···

       
72
       
72
       
 
       
      `/docs${item.path}` === this.props.history.location.pathname;

     

       
73
       
73
       
 
       
    // eslint-disable-next-line no-magic-numbers

     

       
74
       
74
       
 
       
    const subContent = tocArray.filter(toc => toc.level === 2);

     

       
75
       
75
       
-
       
    const key = item.title.split(" ").join("_");

     

       
75
       
75
       
+
       
    const key = item.title.split(' ').join('_');

     

       
76
       
76
       
 
       


     

       
77
       
77
       
 
       
    return (

     

       
78
       
78
       
 
       
      <Fragment key={`${key}-group`}>

     
···

       
80
       
80
       
 
       
          to={`/docs${item.path}`}

     

       
81
       
81
       
 
       
          replace

     

       
82
       
82
       
 
       
          key={key}

     

       
83
       
83
       
-
       
          className={currentPath ? "is-current" : ""}

     

       
83
       
83
       
+
       
          className={currentPath ? 'is-current' : ''}

     

       
84
       
84
       
 
       
        >

     

       
85
       
85
       
 
       
          {item.title}

     

       
86
       
86
       
 
       
        </SidebarNavItem>

     
···

       
89
       
89
       
 
       
            {subContent.map(sh => (

     

       
90
       
90
       
 
       
              <SidebarNavSubItem

     

       
91
       
91
       
 
       
                to={`#${sh.content

     

       
92
       
92
       
-
       
                  .split(" ")

     

       
93
       
93
       
-
       
                  .join("-")

     

       
92
       
92
       
+
       
                  .split(' ')

     

       
93
       
93
       
+
       
                  .join('-')

     

       
94
       
94
       
 
       
                  .toLowerCase()}`}

     

       
95
       
95
       
-
       
                key={sh.content.split(" ").join("_")}

     

       
95
       
95
       
+
       
                key={sh.content.split(' ').join('_')}

     

       
96
       
96
       
 
       
              >

     

       
97
       
97
       
 
       
                {sh.content}

     

       
98
       
98
       
 
       
              </SidebarNavSubItem>

     
···

       
115
       
115
       
 
       
            overlay={overlay}

     

       
116
       
116
       
 
       
            onClick={() => closeSidebar()}

     

       
117
       
117
       
 
       
          />

     

       
118
       
118
       
-
       
          <Link to={"/"}>

     

       
118
       
118
       
+
       
          <Link to={'/'}>

     

       
119
       
119
       
 
       
            <HeroLogo

     

       
120
       
120
       
 
       
              src={logoSidebar}

     

       
121
       
121
       
 
       
              alt="Formidable Logo"

     
···

       
123
       
123
       
 
       
            />

     

       
124
       
124
       
 
       
          </Link>

     

       
125
       
125
       
 
       
          <ContentWrapper overlay={overlay}>

     

       
126
       
126
       
-
       
            <SidebarNavItem to={constants.readme} key={"readme"}>

     

       
126
       
126
       
+
       
            <SidebarNavItem to={constants.readme} key={'readme'}>

     

       
127
       
127
       
 
       
              Readme

     

       
128
       
128
       
 
       
            </SidebarNavItem>

     

       
129
       
129
       
 
       
            {sidebarHeaders &&

     

       
130
       
130
       
 
       
              sidebarHeaders.map(sh => this.renderSidebarItem(sh))}

     

       
131
       
131
       
 
       


     

       
132
       
132
       
 
       
            <HorizontalLine />

     

       
133
       
133
       
-
       
            <SidebarNavItem to={constants.githubIssues} key={"issues"}>

     

       
133
       
133
       
+
       
            <SidebarNavItem to={constants.githubIssues} key={'issues'}>

     

       
134
       
134
       
 
       
              Issues

     

       
135
       
135
       
 
       
            </SidebarNavItem>

     

       
136
       
136
       
-
       
            <SidebarNavItem to={constants.github} key={"github"}>

     

       
136
       
136
       
+
       
            <SidebarNavItem to={constants.github} key={'github'}>

     

       
137
       
137
       
 
       
              Github

     

       
138
       
138
       
 
       
            </SidebarNavItem>

     

       
139
       
139
       
 
       
          </ContentWrapper>

     
···

       
148
       
148
       
 
       
  history: PropTypes.object,

     

       
149
       
149
       
 
       
  overlay: PropTypes.bool,

     

       
150
       
150
       
 
       
  sidebarHeaders: PropTypes.array,

     

       
151
       
151
       
-
       
  tocArray: PropTypes.array

     

       
151
       
151
       
+
       
  tocArray: PropTypes.array,

     

       
152
       
152
       
 
       
};

     

       
153
       
153
       
 
       


     

       
154
       
154
       
 
       
export default withRouter(withRouteData(Sidebar));

     

···

       
1
       
1
       
 
       
const content = {

     

       
2
       
2
       
 
       
  features: [

     

       
3
       
3
       
 
       
    {

     

       
4
       
4
       
-
       
      title: "Fully functional GraphQL client with a single import",

     

       
4
       
4
       
+
       
      title: 'Fully functional GraphQL client with a single import',

     

       
5
       
5
       
 
       
      description:

     

       
6
       
6
       
-
       
        "Urql is a lightweight, powerful, and easy to use alternative to bulky GraphQL clients.",

     

       
7
       
7
       
-
       
      icon: require("../../static/svgs/gql-tile.svg")

     

       
6
       
6
       
+
       
        'Urql is a lightweight, powerful, and easy to use alternative to bulky GraphQL clients.',

     

       
7
       
7
       
+
       
      icon: require('../../static/svgs/gql-tile.svg'),

     

       
8
       
8
       
 
       
    },

     

       
9
       
9
       
 
       
    {

     

       
10
       
10
       
-
       
      title: "Logical default behavior and caching",

     

       
10
       
10
       
+
       
      title: 'Logical default behavior and caching',

     

       
11
       
11
       
 
       
      description:

     

       
12
       
12
       
-
       
        "Urql helps you to rapidly use GraphQL in your apps without complex configuration or large API overhead.",

     

       
13
       
13
       
-
       
      icon: require("../../static/svgs/clock-tile.svg")

     

       
12
       
12
       
+
       
        'Urql helps you to rapidly use GraphQL in your apps without complex configuration or large API overhead.',

     

       
13
       
13
       
+
       
      icon: require('../../static/svgs/clock-tile.svg'),

     

       
14
       
14
       
 
       
    },

     

       
15
       
15
       
 
       
    {

     

       
16
       
16
       
-
       
      title: "Extensible library that grows with you",

     

       
16
       
16
       
+
       
      title: 'Extensible library that grows with you',

     

       
17
       
17
       
 
       
      description:

     

       
18
       
18
       
-
       
        "Want to change how you fetch, cache, or subscribe to data? Urql Exchanges allow you to customize your data layer to suit your needs.",

     

       
19
       
19
       
-
       
      icon: require("../../static/svgs/eagle-tile.svg")

     

       
20
       
20
       
-
       
    }

     

       
18
       
18
       
+
       
        'Want to change how you fetch, cache, or subscribe to data? Urql Exchanges allow you to customize your data layer to suit your needs.',

     

       
19
       
19
       
+
       
      icon: require('../../static/svgs/eagle-tile.svg'),

     

       
20
       
20
       
+
       
    },

     

       
21
       
21
       
 
       
  ],

     

       
22
       
22
       
 
       
  components: {

     

       
23
       
23
       
-
       
    title: "Minimal React Components and Hooks",

     

       
23
       
23
       
+
       
    title: 'Minimal React Components and Hooks',

     

       
24
       
24
       
 
       
    description:

     

       
25
       
25
       
 
       
      "Whether you prefer a <Query> component or useQuery Hook, urql's API is intuitive to use, with full support for GraphQL Queries, Mutations and Subscriptions in both styles!",

     

       
26
       
26
       
-
       
    icon: require("../../static/svgs/React-icon.svg")

     

       
26
       
26
       
+
       
    icon: require('../../static/svgs/React-icon.svg'),

     

       
27
       
27
       
 
       
  },

     

       
28
       
28
       
 
       
  preview: {

     

       
29
       
29
       
-
       
    description: "",

     

       
30
       
30
       
-
       
    media: ""

     

       
29
       
29
       
+
       
    description: '',

     

       
30
       
30
       
+
       
    media: '',

     

       
31
       
31
       
 
       
  },

     

       
32
       
32
       
 
       
  getStarted: {

     

       
33
       
33
       
 
       
    description:

     

       
34
       
34
       
-
       
      "Dive into the documentation to see how you can get your urql client up and running.",

     

       
35
       
35
       
-
       
    link: "/docs"

     

       
34
       
34
       
+
       
      'Dive into the documentation to see how you can get your urql client up and running.',

     

       
35
       
35
       
+
       
    link: '/docs',

     

       
36
       
36
       
 
       
  },

     

       
37
       
37
       
 
       
  oss: [

     

       
38
       
38
       
 
       
    {

     

       
39
       
39
       
-
       
      title: "Victory",

     

       
39
       
39
       
+
       
      title: 'Victory',

     

       
40
       
40
       
 
       
      description:

     

       
41
       
41
       
-
       
        "An ecosystem of modular data visualization components for React. Friendly and flexible.",

     

       
42
       
42
       
-
       
      logo: require("../../static/svgs/logo_victory.svg"),

     

       
43
       
43
       
-
       
      link: "https://formidable.com/open-source/victory",

     

       
44
       
44
       
-
       
      hasOwnLogo: true

     

       
41
       
41
       
+
       
        'An ecosystem of modular data visualization components for React. Friendly and flexible.',

     

       
42
       
42
       
+
       
      logo: require('../../static/svgs/logo_victory.svg'),

     

       
43
       
43
       
+
       
      link: 'https://formidable.com/open-source/victory',

     

       
44
       
44
       
+
       
      hasOwnLogo: true,

     

       
45
       
45
       
 
       
    },

     

       
46
       
46
       
 
       
    {

     

       
47
       
47
       
-
       
      title: "Development Dashboards",

     

       
47
       
47
       
+
       
      title: 'Development Dashboards',

     

       
48
       
48
       
 
       
      description:

     

       
49
       
49
       
-
       
        "Dashboards to organize and intuitively display your dev server and tooling output.",

     

       
50
       
50
       
-
       
      abbreviation: "Dd",

     

       
51
       
51
       
-
       
      color: "#8bd48b",

     

       
52
       
52
       
-
       
      number: "17",

     

       
53
       
53
       
-
       
      link: "https://formidable.com/open-source/development-dashboards/"

     

       
49
       
49
       
+
       
        'Dashboards to organize and intuitively display your dev server and tooling output.',

     

       
50
       
50
       
+
       
      abbreviation: 'Dd',

     

       
51
       
51
       
+
       
      color: '#8bd48b',

     

       
52
       
52
       
+
       
      number: '17',

     

       
53
       
53
       
+
       
      link: 'https://formidable.com/open-source/development-dashboards/',

     

       
54
       
54
       
 
       
    },

     

       
55
       
55
       
 
       
    {

     

       
56
       
56
       
-
       
      title: "React Animations",

     

       
56
       
56
       
+
       
      title: 'React Animations',

     

       
57
       
57
       
 
       
      description:

     

       
58
       
58
       
-
       
        "A collection of animations that can be used with many inline style libraries, such as Radium or Aphrodite.",

     

       
59
       
59
       
-
       
      abbreviation: "Ra",

     

       
60
       
60
       
-
       
      color: "#86b9e6",

     

       
61
       
61
       
-
       
      number: "03",

     

       
62
       
62
       
-
       
      link: "https://formidable.com/open-source/react-animations"

     

       
58
       
58
       
+
       
        'A collection of animations that can be used with many inline style libraries, such as Radium or Aphrodite.',

     

       
59
       
59
       
+
       
      abbreviation: 'Ra',

     

       
60
       
60
       
+
       
      color: '#86b9e6',

     

       
61
       
61
       
+
       
      number: '03',

     

       
62
       
62
       
+
       
      link: 'https://formidable.com/open-source/react-animations',

     

       
63
       
63
       
 
       
    },

     

       
64
       
64
       
 
       
    {

     

       
65
       
65
       
-
       
      title: "Enzyme Matchers",

     

       
65
       
65
       
+
       
      title: 'Enzyme Matchers',

     

       
66
       
66
       
 
       
      description:

     

       
67
       
67
       
-
       
        "Run common assertions on your React components using Enzyme in a Jest or Jasmine environment.",

     

       
68
       
68
       
-
       
      abbreviation: "Em",

     

       
69
       
69
       
-
       
      color: "#e48055",

     

       
70
       
70
       
-
       
      number: "09",

     

       
71
       
71
       
-
       
      link: "https://formidable.com/open-source/jest-enzyme/"

     

       
72
       
72
       
-
       
    }

     

       
73
       
73
       
-
       
  ]

     

       
67
       
67
       
+
       
        'Run common assertions on your React components using Enzyme in a Jest or Jasmine environment.',

     

       
68
       
68
       
+
       
      abbreviation: 'Em',

     

       
69
       
69
       
+
       
      color: '#e48055',

     

       
70
       
70
       
+
       
      number: '09',

     

       
71
       
71
       
+
       
      link: 'https://formidable.com/open-source/jest-enzyme/',

     

       
72
       
72
       
+
       
    },

     

       
73
       
73
       
+
       
  ],

     

       
74
       
74
       
 
       
};

     

       
75
       
75
       
 
       


     

       
76
       
76
       
 
       
export default content;

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import PropTypes from "prop-types";

     

       
3
       
3
       
-
       
import styled from "styled-components";

     

       
4
       
4
       
-
       
import { BodyCopy } from "../../components/body-copy";

     

       
5
       
5
       
-
       
import { SecondaryTitle } from "../../components/secondary-title";

     

       
6
       
6
       
-
       
import { SectionTitle } from "../../components/section-title";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       
import { BodyCopy } from '../../components/body-copy';

     

       
5
       
5
       
+
       
import { SecondaryTitle } from '../../components/secondary-title';

     

       
6
       
6
       
+
       
import { SectionTitle } from '../../components/section-title';

     

       
7
       
7
       
 
       


     

       
8
       
8
       
 
       
const FullWidthContainer = styled.div`

     

       
9
       
9
       
 
       
  display: flex;

     
···

       
142
       
142
       
 
       


     

       
143
       
143
       
 
       
Features.propTypes = {

     

       
144
       
144
       
 
       
  components: PropTypes.object,

     

       
145
       
145
       
-
       
  featureArray: PropTypes.array

     

       
145
       
145
       
+
       
  featureArray: PropTypes.array,

     

       
146
       
146
       
 
       
};

     

       
147
       
147
       
 
       


     

       
148
       
148
       
 
       
export default Features;

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import PropTypes from "prop-types";

     

       
3
       
3
       
-
       
import styled from "styled-components";

     

       
4
       
4
       
-
       
import { Link } from "react-router-dom";

     

       
5
       
5
       
-
       
import { BodyCopy } from "../../components/body-copy";

     

       
6
       
6
       
-
       
import { SectionTitle } from "../../components/section-title";

     

       
7
       
7
       
-
       
import constants from "../../constants";

     

       
8
       
8
       
-
       
import octoCat from "../../static/svgs/Octicons-mark-github.svg";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
+
       
import styled from 'styled-components';

     

       
4
       
4
       
+
       
import { Link } from 'react-router-dom';

     

       
5
       
5
       
+
       
import { BodyCopy } from '../../components/body-copy';

     

       
6
       
6
       
+
       
import { SectionTitle } from '../../components/section-title';

     

       
7
       
7
       
+
       
import constants from '../../constants';

     

       
8
       
8
       
+
       
import octoCat from '../../static/svgs/Octicons-mark-github.svg';

     

       
9
       
9
       
 
       


     

       
10
       
10
       
 
       
const OuterWrapper = styled.div`

     

       
11
       
11
       
 
       
  background: ${constants.color};

     
···

       
128
       
128
       
 
       
}

     

       
129
       
129
       
 
       


     

       
130
       
130
       
 
       
GetStarted.propTypes = {

     

       
131
       
131
       
-
       
  getStartedObj: PropTypes.object

     

       
131
       
131
       
+
       
  getStartedObj: PropTypes.object,

     

       
132
       
132
       
 
       
};

     

       
133
       
133
       
 
       


     

       
134
       
134
       
 
       
export default GetStarted;

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import { Link } from "react-router-dom";

     

       
3
       
3
       
-
       
import { Wrapper } from "../../components/wrapper";

     

       
4
       
4
       
-
       
import styled from "styled-components";

     

       
5
       
5
       
-
       
import badge from "../../static/sidebar-badge.svg";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import { Link } from 'react-router-dom';

     

       
3
       
3
       
+
       
import { Wrapper } from '../../components/wrapper';

     

       
4
       
4
       
+
       
import styled from 'styled-components';

     

       
5
       
5
       
+
       
import badge from '../../static/sidebar-badge.svg';

     

       
6
       
6
       
 
       


     

       
7
       
7
       
 
       
const WrapperStyled = styled(Wrapper)`

     

       
8
       
8
       
 
       
  z-index: 1;

     
···

       
40
       
40
       
 
       
`;

     

       
41
       
41
       
 
       


     

       
42
       
42
       
 
       
const HeroBody = styled.p`

     

       
43
       
43
       
-
       
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

     

       
43
       
43
       
+
       
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

     

       
44
       
44
       
 
       
  letter-spacing: 0.08em;

     

       
45
       
45
       
 
       
  font-size: 2rem;

     

       
46
       
46
       
 
       
  line-height: 3rem;

     
···

       
208
       
208
       
 
       
`;

     

       
209
       
209
       
 
       


     

       
210
       
210
       
 
       
const copyFallBack = () => {

     

       
211
       
211
       
-
       
  const copyTextArea = document.createElement("textArea");

     

       
212
       
212
       
-
       
  copyTextArea.value = "npm install urql";

     

       
211
       
211
       
+
       
  const copyTextArea = document.createElement('textArea');

     

       
212
       
212
       
+
       
  copyTextArea.value = 'npm install urql';

     

       
213
       
213
       
 
       


     

       
214
       
214
       
 
       
  document.body.appendChild(copyTextArea);

     

       
215
       
215
       
 
       


     

       
216
       
216
       
 
       
  copyTextArea.focus();

     

       
217
       
217
       
 
       
  copyTextArea.select();

     

       
218
       
218
       
-
       
  document.execCommand("copy");

     

       
218
       
218
       
+
       
  document.execCommand('copy');

     

       
219
       
219
       
 
       
  copyTextArea.remove();

     

       
220
       
220
       
 
       
};

     

       
221
       
221
       
 
       


     
···

       
225
       
225
       
 
       


     

       
226
       
226
       
 
       
    this.state = {

     

       
227
       
227
       
 
       
      animating: false,

     

       
228
       
228
       
-
       
      copied: false

     

       
228
       
228
       
+
       
      copied: false,

     

       
229
       
229
       
 
       
    };

     

       
230
       
230
       
 
       
  }

     

       
231
       
231
       
 
       


     
···

       
235
       
235
       
 
       
      e.preventDefault();

     

       
236
       
236
       
 
       
      return;

     

       
237
       
237
       
 
       
    }

     

       
238
       
238
       
-
       
    navigator.clipboard.writeText("npm install urql");

     

       
238
       
238
       
+
       
    navigator.clipboard.writeText('npm install urql');

     

       
239
       
239
       
 
       
  }

     

       
240
       
240
       
 
       


     

       
241
       
241
       
 
       
  render() {

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import Features from "./features";

     

       
3
       
3
       
-
       
import GetStarted from "./get-started";

     

       
4
       
4
       
-
       
import MoreOSS from "./more-oss";

     

       
5
       
5
       
-
       
import content from "./_content";

     

       
6
       
6
       
-
       
import styled from "styled-components";

     

       
7
       
7
       
-
       
import { Header } from "../../components/header";

     

       
8
       
8
       
-
       
import { Footer } from "../../components/footer";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import Features from './features';

     

       
3
       
3
       
+
       
import GetStarted from './get-started';

     

       
4
       
4
       
+
       
import MoreOSS from './more-oss';

     

       
5
       
5
       
+
       
import content from './_content';

     

       
6
       
6
       
+
       
import styled from 'styled-components';

     

       
7
       
7
       
+
       
import { Header } from '../../components/header';

     

       
8
       
8
       
+
       
import { Footer } from '../../components/footer';

     

       
9
       
9
       
 
       


     

       
10
       
10
       
 
       
const Container = styled.div`

     

       
11
       
11
       
 
       
  width: 100%;

     

···

       
1
       
1
       
-
       
import React from "react";

     

       
2
       
2
       
-
       
import PropTypes from "prop-types";

     

       
1
       
1
       
+
       
import React from 'react';

     

       
2
       
2
       
+
       
import PropTypes from 'prop-types';

     

       
3
       
3
       
 
       
// import { ProjectBadge } from "formidable-oss-badges";

     

       
4
       
4
       
-
       
import styled from "styled-components";

     

       
5
       
5
       
-
       
import { BodyCopy } from "../../components/body-copy";

     

       
6
       
6
       
-
       
import { Button } from "../../components/button";

     

       
7
       
7
       
-
       
import { SecondaryTitle } from "../../components/secondary-title";

     

       
8
       
8
       
-
       
import { SectionTitle } from "../../components/section-title";

     

       
9
       
9
       
-
       
import { Wrapper } from "../../components/wrapper";

     

       
4
       
4
       
+
       
import styled from 'styled-components';

     

       
5
       
5
       
+
       
import { BodyCopy } from '../../components/body-copy';

     

       
6
       
6
       
+
       
import { Button } from '../../components/button';

     

       
7
       
7
       
+
       
import { SecondaryTitle } from '../../components/secondary-title';

     

       
8
       
8
       
+
       
import { SectionTitle } from '../../components/section-title';

     

       
9
       
9
       
+
       
import { Wrapper } from '../../components/wrapper';

     

       
10
       
10
       
 
       


     

       
11
       
11
       
 
       
const OuterWrapper = styled.div`

     

       
12
       
12
       
 
       
  background-color: #000000;

     
···

       
140
       
140
       
 
       
}

     

       
141
       
141
       
 
       


     

       
142
       
142
       
 
       
MoreOSS.propTypes = {

     

       
143
       
143
       
-
       
  ossArray: PropTypes.array

     

       
143
       
143
       
+
       
  ossArray: PropTypes.array,

     

       
144
       
144
       
 
       
};

     

       
145
       
145
       
 
       


     

       
146
       
146
       
 
       
export default MoreOSS;

     

···

       
9
       
9
       
 
       
  }, [pathname]);

     

       
10
       
10
       
 
       


     

       
11
       
11
       
 
       
  return null;

     

       
12
       
12
       
-
       
}

     

       
12
       
12
       
+
       
};

     

···

       
1
       
1
       
 
       
/* eslint-disable func-style */

     

       
2
       
2
       
-
       
import { stage, landerBasePath } from "../static-config-parts/constants";

     

       
3
       
3
       
-
       
const fs = require("fs");

     

       
4
       
4
       
-
       
const klaw = require("klaw");

     

       
5
       
5
       
-
       
const path = require("path");

     

       
6
       
6
       
-
       
const html = require("remark-html");

     

       
7
       
7
       
-
       
const frontmatter = require("remark-frontmatter");

     

       
8
       
8
       
-
       
const yaml = require("js-yaml");

     

       
9
       
9
       
-
       
const remark = require("remark");

     

       
10
       
10
       
-
       
const _ = require("lodash");

     

       
11
       
11
       
-
       
const select = require("unist-util-select");

     

       
12
       
12
       
-
       
const visit = require("unist-util-visit");

     

       
13
       
13
       
-
       
const slug = require("remark-slug");

     

       
14
       
14
       
-
       
const slugs = require("github-slugger")();

     

       
2
       
2
       
+
       
import { stage, landerBasePath } from '../static-config-parts/constants';

     

       
3
       
3
       
+
       
const fs = require('fs');

     

       
4
       
4
       
+
       
const klaw = require('klaw');

     

       
5
       
5
       
+
       
const path = require('path');

     

       
6
       
6
       
+
       
const html = require('remark-html');

     

       
7
       
7
       
+
       
const frontmatter = require('remark-frontmatter');

     

       
8
       
8
       
+
       
const yaml = require('js-yaml');

     

       
9
       
9
       
+
       
const remark = require('remark');

     

       
10
       
10
       
+
       
const _ = require('lodash');

     

       
11
       
11
       
+
       
const select = require('unist-util-select');

     

       
12
       
12
       
+
       
const visit = require('unist-util-visit');

     

       
13
       
13
       
+
       
const slug = require('remark-slug');

     

       
14
       
14
       
+
       
const slugs = require('github-slugger')();

     

       
15
       
15
       
 
       
// gatsby-remark plugins are usable for remark parsing without requiring gatsby.

     

       
16
       
16
       
-
       
const remarkPrism = require("gatsby-remark-prismjs");

     

       
16
       
16
       
+
       
const remarkPrism = require('gatsby-remark-prismjs');

     

       
17
       
17
       
 
       


     

       
18
       
18
       
 
       
function defaultSort(items) {

     

       
19
       
19
       
 
       
  return items;

     
···

       
32
       
32
       
 
       
    if (node.depth) {

     

       
33
       
33
       
 
       
      const nodeClass = props.className

     

       
34
       
34
       
 
       
        ? `${props.className} doc-hash-link`

     

       
35
       
35
       
-
       
        : "doc-hash-link";

     

       
35
       
35
       
+
       
        : 'doc-hash-link';

     

       
36
       
36
       
 
       
      // This adds GH style links to our md based on existing behaviors by converting mdast heading

     

       
37
       
37
       
 
       
      // nodes to html so we can inject the link and svg directly rather than do something like add

     

       
38
       
38
       
 
       
      // a marker value to the mdast and let the renderer handle it, in part because our "renderer"

     
···

       
67
       
67
       
 
       
      data.className = nodeClass;

     

       
68
       
68
       
 
       
    }

     

       
69
       
69
       
 
       
  }

     

       
70
       
70
       
-
       
  visit(ast, "heading", visitor);

     

       
70
       
70
       
+
       
  visit(ast, 'heading', visitor);

     

       
71
       
71
       
 
       
}

     

       
72
       
72
       
 
       


     

       
73
       
73
       
 
       
function slugWithLink() {

     
···

       
76
       
76
       
 
       


     

       
77
       
77
       
 
       
function appendImageBasePath(ast) {

     

       
78
       
78
       
 
       
  function visitor(node) {

     

       
79
       
79
       
-
       
    if (!!node.value.match(/<img /) && stage !== "development") {

     

       
79
       
79
       
+
       
    if (!!node.value.match(/<img /) && stage !== 'development') {

     

       
80
       
80
       
 
       
      node.value = node.value.replace(`src="`, `src="/${landerBasePath}`);

     

       
81
       
81
       
 
       
    }

     

       
82
       
82
       
 
       
  }

     

       
83
       
83
       
-
       
  visit(ast, "html", visitor);

     

       
83
       
83
       
+
       
  visit(ast, 'html', visitor);

     

       
84
       
84
       
 
       
}

     

       
85
       
85
       
 
       


     

       
86
       
86
       
 
       
function imageTransformer() {

     
···

       
89
       
89
       
 
       


     

       
90
       
90
       
 
       
const subHeadingRangeDefaults = {

     

       
91
       
91
       
 
       
  start: 1,

     

       
92
       
92
       
-
       
  end: 3

     

       
92
       
92
       
+
       
  end: 3,

     

       
93
       
93
       
 
       
};

     

       
94
       
94
       
 
       


     

       
95
       
95
       
 
       
function setYamlToFile(subHeadingRange = subHeadingRangeDefaults) {

     

       
96
       
96
       
 
       
  function transformer(ast, file) {

     

       
97
       
97
       
-
       
    const yamlObj = select(ast, "yaml");

     

       
97
       
97
       
+
       
    const yamlObj = select(ast, 'yaml');

     

       
98
       
98
       
 
       
    let obj;

     

       
99
       
99
       
 
       
    if (yamlObj.length > 0) {

     

       
100
       
100
       
 
       
      const { children } = ast;

     
···

       
103
       
103
       
 
       


     

       
104
       
104
       
 
       
      file.data = obj;

     

       
105
       
105
       
 
       


     

       
106
       
106
       
-
       
      Object.defineProperty(file, "raw", {

     

       
106
       
106
       
+
       
      Object.defineProperty(file, 'raw', {

     

       
107
       
107
       
 
       
        value: file.contents,

     

       
108
       
108
       
-
       
        enumerable: true

     

       
108
       
108
       
+
       
        enumerable: true,

     

       
109
       
109
       
 
       
      });

     

       
110
       
110
       
 
       


     

       
111
       
111
       
 
       
      file.data.subHeadings = children

     

       
112
       
112
       
 
       
        .filter(

     

       
113
       
113
       
 
       
          c =>

     

       
114
       
114
       
-
       
            c.type === "heading" &&

     

       
114
       
114
       
+
       
            c.type === 'heading' &&

     

       
115
       
115
       
 
       
            c.depth >= subHeadingRange.start &&

     

       
116
       
116
       
 
       
            c.depth <= subHeadingRange.end

     

       
117
       
117
       
 
       
        )

     
···

       
119
       
119
       
 
       
          type: c.type,

     

       
120
       
120
       
 
       
          value: c.children[0].value,

     

       
121
       
121
       
 
       
          depth: c.depth,

     

       
122
       
122
       
-
       
          slug: _.kebabCase(c.children[0].value).toLowerCase()

     

       
122
       
122
       
+
       
          slug: _.kebabCase(c.children[0].value).toLowerCase(),

     

       
123
       
123
       
 
       
        }));

     

       
124
       
124
       
 
       
    }

     

       
125
       
125
       
 
       
  }

     
···

       
133
       
133
       
 
       


     

       
134
       
134
       
 
       
const baseConfig = {

     

       
135
       
135
       
 
       
  renderer: remark()

     

       
136
       
136
       
-
       
    .use(frontmatter, ["yaml", "toml"])

     

       
136
       
136
       
+
       
    .use(frontmatter, ['yaml', 'toml'])

     

       
137
       
137
       
 
       
    .use(setYamlToFile)

     

       
138
       
138
       
 
       
    .use(html)

     

       
139
       
139
       
 
       
    .use(codeHighlightTransformer)

     
···

       
145
       
145
       
 
       
  outputHarmonizer: result => ({

     

       
146
       
146
       
 
       
    content: result.contents,

     

       
147
       
147
       
 
       
    data: result.data,

     

       
148
       
148
       
-
       
    raw: result.raw

     

       
149
       
149
       
-
       
  })

     

       
148
       
148
       
+
       
    raw: result.raw,

     

       
149
       
149
       
+
       
  }),

     

       
150
       
150
       
 
       
};

     

       
151
       
151
       
 
       


     

       
152
       
152
       
 
       
// eslint-disable-next-line max-params

     
···

       
160
       
160
       
 
       
  new Promise(resolve => {

     

       
161
       
161
       
 
       
    if (fs.existsSync(mdPath)) {

     

       
162
       
162
       
 
       
      klaw(mdPath)

     

       
163
       
163
       
-
       
        .on("data", item => {

     

       
164
       
164
       
-
       
          if (path.extname(item.path) === ".md") {

     

       
165
       
165
       
-
       
            const data = fs.readFileSync(item.path, "utf8");

     

       
163
       
163
       
+
       
        .on('data', item => {

     

       
164
       
164
       
+
       
          if (path.extname(item.path) === '.md') {

     

       
165
       
165
       
+
       
            const data = fs.readFileSync(item.path, 'utf8');

     

       
166
       
166
       
 
       


     

       
167
       
167
       
 
       
            const { renderer, outputHarmonizer } = config;

     

       
168
       
168
       
 
       
            renderer.process(data, (err, result) => {

     
···

       
180
       
180
       
 
       
            });

     

       
181
       
181
       
 
       
          }

     

       
182
       
182
       
 
       
        })

     

       
183
       
183
       
-
       
        .on("error", e => {

     

       
183
       
183
       
+
       
        .on('error', e => {

     

       
184
       
184
       
 
       
          throw e;

     

       
185
       
185
       
 
       
        })

     

       
186
       
186
       
-
       
        .on("end", () => {

     

       
186
       
186
       
+
       
        .on('end', () => {

     

       
187
       
187
       
 
       
          resolve(sort(items));

     

       
188
       
188
       
 
       
        });

     

       
189
       
189
       
 
       
    } else {

     

···

       
1
       
1
       
 
       
/* eslint-disable func-style */

     

       
2
       
2
       
 
       
// we can switch to single-function lodash deps like the cool kids once we've got feature parity,

     

       
3
       
3
       
 
       
// keeping in mind this is naught but the build step.

     

       
4
       
4
       
-
       
const _ = require("lodash");

     

       
5
       
5
       
-
       
const path = require("path");

     

       
6
       
6
       
-
       
const getMdFiles = require("./get-md-files");

     

       
4
       
4
       
+
       
const _ = require('lodash');

     

       
5
       
5
       
+
       
const path = require('path');

     

       
6
       
6
       
+
       
const getMdFiles = require('./get-md-files');

     

       
7
       
7
       
 
       


     

       
8
       
8
       
 
       
const capitalizeSlugComponent = word => {

     

       
9
       
9
       
 
       
  // this is suboptimal, we should be able to define page

     

       
10
       
10
       
 
       
  // titles as we want them instead of relying on the slug

     

       
11
       
11
       
 
       
  switch (word) {

     

       
12
       
12
       
-
       
    case "and":

     

       
13
       
13
       
-
       
      return "and";

     

       
14
       
14
       
-
       
    case "api":

     

       
15
       
15
       
-
       
      return "API";

     

       
12
       
12
       
+
       
    case 'and':

     

       
13
       
13
       
+
       
      return 'and';

     

       
14
       
14
       
+
       
    case 'api':

     

       
15
       
15
       
+
       
      return 'API';

     

       
16
       
16
       
 
       
    default:

     

       
17
       
17
       
 
       
      return _.upperFirst(word);

     

       
18
       
18
       
 
       
  }

     
···

       
24
       
24
       
 
       
  mdData.slug = name.toLowerCase();

     

       
25
       
25
       
 
       
  mdData.path = `/${name.toLowerCase()}/`;

     

       
26
       
26
       
 
       
  mdData.title = name

     

       
27
       
27
       
-
       
    .split("-")

     

       
27
       
27
       
+
       
    .split('-')

     

       
28
       
28
       
 
       
    .map(capitalizeSlugComponent)

     

       
29
       
29
       
-
       
    .join(" ");

     

       
29
       
29
       
+
       
    .join(' ');

     

       
30
       
30
       
 
       
};

     

       
31
       
31
       
 
       


     

       
32
       
32
       
-
       
const sidebarSort = items => _.orderBy(items, ["data.order"], "asc");

     

       
32
       
32
       
+
       
const sidebarSort = items => _.orderBy(items, ['data.order'], 'asc');

     

       
33
       
33
       
 
       


     

       
34
       
34
       
 
       
function getSidebarItems(

     

       
35
       
35
       
-
       
  mdPath = "src/content/docs/",

     

       
35
       
35
       
+
       
  mdPath = 'src/content/docs/',

     

       
36
       
36
       
 
       
  items = [],

     

       
37
       
37
       
 
       
  mutations = [sidebarTitleSlugMutation],

     

       
38
       
38
       
 
       
  sort = sidebarSort

     
···

       
41
       
41
       
 
       
}

     

       
42
       
42
       
 
       


     

       
43
       
43
       
 
       
module.exports = {

     

       
44
       
44
       
-
       
  getSidebarItems

     

       
44
       
44
       
+
       
  getSidebarItems,

     

       
45
       
45
       
 
       
};

     

···

       
4
       
4
       
 
       
// react-static build, aka production:  REACT_STATIC_ENV="production" && REACT_STATIC_STAGING=undefined

     

       
5
       
5
       
 
       


     

       
6
       
6
       
 
       
const stage =

     

       
7
       
7
       
-
       
  process.env.REACT_STATIC_STAGING === "true"

     

       
8
       
8
       
-
       
    ? "staging"

     

       
7
       
7
       
+
       
  process.env.REACT_STATIC_STAGING === 'true'

     

       
8
       
8
       
+
       
    ? 'staging'

     

       
9
       
9
       
 
       
    : process.env.REACT_STATIC_ENV;

     

       
10
       
10
       
-
       
const landerBasePath = "open-source/urql";

     

       
10
       
10
       
+
       
const landerBasePath = 'open-source/urql';

     

       
11
       
11
       
 
       
const metaData = {

     

       
12
       
12
       
-
       
  title: "urql",

     

       
12
       
12
       
+
       
  title: 'urql',

     

       
13
       
13
       
 
       
  description:

     

       
14
       
14
       
-
       
    "A GraphQL client that exposes a set of React components and hooks.",

     

       
15
       
15
       
-
       
  url: "http://www.formidable.com/open-source/urql/"

     

       
14
       
14
       
+
       
    'A GraphQL client that exposes a set of React components and hooks.',

     

       
15
       
15
       
+
       
  url: 'http://www.formidable.com/open-source/urql/',

     

       
16
       
16
       
 
       
};

     

       
17
       
17
       
 
       


     

       
18
       
18
       
 
       
module.exports = { stage, landerBasePath, metaData };