Skip to content

Commit 50f1834

Browse files
leebyronleebyron
committed
minor formatting
1 parent 0a1efdc commit 50f1834

File tree

2 files changed

+103
-37
lines changed

2 files changed

+103
-37
lines changed

‎site/_css/index.less

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,33 @@ body.index {
142142
}
143143
}
144144

145+
section h1,
146+
section h2 {
147+
margin-top: 0;
148+
}
149+
145150
section.lead {
146151
.body-font(22px);
147152
text-align: center;
148153
max-width: 760px;
154+
padding-top: 4em;
155+
padding-bottom: 4em;
156+
}
157+
158+
.grayWash {
159+
background: #f3f4f6;
160+
}
161+
162+
section.point1 {
163+
display: flex;
164+
align-items: center;
165+
justify-content: space-between;
166+
padding-top: 4em;
167+
padding-bottom: 4em;
168+
169+
& > div {
170+
max-width: 415px;
171+
}
149172
}
150173

151174
.home-divider {

‎site/index.html.js

Lines changed: 80 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ var index = React.createClass({
6464
</div>
6565

6666
<section className="lead">
67-
<h1>A query language for your API.</h1>
67+
<h1>A query language for your API</h1>
6868
<p>
6969
GraphQL is a query language for APIs and a runtime for fulfilling
7070
those queries with your existing data. GraphQL provides a complete
@@ -74,42 +74,85 @@ var index = React.createClass({
7474
developer tools.</p>
7575
</section>
7676

77-
<section>
78-
<h2>Ask for what you need, get exactly that.</h2>
79-
{/*[Illustration: just a simple query and response?]*/}
80-
<p>Send a GraphQL query to your API and get exactly what you need, nothing more and nothing less. GraphQL queries always return predictable results. Apps using GraphQL are fast and stable because they control the data they get, not the server.</p>
81-
</section>
82-
83-
<section>
84-
<h2>Access many resources in a single request.</h2>
85-
{/*Illustration: a query 2 or 3 levels deep]*/}
86-
<p>GraphQL queries access not just the properties of one resource but also smoothly follow references between them. While typical APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request. Apps using GraphQL are quick even on slow mobile network connections.</p>
87-
</section>
88-
89-
<section>
90-
<h2>Describe what's possible with a type system.</h2>
91-
{/*Illustration of a type IDL following a query by line]*/}
92-
{/*Under: a server <-> client (Capabilities, Requirements)]?*/}
93-
<p>GraphQL presents an API organized in terms of objects, types, and fields, not endpoints. GraphQL APIs provide a complete description of your data, exposing the full set of capabilities available from a single endpoint. APIs use these types to ensure Apps only ask for what's possible and provide clear and helpful errors. Apps can use these types to avoid writing manual parsing and model code.</p>
94-
</section>
95-
96-
<section>
97-
<h2>Move faster with powerful developer tools.</h2>
98-
{/*Illustration of GraphiQL validation error and typeahead, animated?]*/}
99-
<p>Know exactly what data you can request from your API without leaving your editor, highlight potential issues before sending a query, and take advantage of improved code intelligence. GraphQL introspection makes it easy to build new powerful tools by leveraging a GraphQL API's type system. You can even automatically generate your API documentation.</p>
100-
</section>
101-
102-
<section>
103-
<h2>Evolve your API without versions.</h2>
104-
{/*Illustration showing more legs added to a graph? Or a type evolving over time?]*/}
105-
<p>Add new fields and types to a GraphQL API without affecting queries sent from existing apps. Aging fields can be deprecated and hidden from documentation. By using a single version, GraphQL APIs give apps easier access to new features and enable cleaner, more maintainable server code.</p>
106-
</section>
107-
108-
<section>
109-
<h2>Powered by your existing data and code.</h2>
110-
{/*Illustration of each field becoming a function?]*/}
111-
<p>GraphQL creates a uniform, powerful API across the entire surface area of your application without being limited by a specific storage engine. Write GraphQL APIs that leverage your existing data model and server with GraphQL engine implementations available in many languages. You provide small functions that fulfill fields in the type system, and GraphQL calls them with optimal concurrency.</p>
112-
</section>
77+
<div className="grayWash">
78+
<section className="point1">
79+
<div>
80+
<h2>Ask for what you need,<br />get exactly that</h2>
81+
{/*[Illustration: just a simple query and response?]*/}
82+
<p>
83+
Send a GraphQL query to your API and get exactly what you need,
84+
nothing more and nothing less. GraphQL queries always return
85+
predictable results. Apps using GraphQL are fast and stable because
86+
they control the data they get, not the server.</p>
87+
</div>
88+
<Prism>
89+
{`{
90+
me {
91+
name
92+
}
93+
}`}
94+
</Prism>
95+
</section>
96+
</div>
97+
98+
<section>
99+
<h2>Access many resources in a single request</h2>
100+
{/*Illustration: a query 2 or 3 levels deep]*/}
101+
<p>
102+
GraphQL queries access not just the properties of one resource but
103+
also smoothly follow references between them. While typical APIs
104+
require loading from multiple URLs, GraphQL APIs get all the data
105+
your app needs in a single request. Apps using GraphQL are quick
106+
even on slow mobile network connections.</p>
107+
</section>
108+
109+
<section>
110+
<h2>Describe what&rsquo;s possible with a type system</h2>
111+
{/*Illustration of a type IDL following a query by line]*/}
112+
{/*Under: a server <-> client (Capabilities, Requirements)]?*/}
113+
<p>
114+
GraphQL presents an API organized in terms of objects, types, and
115+
fields, not endpoints. GraphQL APIs provide a complete description
116+
of your data, exposing the full set of capabilities available from a
117+
single endpoint. APIs use these types to ensure Apps only ask for
118+
what&rsquo;s possible and provide clear and helpful errors. Apps can
119+
use these types to avoid writing manual parsing and model code.</p>
120+
</section>
121+
122+
<section>
123+
<h2>Move faster with powerful developer tools</h2>
124+
{/*Illustration of GraphiQL validation error and typeahead, animated?]*/}
125+
<p>
126+
Know exactly what data you can request from your API without leaving
127+
your editor, highlight potential issues before sending a query, and
128+
take advantage of improved code intelligence. GraphQL introspection
129+
makes it easy to build new powerful tools by leveraging a GraphQL
130+
API&rsquo;s type system. You can even automatically generate your
131+
API documentation.</p>
132+
</section>
133+
134+
<section>
135+
<h2>Evolve your API without versions</h2>
136+
{/*Illustration showing more legs added to a graph? Or a type evolving over time?]*/}
137+
<p>
138+
Add new fields and types to a GraphQL API without affecting queries
139+
sent from existing apps. Aging fields can be deprecated and hidden
140+
from documentation. By using a single version, GraphQL APIs give
141+
apps easier access to new features and enable cleaner, more
142+
maintainable server code.</p>
143+
</section>
144+
145+
<section>
146+
<h2>Powered by your existing data and code</h2>
147+
{/*Illustration of each field becoming a function?]*/}
148+
<p>
149+
GraphQL creates a uniform, powerful API across the entire surface
150+
area of your application without being limited by a specific storage
151+
engine. Write GraphQL APIs that leverage your existing data model
152+
and server with GraphQL engine implementations available in many
153+
languages. You provide small functions that fulfill fields in the
154+
type system, and GraphQL calls them with optimal concurrency.</p>
155+
</section>
113156

114157
{/*
115158
<section className="marketing-row">

0 commit comments

Comments
 (0)