├── .gitignore
├── README.md
├── package.json
├── src
    ├── Cover.js
    ├── Future.js
    ├── Intro.js
    ├── deck.mdx
    ├── img
    │   ├── abstraction-pyramid.png
    │   ├── entria.png
    │   ├── entriaLogo.png
    │   ├── fantasy.png
    │   ├── fantasyland-graph.png
    │   ├── fantasyland.png
    │   ├── github.png
    │   ├── me.png
    │   ├── relaymodern.png
    │   └── twitter.png
    └── theme.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Relay Modern Future
 2 | 
 3 | Slides of my talk about Relay Modern Future.
 4 | This api could and will change 
 5 | 
 6 | This is based on awesome `mdx-deck`
 7 | 
 8 | ## Development
 9 | 
10 | To run the presentation deck in development mode:
11 | 
12 | ```sh
13 | yarn start
14 | ```
15 | 
16 | Edit the [`deck.mdx`](deck.mdx) file to get started.
17 | 
18 | ## Exporting
19 | 
20 | To build the presentation deck as static HTML:
21 | 
22 | ```sh
23 | yarn build
24 | ```
25 | 
26 | To export a PDF:
27 | 
28 | ```sh
29 | yarn pdf
30 | ```
31 | 
32 | To export an image of the title slide:
33 | 
34 | ```sh
35 | yarn image
36 | ```
37 | 
38 | For more documentation see the [mdx-deck][] repo.
39 | 
40 | [mdx-deck]: https://github.com/jxnblk/mdx-deck
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "relay-modern-future",
 3 |   "description": "Relay Modern Future",
 4 |   "version": "1.0.0",
 5 |   "author": "Sibelius Seraphini",
 6 |   "devDependencies": {
 7 |     "gh-pages": "^2.0.1",
 8 |     "mdx-code": "^1.1.3",
 9 |     "mdx-deck": "^1.6.7",
10 |     "mdx-deck-code-surfer": "^0.5.5",
11 |     "mdx-deck-live-code": "^1.0.0",
12 |     "raw-loader": "^1.0.0"
13 |   },
14 |   "keywords": [],
15 |   "license": "MIT",
16 |   "private": true,
17 |   "scripts": {
18 |     "build": "mdx-deck build src/deck.mdx",
19 |     "help": "mdx-deck",
20 |     "image": "mdx-deck screenshot src/deck.mdx",
21 |     "pdf": "mdx-deck pdf src/deck.mdx",
22 |     "copy:static": "cp -r src/img dist",
23 |     "publish:deck": "yarn build && yarn copy:static && gh-pages -d dist",
24 |     "start": "mdx-deck src/deck.mdx"
25 |   },
26 |   "dependencies": {
27 |     "codemirror": "^5.43.0",
28 |     "react-codemirror2": "^5.1.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/Cover.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from 'styled-components'
 3 | import { space, width, fontSize, color } from 'styled-system';
 4 | 
 5 | import { Root } from './Intro';
 6 | 
 7 | const Img = styled.img`
 8 |   ${width}
 9 | `;
10 | 
11 | export const Center = styled.div`
12 |   display: flex;
13 |   flex: 1;
14 |   flex-direction: column;
15 |   align-items: center;
16 |   justify-content: center;
17 | `;
18 | 
19 | const Title = styled.span`
20 |   font-size: 50px;
21 |   ${space}
22 | `;
23 | 
24 | const Subtitle = styled.span`
25 |   font-size: 40px;
26 |   color: #FDAA4C;
27 |   ${space}
28 | `;
29 | 
30 | const MeName = styled.span`
31 |   font-size: 20px;
32 |   color: #25D7FD;
33 |   ${space} 
34 | `;
35 | 
36 | export const Cover = () => (
37 |   <Root>
38 |     <Center>
39 |       <Img src={"./img/relaymodern.png"} width={150} />
40 |       <Title mt={20}>Relay Modern</Title>
41 |       <Subtitle mt={20}>Future: Hooks + Suspense</Subtitle>
42 |       <MeName mt={100}>Sibelius Seraphini</MeName>
43 |     </Center>
44 |   </Root>
45 | );
46 | 


--------------------------------------------------------------------------------
/src/Future.js:
--------------------------------------------------------------------------------
 1 | import { useQuery, useFragment, graphql } from 'react-relay';
 2 | 
 3 | const CommentsFragment = graphql`
 4 |   fragment Comments_post on Post {
 5 |     comments(first: 10) 
 6 |         @connection(key: "Post_comments", filters: []) 
 7 |         @stream(label: "comments", initialCount: 10) {
 8 |       edges {
 9 |         node {
10 |           text
11 |           author {
12 |             name
13 |           }
14 |         }
15 |       }
16 |     }
17 |   }
18 | `;
19 | 
20 | const Comments = (props) => {
21 |   const comments = useFragment(CommentsFragment, props);
22 | 
23 |   return (
24 |     <>
25 |     {comments.edges.map(({node}) => (
26 |       <span>{node.text} said by ${node.author.name}</span>
27 |     ))}
28 |     </>
29 |   );
30 | };
31 | 
32 | const PostFragment = graphql`
33 |   fragment Post_post on Post {
34 |     id
35 |     title
36 |     ...Comments_post @defer(label: "DefferedPostComments")
37 |   }
38 | `;
39 | 
40 | const Post = (props) => {
41 |   const post = useFragment(PostFragment, props);
42 | 
43 |   return (
44 |     <>
45 |       <span>{post.title}</span>
46 |       <Comments post={post} />
47 |     </>
48 |   );
49 | };
50 | 
51 | const FeedFragment = graphql`
52 |   fragment Feed_query on Query
53 |     @refetchable(queryName: "FeedRefetchableFragmentQuery")
54 |     @argumentDefinitions(
55 |         first: {type: Int, defaultValue: 10},
56 |         after: {type: String},
57 |     )
58 |   {
59 |     posts(first: $first, after: $after) 
60 |     @connection(key: "Feed_posts", filters: []) {
61 |       edges {
62 |         node {
63 |           id
64 |           ...Post_post
65 |         }
66 |       }
67 |     }
68 |   }
69 |   }
70 | `;
71 | 
72 | const FeedQuery = graphql`
73 |   query FeedQuery {
74 |     ...Feed_query
75 |   }
76 | `;
77 | 
78 | const Feed = () => {
79 |   const [fragments] = useQuery(FeedQuery);
80 |   const { query } = fragments;
81 |   const { posts } = query;
82 | 
83 |   return (
84 |     <>
85 |       {posts.edges.map(({node}) => (
86 |         <Post key={node.id} post={node} />
87 |       ))}
88 |     </>
89 |   );
90 | };
91 | 


--------------------------------------------------------------------------------
/src/Intro.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from 'styled-components'
  3 | import { space, width, fontSize, color } from 'styled-system';
  4 | 
  5 | // Add styled-system functions to your component
  6 | const Box = styled.div`
  7 |   ${space}
  8 |   ${width}
  9 |   ${fontSize}
 10 |   ${color}
 11 | `;
 12 | 
 13 | const IconImage = styled.img`
 14 |   max-height: 60px;
 15 |   max-width: 60px;
 16 | `;
 17 | 
 18 | const Link = styled.a`
 19 |   text-decoration: none;
 20 |   color: white;
 21 | `;
 22 | 
 23 | const Container = styled.div`
 24 |   display: flex;
 25 |   flex: 1;
 26 |   flex-direction: column;
 27 | `;
 28 | 
 29 | const Me = styled.img`
 30 |   max-width: 150px;
 31 |   max-height: 150px; 
 32 | `;
 33 | 
 34 | const MeName = styled.span`
 35 |   font-size: 50px;
 36 |   color: #25D7FD;
 37 |   margin-left: 60px;
 38 | `;
 39 | 
 40 | const Row = styled.div`
 41 |   display: flex;
 42 |   flex: 1;
 43 |   flex-direction: row;
 44 |   align-items: center;
 45 |   margin-bottom: 40px;
 46 | `;
 47 | 
 48 | export const Center = styled.div`
 49 |   display: flex;
 50 |   flex: 1;
 51 |   flex-direction: row;
 52 |   align-items: center;
 53 |   justify-content: center;
 54 | `;
 55 | 
 56 | const SpaceBetween = styled.div`
 57 |   display: flex;
 58 |   flex: 1;
 59 |   flex-direction: row;
 60 |   align-items: center;
 61 |   justify-content: space-between;
 62 | `;
 63 | 
 64 | export const Root = styled.div([], {
 65 |   width: '50vw',
 66 |   height: '70vh',
 67 | });
 68 | 
 69 | const Username = styled.span`
 70 |   font-size: 14px;
 71 |   margin-left: 20px;
 72 | `;
 73 | 
 74 | const EntriaLogo = styled.img`
 75 |   max-width: 600px;
 76 | `;
 77 | 
 78 | const SocialMediaLink = ({ name, link, username }) => (
 79 |   <div>
 80 |     <Link href={link} target="_blank">
 81 |       <Row>
 82 |         <IconImage src={`./img/${name}`} />
 83 |         <Username>{username}</Username>
 84 |       </Row>
 85 |     </Link>
 86 |   </div>
 87 | );
 88 | 
 89 | export const Intro = () => (
 90 |   <Root>
 91 |     <Row>
 92 |       <Me src={'./img/me.png'} />
 93 |       <MeName>Sibelius Seraphini</MeName>
 94 |     </Row>
 95 |     <SpaceBetween>
 96 |       <SocialMediaLink
 97 |         name={'github.png'}
 98 |         link={'https://github.com/sibelius'}
 99 |         username={'@sibelius'}
100 |       />
101 |       <SocialMediaLink
102 |         name={'twitter.png'}
103 |         link={'https://twitter.com/sseraphini'}
104 |         username={'@sseraphini'}
105 |       />
106 |     </SpaceBetween>
107 |     <Center>
108 |       <EntriaLogo src={'./img/entriaLogo.png'} />
109 |     </Center>
110 |   </Root>
111 | );
112 | 


--------------------------------------------------------------------------------
/src/deck.mdx:
--------------------------------------------------------------------------------
 1 | import { Head, Image } from 'mdx-deck'
 2 | import Code from 'mdx-code';
 3 | import { CodeSurfer } from "mdx-deck-code-surfer";
 4 | 
 5 | import { Cover } from './Cover';
 6 | import { Intro } from './Intro';
 7 | 
 8 | export { default as theme } from './theme'
 9 | 
10 | <Head>
11 |   <title>Relay Modern Future</title>
12 | </Head>
13 | 
14 | <Cover />
15 | 
16 | ---
17 | 
18 | <Intro />
19 | 
20 | ---
21 | <div style={{fontSize: 28}}>
22 | <CodeSurfer
23 |   title="Relay Modern Future"
24 |   code={require('!raw-loader!./Future.js')}
25 |   showNumbers={false}
26 |   dark={true}
27 |   lang="javascript"
28 |   steps={[
29 |     { notes: "Relay Modern Future: Hooks and Suspense" },
30 |     { notes: "Relay Modern Future: This was based on relay core team discussion" },
31 |     { notes: "API not available yet, this could and will change" },
32 |     { range: [78, 90], notes: 'useQuery'},
33 |     { range: [72, 76], notes: 'FeedQuery'},
34 |     { range: [51, 70], notes: 'FeedFragment'},
35 |     { range: [40, 49], notes: 'Post'},
36 |     { range: [32, 38], notes: 'PostFragment'},
37 |     { range: [20, 30], notes: 'Comments'},
38 |     { range: [3, 18], notes: 'CommentsFragment'},
39 |   ]}
40 | />
41 | </div>
42 | 


--------------------------------------------------------------------------------
/src/img/abstraction-pyramid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/abstraction-pyramid.png


--------------------------------------------------------------------------------
/src/img/entria.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/entria.png


--------------------------------------------------------------------------------
/src/img/entriaLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/entriaLogo.png


--------------------------------------------------------------------------------
/src/img/fantasy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/fantasy.png


--------------------------------------------------------------------------------
/src/img/fantasyland-graph.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/fantasyland-graph.png


--------------------------------------------------------------------------------
/src/img/fantasyland.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/fantasyland.png


--------------------------------------------------------------------------------
/src/img/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/github.png


--------------------------------------------------------------------------------
/src/img/me.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/me.png


--------------------------------------------------------------------------------
/src/img/relaymodern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/relaymodern.png


--------------------------------------------------------------------------------
/src/img/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sibelius/relay-modern-future/5c07ec7806d8f37af339d64df7abf4201cf14425/src/img/twitter.png


--------------------------------------------------------------------------------
/src/theme.js:
--------------------------------------------------------------------------------
 1 | import { dark as theme } from 'mdx-deck/themes'
 2 | import nightOwl from "prism-react-renderer/themes/nightOwl"
 3 | 
 4 | export default {
 5 |   ...theme,
 6 | 
 7 |   colors: {
 8 |     ...theme.colors,
 9 |     background: '#272425',
10 |   },
11 |   codeSurfer: {
12 |     ...nightOwl,
13 |     showNumbers: false
14 |   }
15 |   // Customize your presentation theme here.
16 |   //
17 |   // Read the docs for more info:
18 |   // https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md
19 |   // https://github.com/jxnblk/mdx-deck/blob/master/docs/themes.md
20 | 
21 | }
22 | 


--------------------------------------------------------------------------------