Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: gatsbyjs/gatsby
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: [email protected]
Choose a base ref
...
head repository: gatsbyjs/gatsby
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: [email protected]
Choose a head ref
  • 6 commits
  • 70 files changed
  • 5 contributors

Commits on Jun 18, 2019

  1. fix(gatsby-transformer-react-docgen): always create description nodes (

    …#14876)
    
    * fix: always create description nodes
    
    * Update on-node-create.js
    
    * fix tests
    jquense authored and DSchau committed Jun 18, 2019
    Copy the full SHA
    48a9e10 View commit details
  2. docs(www): 25 Workflows - Adding CSS and/or Sass (#14779)

    * chore: cleanup readme for sass plugin
    
    * fix: missing guidelist components
    
    * fix: consistency between similar docs, headings, and adding beginnings of sass guide
    
    * docs: adding to sass guide
    
    * Update docs/docs/sass.md
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    
    * Update packages/gatsby-plugin-sass/README.md
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    
    * Apply suggestions from code review
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    gillkyle and Marcy Sutton authored Jun 18, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    5c9215c View commit details
  3. docs(blog): add case study blog post for The Couch / Prima (#14871)

    * Add The Couch/Prima blog post
    
    * Run format script to fix Prettier errors
    
    * Replace inner '.' in image file names with '-'
    
    * Update docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/index.md
    
    Push publish date by two days
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    ooloth and Marcy Sutton committed Jun 18, 2019
    Copy the full SHA
    decdd8e View commit details

Commits on Jun 19, 2019

  1. docs(www): 25 Workflows - Embedding components in Markdown with MDX (#…

    …14543)
    
    * chore: updates to docs to improve examples and provide more detailed explanations
    
    * fix: simple grammatcial changes
    
    * fix: PR review suggestions
    
    * fix: correct code block titles and update example inline jsx
    
    * Amberleys PR comments
    
    * feat: add mdx as a title to code blocks
    
    * add link to glossary for components to help disambiguate
    
    * Update docs/docs/mdx/index.md
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    
    * Update docs/docs/mdx/index.md
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    
    * Update www/src/data/sidebars/doc-links.yaml
    
    Co-Authored-By: Marcy Sutton <[email protected]>
    
    * local merge conflicts + github suggestions = confusion
    gillkyle authored and Marcy Sutton committed Jun 19, 2019
    Copy the full SHA
    df94c22 View commit details
  2. fix(*): fix gatsby-cli dep in source-filesystem & plugin-sharp (#14881)

    Bring back progressbar functionality in ink and npm fixes.
    wardpeet authored Jun 19, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    2594623 View commit details
  3. Copy the full SHA
    8457e70 View commit details
Showing with 990 additions and 266 deletions.
  1. +73 −0 docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/index.md
  2. BIN docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/prima-co.png
  3. BIN docs/blog/2019-06-19-how-the-couch-builds-websites-in-half-the-time-with-gatsby/thecouch-nyc.png
  4. +2 −2 docs/docs/adding-markdown-pages.md
  5. +1 −1 docs/docs/css-in-js.md
  6. +1 −1 docs/docs/css-libraries-and-frameworks.md
  7. +9 −10 docs/docs/mdx/getting-started.md
  8. +8 −9 docs/docs/mdx/index.md
  9. +2 −2 docs/docs/mdx/programmatically-creating-pages.md
  10. +129 −32 docs/docs/mdx/writing-pages.md
  11. +10 −8 docs/docs/post-css.md
  12. +57 −0 docs/docs/sass.md
  13. +2 −0 docs/docs/schema-customization.md
  14. +6 −6 docs/docs/tailwind-css.md
  15. +3 −3 docs/tutorial/writing-documentation-with-docz.md
  16. +9 −1 examples/using-gatsby-image/plugins/gatsby-source-remote-images/gatsby-node.js
  17. +2 −0 examples/using-gatsby-source-graphql/gatsby-node.js
  18. +6 −0 packages/gatsby-cli/CHANGELOG.md
  19. +2 −1 packages/gatsby-cli/package.json
  20. +78 −3 packages/gatsby-cli/src/reporter/index.js
  21. +43 −0 packages/gatsby-cli/src/reporter/reporters/ink/components/progress-bar.js
  22. +0 −7 packages/gatsby-cli/src/reporter/reporters/ink/components/{activity.js → spinner.js}
  23. +73 −46 packages/gatsby-cli/src/reporter/reporters/ink/reporter.js
  24. +61 −27 packages/gatsby-cli/src/reporter/reporters/yurnalist/index.js
  25. +7 −0 packages/gatsby-cli/src/util/calc-elapsed-time.js
  26. +4 −0 packages/gatsby-plugin-sass/CHANGELOG.md
  27. +49 −32 packages/gatsby-plugin-sass/README.md
  28. +1 −1 packages/gatsby-plugin-sass/package.json
  29. +6 −0 packages/gatsby-plugin-sharp/CHANGELOG.md
  30. +2 −2 packages/gatsby-plugin-sharp/package.json
  31. +36 −0 packages/gatsby-plugin-sharp/src/__tests__/utils.js
  32. +2 −1 packages/gatsby-plugin-sharp/src/index.js
  33. +14 −7 packages/gatsby-plugin-sharp/src/scheduler.js
  34. +28 −0 packages/gatsby-plugin-sharp/src/utils.js
  35. +6 −0 packages/gatsby-source-contentful/CHANGELOG.md
  36. +3 −3 packages/gatsby-source-contentful/package.json
  37. +2 −0 packages/gatsby-source-contentful/src/download-contentful-assets.js
  38. +1 −0 packages/gatsby-source-contentful/src/gatsby-node.js
  39. +6 −0 packages/gatsby-source-drupal/CHANGELOG.md
  40. +2 −2 packages/gatsby-source-drupal/package.json
  41. +1 −0 packages/gatsby-source-drupal/src/gatsby-node.js
  42. +6 −0 packages/gatsby-source-filesystem/CHANGELOG.md
  43. +1 −0 packages/gatsby-source-filesystem/index.d.ts
  44. +2 −2 packages/gatsby-source-filesystem/package.json
  45. +20 −17 packages/gatsby-source-filesystem/src/__tests__/create-remote-file-node.js
  46. +42 −1 packages/gatsby-source-filesystem/src/__tests__/utils.js
  47. +24 −11 packages/gatsby-source-filesystem/src/create-remote-file-node.js
  48. +28 −0 packages/gatsby-source-filesystem/src/utils.js
  49. +6 −0 packages/gatsby-source-shopify/CHANGELOG.md
  50. +2 −2 packages/gatsby-source-shopify/package.json
  51. +9 −2 packages/gatsby-source-shopify/src/gatsby-node.js
  52. +2 −1 packages/gatsby-source-shopify/src/nodes.js
  53. +6 −0 packages/gatsby-source-wordpress/CHANGELOG.md
  54. +2 −2 packages/gatsby-source-wordpress/package.json
  55. +10 −1 packages/gatsby-source-wordpress/src/gatsby-node.js
  56. +2 −0 packages/gatsby-source-wordpress/src/normalize.js
  57. +6 −0 packages/gatsby-transformer-react-docgen/CHANGELOG.md
  58. +1 −1 packages/gatsby-transformer-react-docgen/package.json
  59. +26 −5 packages/gatsby-transformer-react-docgen/src/__tests__/on-node-create.js
  60. +2 −1 packages/gatsby-transformer-react-docgen/src/on-node-create.js
  61. +6 −0 packages/gatsby-transformer-screenshot/CHANGELOG.md
  62. +1 −1 packages/gatsby-transformer-screenshot/package.json
  63. +12 −1 packages/gatsby-transformer-screenshot/src/gatsby-node.js
  64. +4 −0 packages/gatsby-transformer-sqip/CHANGELOG.md
  65. +2 −2 packages/gatsby-transformer-sqip/package.json
  66. +4 −0 packages/gatsby/CHANGELOG.md
  67. +2 −2 packages/gatsby/package.json
  68. +4 −2 www/src/data/sidebars/doc-links.yaml
  69. +6 −0 www/src/utils/typography.js
  70. +5 −5 yarn.lock
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: How The Couch Builds Websites in Half the Time with Gatsby
date: 2019-06-19
author: Linda Watkins
tags:
- case study
- case-studies
- ecommerce
- content-mesh
- developer experience
- hosting
- performance
---

![The homepage of thecouch.nyc showing a blue background with the message, "The Couch is a digital studio that makes weird and wonderful things for the internet."](./thecouch-nyc.png)

We recently spoke with Kevin Green, Co-founder and Lead Engineer at [The Couch](https://thecouch.nyc), about how Gatsby helps them speed up their workflow and offer their clients fast, feature-rich sites with extremely low hosting costs.

## About The Couch

The Couch is a team of three designers and one developer that specializes in e-commerce projects for clients like [Clare](https://www.clare.com) and [Dims](https://www.dimshome.com). Kevin, The Couch’s developer and technical co-founder, is passionate about the headless ecosystem and the way it enables him to select the perfect tools for each project. One of Kevin’s favorite tools has been [Gatsby](/) because it makes it so easy to combine data from a variety of headless services into his projects.

<Pullquote>
I like to deliver the best possible solution for a client’s needs and Gatsby is a tool that is tried-and-true for me.
</Pullquote>

## Why Gatsby is Perfect for Prima

When [Prima](https://www.prima.co), an L.A.-based Cannabidiol (CBD) oil company, chose The Couch for their new site, their focus was on providing educational materials to their customers to help them better understand CBD. In addition to e-commerce, the site would need to include extensive written content and imagery, including 40 pre-written articles, a glossary, and a recipe collection.

<Pullquote>
They came to us with a flood of content—something we’re not really that used to.
</Pullquote>

![The homepage of prima.co showing a young woman holding a bottle of CBD oil next to the message, "Welcome to the uprising rooted in hemp, heart, and real science."](./prima-co.png)

Faced with a content-heavy project, Kevin considered his options. Rather than entrusting Prima’s content to a monolithic CMS—and risk slow loading times and an unhappy development experience—Kevin’s thoughts turned to a more modern solution: “Knowing this was going to be a super content- and image-heavy site, I wanted to build it static from the get-go.” By serving Prima’s content as static HTML, Kevin knew he would dramatically reduce the site’s loading time. His positive experiences with Gatsby on three previous production sites made him confident that it was the right tool for the job: “It’s hard for me to go any other route at this point. If I can go static, I’m always going to go static, and Gatsby’s going to be one of my top choices indefinitely.”

## Cutting Developer Time in Half

After years of building projects with traditional tools like Docker and WordPress, Kevin experienced a dramatic productivity boost after switching to Gatsby and the headless ecosystem. Using Gatsby and a combination of various microservices, Kevin can now build sites with complex functionality in half the time he used to: “I built a large system with countless modules, multiple content models and search functionality that’s already prepped for e-commerce...that’s something that used to take me double the time.”

<Pullquote>
From my perspective, Gatsby is an invaluable tool.
</Pullquote>

By embracing Gatsby and headless services, Kevin can now more easily adjust his tools to each project’s needs. To manage Prima’s content, Kevin opted for [Sanity](https://www.sanity.io), a headless CMS which can be connected to a Gatsby site using the [gatsby-source-sanity](/packages/gatsby-source-sanity/) plugin. Prima’s e-commerce functionality is powered by [Shopify](https://www.shopify.com) (integrated with Gatsby using the [gatsby-source-shopify](/packages/gatsby-source-shopify/) plugin). Kevin credits the ease of pulling data from headless services like these into Gatsby with the bulk of his new development speed:

<Pullquote>
I’ve set up Contentful, Prismic and Sanity in so many ways that I can now set up the whole backend and data architecture in a day...It’s a testament to those tools and how powerful they’re becoming.
</Pullquote>

## Inexpensive Hosting

Kevin told us his clients are extremely happy with the lower hosting and CMS costs that Gatsby projects make possible. Since Gatsby sites load as static assets, they can be hosted cheaply (or for free!) by hosts like [Netlify](https://www.netlify.com) and deployed straight to a global CDN. After years of serving sites on expensive hosting, this is a major relief to Kevin and his clients: “They’re getting a ton of traffic and it’s costing them practically nothing,” Kevin told us. “To me, one of the biggest selling points is not putting a site on Heroku and having that cost thousands of dollars a month when people start going to it.”

Prima’s CMS costs are also lower than normal because Gatsby pulls all of their content from Sanity and includes it in the site’s static HTML at build time. This means that instead of having Sanity resend their content every time a user visits the site, Prima only pulls their content when the site is rebuilt. This significantly speeds up Prima’s loading time and reduces their use of the Sanity API.

<Pullquote>
Being able to work in platforms like Gatsby is a breath of fresh air and allows me to control my environment and build beautiful websites that are super fast and inexpensive to run, which obviously our clients also love.
</Pullquote>

## Fast Site, Happy Client

The Prima launch was a big success and the site is now enjoying healthy traffic and organic growth thanks to enthusiastic supporters on social media: “They were thrilled. They’ve gotten a super warm reception,” Kevin reported. In particular, users have noticed that “the site is super fast and the experience is really smooth”—no small feat for a content-heavy site like Prima’s.

After initially launching with its educational content only, Prima’s product line has been added to the site this spring, powered by Gatsby’s e-commerce integration with Shopify.

<Pullquote>
It’s less a conversation about the tools; it’s about whether they do the best job they possibly can for the client. And in the case of Gatsby, it’s continued to do that for me. The sites that we build are fast by default, rendered statically, and don’t cost our clients a lot of money; it’s hard for me to go any other route.
</Pullquote>

To discover if Gatsby is right for your next project, [learn more here](/).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/docs/adding-markdown-pages.md
Original file line number Diff line number Diff line change
@@ -71,9 +71,9 @@ plugins: [
Create a folder in the `/src` directory of your Gatsby application called `markdown-pages`.
Now create a Markdown file inside it with the name `post-1.md`.

#### Including frontmatter
#### Frontmatter for metadata in markdown files

When you create a Markdown file, at the top of the file, add the frontmatter (metadata) block below. You can have different key value pairs that are relevant to your website. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide this data in your React components.
When you create a Markdown file, you can include a set of key value pairs that can be used to provide additional data relevant to specific pages in the GraphQL data layer. This data is called frontmatter and is denoted by the triple dashes at the start and end of the block. This block will be parsed by `gatsby-transformer-remark` as `frontmatter`. The GraphQL API will provide the key value pairs as data in our React components.

```markdown:title=src/markdown-pages/post-1.md
---
2 changes: 1 addition & 1 deletion docs/docs/css-in-js.md
Original file line number Diff line number Diff line change
@@ -20,4 +20,4 @@ _Note that this functionality is not a part of React or Gatsby, and requires usi
This section contains guides for styling your site with some of the most popular CSS-in-JS libraries, including how to set up global styles using each library.

[[guidelist]]
<GuideList slug={props.slug} />
2 changes: 1 addition & 1 deletion docs/docs/css-libraries-and-frameworks.md
Original file line number Diff line number Diff line change
@@ -7,4 +7,4 @@ There are many other CSS libraries and frameworks that you can use in your Gatsb

These are not full-on approaches to styling, and generally work no matter which styling approach you've chosen for your website. They require installing third-party libraries, often with the help of Gatsby community plugins.

[[guidelist]]
<GuideList slug={props.slug} />
19 changes: 9 additions & 10 deletions docs/docs/mdx/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Getting Started
title: Getting Started with MDX
---

The fastest way to get started with Gatsby + MDX is to use the [MDX
@@ -19,11 +19,10 @@ your site.

```sh
cd my-mdx-starter/
npm install
gatsby develop
```

1. **Open the site** running at http://localhost:8000!
1. **Open the site** running at http://localhost:8000

1. **Update the MDX content** by opening the `my-mdx-starter` directory
in your code editor of choice and edit `src/pages/index.mdx`.
@@ -37,27 +36,27 @@ can follow these steps for configuring the [gatsby-mdx](/packages/gatsby-mdx/) p
1. **Add `gatsby-mdx`** and MDX as dependencies

```sh
yarn add gatsby-mdx @mdx-js/mdx @mdx-js/react
yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
```

If you're upgrading from v0, [check out the MDX migration guide](https://mdxjs.com/migrating/v1).
> **Note:** If you're upgrading from v0, additionally [check out the MDX migration guide](https://mdxjs.com/migrating/v1).
1. **Update your `gatsby-config.js`** to use the `gatsby-mdx` plugin
1. **Update your `gatsby-config.js`** to use `gatsby-plugin-mdx`

```javascript:title=gatsby-config.js
module.exports = {
plugins: [
// ....
`gatsby-mdx`,
`gatsby-plugin-mdx`,
],
}
```

1. **Restart `gatsby develop`** and add an `.mdx` page to `src/pages

**Note:** If you want to query for frontmatter, exports, or other fields like
`tableOfContents` and you haven't previously added a `gatsby-source-filesystem`
pointing at `src/pages` in your project, you'll want to add one now.
> **Note:** If you want to query for frontmatter, exports, or other fields like
> `tableOfContents` and you haven't previously added a `gatsby-source-filesystem`
> pointing at `src/pages` in your project, you'll want to add one now.
## What's next?

17 changes: 8 additions & 9 deletions docs/docs/mdx/index.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
title: Adding Components to Content with MDX
title: Adding Components to Markdown with MDX
---

When writing long-form content in Markdown you might want to embed components.
When writing long-form content in Markdown you might want to embed [components](/docs/glossary/#component).
This is often achieved by either writing content in JSX or using plugins that
use custom syntax. The first approach isn't optimal because JSX isn't the best
format for content and can make it less approachable to members of a team. Custom
@@ -15,8 +15,8 @@ you're finding yourself wanting to add components to your content you can use
[MDX][mdx] is Markdown for the component era.
It lets you write JSX embedded inside Markdown.
It’s a great combination because it allows you to use Markdown’s terse
syntax (such as `# Heading`) for your content and JSX for more advanced
components.
syntax (such as `# Heading`) for your content and JSX for more advanced,
or reusable components.

This is useful in content-driven sites where you want the ability
to introduce components like charts or alerts without having to
@@ -27,14 +27,13 @@ interactions.

When using MDX you can also import other MDX documents and render
them as components. This lets you write something like an FAQ
page in one place and render it throughout your website.
page in one place and reuse it throughout your website.

## What does it look like in practice?

MDX might seem weird at first, but it quickly feels natural
after working with it for a few minutes. Importing and JSX
syntax works just like in your components. This results in a
seamless experience for developers and content authors alike.
Importing and JSX syntax works just like it does in your components. This
results in a seamless experience for developers and content authors alike.
Markdown and JSX are included alongside each other like this:

```md
import { Chart } from '../components/chart'
4 changes: 2 additions & 2 deletions docs/docs/mdx/programmatically-creating-pages.md
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ root.

> **NOTE**: `gatsby-mdx` uses `.mdx` by default as a file extension to
> recognize which files to use. You can also [use `.md` as a file
> extension](api-reference/options/extensions) if you want.
> extension](https://gatsby-mdx.netlify.com/api-reference/options/extensions) if you want.
```javascript=gatsby-config.js
module.exports = {
@@ -54,7 +54,7 @@ module.exports = {
```

You can read about
[`gatsby-source-filesystem`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#readme)
[`gatsby-source-filesystem`](/packages/gatsby-source-filesystem)
if you'd like to learn more.

## Add MDX Files
Loading