diff --git a/README.md b/README.md index d77e169f51fb2..eda08eda9970b 100644 --- a/README.md +++ b/README.md @@ -198,7 +198,7 @@ Websites built with Gatsby: ([source](https://github.com/HaoZeke/hbtuMun18)) * [The Audacious Project](https://audaciousproject.org/) * [upGizmo](https://www.upgizmo.com/) -* [The Bastion Bot](https://bastionbot.org/ 'The Bastion Bot') +* [The Bastion Bot](https://bastionbot.org/ "The Bastion Bot") * [Yuuniworks](https://www.yuuniworks.com/) ([source](https://github.com/junkboy0315/yuuni-web)) * [Chin Loong Tan - Blog/Portfolio](https://chinloongtan.com/) * [F1 Vision](https://f1vision.com/) diff --git a/docs/blog/2017-10-16-making-website-building-fun/index.md b/docs/blog/2017-10-16-making-website-building-fun/index.md index f3cb3f8662b80..d1a1ec45ead66 100644 --- a/docs/blog/2017-10-16-making-website-building-fun/index.md +++ b/docs/blog/2017-10-16-making-website-building-fun/index.md @@ -227,12 +227,12 @@ before we get to actually coding the frontend. For example, how does a single image typically get on a website? -1. A page is designed -2. Specific images are chosen -3. The images are resized (with ideally multiple thumbnails to fit different - devices) -4. And finally, the image(s) are included in the HTML/CSS/JS (or React - component) for the page. +1. A page is designed +2. Specific images are chosen +3. The images are resized (with ideally multiple thumbnails to fit different + devices) +4. And finally, the image(s) are included in the HTML/CSS/JS (or React + component) for the page. What makes gatsby-image really interesting is it's _seamlessly integrated into Gatsby's data layer_ which has native image processing capabilities. @@ -278,10 +278,10 @@ export const query = graphql` So instead of a long pipeline of tasks to setup optimized images for your site, the steps now are: -1. Install gatsby-image -2. Decide what size of image you need (125x125 in the example above) -3. Add your query and the gatsby-image component to your page -4. And… that's it! +1. Install gatsby-image +2. Decide what size of image you need (125x125 in the example above) +3. Add your query and the gatsby-image component to your page +4. And… that's it! Now playing with images is fun! Want to tweak your design? No problem, just change your query a bit and see how the page updates. By eliminating the diff --git a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md index 0d896f97378a5..89c5e3693affb 100644 --- a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md +++ b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md @@ -298,22 +298,22 @@ To let it render the content into html, you need to load i18n namespaces (using ```js // gatsby-ssr.js -import React from 'react' -import { Provider } from 'react-redux' -import { renderToString } from 'react-dom/server' -import i18n from './src/i18n' +import React from "react"; +import { Provider } from "react-redux"; +import { renderToString } from "react-dom/server"; +import i18n from "./src/i18n"; -import createStore from './src/state/createStore' +import createStore from "./src/state/createStore"; exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { - i18n.loadNamespaces(['common'], () => { - const store = createStore() + i18n.loadNamespaces(["common"], () => { + const store = createStore(); const ConnectedBody = () => ( {bodyComponent} - ) - replaceBodyHTMLString(renderToString()) - }) -} + ); + replaceBodyHTMLString(renderToString()); + }); +}; ``` ### Without redux @@ -323,17 +323,17 @@ exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { ```js // gatsby-ssr.js -import React from 'react' -import { renderToString } from 'react-dom/server' -import i18n from './src/i18n' +import React from "react"; +import { renderToString } from "react-dom/server"; +import i18n from "./src/i18n"; -import createStore from './src/state/createStore' +import createStore from "./src/state/createStore"; exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => { - i18n.loadNamespaces(['common'], () => { - replaceBodyHTMLString(bodyComponent) - }) -} + i18n.loadNamespaces(["common"], () => { + replaceBodyHTMLString(bodyComponent); + }); +}; ``` > `translate` hoc from react-i18next cause page / component not able to SSR. I make it works by import i18n & use i18n.t diff --git a/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md b/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md index d37b33d612dff..3787b0ad28c3f 100644 --- a/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md +++ b/docs/blog/2018-01-22-getting-started-gatsby-and-wordpress/index.md @@ -136,8 +136,8 @@ While this isn't a tutorial -- more a guided walkthrough of me familiarizing and ##Sidenotes -1. You [don't need to know GraphQL](https://github.com/gatsbyjs/gatsby/issues/1172#issuecomment-308634739) to get started with Gatsby. I didn't. It's been a good introduction. -2. Gatsby makes heavy use of [plugins](/docs/plugins/) — both official and community — for a lot of things, from one that implements [Google Analytics](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics), to one that adds [GitHub's accessibility error scanner](https://github.com/alampros/gatsby-plugin-accessibilityjs) to all pages. -3. Read through some of the source code. I particularly enjoyed reading through [the bootstrap process](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/index.js). (It's beautifully commented). -4. Gatsby.js is a static Progressive Web App (PWA) generator, but to be PWA friendly (at least according to the [Lighthouse PWA audit](https://developers.google.com/web/tools/lighthouse/)), look into two plugins: `gatsby-plugin-manifest` and `gatsby-plugin-offline`. -5. I did end up [deploying with Netlify](/docs/deploy-gatsby/#netlify), and I'm super happy with it. (A [previous post](/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/#solution-netlify--gatsby) discussed Netlify a bit more, if you're interested). +1. You [don't need to know GraphQL](https://github.com/gatsbyjs/gatsby/issues/1172#issuecomment-308634739) to get started with Gatsby. I didn't. It's been a good introduction. +2. Gatsby makes heavy use of [plugins](/docs/plugins/) — both official and community — for a lot of things, from one that implements [Google Analytics](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics), to one that adds [GitHub's accessibility error scanner](https://github.com/alampros/gatsby-plugin-accessibilityjs) to all pages. +3. Read through some of the source code. I particularly enjoyed reading through [the bootstrap process](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/index.js). (It's beautifully commented). +4. Gatsby.js is a static Progressive Web App (PWA) generator, but to be PWA friendly (at least according to the [Lighthouse PWA audit](https://developers.google.com/web/tools/lighthouse/)), look into two plugins: `gatsby-plugin-manifest` and `gatsby-plugin-offline`. +5. I did end up [deploying with Netlify](/docs/deploy-gatsby/#netlify), and I'm super happy with it. (A [previous post](/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/#solution-netlify--gatsby) discussed Netlify a bit more, if you're interested). diff --git a/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md b/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md index ff987ca3d83b8..c2f55fe92ca96 100644 --- a/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md +++ b/docs/blog/2018-03-07-why-we-created-the-plugin-library/index.md @@ -23,10 +23,10 @@ This map reflects how it took most people a lot of time browsing through the plu With the empathy map and the interviews as our guide, we learned that most people want to: -1. Find the best, most recent, and relevant plugin, library, or component for their site. -2. Learn how to build a plugin. -3. Preview plugin functionality before installation. -4. Share plugins with others. +1. Find the best, most recent, and relevant plugin, library, or component for their site. +2. Learn how to build a plugin. +3. Preview plugin functionality before installation. +4. Share plugins with others. ## Learning from other plugin libraries diff --git a/docs/blog/2018-03-29-migration-from-wordpress-to-gatsby/index.md b/docs/blog/2018-03-29-migration-from-wordpress-to-gatsby/index.md index 7aedea1c084a4..832c452e913c3 100644 --- a/docs/blog/2018-03-29-migration-from-wordpress-to-gatsby/index.md +++ b/docs/blog/2018-03-29-migration-from-wordpress-to-gatsby/index.md @@ -76,7 +76,7 @@ Gatsby also works great with images, which are usually a big hit to site's perfo I think Gatsby is great. I had a lot of fun using it so far and I've learned much in the process. It offers you freedom and flexibility. However, it is not as mature as some of the competitors. This is improving quickly as it is under rapid development. Still, I did encounter some bugs complicating my development. On the other hand, the community was really helpful and supportive. Some of the features, which I would consider standard were not yet available or sufficient such as tags and categories support, pagination or Open Graph metadata. I would also like to see AsciiDoc support instead of just plain Markdown. One of the biggest problems was probably the lack of visual themes. For a long time, there was not any official themes directory. In Feb 2018 [Gatsby Manor was launched](/blog/2018-02-09-announcing-gatsby-manor-themes-for-gatsbyjs/) and now it contains just SIX themes, which are all only ports of [HTML5 UP themes](https://html5up.net/). However, with the current development rate, I am sure more and more plugins will be available out of the box shortly. -## Results +## Results Overall I am really happy with Gatsby and the migration from WordPress. I no longer fear my WordPress will get compromised. Everything is now on GitHub and under version control. It's much more transparent. No longer need of database backups and rollbacks are now easy in case of something goes wrong. Not to mention the possibility of developing new features safely in branches and deploying and testing them separately from the 'production' environment. And no more fees for hosted WordPress. And writing in markdown is also more convenient for me as I don't focus on HTML or visuals when writing but rather on the content. diff --git a/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md b/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md index abf4632410b49..0b9958d8bb1b8 100644 --- a/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md +++ b/docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md @@ -4,15 +4,15 @@ author: Kyle Mathews date: "2018-04-06" --- -We're adopting an RFC ("request for comments") process for contributing ideas to Gatsby. +We're adopting an RFC ("request for comments") process for contributing ideas to Gatsby. Inspired by [React](https://github.com/reactjs/rfcs), [Yarn](https://github.com/yarnpkg/rfcs), [Ember](https://github.com/emberjs/rfcs), and [Rust](https://github.com/rust-lang/rfcs), the goal is to allow Gatsby core team members and community members to collaborate on the design of new features. It's also intended to provide a clear path for ideas to enter the project: -- Create an RFC document detailing your proposal. -- Submit a PR to the [RFC repository](https://github.com/gatsbyjs/rfcs). -- Incorporate feedback into the proposal. -- After discussion, the core team may or may not accept the RFC. -- If the RFC is accepted, the PR is merged. +* Create an RFC document detailing your proposal. +* Submit a PR to the [RFC repository](https://github.com/gatsbyjs/rfcs). +* Incorporate feedback into the proposal. +* After discussion, the core team may or may not accept the RFC. +* If the RFC is accepted, the PR is merged. RFCs are accepted when they are approved for implementation in Gatsby. A more thorough description of the process is available in the repository's [README](https://github.com/gatsbyjs/rfcs/blob/master/README.md). The exact details may be refined in the future. diff --git a/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md b/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md index e56beeb42d759..ccd597ba4ba5e 100644 --- a/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md +++ b/docs/blog/2018-04-10-how-to-handle-comments-in-gatsby-blogs/index.md @@ -3,7 +3,7 @@ title: How to handle comments in Gatsby blogs date: "2018-04-09" author: "Gatsby Central" canonicalLink: https://www.gatsbycentral.com/how-to-handle-comments-in-gatsby-blogs -publishedAt: "Gatsby Central" +publishedAt: "Gatsby Central" --- > tl;dr Hosted services like disqus are the easiest. Staticman is the best option, but requires some setup. diff --git a/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md b/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md index b0f5b8d26c20b..ebc4b12da03d7 100644 --- a/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md +++ b/docs/blog/2018-04-11-trying-out-gatsby-at-work-and-co/index.md @@ -19,9 +19,9 @@ Our project was to build a new website for [Whittle School & Studios](https://ww We had a blast building the site, and learned a lot about Gatsby in the process. This post will take you through the different parts of our journey: -- [Choosing a stack](#choosing-a-stack) -- [Creating a Gatsby workflow](#creating-a-gatsby-workflow) -- [Contributing to Gatsby](#contributing-to-gatsby) +* [Choosing a stack](#choosing-a-stack) +* [Creating a Gatsby workflow](#creating-a-gatsby-workflow) +* [Contributing to Gatsby](#contributing-to-gatsby) ## Choosing a stack @@ -37,7 +37,7 @@ As a content-heavy site, the project would need a CMS. Our choice here was [Cont We also knew that the site would eventually need to launch in both the US and China. This came with a bunch of unknowns on the China side of things: Could we rely on the same build system and CDN for all locales, or would China require a unique setup to account for server performance discrepancies and possible API restrictions? -We didn’t know, and we weren’t going to know for some time, because most of these decisions were going to be made by an external vendor. Not wanting to back ourselves into a corner, we decided to use a static site generator. No matter what devops we wound up with, we could bank on compiling static files and putting them *somewhere*. +We didn’t know, and we weren’t going to know for some time, because most of these decisions were going to be made by an external vendor. Not wanting to back ourselves into a corner, we decided to use a static site generator. No matter what devops we wound up with, we could bank on compiling static files and putting them _somewhere_. All of this begged the question: “What’s a good static site generator that works with Contentful?” @@ -51,7 +51,7 @@ Gatsby is built on React, something our team already knows and likes. We use Rea #### Prefetched pages ⚡️ -When we decided to use a static site generator, we assumed we’d be building a classic *static site*, with each route change requesting brand new HTML from the server. For a small, simple site, we thought this was good enough, but Gatsby gave us one better: pre-fetching, out of the box. This meant that our site would feel like a single page app while still benefiting from the flexibility and improved performance of a static site. +When we decided to use a static site generator, we assumed we’d be building a classic _static site_, with each route change requesting brand new HTML from the server. For a small, simple site, we thought this was good enough, but Gatsby gave us one better: pre-fetching, out of the box. This meant that our site would feel like a single page app while still benefiting from the flexibility and improved performance of a static site. #### Contentful support @@ -261,13 +261,13 @@ If you’re nervous about contributing to a library, do what I did: make a reall ### Reading the documentation -We developers often take pride in how far we’re able to get *without* reading the documentation — at least I know I do — but, as I came to make subsequent PRs to Gatsby, I found the [contributor guidelines](https://github.com/gatsbyjs/gatsby/blob/master/CONTRIBUTING.md) to be incredibly helpful. +We developers often take pride in how far we’re able to get _without_ reading the documentation — at least I know I do — but, as I came to make subsequent PRs to Gatsby, I found the [contributor guidelines](https://github.com/gatsbyjs/gatsby/blob/master/CONTRIBUTING.md) to be incredibly helpful. In particular, the documentation will show you how to use your local Gatsby clone and [gatsby-dev-cli](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-dev-cli) to: -- Watch for your local changes to Gatsby packages -- Recompile packages on-the-fly -- Copy these packages into your project’s `node_modules` folder to test as you go +* Watch for your local changes to Gatsby packages +* Recompile packages on-the-fly +* Copy these packages into your project’s `node_modules` folder to test as you go If you’ve ever used `yarn link` to modify a dependency locally, this provides a similar experience. @@ -287,9 +287,9 @@ Gatsby, however, uses a monorepo architecture, so pushing up a fork with a chang Our workaround was to create a new repo for the package in question and push the build directly to Github. Here’s how it would work if you were making an update to, say, `gatsby-source-contentful`: -- Go to your local fork of Gatsby, on the branch with your changes, and run `yarn watch` to compile a built version of your modified package. -- Copy that package to a new directory `cp -a packages/gatsby-source-contentful path-to-my-repo` -- Push the contents of this directory to Github and link it in your `package.json` as usual. +* Go to your local fork of Gatsby, on the branch with your changes, and run `yarn watch` to compile a built version of your modified package. +* Copy that package to a new directory `cp -a packages/gatsby-source-contentful path-to-my-repo` +* Push the contents of this directory to Github and link it in your `package.json` as usual. ## Following up diff --git a/docs/blog/2018-1-18-strapi-and-gatsby/index.md b/docs/blog/2018-1-18-strapi-and-gatsby/index.md index 288647d2ac330..4fecc288152c6 100644 --- a/docs/blog/2018-1-18-strapi-and-gatsby/index.md +++ b/docs/blog/2018-1-18-strapi-and-gatsby/index.md @@ -110,10 +110,10 @@ Strapi APIs are based on a data structure called Content Types (equivalent of mo Add some articles in the database. To do so, follow these instructions: -1. Visit the [articles list page](http://localhost:1337/admin/plugins/content-type-builder/models/article). -2. Click on `Add New Article`. -3. Insert values, link to an author and submit the form. -4. Create two other articles. +1. Visit the [articles list page](http://localhost:1337/admin/plugins/content-type-builder/models/article). +2. Click on `Add New Article`. +3. Insert values, link to an author and submit the form. +4. Create two other articles. ![Tutorial](strapi-content-manager.png) diff --git a/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md b/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md index 4e5c63398017a..95a447a4c0189 100644 --- a/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md +++ b/docs/blog/2018-1-25-building-a-site-with-react-and-contentful/index.md @@ -194,9 +194,7 @@ export default ({ data }) => { {trick.node.exampleOfTheCommandInAction && ( )} - {trick.node.exampleOfTheCommandInAction && ( -

{trick.node.exampleOfTheCommandInAction[0].description}

- )} + {trick.node.exampleOfTheCommandInAction &&

{trick.node.exampleOfTheCommandInAction[0].description}

} ))} diff --git a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md index 4a09eec802829..ddd2b1172feeb 100644 --- a/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md +++ b/docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md @@ -54,7 +54,12 @@ For example, I defined a `PostTemplate` which will be used to render pages for a import React from "react"; export default function PostTemplate({ - data: { markdownRemark: { frontmatter: { title, date }, html } }, + data: { + markdownRemark: { + frontmatter: { title, date }, + html, + }, + }, }) { return (
diff --git a/docs/blog/2018-2-6-choosing-a-back-end/index.md b/docs/blog/2018-2-6-choosing-a-back-end/index.md index 74d177369aeb7..12d39d269a10c 100644 --- a/docs/blog/2018-2-6-choosing-a-back-end/index.md +++ b/docs/blog/2018-2-6-choosing-a-back-end/index.md @@ -37,10 +37,10 @@ Now we need a system to manage and deliver our content in a nice API (instructed Firstly, though, why do we want a Headless CMS and a JAMstack for the project? There are a few reasons most people use them, and some that are down to personal preference: -1. **Easy setup!** -2. **No back-end code.** I’m a front-end dev and honestly don’t want to spend hours setting up some PHP that I won’t enjoy. Gimme the good stuff. -3. **No server needed.** Cloud CMSs mean that I don’t need to pay the hosting people to setup an SQL database. -4. **Easy to edit.** If I need to edit a site on the fly or have a client who needs to do the same, they don’t need to touch any code or run to their home workstation to fix a spelling error. They can access it anywhere. +1. **Easy setup!** +2. **No back-end code.** I’m a front-end dev and honestly don’t want to spend hours setting up some PHP that I won’t enjoy. Gimme the good stuff. +3. **No server needed.** Cloud CMSs mean that I don’t need to pay the hosting people to setup an SQL database. +4. **Easy to edit.** If I need to edit a site on the fly or have a client who needs to do the same, they don’t need to touch any code or run to their home workstation to fix a spelling error. They can access it anywhere. --- diff --git a/docs/blog/2018-2-7-jam-out-your-blog/index.md b/docs/blog/2018-2-7-jam-out-your-blog/index.md index 03b57ce1900d3..0b5d61e9e5817 100644 --- a/docs/blog/2018-2-7-jam-out-your-blog/index.md +++ b/docs/blog/2018-2-7-jam-out-your-blog/index.md @@ -83,12 +83,12 @@ So, a service that works on top of Github where I, or anyone with a Github accou #### Follow these steps: -1. Set up a repository for the website. -2. Share access to the repo with anyone on your team. -3. Log in via [Prose.io](http://prose.io/). -4. Select your website's repo from the Prose interface. -5. Done. You can edit existing posts, preview posts, and commit any changes directly within the interface. - set up a repository for the website +1. Set up a repository for the website. +2. Share access to the repo with anyone on your team. +3. Log in via [Prose.io](http://prose.io/). +4. Select your website's repo from the Prose interface. +5. Done. You can edit existing posts, preview posts, and commit any changes directly within the interface. + set up a repository for the website

via GIPHY

@@ -124,11 +124,11 @@ When it comes to continuous deployment and inexpensive hosting, using Netlify is With streamlining in mind, a workflow doesn’t get any leaner than working within the confines of Github and Netlify. Think about the magic: -1. Use Gatsby to create your website. -2. Set up a GitHub repository to track changes and version history. -3. Once ready, deploy your repository to Netlify. -4. Use Prose (which accesses your GitHub), to create, edit and commit posts. -5. Netlify sees the update to the repository and re-renders the website. +1. Use Gatsby to create your website. +2. Set up a GitHub repository to track changes and version history. +3. Once ready, deploy your repository to Netlify. +4. Use Prose (which accesses your GitHub), to create, edit and commit posts. +5. Netlify sees the update to the repository and re-renders the website. With this process in place, content creators do not need to understand Markdown, React, Git or Netlify. They can simply log into Prose and start writing. All the developer has to do is share the repository. @@ -140,8 +140,8 @@ _**It just works.**_ 🤙🏼 With all of that said, this process has a few caveats related to working within Prose that I must address: -1. If you follow a folder structure enclosing an index.md file for your posts, you will need to add the new folder within the URL of the post -2. Inserting an image adds extra markup which you will need to remove for an image to show up within your post. Prose will upload the image within the same directory as your index.md file. +1. If you follow a folder structure enclosing an index.md file for your posts, you will need to add the new folder within the URL of the post +2. Inserting an image adds extra markup which you will need to remove for an image to show up within your post. Prose will upload the image within the same directory as your index.md file. #### Default @@ -151,8 +151,8 @@ With all of that said, this process has a few caveats related to working within ![After image path change](after-post-title.png) -3. You must commit a file by hitting the save icon or else the file is not saved. Posts cannot be saved as drafts in Prose. So, you will have to build the functionality within your headmatter and query posts based upon a draft/published state (if you need it). -4. Whoever will be posting will need to manually add headmatter to each .md file. Be warned that there is no specific area to do so. But after it's added, a fourth icon appears in the right pane where you can then edit and add other post details. +3. You must commit a file by hitting the save icon or else the file is not saved. Posts cannot be saved as drafts in Prose. So, you will have to build the functionality within your headmatter and query posts based upon a draft/published state (if you need it). +4. Whoever will be posting will need to manually add headmatter to each .md file. Be warned that there is no specific area to do so. But after it's added, a fourth icon appears in the right pane where you can then edit and add other post details. I hope you try playing around with this workflow yourself with a Gatsby starter and see if this works for you. Gatsby provides incredible tools that “just work” without sacrificing an exciting development environment. If you pair it with Netlify and Prose, you will cut overhead and manage content directly from a GitHub repository. Let this approach bring some order to the chaos. diff --git a/docs/blog/gatsby-v1.md b/docs/blog/gatsby-v1.md index 2e3f9783f9986..874facbc6fa8b 100644 --- a/docs/blog/gatsby-v1.md +++ b/docs/blog/gatsby-v1.md @@ -71,11 +71,11 @@ static React sites are useful. But in many conversations among community members building Gatsby sites, two more questions kept coming up. -1. How could we _query_ data from _anywhere_ and have that data show up in our - pages **without** any custom scripting? -2. How should a website framework work for an _internet dominated by smartphones - on unreliable networks_ — an internet vastly different and larger than the - one frameworks were designed for a decade ago? +1. How could we _query_ data from _anywhere_ and have that data show up in our + pages **without** any custom scripting? +2. How should a website framework work for an _internet dominated by smartphones + on unreliable networks_ — an internet vastly different and larger than the + one frameworks were designed for a decade ago? ## Plugin system diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md index 8f89f26ccd90e..f6a69d2fc5f61 100644 --- a/docs/docs/add-custom-webpack-config.md +++ b/docs/docs/add-custom-webpack-config.md @@ -19,14 +19,14 @@ you to modify the default webpack config using Gatsby does multiple webpack builds with somewhat different configuration. We call each build type a "stage". The following stages exist: -1. develop: when running the `gatsby develop` command. Has configuration for hot - reloading and CSS injection into page -2. develop-html: same as develop but without react-hmre in the babel config for - rendering the HTML component. -3. build-css: production build of CSS -4. build-html: production build static HTML pages -5. build-javascript: production JavaScript build. Creates route bundles as well - as a `commons` and `app bundle`. +1. develop: when running the `gatsby develop` command. Has configuration for hot + reloading and CSS injection into page +2. develop-html: same as develop but without react-hmre in the babel config for + rendering the HTML component. +3. build-css: production build of CSS +4. build-html: production build static HTML pages +5. build-javascript: production JavaScript build. Creates route bundles as well + as a `commons` and `app bundle`. Check [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index d343174c5ebf6..d2405fdd8b0c0 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -26,7 +26,11 @@ The first step will be to create the page which will display your posts, in `src import React from "react"; import PostLink from "../components/post-link"; -const IndexPage = ({ data: { allMarkdownRemark: { edges } } }) => { +const IndexPage = ({ + data: { + allMarkdownRemark: { edges }, + }, +}) => { const Posts = edges .filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria .map(edge => ); @@ -45,7 +49,11 @@ Second, you need to provide the data to your component with a GraphQL query. Let import React from "react"; import PostLink from "../components/post-link"; -const IndexPage = ({ data: { allMarkdownRemark: { edges } } }) => { +const IndexPage = ({ + data: { + allMarkdownRemark: { edges }, + }, +}) => { const Posts = edges .filter(edge => !!edge.node.frontmatter.date) // You can filter your posts based on some criteria .map(edge => ); diff --git a/docs/docs/adding-markdown-pages.md b/docs/docs/adding-markdown-pages.md index 46a60a6a59670..964523038e493 100644 --- a/docs/docs/adding-markdown-pages.md +++ b/docs/docs/adding-markdown-pages.md @@ -7,10 +7,10 @@ You add plugins to read and understand folders with markdown files and from them Here's the steps Gatsby follows for making this happen. -1. Read files into Gatsby from the filesystem -2. Transform markdown to HTML and frontmatter to data -3. Create a page component for the markdown files -4. Programmatically create pages using Gatsby's node.js `createPage` API +1. Read files into Gatsby from the filesystem +2. Transform markdown to HTML and frontmatter to data +3. Create a page component for the markdown files +4. Programmatically create pages using Gatsby's node.js `createPage` API ### Read files into Gatsby from the filesystem - `gatsby-source-filesystem` @@ -115,9 +115,9 @@ export const pageQuery = graphql` Two things are important in the file above. -1. A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query's result. - **Note: To learn more about GraphQL, consider this [excellent resource](https://www.howtographql.com/)** -2. The result of the query is injected by Gatsby into the `Template` component as `data`. `markdownRemark` is the property that we find has all the details of the Markdown file. We can use that to construct a template for our blogpost view. Since it's a React component, you could style it with any of the recommended styling systems in Gatsby. +1. A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query's result. + **Note: To learn more about GraphQL, consider this [excellent resource](https://www.howtographql.com/)** +2. The result of the query is injected by Gatsby into the `Template` component as `data`. `markdownRemark` is the property that we find has all the details of the Markdown file. We can use that to construct a template for our blogpost view. Since it's a React component, you could style it with any of the recommended styling systems in Gatsby. ### Create static pages using Gatsby's Node API. diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md index 2b54af4d5da04..f1ec3a30872ad 100644 --- a/docs/docs/adding-tags-and-categories-to-blog-posts.md +++ b/docs/docs/adding-tags-and-categories-to-blog-posts.md @@ -8,12 +8,12 @@ To add tags to your blog posts, you will first want to have your site set up to The process will essentially look like this: -1. Add tags to your `markdown` files -2. Write a query to get all tags for your posts -3. Make a tags page template (for `/tags/{tag}`) -4. Modify `gatsby-node.js` to render pages using that template -5. Make a tags index page (`/tags`) that renders a list of all tags -6. _(optional)_ Render tags inline with your blog posts +1. Add tags to your `markdown` files +2. Write a query to get all tags for your posts +3. Make a tags page template (for `/tags/{tag}`) +4. Modify `gatsby-node.js` to render pages using that template +5. Make a tags index page (`/tags`) that renders a list of all tags +6. _(optional)_ Render tags inline with your blog posts ## Add tags to your `markdown` files @@ -244,7 +244,12 @@ import Helmet from "react-helmet"; import Link from "gatsby-link"; const TagsPage = ({ - data: { allMarkdownRemark: { group }, site: { siteMetadata: { title } } }, + data: { + allMarkdownRemark: { group }, + site: { + siteMetadata: { title }, + }, + }, }) => (
diff --git a/docs/docs/api-proxy.md b/docs/docs/api-proxy.md index 195754561e21b..d3376bce848bc 100644 --- a/docs/docs/api-proxy.md +++ b/docs/docs/api-proxy.md @@ -14,7 +14,7 @@ module.exports = { prefix: "/api", url: "http://dev-mysite.com", }, -} +}; ``` This way, when you `fetch('/api/todos')` in development, the development server @@ -31,7 +31,7 @@ Gatsby exposes the [Express.js](https://expressjs.com/) develop server to your s can add Express middleware as needed. ```javascript -var proxy = require("http-proxy-middleware") +var proxy = require("http-proxy-middleware"); module.exports = { developMiddleware: app => { @@ -43,9 +43,9 @@ module.exports = { "/.netlify/functions/": "", }, }) - ) + ); }, -} +}; ``` Keep in mind that middleware only has effect in development (with gatsby develop). diff --git a/docs/docs/api-specification.md b/docs/docs/api-specification.md index a11c6b2da4d26..aaa7427d92c48 100644 --- a/docs/docs/api-specification.md +++ b/docs/docs/api-specification.md @@ -27,10 +27,10 @@ Plugins can extend Gatsby in many ways: A single plugin can use multiple APIs to accomplish its purpose. E.g. the plugin for the css-in-js library [Glamor](/packages/gatsby-plugin-glamor/): -1. modifies the webpack config to add its plugin -2. adds a Babel plugin to replace React's default createElement -3. modifies server rendering to extract out the critical CSS for each rendered - page and inline the CSS in the `` of that HTML page. +1. modifies the webpack config to add its plugin +2. adds a Babel plugin to replace React's default createElement +3. modifies server rendering to extract out the critical CSS for each rendered + page and inline the CSS in the `` of that HTML page. Plugins can also depend on other plugins. [The Sharp plugin](/packages/gatsby-plugin-sharp/) exposes a number of high-level APIs for diff --git a/docs/docs/debugging-html-builds.md b/docs/docs/debugging-html-builds.md index 20eb5c6fc1483..5eb20663609c1 100644 --- a/docs/docs/debugging-html-builds.md +++ b/docs/docs/debugging-html-builds.md @@ -4,22 +4,22 @@ title: Debugging HTML Builds Errors while building static HTML files generally happen for two reasons. -1. Some of your code references "browser globals" like window or document. If - this is your problem you should see an error above like "window is not - defined". To fix this, find the offending code and either a) check before - calling the code if window is defined so the code doesn't run while gatsby is - building (see code sample below) or b) if the code is in the render function - of a React.js component, move that code into "componentDidMount" which - ensures the code doesn't run unless it's in the browser. - -2. Check that each of your JS files listed in your `pages` directory (and any - sub-directories) are exporting either a React component or string. Gatsby - treats any JS file listed under the pages dir as a page component, so it must - have a default export that's a component or string. - -3. Some other reason :-) #1 is the most common reason building static files - fail. If it's another reason, you have to be a bit more creative in figuring - out the problem. +1. Some of your code references "browser globals" like window or document. If + this is your problem you should see an error above like "window is not + defined". To fix this, find the offending code and either a) check before + calling the code if window is defined so the code doesn't run while gatsby is + building (see code sample below) or b) if the code is in the render function + of a React.js component, move that code into "componentDidMount" which + ensures the code doesn't run unless it's in the browser. + +2. Check that each of your JS files listed in your `pages` directory (and any + sub-directories) are exporting either a React component or string. Gatsby + treats any JS file listed under the pages dir as a page component, so it must + have a default export that's a component or string. + +3. Some other reason :-) #1 is the most common reason building static files + fail. If it's another reason, you have to be a bit more creative in figuring + out the problem. ## How to check if `window` is defined diff --git a/docs/docs/deploy-gatsby.md b/docs/docs/deploy-gatsby.md index 5f2d06b381469..6531b0fbcd8c8 100644 --- a/docs/docs/deploy-gatsby.md +++ b/docs/docs/deploy-gatsby.md @@ -260,19 +260,19 @@ Finally, add a `static.json` file in the root of your project to define the dire In order to deploy your Gatsby project using [Now](https://zeit.co/now), you can do the following: -1. Install the Now CLI +1. Install the Now CLI `npm install -g now` -2. Install a node server package (such as `serve`, or `http-server`) +2. Install a node server package (such as `serve`, or `http-server`) `npm install --save serve` -3. Add a `start` script to your `package.json` file, this is what Now will use to run your application: +3. Add a `start` script to your `package.json` file, this is what Now will use to run your application: `"start": "serve public/"` -4. Run `now` at the root of your Gatsby project, this will upload your project, run the `build` script, and then your `start` script. +4. Run `now` at the root of your Gatsby project, this will upload your project, run the `build` script, and then your `start` script. ## Debugging tips diff --git a/docs/docs/environment-variables.md b/docs/docs/environment-variables.md index 8e1068ba98de0..01c08189d726e 100644 --- a/docs/docs/environment-variables.md +++ b/docs/docs/environment-variables.md @@ -24,8 +24,8 @@ NPM package [dotenv](https://www.npmjs.com/package/dotenv). Install the package require it in your `gatsby-config.js` or `gatsby-node.js` the following way on top of your file: ```javascript -require('dotenv').config({ - path: `.env.${process.env.NODE_ENV}` +require("dotenv").config({ + path: `.env.${process.env.NODE_ENV}`, }); ``` @@ -74,9 +74,9 @@ Reserved environment variables: ## Additional Environments (Staging, Test, etc) -`NODE_ENV` is a reserved environment variable in Gatsby as it is needed by the build system to make key optimizations when compiling React and other modules. For this reason it is advised to make use of a secondary environment variable for additional environment support. +`NODE_ENV` is a reserved environment variable in Gatsby as it is needed by the build system to make key optimizations when compiling React and other modules. For this reason it is advised to make use of a secondary environment variable for additional environment support. -For instance. If you would like to add a staging environment with a custom Google Analytics Tracking ID. You can add `.env.staging` at the root of your project with the following modification to your `gatsby-config.js` +For instance. If you would like to add a staging environment with a custom Google Analytics Tracking ID. You can add `.env.staging` at the root of your project with the following modification to your `gatsby-config.js` ### Example @@ -91,16 +91,16 @@ GATSBY_GA_TRACKING_ID="UA-1234567890" let activeEnv = process.env.ACTIVE_ENV; if (!activeEnv) { - activeEnv = 'development'; + activeEnv = "development"; } -require('dotenv').config({ - path: `.env.${activeEnv}` +require("dotenv").config({ + path: `.env.${activeEnv}`, }); module.exports = { siteMetadata: { - title: 'Gatsby Default Starter' + title: "Gatsby Default Starter", }, plugins: [ { @@ -112,14 +112,14 @@ module.exports = { // Setting this parameter is optional anonymize: true, // Setting this parameter is also optional - respectDNT: true - } - } - ] + respectDNT: true, + }, + }, + ], }; ``` -Local testing of staging is as simple as +Local testing of staging is as simple as ``` ACTIVE_ENV=staging gatsby develop diff --git a/docs/docs/gatsby-config.md b/docs/docs/gatsby-config.md index 353a922f84409..f49ed50f84a07 100644 --- a/docs/docs/gatsby-config.md +++ b/docs/docs/gatsby-config.md @@ -10,13 +10,13 @@ _Note: There are many sample configs which may be helpful to reference in the di Options available to set within `gatsby-config.js` include: -1. siteMetadata (object) -2. plugins (array) -3. pathPrefix (string) -4. polyfill (boolean) -5. mapping (object) -6. proxy (object) -7. developMiddleware (function) +1. siteMetadata (object) +2. plugins (array) +3. pathPrefix (string) +4. polyfill (boolean) +5. mapping (object) +6. proxy (object) +7. developMiddleware (function) ## siteMetadata @@ -29,7 +29,7 @@ module.exports = { siteUrl: `https://www.gatsbyjs.org`, description: `Blazing-fast static site generator for React`, }, -} +}; ``` This way you can store it in one place, and pull it whenever you need it. If you ever need to update the info, you only have to change it here. @@ -52,7 +52,7 @@ module.exports = { }, }, ], -} +}; ``` See more about [Plugins](/docs/plugins/) for more on utilizing plugins, and to see available official and community plugins. @@ -65,7 +65,7 @@ It's common for sites to be hosted somewhere other than the root of their domain module.exports = { // Note: it must *not* have a trailing slash. pathPrefix: `/blog`, -} +}; ``` See more about [Adding a Path Prefix](/docs/path-prefix/). @@ -79,7 +79,7 @@ If you'd like to provide your own Promise polyfill, you can set `polyfill` to fa ```javascript module.exports = { polyfill: false, -} +}; ``` See more about [Browser Support](/docs/browser-support/#polyfills) in Gatsby. @@ -232,7 +232,7 @@ module.exports = { prefix: "/api", url: "http://examplesite.com/api/", }, -} +}; ``` See more about [Proxying API Requests in Develop](/docs/api-proxy/). diff --git a/docs/docs/gatsby-on-linux.md b/docs/docs/gatsby-on-linux.md index 73e80cbe3c54d..1b379c98d24f6 100644 --- a/docs/docs/gatsby-on-linux.md +++ b/docs/docs/gatsby-on-linux.md @@ -1,6 +1,7 @@ --- title: Gatsby on Linux --- + # Linux TODO @@ -23,7 +24,7 @@ sudo apt update sudo apt -y upgrade ``` ->Only use `-y` if you're happy to upgrade to the latest versions of the software. +> Only use `-y` if you're happy to upgrade to the latest versions of the software. **Build tools** @@ -62,6 +63,7 @@ sudo apt update && sudo apt -y upgrade && sudo apt install build-essential && su ``` + [windows store]: https://www.microsoft.com/en-us/store/p/ubuntu/9nblggh4msv6 [n]: https://github.com/tj/n [n-install]: https://github.com/mklement0/n-install diff --git a/docs/docs/gatsby-starters.md b/docs/docs/gatsby-starters.md index 6ae6e42d79de2..8b0a80623406c 100644 --- a/docs/docs/gatsby-starters.md +++ b/docs/docs/gatsby-starters.md @@ -634,7 +634,7 @@ Community: [(demo)](https://gatsby-starter-procyon.netlify.com/) Features: - + * [Gatsby](https://www.gatsbyjs.org/) + [ReactJS](https://reactjs.org/) (server side rendering) * [GraphCMS](https://graphcms.com/) Headless CMS * [DraftJS](https://draftjs.org/) (in-place) [Medium](https://medium.com)-like Editing @@ -648,7 +648,7 @@ Community: * Automatic rebuilds with GraphCMS and Netlify web hooks * PWA (Progressive Web App) * [Google Fonts](https://fonts.google.com/) - + * [gatsby-starter-2column-portfolio](https://github.com/praagyajoshi/gatsby-starter-2column-portfolio) [(demo)](http://2column-portfolio.surge.sh/) diff --git a/docs/docs/gatsby-style-guide.md b/docs/docs/gatsby-style-guide.md index 5a58cb1947c04..f731fbc3c9e64 100644 --- a/docs/docs/gatsby-style-guide.md +++ b/docs/docs/gatsby-style-guide.md @@ -47,33 +47,33 @@ Before you begin writing, make sure to read the article style guide below. You can create a PR with your draft article (or edits on an existing article) in two ways: -1. The easiest method is to use the GitHub interface. Read - [these instructions](https://help.github.com/articles/editing-files-in-another-user-s-repository/) - on how to create a draft article or propose edits in the GitHub interface. -2. Go into the - ["docs" folder](https://github.com/gatsbyjs/gatsby/tree/master/docs/docs) and - find the article stub you'd like to write or edit. All stubs will be in an - index.md file. -3. Click the "Edit this file" pencil icon and make your changes to the file in - GitHub-flavored Markdown. -4. Scroll to the bottom of the screen and add a commit message explaining your - changes. Then select the radio button option for "Create a new branch for - this commit and start a pull request" and click "Propose file changes" -5. On the next screen, you can add any other details about your PR, then click - "Create pull request". +1. The easiest method is to use the GitHub interface. Read + [these instructions](https://help.github.com/articles/editing-files-in-another-user-s-repository/) + on how to create a draft article or propose edits in the GitHub interface. +2. Go into the + ["docs" folder](https://github.com/gatsbyjs/gatsby/tree/master/docs/docs) and + find the article stub you'd like to write or edit. All stubs will be in an + index.md file. +3. Click the "Edit this file" pencil icon and make your changes to the file in + GitHub-flavored Markdown. +4. Scroll to the bottom of the screen and add a commit message explaining your + changes. Then select the radio button option for "Create a new branch for + this commit and start a pull request" and click "Propose file changes" +5. On the next screen, you can add any other details about your PR, then click + "Create pull request". If you prefer to write locally before submitting a PR, then follow these steps: -1. Fork this repository -2. Copy your fork to your local machine. -3. Add a remote upstream so git knows where the official Gatsby - repository is located by running the command `git remote add upstream` - _incomplete code here_ -4. Create a new branch for your work with the command `git checkout -b NEW-BRANCH-NAME`. Try to name your branch in a way that describes your - article topic, like `fix/ArticleHTMLElements` -5. Write your article, commit your changes locally, and push your new branch to - GitHub with the command `git push origin NEW-BRANCH-NAME` -6. Go to your repository on GitHub and open a PR +1. Fork this repository +2. Copy your fork to your local machine. +3. Add a remote upstream so git knows where the official Gatsby + repository is located by running the command `git remote add upstream` + _incomplete code here_ +4. Create a new branch for your work with the command `git checkout -b NEW-BRANCH-NAME`. Try to name your branch in a way that describes your + article topic, like `fix/ArticleHTMLElements` +5. Write your article, commit your changes locally, and push your new branch to + GitHub with the command `git push origin NEW-BRANCH-NAME` +6. Go to your repository on GitHub and open a PR Make sure to maintain your local fork going forward so it stays up-to-date with the Gatsby guides repository. The next time you want to contribute, checkout @@ -86,10 +86,10 @@ repository. Finally, if you want to run a version of the Guides repository locally, follow these steps: -1. Ensure you have the yarn package manager installed `npm install -g yarn` -2. Install the Gatsby cli `yarn add --global gatsby-cli` -3. Follow the steps above to fork and clone the Gatsby repo. -4. Enter the `www` directory where gatsbyjs.org is and install its dependencies `yarn install` then run `gatsby develop`. +1. Ensure you have the yarn package manager installed `npm install -g yarn` +2. Install the Gatsby cli `yarn add --global gatsby-cli` +3. Follow the steps above to fork and clone the Gatsby repo. +4. Enter the `www` directory where gatsbyjs.org is and install its dependencies `yarn install` then run `gatsby develop`. ## Article style guide diff --git a/docs/docs/graphql-reference.md b/docs/docs/graphql-reference.md index 846e92a52b5f8..ee5d61bf3a470 100644 --- a/docs/docs/graphql-reference.md +++ b/docs/docs/graphql-reference.md @@ -76,7 +76,6 @@ To add variables to page component queries, pass these in the `context` object [ - ## Where next? Try [running your own queries](), check out the rest of [the docs](/docs/) or run through [the tutorial](/tutorial/). diff --git a/docs/docs/how-to-file-an-issue.md b/docs/docs/how-to-file-an-issue.md index 95be599036f12..c70f8cc644bf4 100644 --- a/docs/docs/how-to-file-an-issue.md +++ b/docs/docs/how-to-file-an-issue.md @@ -17,8 +17,8 @@ Please do not use the issue tracker for personal support requests. [Stack Overfl If an issue is affecting you, start at the top of this list and complete as many tasks on the list as you can: -1. If there is an issue, +1 the issue to indicate that it's affecting you -2. If there is an issue and you can add more detail, write a comment describing how the bug is affecting OR if you can, write up a work-around for the bug -3. If there _is not_ an issue, write the most complete description of what's happening, preferably with link to a Gatsby site that reproduces the problem -4. Offer to help fix the bug (and it is totally expected that you ask for help; open-source maintainers want to help contributors) -5. Deliver a well-crafted, tested PR +1. If there is an issue, +1 the issue to indicate that it's affecting you +2. If there is an issue and you can add more detail, write a comment describing how the bug is affecting OR if you can, write up a work-around for the bug +3. If there _is not_ an issue, write the most complete description of what's happening, preferably with link to a Gatsby site that reproduces the problem +4. Offer to help fix the bug (and it is totally expected that you ask for help; open-source maintainers want to help contributors) +5. Deliver a well-crafted, tested PR diff --git a/docs/tutorial/index.md b/docs/tutorial/index.md index 42089b74c31a8..ced68b9f3911c 100644 --- a/docs/tutorial/index.md +++ b/docs/tutorial/index.md @@ -8,16 +8,16 @@ Note: If you prefer a quick start rather than step-by-step tutorial, see the [ge This tutorial is for _everyone_! You do not need to be a programmer or React.js expert. We'll walk you through things. -0. [Programming basics](/tutorial/part-zero/): If you are new to programming, go here for an introduction to some basics like terminal, code editors, and browser consoles. -1. [Introduction to Gatsby basics](/tutorial/part-one/): Starting new projects, developing, and deploying sites. -2. [Introduction to using CSS in Gatsby](/tutorial/part-two/): Explore libraries like Typography.js and CSS Modules. -3. [Building nested layouts in Gatsby](/tutorial/part-three/): Layouts are sections of your site that are reused across multiple pages like headers and footers. +0. [Programming basics](/tutorial/part-zero/): If you are new to programming, go here for an introduction to some basics like terminal, code editors, and browser consoles. +1. [Introduction to Gatsby basics](/tutorial/part-one/): Starting new projects, developing, and deploying sites. +1. [Introduction to using CSS in Gatsby](/tutorial/part-two/): Explore libraries like Typography.js and CSS Modules. +1. [Building nested layouts in Gatsby](/tutorial/part-three/): Layouts are sections of your site that are reused across multiple pages like headers and footers. ## Advanced tutorials In these advanced tutorials, you'll learn how to pull data from almost anywhere into your Gatsby site with GraphQL. -4. [Querying for data in a blog](/tutorial/part-four/): Create a blog and use a GraphQL query to pull your site title into the blog header. -5. [Source plugins and rendering queried data](/tutorial/part-five/): Use a source plugin to pull Markdown blogposts into your site and create an index page with a list of blogposts. -6. [Transformer plugins](/tutorial/part-six/): Use a transformer plugin to transform your Markdown blogposts into a form the blog can render. -7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blogposts. +4. [Querying for data in a blog](/tutorial/part-four/): Create a blog and use a GraphQL query to pull your site title into the blog header. +5. [Source plugins and rendering queried data](/tutorial/part-five/): Use a source plugin to pull Markdown blogposts into your site and create an index page with a list of blogposts. +6. [Transformer plugins](/tutorial/part-six/): Use a transformer plugin to transform your Markdown blogposts into a form the blog can render. +7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blogposts. diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index 5fe0c35b2575a..28edda2b67d4b 100644 --- a/docs/tutorial/part-one/index.md +++ b/docs/tutorial/part-one/index.md @@ -97,10 +97,10 @@ should change within a second (tip: you will always need to save changes before Try some other tricks, like the ones below: -1. Gatsby lets you add "inline styles" via a JavaScript style "prop" (we'll - learn about other styling options later). +1. Gatsby lets you add "inline styles" via a JavaScript style "prop" (we'll + learn about other styling options later). - Try replacing your page component with this: + Try replacing your page component with this: ```jsx import React from "react"; @@ -110,7 +110,7 @@ export default () =>
Hello Gatsby!
; Change the color to "pink". Then to "tomato". -2. Add some paragraph text. +2. Add some paragraph text. ```jsx{5-6} import React from "react"; @@ -122,7 +122,7 @@ export default () =>
``` -3. Add an image (in this case, a random one from Unsplash) +3. Add an image (in this case, a random one from Unsplash) ```jsx{7} import React from "react"; diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 0fb017b8e2462..93745a06918b8 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -22,8 +22,8 @@ Let's get started. Creating new pages has two steps: -1. Generate the "path" or "slug" for the page. -2. Create the page. +1. Generate the "path" or "slug" for the page. +2. Create the page. To create our Markdown pages, we'll learn to use two Gatsby APIs [`onCreateNode`](/docs/node-apis/#onCreateNode) and diff --git a/examples/README.md b/examples/README.md index 377a9e5a4eadc..4eb8ebb6efb2a 100644 --- a/examples/README.md +++ b/examples/README.md @@ -9,9 +9,9 @@ Complex/complete websites are for studying how to build more complex websites. ## Running an example site -1. Enter one of the sites (e.g. `cd gatsbygram`) -2. Install the dependencies for the site `npm install` -3. Run the Gatsby development server `gatsby develop` +1. Enter one of the sites (e.g. `cd gatsbygram`) +2. Install the dependencies for the site `npm install` +3. Run the Gatsby development server `gatsby develop` ## Checklist for building an example website diff --git a/examples/simple-auth/gatsby-config.js b/examples/simple-auth/gatsby-config.js index 656c45404a005..54d6d25844513 100644 --- a/examples/simple-auth/gatsby-config.js +++ b/examples/simple-auth/gatsby-config.js @@ -1,6 +1,6 @@ module.exports = { siteMetadata: { - title: 'Gatsby Demo Simple Authentication', + title: `Gatsby Demo Simple Authentication`, }, - plugins: ['gatsby-plugin-react-helmet'], -}; + plugins: [`gatsby-plugin-react-helmet`], +} diff --git a/examples/simple-auth/gatsby-node.js b/examples/simple-auth/gatsby-node.js index bdd8a122eb90a..36d1782db276b 100644 --- a/examples/simple-auth/gatsby-node.js +++ b/examples/simple-auth/gatsby-node.js @@ -5,14 +5,14 @@ */ exports.onCreatePage = async ({ page, boundActionCreators }) => { - const { createPage } = boundActionCreators; + const { createPage } = boundActionCreators // page.matchPath is a special key that's used for matching pages // only on the client. if (page.path.match(/^\/app/)) { - page.matchPath = '/app/:path'; + page.matchPath = `/app/:path` // Update the page. - createPage(page); + createPage(page) } -}; +} diff --git a/examples/using-contentful/src/templates/category.js b/examples/using-contentful/src/templates/category.js index b7e89ddf54c4c..0598a4cab23c9 100644 --- a/examples/using-contentful/src/templates/category.js +++ b/examples/using-contentful/src/templates/category.js @@ -12,7 +12,11 @@ const propTypes = { class CategoryTemplate extends React.Component { render() { const category = this.props.data.contentfulCategory - const { title: { title }, product, icon } = category + const { + title: { title }, + product, + icon, + } = category const iconImg = icon.resolutions return (
diff --git a/examples/using-react-native-web/README.md b/examples/using-react-native-web/README.md index 17a04c9f4a37c..37be72a12efb4 100644 --- a/examples/using-react-native-web/README.md +++ b/examples/using-react-native-web/README.md @@ -1,6 +1,5 @@ # using-react-native-web - The example shows how to use [gatsby-plugin-react-native-web](https://github.com/slorber/gatsby-plugin-react-native-web) diff --git a/examples/using-react-native-web/gatsby-config.js b/examples/using-react-native-web/gatsby-config.js index 18f3ff9e7bfd8..29f9aaf0b4b19 100644 --- a/examples/using-react-native-web/gatsby-config.js +++ b/examples/using-react-native-web/gatsby-config.js @@ -12,4 +12,4 @@ module.exports = { }, }, ], -}; +} diff --git a/examples/using-react-native-web/src/pages/index.js b/examples/using-react-native-web/src/pages/index.js index 1f3d97270abc7..59b278f9cae85 100644 --- a/examples/using-react-native-web/src/pages/index.js +++ b/examples/using-react-native-web/src/pages/index.js @@ -1,5 +1,12 @@ -import React from 'react' -import { StyleSheet, View, Text, Switch, Button, ActivityIndicator } from 'react-native' +import React from "react" +import { + StyleSheet, + View, + Text, + Switch, + Button, + ActivityIndicator, +} from "react-native" const styles = StyleSheet.create({ container: { @@ -7,29 +14,25 @@ const styles = StyleSheet.create({ }, }) - -const Container = (props) => ( - +const Container = props => ( + ) - const IndexPage = () => ( - Hi people + Hi people -