Merge remote-tracking branch 'upstream/master' into feat/ink-cli

.circleci/config.yml

@@ -130,12 +130,6 @@ jobs:
     executor: node
     <<: *test_template
 
-  unit_tests_node12:
-    executor:
-      name: node
-      image: "12"
-    <<: *test_template
-
   unit_tests_www:
     executor: node
     steps:
@@ -228,10 +222,6 @@ workflows:
           <<: *ignore_docs
           requires:
             - bootstrap
-      - unit_tests_node12:
-          <<: *ignore_docs
-          requires:
-            - bootstrap
       - unit_tests_www:
           requires:
             - bootstrap

.eslintrc.json

@@ -26,7 +26,9 @@
   "globals": {
     "before": true,
     "spyOn": true,
-    "__PATH_PREFIX__": true
+    "__PATH_PREFIX__": true,
+    "__BASE_PATH__": true,
+    "__ASSET_PREFIX__": true
   },
   "rules": {
     "arrow-body-style": [

docs/blog/2019-02-08-government-open-data-site-with-gatsby/index.md

@@ -223,8 +223,7 @@ We set a `BASEURL` environment variable in `gatsby-config.js` that resolves the
 const BASEURL = process.env.BASEURL || ""
 
 module.exports = {
-  // Note: it must *not* have a trailing slash.
-  // This is currently the realtive path in our Jekyll deployment. This path points to our Gatsby pages.
+  // This is currently the relative path in our Jekyll deployment. This path points to our Gatsby pages.
   // This prefix is prepended to load all our related images, code, and pages.
   pathPrefix: `${BASEURL}/gatsby-public`,
 }

docs/blog/2019-02-26-getting-started-with-gatsby-themes/index.md

@@ -21,11 +21,11 @@ Navigate to the directory
 
 Create a _package.json_ file
 
-`yarn init`
+`yarn init -y`
 
 Tidy up your _package.json_ file and create workspaces which includes the project name, site, and your packages. Both of these directories will include their own _package.json_ files.
 
-```json
+```json:title=package.json
 {
   "name": "gatsby-site",
   "private": true,
@@ -36,58 +36,41 @@ Tidy up your _package.json_ file and create workspaces which includes the projec
 
 Next, you want to create your _site_ directory and your _packages_ directory within your _gatsby-theme_ project directory. Make sure the names that you choose for your directories are the same as what you put in your workspaces. You will also want to go into your packages directory and make another directory with the name of your theme. For the purpose of this tutorial, we will call it _theme_. Then you will want to `yarn init` the _theme_ directory and the _site_ directory.
 
-```
+```sh
 mkdir site
 mkdir packages
 cd packages
 mkdir theme
 cd theme
-yarn init
+yarn init -y
+touch index.js
 cd ../../site/
-yarn init
+yarn init -y
 ```
 
-After using `yarn init` you will be asked a few questions. The main thing you will want to pay attention to is the entry point (index.js). For the _theme_ directory, you can leave the entry point as _index.js_ (just make sure you have an _index.js_ file) and for the _site_ directory, you can make entry point _gatsby-config.js_. Next, you will want to go into your _site_ directory and do `yarn workspace site add gatsby`.
+The `-y` in `yarn init` automatically adds defaults to your `package.json`. If you opt to run `yarn init` without `-y` you will be asked a few questions. The main thing you will want to pay attention to is the entry point (index.js). For the _theme_ directory, you can leave the entry point as _index.js_ (just make sure you have an _index.js_ file).
 
-Hooray! Gatsby should now be added to your site directory if you look in your _package.json_ file. Adjustments you make to your file is adding "scripts" and adding the name of your Gatsby theme, in this case, _theme_, to your dependencies.
-
-```json
+```json:title=packages/theme/package.json
 {
   "name": "theme",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Practicing making a Gatsby theme",
   "main": "index.js",
-  "license": "MIT",
-  "devDependencies": {
-    "gatsby": "^2.0.118",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
-  },
-  "peerDependencies": {
-    "gatsby": "^2.0.118",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
-  },
-  "dependencies": {
-    "@mdx-js/mdx": "^0.17.0",
-    "@mdx-js/tag": "^0.17.0",
-    "gatsby-mdx": "^0.3.6",
-    "gatsby-plugin-page-creator": "^2.0.6"
-  }
+  "license": "MIT"
 }
 ```
 
 You will want to add Gatsby, React, and ReactDOM to as dev dependencies for _site_.
 
-`yarn workspace site add gatsby react react-dom -D`
+`yarn workspace site add gatsby react react-dom`
 
 Then you will navigate out of the _site_ directory and add Gatsby, React, and ReactDOM as dev dependencies for _theme_.
 
 `yarn workspace theme add gatsby react react-dom -D`
 
 You will want to make Gatsby, React, and ReactDom peer dependencies in the _theme_ directory.
 
-```json
+```json:title=packages/theme/package.json
  "devDependencies": {
     "gatsby": "^2.0.118",
     "react": "^16.8.1",
@@ -112,7 +95,7 @@ In your _theme_ directory, add src/pages/index.mdx
 
 Then you need to add gatsby-mdx and MDX as dependencies.
 
-`yarn workspace theme add gatsby-mdx @mdx-js/mdx @mdx-js/tag`
+`yarn workspace theme add gatsby-mdx @mdx-js/mdx @mdx-js/react`
 
 Next, you will want to add gatsby-plugin-page-creator
 
@@ -126,37 +109,70 @@ Read more about the page-creator plugin [here.](/packages/gatsby-plugin-page-cre
 
 Next, you will want to create your _gatsby-config.js_ file under your _theme_ directory. Make sure to include 'gatsby-mdx' and 'gatsby-plugin-page-creator.'
 
-```javascript:title=gatsby-config.js
+```javascript:title=packages/theme/gatsby-config.js
+const path = require(`path`)
+
 module.exports = {
   plugins: [
     {
       resolve: `gatsby-mdx`,
-      options: {
-        defaultLayouts: {
-          default: require.resolve("./src/components/layout.js"),
-        },
-      },
+      options: {},
     },
     {
       resolve: `gatsby-plugin-page-creator`,
       options: {
-        path: `${__dirname}/src/pages`,
+        path: path.join(__dirname, `src/pages`),
       },
     },
   ],
 }
 ```
 
-Now, you can make sure _site_ is linked to _theme_.
+Lastly, you're going to want to add a _gatsby-config.js_ file to your _site_ directory.
+
+```javascript:title=site/gatsby-config.js
+module.exports = {
+  __experimentalThemes: [`theme`],
+}
+```
+
+### Setting up Site `package.json`
 
+You will need to add `gatsby` CLI scripts and specify your newly created `theme` as a dependency.
+
+```json:title=site/package.json
+{
+  "name": "site",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    // highlight-start
+    "develop": "gatsby develop",
+    "build": "gatsby build"
+    // highlight-end
+  },
+  "dependencies": {
+    "gatsby": "^2.3.34",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    // highlight-start
+    "theme": "*"
+    // highlight-end
+  }
+}
 ```
+
+Now, you can make sure _site_ is linked to _theme_.
+
+```sh
 yarn
 yarn workspaces info
 ```
 
 Your workspace info should look similar to this:
 
-```shell
+```json
 {
   "site": {
     "location": "site",
@@ -171,20 +187,29 @@ Your workspace info should look similar to this:
 }
 ```
 
-Lastly, you're going to want to add a _gatsby-config.js_ file to your _site_ directory.
+### Run the Site
 
-```javascript:title=gatsby-config.js
-module.exports = {
-  __experimentalThemes: ["theme"],
-}
+Now that we've set up the site's _package.json_ we can run the workspace:
+
+```sh
+yarn workspace site develop
 ```
 
-While you're still in the _site_ directory, you are going to create an _index.mdx_ file in the pages folder.
+### Customizing the Index Page
+
+You can override the index page from your theme by creating one in site. To do so, change directory into
+the _site_ directory, and create an _index.mdx_ file in the pages folder.
 
 `site/src/pages/index.mdx`
 
 Your website content goes in _index.mdx_.
 
+Now, rerun the development server and see your new content:
+
+```sh
+yarn workspace site develop
+```
+
 ## Styling Layout and Components
 
 Next, you will navigate to the _theme_ directory. You will then create a _components_ folder under _src_, and in components you create a _layout.js_ file.
@@ -193,13 +218,13 @@ Next, you will navigate to the _theme_ directory. You will then create a _compon
 
 Inside of your _layout.js_ file, you can add your styling.
 
-```javascript:title=layout.js
+```javascript:title=packages/theme/src/components/layout.js
 export default ({ children }) => (
   <div
     style={{
-      //Layout styling //
-      margin: "10%",
-      backgroundColor: "#000000",
+      // Layout styling
+      margin: `10%`,
+      backgroundColor: `#fafafa`,
     }}
   >
     {children}
@@ -209,21 +234,25 @@ export default ({ children }) => (
 
 To make sure your _layout.js_ file is connected to your theme you will navigate to your _gatsby-config.js_ file in your _theme_ directory. You will add defaultLayouts under options and make sure that the _layout.js_ is required.
 
-```javascript:title=gatsby-config.js
+```javascript:title=packages/theme/gatsby-config.js
+const path = require(`path`)
+
 module.exports = {
   plugins: [
     {
       resolve: `gatsby-mdx`,
       options: {
+        // highlight-start
         defaultLayouts: {
-          default: require.resolve("./src/components/layout.js"),
+          default: require.resolve(`./src/components/layout.js`),
         },
+        // highlight-end
       },
     },
     {
       resolve: `gatsby-plugin-page-creator`,
       options: {
-        path: `${__dirname}/src/pages`,
+        path: path.join(__dirname, `src/pages`),
       },
     },
   ],
@@ -248,13 +277,7 @@ export default ({ children }) => (
 )
 ```
 
-To import your styled components, go to _index.js_
-
-```js:title=packages/theme/index.js
-packages / theme / index.js
-```
-
-You will then export your component.
+To import your styled components, go to _index.js_ and export your component.
 
 ```javascript:title=packages/theme/index.js
 export { default as Header } from "./src/components/header"

docs/blog/2019-05-02-growing-housecall-pro-by-973-percent/index.md

@@ -0,0 +1,67 @@
+---
+title: Growing Housecall Pro by 973% with Gatsby
+date: 2019-05-02
+author: Cory Mortimer
+excerpt: "Housecall Pro was given a recommendation for Gatsby and it did not disappoint. Within less than a year, their organic blog traffic increased by 973%!"
+tags:
+  - contentful
+  - react
+  - netlify
+---
+
+In October of 2018, we realized that our ​[marketing website](https://www.housecallpro.com/)​ needed some serious love to meet our standards for a scalable and effective digital front door. At the time, the site was being served from a legacy Ruby on Rails server hosted on AWS. The loading time for each page took several seconds on desktop, and was really hurting on mobile, where our analytics and current trends were showing an ever increasing share of use. The development process was not efficient, involving an engineer to create an HTML template in Ruby for each new page to be rendered and served by Rails. This process was not sustainable and would not aid in our goal to radically increase our useful content to capture a wider audience of potential customers.
+
+## Our decision for Gatsby
+
+We needed our site to be blazing fast, scalable, have top notch SEO, and most importantly, provide an ability for content creators who are not developers to publish new pages. Our commercial SaaS product was already written in React, so coalescing on the same frontend technology between teams would lower the barrier to entry. We started down the path of converting our Embedded Ruby Files into React components, and building out a serverless architecture using Terraform on AWS.
+
+Along the way, it became clear that to get the benefits of a fast, fully crawlable site, we would need extra tools for the job. Indexability and SEO would prove challenging to improve upon when the website is being rendered in the browser via JavaScript. SEO and mobile performance are critical components for customers to be able to find your site. With that in mind, we searched for better React solutions.
+
+We were given a recommendation for Gatsby and it did not disappoint. Since Gatsby
+renders all of our pages as static HTML files, our site became instantly crawlable by search engines. From our time of implementing Gatsby in late November 2018 to April 2019, we have increased our organic blog traffic by **​973%​**. We expect that number to keep increasing from there.
+
+![Housecall Pro Web Traffic Increase With Gatsby](./images/web-traffic-increase.png)
+
+Organic web traffic is not the only impressive statistic that Gatsby has helped us to achieve. Within the same time period of late November 2018 to April 2019, the number of times in which the marketing website landed on page 1 for many Google search terms increased by **​56%**​.
+
+![Housecall Pro Google Search Increase With Gatsby](./images/google-search-terms.png)
+
+## Generating content rapidly
+
+High quality, timely, and varied content delivered on a site with speed and beautiful design is a sure fire way to drive a continuing increase in prospective customers. Even though switching to a common framework that the whole team knew sped up the page creation process, it still took developer time to create pages that were similar to each other.
+
+The dream was to give content creators the power to make these pages themselves without developer intervention. Based on ​[this blog post​](https://www.gatsbyjs.org/blog/2017-12-06-gatsby-plus-contentful-plus-netlify/) on the Gatsby site, we integrated Contentful, and deployed via Netlify. Contentful is a headless content management system (CMS) in which content can be ingested over an API. This led us down the path of a generic page builder.
+
+Developers would make common components that content creators could piece together like lego blocks to make their own webpages. Now, an unlimited number of informational pages can be built by our content team to give the power to our potential customers to make an informed decision about our product.
+
+You can see an example here of composable components from the viewpoint of a content creator in Contentful (left), and the final view of the page they see (right), based simply on entering a basic set of information.
+
+Each component in Contentful lines up to a React component in the project, and with easy [previewing​](https://www.gatsbyjs.org/blog/2019-03-22-introducing-gatsby-preview-beta/) upon adding data, content creators can get instant feedback.
+
+![Housecall Pro Contentful Preview](./images/contentful-preview.png)
+
+Housecall Pro caters to a variety of home services industries. With that in mind, we needed a way to give each industry a place on the Housecall Pro marketing site in which they could get information. Gatsby has aided in the creation of these industry pages.
+
+With Gatsby, we can generate several hundred pages for all of the industries that we are targeting based on a single React template. This involved a simple process that boils down to the following simple steps:
+
+- Designers create a mock-up of the page
+- Developers create React components for each piece (composing as needed for re-use)
+- Developers create a JSON structure that holds all of the page’s data
+- Content authors fill that structure
+- Gatsby loops through data structure and generates the pages
+
+By providing data in the form of a JSON object, we can parse and iterate over each industry in which to generate a new page. Whether this JSON data comes from a file, or a CMS via an API call, or our own database, Gatsby provides the flexibility to build in any way we need.
+
+This has dramatically decreased developer time and rocketed the speed of page creation. We went from building several pages a week using front-end developers, to building out dozens of pages a day with professional content creators.
+
+Below is an example of one of our live industry pages (in this case Heating/Air
+Conditioning). Each industry page follows the same template, and content authors can build out new industries, complete with whatever copy, icons, images, and animations they need to allow each to stand out as its own work of art.
+
+![Housecall Pro Website Example](./images/website-example.png)
+
+## Developer Love
+
+Gatsby has provided us with the tools to grow and expand Housecall Pro, all
+while being a pleasure to develop with. The vibrant community, fantastic documentation, and accessibility to knowledgeable people has made it clear that Gatsby is a winning solution.
+
+Thank you Gatsby team! Housecall Pro is always looking for engineering talent. Check out our [careers](https://www.housecallpro.com/careers/)​ page to see all of our current openings.