Skip to content

Commit 9c0f271

Browse files
leebyronleebyron
committed
Type system illustration
1 parent 5a5c18f commit 9c0f271

File tree

2 files changed

+183
-51
lines changed

2 files changed

+183
-51
lines changed

‎site/_css/index.less

Lines changed: 70 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,14 @@ body.index {
158158
position: relative;
159159
}
160160

161+
.darkWash {
162+
background: #3d464f;
163+
position: relative;
164+
}
165+
161166
section.point1 {
162167
display: flex;
168+
flex-direction: row-reverse;
163169
align-items: center;
164170
justify-content: space-between;
165171
padding-top: 4em;
@@ -175,8 +181,7 @@ body.index {
175181
border-image-slice: 190 210 190 234;
176182
border-image-width: 95px 105px 95px 117px;
177183
padding: 54px 55px 79px 55px;
178-
margin-bottom: -40px;
179-
margin-left: -70px;
184+
margin: -30px 0 -80px -70px;
180185
width: 570px;
181186
height: 450px;
182187
display: flex;
@@ -201,10 +206,10 @@ body.index {
201206

202207
.cursor {
203208
width: 7px;
204-
height: 14px;
209+
height: 15px;
205210
background-color: #d0d0d0;
206211
display: inline-block;
207-
margin: 0 1px -3px;
212+
margin: -1px 1px -3px;
208213
animation: cursor-blink 0.5s infinite linear both alternate;
209214

210215
@keyframes cursor-blink {
@@ -311,13 +316,71 @@ body.index {
311316
}
312317

313318
section.point3 {
319+
display: flex;
320+
flex-direction: row-reverse;
321+
align-items: center;
322+
justify-content: space-between;
314323
padding-bottom: 4em;
315324
padding-top: 4em;
316-
text-align: center;
317325

318326
.prose {
319-
max-width: 630px;
320-
margin: auto;
327+
max-width: 415px;
328+
}
329+
330+
.strong-typed-query {
331+
border: 1px solid transparent;
332+
border-image: url(http://github.com/%3Cspan%20class=%22pl-s%22%3E/img/terminal.png%3C/span%3E) repeat;
333+
border-image-slice: 190 210 190 234;
334+
border-image-width: 95px 105px 95px 117px;
335+
padding: 54px 55px 79px 55px;
336+
margin: -30px 0 -80px -70px;
337+
width: 580px;
338+
display: flex;
339+
pointer-events: none;
340+
341+
.type-system, .query {
342+
background: white;
343+
flex: 1;
344+
position: relative;
345+
}
346+
347+
.query {
348+
border-right: solid 5px #e0e0e0;
349+
}
350+
351+
.highlight {
352+
position: absolute;
353+
left: 0;
354+
right: 0;
355+
height: 18px;
356+
top: 8px;
357+
background: lighten(@dark-color, 80%);
358+
}
359+
360+
.prism {
361+
background: none;
362+
box-shadow: none;
363+
margin: 0;
364+
padding: 1ch;
365+
}
366+
}
367+
}
368+
369+
section.point4 {
370+
color: white;
371+
padding-bottom: 4em;
372+
padding-top: 4em;
373+
-webkit-font-smoothing: antialiased;
374+
-moz-osx-font-smoothing: grayscale;
375+
376+
h2 {
377+
color: white;
378+
}
379+
380+
.prose {
381+
max-width: 540px;
382+
text-align: center;
383+
margin: 0 auto;
321384
}
322385
}
323386

‎site/index.html.js

Lines changed: 113 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,20 @@ var index = React.createClass({
7575
</section>
7676

7777
<section className="point1">
78+
<div className="prose">
79+
<h2>Ask for what you need,<br />get exactly that</h2>
80+
{/*[Illustration: just a simple query and response?]*/}
81+
<p>
82+
Send a GraphQL query to your API and get exactly what you need,
83+
nothing more and nothing less. GraphQL queries always return
84+
predictable results. Apps using GraphQL are fast and stable because
85+
they control the data they get, not the&nbsp;server.</p>
86+
</div>
7887
<div className="faux-graphiql" aria-hidden>
7988
<div className="query">
8089
<pre className="prism">
8190
{'{'}
82-
{'\n me {'}
91+
{'\n hero {'}
8392
{'\n name'}
8493
{'\n eyeColor\n hairColor'.split('').map((c, i) =>
8594
<span key={i} id={'ch' + i} className="ch">{c === '\n' ? <br/> : c}</span>)}
@@ -92,7 +101,7 @@ var index = React.createClass({
92101
<div id="r1">
93102
<Prism>
94103
{`{
95-
"me": {
104+
"hero": {
96105
"name": "Luke Skywalker"
97106
}
98107
}`}
@@ -101,7 +110,7 @@ var index = React.createClass({
101110
<div id="r2">
102111
<Prism>
103112
{`{
104-
"me": {
113+
"hero": {
105114
"name": "Luke Skywalker",
106115
"eyeColor": "blue"
107116
}
@@ -111,7 +120,7 @@ var index = React.createClass({
111120
<div id="r3">
112121
<Prism>
113122
{`{
114-
"me": {
123+
"hero": {
115124
"name": "Luke Skywalker",
116125
"eyeColor": "blue",
117126
"hairColor": "blond"
@@ -121,7 +130,7 @@ var index = React.createClass({
121130
</div>
122131
</div>
123132
</div>
124-
<script dangerouslySetInnerHTML={{__html: `
133+
<script dangerouslySetInnerHTML={{__html: `(function(){
125134
var i = 0;
126135
var forward = true;
127136
setTimeout(type, 2000);
@@ -157,36 +166,27 @@ var index = React.createClass({
157166
document.getElementById('r2').style.display = num === 2 ? 'block' : 'none';
158167
document.getElementById('r3').style.display = num === 3 ? 'block' : 'none';
159168
}
160-
`}} />
161-
<div className="prose">
162-
<h2>Ask for what you need,<br />get exactly that</h2>
163-
{/*[Illustration: just a simple query and response?]*/}
164-
<p>
165-
Send a GraphQL query to your API and get exactly what you need,
166-
nothing more and nothing less. GraphQL queries always return
167-
predictable results. Apps using GraphQL are fast and stable because
168-
they control the data they get, not the&nbsp;server.</p>
169-
</div>
169+
})()`}} />
170170
</section>
171171

172172
<div className="grayWash">
173173
<section className="point2">
174174
<div className="prose">
175-
<h2>Get many resources<br />in a single request</h2>
176-
{/*Illustration: a query 2 or 3 levels deep]*/}
177-
<p>
178-
GraphQL queries access not just the properties of one resource but
179-
also smoothly follow references between them. While typical APIs
180-
require loading from multiple URLs, GraphQL APIs get all the data
181-
your app needs in a single request. Apps using GraphQL are quick
182-
even on slow mobile network&nbsp;connections.</p>
175+
<h2>Get many resources<br />in a single request</h2>
176+
{/*Illustration: a query 2 or 3 levels deep]*/}
177+
<p>
178+
GraphQL queries access not just the properties of one resource
179+
but also smoothly follow references between them. While typical
180+
REST APIs require loading from multiple URLs, GraphQL APIs get
181+
all the data your app needs in a single request. Apps using
182+
GraphQL are quick even on slow mobile network&nbsp;connections.</p>
183183
</div>
184184
<div className="app-to-server" aria-hidden>
185185
<img src="/img/phone.svg" width="496" height="440" />
186186
<div className="query">
187187
<Prism>
188188
{`{
189-
me {
189+
hero {
190190
name
191191
friends {
192192
name
@@ -198,7 +198,7 @@ var index = React.createClass({
198198
<div className="response">
199199
<Prism>
200200
{`{
201-
"me": {
201+
"hero": {
202202
"name": "Luke Skywalker",
203203
"friends": [
204204
{ "name": "Obi-Wan Kenobi" },
@@ -217,29 +217,98 @@ var index = React.createClass({
217217

218218
<section className="point3">
219219
<div className="prose">
220-
<h2>Describe what&rsquo;s possible<br />with a type system</h2>
221-
{/*Illustration of a type IDL following a query by line]*/}
222-
{/*Under: a server <-> client (Capabilities, Requirements)]?*/}
223-
<p>
224-
GraphQL APIs are organized in terms of types and fields,
225-
not endpoints. Access the full capabilities of your data from a
226-
single endpoint. GraphQL uses types to ensure Apps only ask for
227-
what&rsquo;s possible and provide clear and helpful errors. Apps can
228-
use types to avoid writing manual parsing and model&nbsp;code.</p>
220+
<h2>Describe what&rsquo;s possible<br />with a type system</h2>
221+
{/*Illustration of a type IDL following a query by line]*/}
222+
{/*Under: a server <-> client (Capabilities, Requirements)]?*/}
223+
<p>
224+
GraphQL APIs are organized in terms of types and fields,
225+
not endpoints. Access the full capabilities of your data from a
226+
single endpoint. GraphQL uses types to ensure Apps only ask for
227+
what&rsquo;s possible and provide clear and helpful errors. Apps can
228+
use types to avoid writing manual parsing&nbsp;code.</p>
229229
</div>
230+
<div className="strong-typed-query" aria-hidden>
231+
<div className="query">
232+
<div id="query-highlight" className="highlight" />
233+
<Prism>
234+
{`{
235+
hero {
236+
name
237+
friends {
238+
name
239+
homeWorld {
240+
name
241+
climate
242+
}
243+
species {
244+
name
245+
lifespan
246+
origin {
247+
name
248+
}
249+
}
250+
}
251+
}
252+
}`}
253+
</Prism>
254+
</div>
255+
<div className="type-system">
256+
<div id="type-highlight" className="highlight" />
257+
<Prism>
258+
{`type Query {
259+
hero: Character
260+
}
261+
262+
type Character {
263+
name: String
264+
friends: [Character]
265+
homeWorld: Planet
266+
species: Species
267+
}
268+
269+
type Planet {
270+
name: String
271+
climate: String
272+
}
273+
274+
type Species {
275+
name: String
276+
lifespan: Int
277+
origin: Planet
278+
}`}
279+
</Prism>
280+
</div>
281+
</div>
282+
<script dangerouslySetInnerHTML={{__html: `(function(){
283+
var typeHighlight = document.getElementById('type-highlight');
284+
var queryHighlight = document.getElementById('query-highlight');
285+
var line = 0;
286+
var typeLines = [2,6,7,6,8,13,14, 9,18,19,20,13];
287+
var queryLines = [2,3,4,5,6, 7, 8,10,11,12,13,14];
288+
highlightLine();
289+
function highlightLine() {
290+
typeHighlight.style.top = (17 * typeLines[line] - 9) + 'px';
291+
queryHighlight.style.top = (17 * queryLines[line] - 9) + 'px';
292+
line = (line + 1) % typeLines.length;
293+
setTimeout(highlightLine, 800 + Math.random() * 200);
294+
}
295+
})()`}} />
230296
</section>
231297

232-
<section>
233-
<h2>Move faster with powerful developer tools</h2>
234-
{/*Illustration of GraphiQL validation error and typeahead, animated?]*/}
235-
<p>
236-
Know exactly what data you can request from your API without leaving
237-
your editor, highlight potential issues before sending a query, and
238-
take advantage of improved code intelligence. GraphQL introspection
239-
makes it easy to build new powerful tools by leveraging a GraphQL
240-
API&rsquo;s type system. You can even automatically generate your
241-
API&nbsp;documentation.</p>
298+
<div className="darkWash">
299+
<section className="point4">
300+
<div className="prose">
301+
<h2>Move faster with<br />powerful developer tools</h2>
302+
{/*Illustration of GraphiQL validation error and typeahead, animated?]*/}
303+
<p>
304+
Know exactly what data you can request from your API without
305+
leaving your editor, highlight potential issues before sending a
306+
query, and take advantage of improved code intelligence. GraphQL
307+
makes it easy to build powerful tools by leveraging your
308+
API&rsquo;s type system. You can even auto-generate your&nbsp;docs.</p>
309+
</div>
242310
</section>
311+
</div>
243312

244313
<section>
245314
<h2>Evolve your API without versions</h2>

0 commit comments

Comments
 (0)