Merge branch 'master' into patch-1

gatsbyjs · Mar 28, 2018 · 43d6020 · 43d6020
2 parents 8f01217 + 532d571
commit 43d6020
Show file tree

Hide file tree

Showing 102 changed files with 1,010 additions and 416 deletions.
diff --git a/README.md b/README.md
@@ -110,8 +110,6 @@ Websites built with Gatsby:
 * [greglobinski.com](https://greglobinski.com)
   ([source](https://github.com/greglobinski/greglobinski-com))
 * [Vibert Thio's Portfolio](https://vibertthio.com/portfolio/)([source](https://github.com/vibertthio/portfolio))
-* [hunterchang.com](https://hunterchang.com)
-  ([source](https://github.com/ChangoMan/hc-gatsby))
 * [YouFoundRon.com](https://youfoundron.com)
   ([source](https://github.com/rongierlach/yfr-dot-com))
 * [heml.io](https://heml.io)
@@ -188,6 +186,9 @@ Websites built with Gatsby:
 * [Adnan Fajlur - Portfolio](https://adnanfajlur.xyz/)
 * [Hapticmedia](https://hapticmedia.fr/en/)
 * [Smakosh](https://smakosh.com) ([source](https://github.com/smakosh/smakosh.com))
+* [Philipp Czernitzki - Blog/Website](http://philippczernitzki.me)
+* [CodeBushi](https://codebushi.com/)
+* [WebGazer](https://www.webgazer.io)
 
 ## Docs
 

diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
@@ -181,7 +181,7 @@ Let's fix that. We need to teach Gatsby how to query the file system. Luckily
 this is so common it's been done for you. Install the file system source plugin:
 
 ```
-yarn add gatsby-source-filesystem
+npm i --save gatsby-source-filesystem
 ```
 
 Now modify `gatsby-config.js` to both use the plugin and tell it what directory
@@ -230,7 +230,7 @@ files this is all you will need. But if you want to render markdown files as
 HTML you will need another plugin. Let's add that now:
 
 ```
-yarn add gatsby-transformer-remark
+npm i --save gatsby-transformer-remark
 ```
 
 As before, add it to the `plugins` field in `gatsby-config.js`:

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
@@ -288,6 +288,55 @@ The `handleLanguageChange` function just wraps the `react-i18n` function passed
 in as a prop through `translate`. Pretty much everything is handled for us.
 Hooray! 🎉
 
+## SSR
+
+To let it render the content into html, you need to load i18n namespaces (using `i18n.loadNamespaces`) before render
+
+### With redux
+
+```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 createStore from './src/state/createStore'
+
+exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
+  i18n.loadNamespaces(['common'], () => {
+    const store = createStore()
+    const ConnectedBody = () => (
+      <Provider store={store}>{bodyComponent}</Provider>
+    )
+    replaceBodyHTMLString(renderToString(<ConnectedBody />))
+  })
+}
+```
+
+### Without redux
+
+> Not yet tested
+
+```js
+// gatsby-ssr.js
+
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import i18n from './src/i18n'
+
+import createStore from './src/state/createStore'
+
+exports.replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
+  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
+
 ## Finishing up
 
 As you can see, i18n in Gatsby is actually pretty simple when you know how! We

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
@@ -43,7 +43,6 @@ Next, we analyzed over 10 admirable and/or popular plugin libraries to draw from
 * [Apple App store](https://www.apple.com/ios/app-store/)
 * [Google Play store](https://play.google.com/store/apps/top)
 
-
 ### The goods 👍
 
 We liked when these libraries let users:
@@ -55,14 +54,13 @@ We liked when these libraries let users:
 
 ### The bads 👎
 
-We *didn't* like these things in some of the above libraries:
+We _didn't_ like these things in some of the above libraries:
 
 * poor contrast and poor information heirarchy
 * limited filters
 * too many filters
 * low information density
 
-
 ## Prototypes and their evolutions
 
 Here’s a sampling of screenshots that many community members contributed to and gave feedback about. It’s rewarding to see how much the design has progressed (and will keep progressing).
@@ -74,17 +72,16 @@ Here’s a sampling of screenshots that many community members contributed to an
 
 ## Next steps for the plugin library
 
-The plugin ecosystem is a huge part of what makes Gatsby awesome because plugins and packages make Gatsby extensible. There's a virtuous cycle where people find plugins, use them, contribute to them, and create new ones. We hope to accelerate this cycle, so the Gatsby ecosystem can develop faster and more people can build awesome sites! 
+The plugin ecosystem is a huge part of what makes Gatsby awesome because plugins and packages make Gatsby extensible. There's a virtuous cycle where people find plugins, use them, contribute to them, and create new ones. We hope to accelerate this cycle, so the Gatsby ecosystem can develop faster and more people can build awesome sites!
 
 Here are some ways you can help make the Gatsby plugin ecoystem great:
 
 * Share feedback on the plugin library on [Github Issue #4394](https://github.com/gatsbyjs/gatsby/issues/4394).
 * If you created a plugin and it's not showing up in the library, double check that the package has "gatsby-plugin" in its keywords.
 * Create plugins (or publish ones you've already built)! If you're interested, the [Plugin Authoring](/docs/plugin-authoring/) page can help.
-* [Contact me](https://twitter.com/shannonb_ux/status/938551014956732418) here if you have feedback that differs from or provides deeper insight into one of the pain points this article mentions. 
+* [Contact me](https://twitter.com/shannonb_ux/status/938551014956732418) here if you have feedback that differs from or provides deeper insight into one of the pain points this article mentions.
 * Follow us on [Twitter](https://twitter.com/gatsbyjs).
 
-
 ## Sneak peak into the next UX project
 
 Our next UX project is designing and building a [Gatsby site showcase](https://github.com/gatsbyjs/gatsby/issues/4394). Please contribute to and subscribe to the issue to help out!

diff --git a/docs/docs/deploy-gatsby.md b/docs/docs/deploy-gatsby.md
@@ -56,8 +56,7 @@ now to create a new repository on GitHub.
 ### Use the NPM package `gh-pages` for deploying
 
 First add **gh-pages** as a `devDependency` of your site and create an npm
-script to **deploy** your project by running `npm install gh-pages --save-dev`
-or `yarn add gh-pages --dev` (if you have yarn installed).
+script to **deploy** your project by running `npm install gh-pages --save-dev`.
 
 Then add a `deploy` script in your `package.json` file.
 
@@ -84,7 +83,7 @@ repo, set up git in your project with `git init`. Then tell Gatsby where to
 deploy your site by adding the git remote address with https or ssh. Here is how
 to do it with https: `git remote add origin git@github.com:username/project-name.git`.
 
-Now run `yarn deploy` or `npm run deploy`. Preview changes in your GitHub page
+Now run `npm run deploy`. Preview changes in your GitHub page
 `https://username.github.io/project-name/`. You can also find the link to your
 site on GitHub under `Settings` > `GitHub Pages`.
 
@@ -167,7 +166,7 @@ cache:
 
 pages:
   script:
-  - yarn install
+  - npm install
   - ./node_modules/.bin/gatsby build --prefix-paths
   artifacts:
     paths:
@@ -182,14 +181,14 @@ in between builds, so subsequent builds should be a lot faster as it doesn't hav
 to reinstall all the dependancies required. `pages:` is the name of the
 CI stage. You can have multiple stages, e.g. 'Test', 'Build', 'Deploy' etc.
 `script:` starts the next part of the CI stage, telling it to start running the
-below scripts inside the image selected. We have used the `yarn install` and
+below scripts inside the image selected. We have used the `npm install` and
 `./node_modules/.bin/gatsby build --prefix-paths` which will install all dependancies, and
 start the static site build, respectively.
 
 We have used
 `./node_modules/.bin/gatsby build --prefix-paths` because we then don't have to install
 gatsby-cli to build the image, as it has already been included and installed
-with `yarn install`. We have included `--prefix-paths` as when running the command _without_ that flag, Gatsby ignores your pathPrefix. `artifacts:` and `paths:` are used to tell GitLab pages
+with `npm install`. We have included `--prefix-paths` as when running the command _without_ that flag, Gatsby ignores your pathPrefix. `artifacts:` and `paths:` are used to tell GitLab pages
 where the static files are kept. `only:` and `master` tells the CI to only run
 the above instructions when the master branch is deployed.
 

diff --git a/docs/docs/gatsby-config.md b/docs/docs/gatsby-config.md
@@ -10,12 +10,12 @@ _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)
+1.  siteMetadata (object)
+2.  plugins (array)
+3.  pathPrefix (string)
+4.  polyfill (boolean)
+5.  mapping (object)
+6.  proxy (object)
 
 ## siteMetadata
 
@@ -142,47 +142,44 @@ query BlogPost($slug: String!) {
 Mapping can also be used to map an array of ids to any other collection of data. For example, if you have two JSON files
 `experience.json` and `tech.json` as follows:
 
-```javascript
+```json
 // experience.json
 [
-    {
-        "id": "companyA",
-        "company": "Company A",
-        "position": "Unicorn Developer",
-        "from": "Dec 2016",
-        "to": "Present",
-        "items": [
-            {
-                "label": "Responsibility",
-                "description": "Being an unicorn"
-            },
-            {
-                "label": "Hands on",
-                "tech": [
-                    "REACT",
-                    "NODE"
-                ]
-            }
-        ]
-    },
+  {
+    "id": "companyA",
+    "company": "Company A",
+    "position": "Unicorn Developer",
+    "from": "Dec 2016",
+    "to": "Present",
+    "items": [
+      {
+        "label": "Responsibility",
+        "description": "Being an unicorn"
+      },
+      {
+        "label": "Hands on",
+        "tech": ["REACT", "NODE"]
+      }
+    ]
+  }
 ]
 ```
 
-```javascript
+```json
 // tech.json
 [
-    {
-        "id": "REACT",
-        "icon": "facebook",
-        "color": "teal",
-        "label": "React"
-    },
-    {
-        "id": "NODE",
-        "icon": "server",
-        "color": "green",
-        "label": "NodeJS"
-    }
+  {
+    "id": "REACT",
+    "icon": "facebook",
+    "color": "teal",
+    "label": "React"
+  },
+  {
+    "id": "NODE",
+    "icon": "server",
+    "color": "green",
+    "label": "NodeJS"
+  }
 ]
 ```
 
@@ -202,24 +199,24 @@ You can query the `tech` object via the referred ids in `experience`:
 ```graphql
 query CV {
   experience: allExperienceJson {
-      edges {
-          node {
-              company
-              position
-              from
-              to
-              items {
-                  label
-                  description
-                  link
-                  tech {
-                      label
-                      color
-                      icon
-                  }
-              }
+    edges {
+      node {
+        company
+        position
+        from
+        to
+        items {
+          label
+          description
+          link
+          tech {
+            label
+            color
+            icon
           }
+        }
       }
+    }
   }
 }
 ```

diff --git a/docs/docs/gatsby-on-linux.md b/docs/docs/gatsby-on-linux.md
@@ -0,0 +1,69 @@
+---
+title: Gatsby on Linux
+---
+# Linux
+
+TODO
+
+## Windows Subsystem Linux (WSL)
+
+As of October 17th 2017, Windows 10 ships with WSL and Linux distributions are available via the [Windows Store], there are several different distributions to use which can be configured via `wslconfig` if you have more than one distribution installed.
+
+```sh
+# set default distribution to Ubuntu
+wslconfig /setdefault ubuntu
+```
+
+### Using Windows Subsystem Linux: Ubuntu
+
+If you have a fresh install of Ubuntu then update and upgrade:
+
+```sh
+sudo apt update
+sudo apt -y upgrade
+```
+
+>Only use `-y` if you're happy to upgrade to the latest versions of the software.
+
+**Build tools**
+
+To compile and install native addons from npm you may also need to install build tools for `node-gyp`:
+
+```sh
+sudo apt install -y build-essential
+```
+
+**Install node**
+
+Following the install instructions on nodejs.org leaves a slightly broken install (i.e. permission errors when trying to `npm install`). Instead try installing node versions using [n] which you can install with [n-install]:
+
+```sh
+curl -L https://git.io/n-install | bash
+```
+
+There are other alternatives for managing your node versions such as [nvm] but this is known to slow down [bash startup] on WSL.
+
+### Using Windows Subsystem Linux: Debian
+
+Debian setup is nearly identical to Ubuntu except for the additional installs of `git` and `libpng-dev`.
+
+```sh
+sudo apt update
+sudo apt -y upgrade
+sudo apt install build-essential
+sudo apt install git
+sudo apt install libpng-dev
+```
+
+Or to install all at the same time and approve (y) all installs:
+
+```sh
+sudo apt update && sudo apt -y upgrade && sudo apt install build-essential && sudo apt install git && sudo apt install libpng-dev
+```
+
+<!-- links -->
+[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
+[nvm]: https://github.com/creationix/nvm
+[bash startup]: https://github.com/Microsoft/WSL/issues/776#issuecomment-266112578