mirror of
https://github.com/zhigang1992/apollo.git
synced 2026-04-28 20:05:38 +08:00
Merge pull request #355 from apollographql/gatsby-docs
Move from Hexo to Gatsby
This commit is contained in:
2
docs/.gitignore
vendored
2
docs/.gitignore
vendored
@@ -4,7 +4,7 @@ db.json
|
||||
*.log
|
||||
node_modules/
|
||||
public/*
|
||||
!public/_redirects
|
||||
.deploy*/
|
||||
docs.json
|
||||
_multiconfig.yml
|
||||
.cache
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
title: Platform
|
||||
propertytitle: How to use the Apollo GraphQL platform
|
||||
description: How to use the Apollo GraphQL platform
|
||||
versions:
|
||||
- '1'
|
||||
sidebar_categories:
|
||||
null:
|
||||
- index
|
||||
- intro/platform
|
||||
- intro/benefits
|
||||
|
||||
Tutorial:
|
||||
- tutorial/introduction
|
||||
- tutorial/schema
|
||||
- tutorial/data-source
|
||||
- tutorial/resolvers
|
||||
- tutorial/production
|
||||
- tutorial/client
|
||||
- tutorial/queries
|
||||
- tutorial/mutations
|
||||
- tutorial/local-state
|
||||
# - tutorial/whats-next
|
||||
|
||||
Platform:
|
||||
- platform/schema-registry
|
||||
- platform/schema-validation
|
||||
- platform/client-awareness
|
||||
- platform/operation-registry
|
||||
- platform/editor-plugins
|
||||
- platform/tracing
|
||||
- platform/setup-analytics
|
||||
- platform/errors
|
||||
- platform/integrations
|
||||
|
||||
Resources:
|
||||
- title: Principled GraphQL
|
||||
href: https://www.principledgraphql.com
|
||||
- resources/graphql-glossary
|
||||
- resources/faq
|
||||
|
||||
References:
|
||||
- references/apollo-config
|
||||
- references/apollo-engine
|
||||
- references/engine-proxy
|
||||
|
||||
github_repo: apollographql/apollo
|
||||
content_root: docs/source
|
||||
|
||||
url: https://www.apollographql.com/docs
|
||||
root: /docs/
|
||||
|
||||
public_dir: public/docs
|
||||
@@ -1,117 +0,0 @@
|
||||
@color-primary: #22a699;
|
||||
@color-secondary: #e535ab;
|
||||
|
||||
.docstart {
|
||||
width: 100%;
|
||||
height: 390px;
|
||||
//border-right: 0px solid #22A699;
|
||||
//border:0px solid #22A699;
|
||||
}
|
||||
|
||||
.docstart .pop-banner {
|
||||
background-color: fade(@color-primary, 5%);
|
||||
border: 2px solid @color-primary;
|
||||
padding: 0.5rem;
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
margin-bottom: 2rem;
|
||||
.pb-content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.pb-early-access {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25em;
|
||||
text-transform: uppercase;
|
||||
color: @color-primary;
|
||||
}
|
||||
.pb-head {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.pb-link,
|
||||
.pb-link a {
|
||||
color: @color-primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.fundamentals,
|
||||
.quickstart,
|
||||
.guides {
|
||||
//border:0px solid #22A699;
|
||||
width: 33.3%;
|
||||
float: left;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-right: 0px;
|
||||
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5rem;
|
||||
color: #81849b;
|
||||
}
|
||||
}
|
||||
|
||||
.headers {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#documentation-heading {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.documentation-buttons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
margin: 0 auto 24px;
|
||||
|
||||
.btn.default {
|
||||
color: white;
|
||||
border: 2px solid @color-secondary;
|
||||
border-radius: 3em;
|
||||
text-indent: 0.1em;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
padding: 12px 24px;
|
||||
background-color: @color-secondary;
|
||||
&.hollow {
|
||||
color: @color-secondary;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 9px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// /*
|
||||
// ##Device = Most of the Smartphones Mobiles (Portrait)
|
||||
// ##Screen = B/w 320px to 479px
|
||||
// */
|
||||
@media (min-width: 320px) and (max-width: 480px) {
|
||||
.docstart .pop-banner {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
.pb-head {
|
||||
padding-top: 0.3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
.pb-link {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
58
docs/gatsby-config.js
Normal file
58
docs/gatsby-config.js
Normal file
@@ -0,0 +1,58 @@
|
||||
module.exports = {
|
||||
__experimentalThemes: [
|
||||
{
|
||||
resolve: 'gatsby-theme-apollo-docs',
|
||||
options: {
|
||||
root: __dirname,
|
||||
subtitle: 'Platform',
|
||||
description: 'How to use the Apollo GraphQL platform',
|
||||
contentDir: 'docs/source',
|
||||
basePath: '/docs',
|
||||
githubRepo: 'apollographql/apollo',
|
||||
sidebarCategories: {
|
||||
null: [
|
||||
'index',
|
||||
'intro/platform',
|
||||
'intro/benefits'
|
||||
],
|
||||
Tutorial: [
|
||||
'tutorial/introduction',
|
||||
'tutorial/schema',
|
||||
'tutorial/data-source',
|
||||
'tutorial/resolvers',
|
||||
'tutorial/production',
|
||||
'tutorial/client',
|
||||
'tutorial/queries',
|
||||
'tutorial/mutations',
|
||||
'tutorial/local-state',
|
||||
// 'tutorial/whats-next'
|
||||
],
|
||||
Platform: [
|
||||
'platform/schema-registry',
|
||||
'platform/schema-validation',
|
||||
'platform/client-awareness',
|
||||
'platform/operation-registry',
|
||||
'platform/editor-plugins',
|
||||
'platform/tracing',
|
||||
'platform/setup-analytics',
|
||||
'platform/errors',
|
||||
'platform/integrations'
|
||||
],
|
||||
Resources: [
|
||||
{
|
||||
title: 'Principled GraphQL',
|
||||
href: 'https://www.principledgraphql.com'
|
||||
},
|
||||
'resources/graphql-glossary',
|
||||
'resources/faq'
|
||||
],
|
||||
References: [
|
||||
'references/apollo-config',
|
||||
'references/apollo-engine',
|
||||
'references/engine-proxy'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
15781
docs/package-lock.json
generated
15781
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,26 +1,9 @@
|
||||
{
|
||||
"name": "hexo-site",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"hexo": {
|
||||
"version": "3.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"apollo-hexo-config": "1.0.8",
|
||||
"chexo": "1.0.7",
|
||||
"hexo": "3.8.0",
|
||||
"hexo-browsersync": "0.3.0",
|
||||
"hexo-prism-plus": "1.1.0",
|
||||
"hexo-renderer-ejs": "0.3.1",
|
||||
"hexo-renderer-less": "0.2.0",
|
||||
"hexo-renderer-marked": "0.3.2",
|
||||
"hexo-server": "0.3.3",
|
||||
"meteor-theme-hexo": "2.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm run build && chexo apollo-hexo-config -- server",
|
||||
"build": "chexo apollo-hexo-config -- generate",
|
||||
"clean": "hexo clean",
|
||||
"test": "npm run clean; npm run build"
|
||||
"start": "gatsby develop --prefix-paths"
|
||||
},
|
||||
"dependencies": {
|
||||
"gatsby": "^2.2.11",
|
||||
"gatsby-theme-apollo-docs": "^0.2.36"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,5 @@ The Apollo GraphQL platform is an implementation of GraphQL that helps you manag
|
||||
</div>
|
||||
|
||||
<div style="text-align:center">
|
||||

|
||||
<img src="./img/platform.jpg" alt="Graph layer">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ components, commercial extensions, and cloud services. The major pieces
|
||||
are:
|
||||
|
||||
<div style="text-align:center">
|
||||

|
||||
<img src="../img/platform-diagram.png" alt="Graph layer">
|
||||
</div>
|
||||
|
||||
<h2 id="open-source">Core open source components</h2>
|
||||
|
||||
@@ -14,7 +14,7 @@ Apollo is a complete platform for implementing a graph over your data. It includ
|
||||
Why do you need a graph? Today, one of the most difficult parts of building an app is figuring out your data layer. Often, there's many data sources you need to fetch from and many clients you need to support. When you layer a graph in between your services and your UI, you can remove a lot of complexity from your data fetching logic and ship features faster.
|
||||
|
||||
<div style="text-align:center">
|
||||

|
||||
<img src="../images/graph-layer.png" alt="Graph layer">
|
||||
</div>
|
||||
|
||||
**[GraphQL](https://www.graphql.org/)** is the specification that we'll be using to communicate between our graph API and client. The spec itself is language-agnostic and unopinionated, so we're choosing to implement GraphQL with the Apollo platform.
|
||||
@@ -26,7 +26,7 @@ In this tutorial, we'll build an interactive app for reserving your spot on an u
|
||||
Here's what the finished app will look like:
|
||||
|
||||
<div style="text-align:center">
|
||||

|
||||
<img src="../images/space-explorer.png" alt="Space explorer">
|
||||
</div>
|
||||
|
||||
The app has five screens: a login screen, a list of launches, a launch detail, a profile page, and a cart. The graph API powering our space app connects to a REST API and a SQLite database. Don't worry if you're unfamiliar with those technologies, you don't need to know how to build a REST API or SQLite database from scratch in order to complete the tutorial.
|
||||
|
||||
@@ -186,15 +186,13 @@ The GraphQL Playground provides the ability to introspect your schema. **Introsp
|
||||
|
||||
|
||||
<div style="text-align:center">
|
||||

|
||||
<br></br>
|
||||
<img src="../images/schematab.png" alt="Schema button">
|
||||
</div>
|
||||
|
||||
You can quickly have access to the documentation of a GraphQL API via the `schema` button.
|
||||
|
||||
<div style="text-align:center">
|
||||

|
||||
<br></br>
|
||||
<img src="../images/moredetailsonatype.png" alt="More details on a Schema Type">
|
||||
</div>
|
||||
|
||||
That's all for building our schema. Let's move on to the next part of our tutorial.
|
||||
|
||||
6
netlify.toml
Normal file
6
netlify.toml
Normal file
@@ -0,0 +1,6 @@
|
||||
[build]
|
||||
base = "docs/"
|
||||
publish = "docs/public/"
|
||||
command = "gatsby build --prefix-paths && mkdir -p docs && mv public/* docs && mv docs public/"
|
||||
[build.environment]
|
||||
NPM_VERSION = "6"
|
||||
Reference in New Issue
Block a user