+
)
}
}
diff --git a/www/src/pages/docs/index.js b/www/src/pages/docs/index.js
index 789a690265967..2a9c2e42d055e 100644
--- a/www/src/pages/docs/index.js
+++ b/www/src/pages/docs/index.js
@@ -2,83 +2,96 @@ import React from "react"
import { Link } from "gatsby"
import Helmet from "react-helmet"
-import SidebarBody from "../../components/sidebar-body"
+import GlobalLayout from "../../layouts"
import docsSidebar from "./doc-links.yaml"
import Container from "../../components/container"
+import PageWithSidebar from "../../components/page-with-sidebar"
+import DocSearchContent from "../../components/docsearch-content"
import presets from "../../utils/presets"
class IndexRoute extends React.Component {
render() {
return (
-
-
- Docs
-
-
- Get started
-
-
Gatsby is a blazing-fast static site generator for React.
-
Install Gatsby{`'`}s command line tool
-
- npm install --global gatsby-cli
-
-
Using the Gatsby CLI
-
-
- Create a new site.
- {` `}
- gatsby new gatsby-site
-
-
- cd gatsby-site
-
-
- gatsby develop — Gatsby will start a hot-reloading
- development environment accessible at localhost:8000
-
-
- Try editing the javascript pages in src/pages. Saved
- changes will live reload in the browser.
-
-
- gatsby build — Gatsby will perform an optimized
- production build for your site generating static HTML and per-route
- JavaScript code bundles.
-
-
- gatsby serve — Gatsby starts a local HTML server for
- testing your built site.
-
-
-
Using other starters
-
- Running gatsby new installs the default Gatsby starter.
- There are{` `}
-
- many other official and community starters
-
- {` `}
- you can use to kickstart building your Gatsby site.
-
-
Work through the tutorial
-
- It walks you through building a Gatsby site from scratch to a finished
- polished site.
- {` `}
- Go to the tutorial.
-
-
-
Documentation
-
-
-
+
+ (
+
+
+
+ Docs
+
+
+ Get started
+
+
Gatsby is a blazing-fast static site generator for React.
+
Install Gatsby{`'`}s command line tool
+
+ npm install --global gatsby-cli
+
+
Using the Gatsby CLI
+
+
+ Create a new site.
+ {` `}
+ gatsby new gatsby-site
+
+
+ cd gatsby-site
+
+
+ gatsby develop — Gatsby will start a
+ hot-reloading development environment accessible at{" "}
+ localhost:8000
+
+
+ Try editing the javascript pages in src/pages.
+ Saved changes will live reload in the browser.
+
+
+ gatsby build — Gatsby will perform an optimized
+ production build for your site generating static HTML and
+ per-route JavaScript code bundles.
+
+
+ gatsby serve — Gatsby starts a local HTML
+ server for testing your built site.
+
+
+
Using other starters
+
+ Running gatsby new installs the default Gatsby
+ starter. There are{` `}
+
+ many other official and community starters
+
+ {` `}
+ you can use to kickstart building your Gatsby site.
+
+
+ Work through the tutorial
+
+
+ It walks you through building a Gatsby site from scratch to a
+ finished polished site.
+ {` `}
+ Go to the tutorial.
+
+
+
Documentation
+
+
+
+ )}
+ />
+
)
}
}
diff --git a/www/src/pages/features.js b/www/src/pages/features.js
index 9d815966eab8c..820c59f68c4b5 100644
--- a/www/src/pages/features.js
+++ b/www/src/pages/features.js
@@ -1,9 +1,12 @@
import React, { Component } from "react"
import Helmet from "react-helmet"
+import GlobalLayout from "../layouts"
import EvaluationTable from "../components/evaluation-table"
import EvaluationCell from "../components/evaluation-cell"
import FuturaParagraph from "../components/futura-paragraph"
+import PageWithSidebar from "../components/page-with-sidebar"
+import featuresSidebar from "./docs/features-links.yaml"
import Container from "../components/container"
import { options, rhythm } from "../utils/typography"
import presets, { colors } from "../utils/presets"
@@ -196,11 +199,21 @@ class FeaturesPage extends Component {
)
return (
-
-
-
-
-
+
+ (
+
+
+
+
+
+ )}
+ />
+
)
}
}
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 23b7f14f2f04a..187aa2e30f4e0 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -1,6 +1,7 @@
import React from "react"
import { Link } from "gatsby"
+import Layout from "../layouts"
import presets, { colors } from "../utils/presets"
import { rhythm, scale, options } from "../utils/typography"
import { JSIcon, WebpackIcon, ReactJSIcon, GraphQLIcon } from "../assets/logos"
@@ -22,170 +23,182 @@ class IndexRoute extends React.Component {
render() {
const blogPosts = this.props.data.allMarkdownRemark
return (
-
-
-
-
-
+
+
+
-
-
-
- Modern web tech without the headache
-
-
- Enjoy the power of the latest web technologies –{` `}
- React.js,{` `}
- Webpack,{` `}
- modern JavaScript and CSS and more — all setup and waiting for
- you to start building.
-
-
-
- Bring your own data
-
- Gatsby’s rich data plugin ecosystem lets you build sites with
- the data you want — from one or many sources: Pull data from
- headless CMSs, SaaS services, APIs, databases, your file
- system & more directly into your pages using{` `}
- GraphQL.
-
-
-
- Scale to the entire internet
-
- Gatsby.js is Internet Scale. Forget complicated deploys with
- databases and servers and their expensive, time-consuming
- setup costs, maintenance, and scaling fears. Gatsby.js builds
- your site as “static” files which can be deployed easily on
- dozens of services.
-
-
-
- Future-proof your website
-
- Don't build a website with last decade's tech. The future of
- the web is mobile, JavaScript and APIs—the {` `}
- JAMstack. Every website is
- a web app and every web app is a website. Gatsby.js is the
- universal JavaScript framework you’ve been waiting for.
-
-
-
-
-
- Static
-
- {` `}
- Progressive Web Apps
-
-
- Gatsby.js is a static PWA (Progressive Web App) generator. You
- get code and data splitting out-of-the-box. Gatsby loads only
- the critical HTML, CSS, data, and JavaScript so your site
- loads as fast as possible. Once loaded, Gatsby prefetches
- resources for other pages so clicking around the site feels
- incredibly fast.
-
-
-
- Speed past the competition
-
- Gatsby.js builds the fastest possible website. Instead of
- waiting to generate pages when requested, pre-build pages and
- lift them into a global cloud of servers — ready to be
- delivered instantly to your users wherever they are.
-
-
+
+
+
+
+
+
+ Modern web tech without the headache
+
+
+ Enjoy the power of the latest web technologies –{` `}
+
+ React.js
+ ,{` `}
+
+ Webpack
+ ,{` `}
+ modern JavaScript and CSS and more — all setup and waiting
+ for you to start building.
+
+
+
+ Bring your own data
+
+ Gatsby’s rich data plugin ecosystem lets you build sites
+ with the data you want — from one or many sources: Pull data
+ from headless CMSs, SaaS services, APIs, databases, your
+ file system & more directly into your pages using{` `}
+ GraphQL.
+
+
+
+ Scale to the entire internet
+
+ Gatsby.js is Internet Scale. Forget complicated deploys with
+ databases and servers and their expensive, time-consuming
+ setup costs, maintenance, and scaling fears. Gatsby.js
+ builds your site as “static” files which can be deployed
+ easily on dozens of services.
+
+
+
+ Future-proof your website
+
+ Don't build a website with last decade's tech. The future of
+ the web is mobile, JavaScript and APIs—the {` `}
+ JAMstack. Every website
+ is a web app and every web app is a website. Gatsby.js is
+ the universal JavaScript framework you’ve been waiting for.
+
+
+
+
+
+ Static
+
+ {` `}
+ Progressive Web Apps
+
+
+ Gatsby.js is a static PWA (Progressive Web App) generator.
+ You get code and data splitting out-of-the-box. Gatsby loads
+ only the critical HTML, CSS, data, and JavaScript so your
+ site loads as fast as possible. Once loaded, Gatsby
+ prefetches resources for other pages so clicking around the
+ site feels incredibly fast.
+
+
+
+ Speed past the competition
+
+ Gatsby.js builds the fastest possible website. Instead of
+ waiting to generate pages when requested, pre-build pages
+ and lift them into a global cloud of servers — ready to be
+ delivered instantly to your users wherever they are.
+
+
-
+
-
-
-
-
Curious yet?
-
- It only takes a few minutes to get up and running!
-
-
- Get Started
-
-
-
-
+
+
+
+
Curious yet?
+
+ It only takes a few minutes to get up and running!
+
+
+ Get Started
+
+
+
)
}
}
@@ -194,11 +207,6 @@ export default IndexRoute
export const pageQuery = graphql`
query Index {
- site {
- siteMetadata {
- title
- }
- }
file(relativePath: { eq: "gatsby-explanation.png" }) {
childImageSharp {
sizes(maxWidth: 870) {
diff --git a/www/src/pages/tutorial.js b/www/src/pages/tutorial.js
index 16df7c795552f..b20305dde435b 100644
--- a/www/src/pages/tutorial.js
+++ b/www/src/pages/tutorial.js
@@ -2,49 +2,65 @@ import React from "react"
import Helmet from "react-helmet"
import { Link } from "gatsby"
+import tutorialSidebar from "./docs/tutorial-links.yml"
+import GlobalLayout from "../layouts"
import Container from "../components/container"
+import PageWithSidebar from "../components/page-with-sidebar"
+import DocSearchContent from "../components/docsearch-content"
-export default () => (
-
-
- Tutorial
-
-
Gatsby.js Tutorial
-
- Hi! We’re so happy you decided to try using Gatsby. This tutorial has four
- parts that'll walk you from getting started developing and building Gatsby
- sites to deploying a finished and polished high performance static PWA.
-
-
- This tutorial is for everyone! You do not need to be a programmer
- or React.js expert. We'll walk you through things.
-
+ Hi! We’re so happy you decided to try using Gatsby. This tutorial
+ has four parts that'll walk you from getting started developing
+ and building Gatsby sites to deploying a finished and polished
+ high performance static PWA.
+
+
+ This tutorial is for everyone! You do not need to be a
+ programmer or React.js expert. We'll walk you through things.
+
-
-
- Introduction to basics of Gatsby
- {` `}— Starting new projects, developing, and deploying sites.
-
-
-
- Introduction to using CSS in Gatsby
- . Explore libraries like Typography.js and CSS Modules.
-
-
-
- Explore building nested layouts in Gatsby
- . Layouts are sections of your site that are reused across
- multiple pages like headers and footers.
-
-
-
- Learn how to work with Gatsby's data layer.
-
- {` `}
- Explore source & transformer plugins. Get introduced to programmatic
- pages and how to write GraphQL queries. In this part of the tutorial
- we'll build a bare-bones markdown blog.
-
-
-
+
+
+
+ Introduction to basics of Gatsby
+
+ {` `}— Starting new projects, developing, and deploying sites.
+
+
+
+ Introduction to using CSS in Gatsby
+ . Explore libraries like Typography.js and CSS Modules.
+
+
+
+ Explore building nested layouts in Gatsby
+ . Layouts are sections of your site that are reused
+ across multiple pages like headers and footers.
+
+
+
+ Learn how to work with Gatsby's data layer.
+
+ {` `}
+ Explore source & transformer plugins. Get introduced to
+ programmatic pages and how to write GraphQL queries. In this
+ part of the tutorial we'll build a bare-bones markdown blog.
+
+
+
+
+ )}
+ />
+
)
diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
index 580ea5f2edb1c..abb106d431d7f 100644
--- a/www/src/templates/template-blog-post.js
+++ b/www/src/templates/template-blog-post.js
@@ -5,6 +5,7 @@ import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
import ArrowBackIcon from "react-icons/lib/md/arrow-back"
import Img from "gatsby-image"
+import GlobalLayout from "../layouts"
import presets, { colors } from "../utils/presets"
import typography, { rhythm, scale, options } from "../utils/typography"
import Container from "../components/container"
@@ -50,7 +51,7 @@ class BlogPostTemplate extends React.Component {
)
return (
-
+
{/* Add long list of social meta tags */}
@@ -274,7 +275,7 @@ class BlogPostTemplate extends React.Component {
-
+
)
}
}
diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js
index 8117b49bb194b..a6300b616db41 100644
--- a/www/src/templates/template-docs-markdown.js
+++ b/www/src/templates/template-docs-markdown.js
@@ -1,35 +1,67 @@
import React from "react"
import Helmet from "react-helmet"
+import docsSidebar from "../pages/docs/doc-links.yaml"
+import tutorialSidebar from "../pages/docs/tutorial-links.yml"
+import GlobalLayout from "../layouts"
import MarkdownPageFooter from "../components/markdown-page-footer"
+import PageWithSidebar from "../components/page-with-sidebar"
+import DocSearchContent from "../components/docsearch-content"
import Container from "../components/container"
+import { rhythm } from "../utils/typography"
class DocsTemplate extends React.Component {
render() {
const page = this.props.data.markdownRemark
return (
-
-
- {page.frontmatter.title}
-
-
-
-
-
-
-
-
-