Merge pull request xitu#41 from jonirrings/index.html.js

Author: linhe0x0

site/index.html.js

@@ -25,7 +25,7 @@ module.exports = ({ page, section }) =>
           </div>
 
           <div className="marketing-col">
-            <h3>Describe your data</h3>
+            <h3>描述你的数据</h3>
             <Prism language="graphql">
               {`type Project {
   name: String
@@ -36,7 +36,7 @@ module.exports = ({ page, section }) =>
           </div>
 
           <div className="marketing-col">
-            <h3>Ask for what you want</h3>
+            <h3>请求你所要的数据</h3>
             <Prism language="graphql">
               {`{
   project(name: "GraphQL") {
@@ -47,7 +47,7 @@ module.exports = ({ page, section }) =>
           </div>
 
           <div className="marketing-col">
-            <h3>Get predictable results</h3>
+            <h3>得到可预测的结果</h3>
             <Prism language="json">
               {`{
   "project": {
@@ -60,36 +60,26 @@ module.exports = ({ page, section }) =>
 
         <div className="buttons-unit">
           <a className="button" href="/code/">
-            Get Started
+            马上开始
           </a>
           <a className="button" href="/learn/">
-            Learn More
+            了解更多
           </a>
         </div>
 
       </div>
     </div>
 
     <section className="lead">
-      <h1>A query language for your API</h1>
-      <p>
-        GraphQL is a query language for APIs and a runtime for fulfilling
-        those queries with your existing data. GraphQL provides a complete
-        and understandable description of the data in your API, gives
-        clients the power to ask for exactly what they need and nothing
-        more, makes it easier to evolve APIs over time, and enables powerful
-        developer&nbsp;tools.</p>
+      <h1>一种用于 API 的查询语言</h1>
+      <p>GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。</p>
     </section>
 
     <section className="point1" id="predictable-results">
       <div className="prose">
-        <h2>Ask for what you need,<br />get exactly that</h2>
+        <h2>请求你所要的数据<br />不多不少</h2>
         {/*[Illustration: just a simple query and response?]*/}
-        <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&nbsp;server.</p>
+        <p>向你的 API 发出一个 GraphQL 请求就能准确获得你想要的数据，不多不少。 GraphQL 查询总是返回可预测的结果。使用 GraphQL 的应用可以工作得又快又稳，因为控制数据的是应用，而不是服务器。</p>
       </div>
       <div className="window faux-graphiql" aria-hidden>
         <div className="query">
@@ -179,15 +169,9 @@ module.exports = ({ page, section }) =>
     <div className="grayWash">
       <section className="point2" id="single-request">
         <div className="prose">
-          <h2>Get many resources<br />in a single request</h2>
+          <h2>获取多个资源<br />只用一个请求</h2>
           {/*Illustration: a query 2 or 3 levels deep]*/}
-          <p>
-            GraphQL queries access not just the properties of one resource
-            but also smoothly follow references between them. While typical
-            REST APIs require loading from multiple URLs, GraphQL APIs get
-            all the data your app needs in a single request. Apps using
-            GraphQL can be quick even on slow mobile
-            network&nbsp;connections.</p>
+          <p>GraphQL 查询不仅能够获得资源的属性，还能沿着资源间引用进一步查询。典型的 REST API 请求多个资源时得载入多个 URL，而 GraphQL 可以通过一次请求就获取你应用所需的所有数据。这样一来，即使是比较慢的移动网络连接下，使用 GraphQL 的应用也能表现得足够迅速。</p>
         </div>
         <div className="app-to-server" aria-hidden>
           <img src="/img/phone.svg" width="496" height="440" className="phone" />
@@ -225,15 +209,10 @@ module.exports = ({ page, section }) =>
 
     <section className="point3" id="type-system">
       <div className="prose">
-        <h2>Describe what&rsquo;s possible<br />with a type system</h2>
+        <h2>描述所有的可能<br />类型系统</h2>
         {/*Illustration of a type IDL following a query by line]*/}
         {/*Under: a server <-> client (Capabilities, Requirements)]?*/}
-        <p>
-          GraphQL APIs are organized in terms of types and fields,
-          not endpoints. Access the full capabilities of your data from a
-          single endpoint. GraphQL uses types to ensure Apps only ask for
-          what&rsquo;s possible and provide clear and helpful errors. Apps can
-          use types to avoid writing manual parsing&nbsp;code.</p>
+        <p>GraphQL API 基于类型和字段的方式进行组织，而非入口端点。你可以通过一个单一入口端点得到你所有的数据能力。GraphQL 使用类型来保证应用只请求可能的数据，还提供了清晰的辅助性错误信息。应用可以使用类型，而避免编写手动解析代码。</p>
       </div>
       <div className="window strong-typed-query" aria-hidden>
       <div className="query">
@@ -306,14 +285,11 @@ type Species {
     <div className="darkWash">
     <section className="point4" id="powerful-tools">
       <div className="prose">
-        <h2>Move faster with<br />powerful developer tools</h2>
+        <h2>快步前进<br />强大的开发者工具</h2>
         {/*Illustration of GraphiQL validation error and typeahead, animated?]*/}
-        <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
-          makes it easy to build powerful tools like <a href="https://github.com/graphql/graphiql" target="_blank">Graph<em>i</em>QL</a> by
-          leveraging your API&rsquo;s type system.</p>
+        <p>不用离开编辑器就能准确知道你可以从 API 中请求的数据，发送查询之前就能高亮潜在问题，高级代码智能提示。利用 API 的类型系统，GraphQL 让你可以更简单地构建如同
+          <a href="https://github.com/graphql/graphiql" target="_blank">Graph<em>i</em>QL</a>
+          的强大工具。</p>
       </div>
       <div className="graphiqlVid" dangerouslySetInnerHTML={{__html: `
         <video autoplay loop playsinline>
@@ -326,14 +302,9 @@ type Species {
     <div className="grayWash">
     <section className="point5" id="without-versions">
       <div className="prose">
-        <h2>Evolve your API<br />without versions</h2>
+        <h2>API 演进<br />无需划分版本</h2>
         {/*Illustration showing more legs added to a graph? Or a type evolving over time?]*/}
-        <p>
-          Add new fields and types to your GraphQL API without impacting
-          existing queries. Aging fields can be deprecated
-          and hidden from tools. By using a single evolving version,
-          GraphQL APIs give apps continuous access to new features and
-          encourage cleaner, more maintainable server&nbsp;code.</p>
+        <p>给你的 GraphQL API 添加字段和类型而无需影响现有查询。老旧的字段可以废弃，从工具中隐藏。通过使用单一演进版本，GraphQL API 使得应用始终能够使用新的特性，并鼓励使用更加简洁、更好维护的服务端代码。</p>
       </div>
       <div className="window type-evolution" aria-hidden>
         <div id="typeEvolveView">
@@ -435,15 +406,9 @@ type Person {
 
     <section className="point6" id="bring-your-own-code">
       <div className="prose">
-        <h2>Bring your own<br />data and code</h2>
+        <h2>使用你现有的<br />数据和代码</h2>
         {/*Illustration of each field becoming a function?]*/}
-        <p>
-          GraphQL creates a uniform API across your entire application
-          without being limited by a specific storage engine. Write GraphQL
-          APIs that leverage your existing data and code with GraphQL
-          engines available in many languages. You provide functions for
-          each field in the type system, and GraphQL calls them with
-          optimal&nbsp;concurrency.</p>
+        <p>GraphQL 让你的整个应用共享一套 API，而不用被限制于特定存储引擎。GraphQL 引擎已经有多种语言实现，通过 GraphQL API 能够更好利用你的现有数据和代码。你只需要为类型系统的字段编写函数，GraphQL 就能通过优化并发的方式来调用它们。</p>
       </div>
       <div className="window leverage-code" aria-hidden>
         <div id="leverageCodeView">
@@ -455,7 +420,7 @@ type Person {
 }`}
           </Prism>
           <Prism>
-            {`// type Character {
+            {`// type Character
 class Character {
   // name: String
   getName() {
@@ -474,7 +439,7 @@ class Character {
 }`}
           </Prism>
           <Prism language="python">
-            {`# type Character {
+            {`# type Character
 class Character:
   # name: String
   def name(self):
@@ -490,7 +455,7 @@ class Character:
 `}
           </Prism>
           <Prism>
-            {`// type Character {
+            {`// type Character
 public class Character {
   // name: String
   public String Name { get; }
@@ -523,18 +488,15 @@ public class Character {
 
     <section className="powered-by" id="whos-using">
       <div className="prose">
-        <h2>Who&rsquo;s using GraphQL?</h2>
-        <p>
-          Facebook's mobile apps have been powered by GraphQL since 2012.
-          A GraphQL spec was open sourced in 2015 and is now available in
-          many environments and used by teams of all sizes.</p>
+        <h2>谁在使用 GraphQL？</h2>
+        <p>Facebook 的移动应用从 2012 年就开始使用 GraphQL。GraphQL 规范于 2015 年开源，现已经在多种环境下可用，并被各种体量的团队所使用。</p>
       </div>
       <div className="logos">
         {/* Waiting for permission from some of the below */}
         <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
           <img src="/users/logos/facebook.png" title="Facebook" />
         </a>
-        {/** /}
+        {/**/}
         <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
           <img src="/users/logos/twitter.png" title="Twitter" className="round" />
         </a>
@@ -545,7 +507,7 @@ public class Character {
         <a href="https://www.pinterest.com/" target="_blank" rel="noopener noreferrer">
           <img src="/users/logos/pinterest.png" title="Pinterest" className="round" />
         </a>
-        {/** /}
+        {/**/}
         <a href="https://www.airbnb.com/" target="_blank" rel="noopener noreferrer">
           <img src="/users/logos/airbnb.png" title="Airbnb" className="round" />
         </a>
@@ -562,9 +524,9 @@ public class Character {
       </div>
 
       <a className="button" href="/users/">
-        More GraphQL Users
+        更多 GraphQL 使用者
       </a>
 
     </section>
 
-  </Site>
+  </Site>;