docs: convert website from postcss to emotion (#2068)

.babelrc

@@ -1,46 +1,14 @@
 {
-  presets: [
+  "presets": ["babel-preset-gatsby"],
+  "plugins": [
     [
-      "@babel/preset-env",
+      "prismjs",
       {
-        loose: true,
-        modules: false,
-        useBuiltIns: "usage",
-        shippedProposals: true,
-        targets: {
-          browsers: [">0.25%", "not dead"],
-        },
-      },
-    ],
-    [
-      "@babel/preset-react",
-      {
-        useBuiltIns: true,
-        pragma: "React.createElement",
-      },
-    ],
-  ],
-  plugins: [
-    ["prismjs", {
         "languages": ["javascript", "css", "markup", "yaml", "json"],
         "plugins": ["line-numbers"],
         "theme": "tomorrow",
-        "css": true,
-    }],
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        loose: true,
-      },
-    ],
-    "@babel/plugin-syntax-dynamic-import",
-    "babel-plugin-macros",
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        helpers: true,
-        regenerator: true,
-      },
-    ],
-  ],
+        "css": true
+      }
+    ]
+  ]
 }

content/docs/add-to-your-site.md

@@ -68,7 +68,6 @@ Then import it (assuming your project has tooling for imports):
 
 ```js
 import CMS from 'netlify-cms'
-
 // Now the registry is available via the CMS object.
 CMS.registerPreviewTemplate('my-template', MyTemplate)
 ```

content/docs/authentication-backends.md

@@ -19,11 +19,10 @@ To use it in your own project stored on GitHub or GitLab, follow these steps:
 
 1. Head over to the [Netlify Identity docs](https://www.netlify.com/docs/identity) and follow the steps to get started.
 2. Add the following lines to your Netlify CMS `config.yml` file:
-
-    ```yaml
-    backend:
-      name: git-gateway
-    ```
+  ```yaml
+  backend:
+    name: git-gateway
+  ```
 
 ### Reconnect after Changing Repository Permissions
 
@@ -45,20 +44,18 @@ To enable basic GitHub authentication:
 
 1. Follow the authentication provider setup steps in the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider).
 2. Add the following lines to your Netlify CMS `config.yml` file:
-
-    ```yaml
-    backend:
-      name: github
-      repo: owner-name/repo-name # Path to your GitHub repository
-    ```
+  ```yaml
+  backend:
+    name: github
+    repo: owner-name/repo-name # Path to your GitHub repository
+  ```
 
 ### Specifying a status for deploy previews
 The GitHub backend supports [deploy preview links](../deploy-preview-links). Netlify CMS checks the
 `context` of a commit's [statuses](https://help.github.com/articles/about-status-checks/) and infers
 one that seems to represent a deploy preview. If you need to customize this behavior, you can
 specify which context to look for using `preview_context`:
 
-
 ```yaml
 backend:
   name: github
@@ -87,11 +84,11 @@ To enable it:
 2. Follow the [Netlify docs](https://www.netlify.com/docs/authentication-providers/#using-an-authentication-provider) to add your new GitLab Application ID and Secret to your Netlify site dashboard.
 3. In your repository, add the following lines to your Netlify CMS `config.yml` file:
 
-    ```yaml
-    backend:
-      name: gitlab
-      repo: owner-name/repo-name # Path to your GitLab repository
-    ```
+```yaml
+backend:
+  name: gitlab
+  repo: owner-name/repo-name # Path to your GitLab repository
+```
 
 ### Client-Side Implicit Grant (GitLab)
 

content/docs/beta-features.md

@@ -215,20 +215,15 @@ Assuming you have the netlify-cms package installed to your project, manual init
 ```js
 // This global flag enables manual initialization.
 window.CMS_MANUAL_INIT = true
-
 // Usage with import from npm package
 import CMS, { init } from 'netlify-cms'
-
 // Usage with script tag
 const { CMS, initCMS: init } = window
-
 /**
  * Initialize without passing in config - equivalent to just importing
  * Netlify CMS the old way.
  */
-
 init()
-
 /**
  * Optionally pass in a config object. This object will be merged into
  * `config.yml` if it exists, and any portion that conflicts with
@@ -239,15 +234,13 @@ init()
  * your `config.yml` can be missing its backend property, allowing you
  * to set this property at runtime.
  */
-
 init({
   config: {
     backend: {
       name: 'git-gateway',
     },
   },
 })
-
 /**
  * Optionally pass in a complete config object and set a flag
  *  (`load_config_file: false`) to ignore the `config.yml`.
@@ -257,7 +250,6 @@ init({
  * It is not required if the `config.yml` file is missing to set
  * `load_config_file`, but will improve performance and avoid a load error.
  */
-
 init({
   config: {
     backend: {
@@ -276,7 +268,6 @@ init({
     ],
   },
 })
-
 // The registry works as expected, and can be used before or after init.
 CMS.registerPreviewTemplate(...);
 ```
@@ -292,7 +283,6 @@ CMS.registerPreviewTemplate(...);
  */
 import CMS from 'netlify-cms';
 import styles from '!css-loader!sass-loader!../main.scss'
-
 CMS.registerPreviewStyle(styles.toString(), { raw: true })
 ```
 

content/docs/cloudinary.md

@@ -17,7 +17,7 @@ You can [sign up for Cloudinary](https://cloudinary.com/users/register/free) for
 
 To use the Cloudinary media library within Netlify CMS, you'll need to update your Netlify CMS configuration file with the information from your Cloudinary account:
 
-```yml
+```yaml
 media_library:
   name: cloudinary
   config:
@@ -70,17 +70,17 @@ Global configuration, which is meant to affect the Cloudinary widget at all time
 as seen below, under the primary `media_library` property. Settings applied here will affect every
 instance of the Cloudinary widget.
 
-```yml
+```yaml
 # global
 media_library:
   name: cloudinary
   output_filename_only: false
   config:
     default_transformations:
-      -   - fetch_format: auto
-            width: 160
-            quality: auto
-            crop: scale
+      - - fetch_format: auto
+          width: 160
+          quality: auto
+          crop: scale
 ```
 
 #### Field configuration
@@ -89,22 +89,22 @@ Configuration can also be provided for individual fields that use the media libr
 is very similar to the global configuration, except the settings are added to an individual `field`.
 For example:
 
-```yml
+```yaml
 # field
 fields: # The fields each document in this collection have
-      - label: 'Cover Image'
-        name: 'image'
-        widget: 'image'
-        required: false
-        tagname: ''
-        media_library:
-          config:
-            default_transformations:
-              -   - fetch_format: auto
-                    width: 300    
-                    quality: auto
-                    crop: fill
-                    effect: grayscale
+- label: 'Cover Image'
+  name: 'image'
+  widget: 'image'
+  required: false
+  tagname: ''
+  media_library:
+    config:
+      default_transformations:
+        - fetch_format: auto
+          width: 300    
+          quality: auto
+          crop: fill
+          effect: grayscale
 ```
 
 ## Inserting Cloudinary URL in page templates
@@ -113,24 +113,22 @@ If you prefer to provide direction so that images are transformed in a specific
 
 * Either globally or for specific fields, configure the Cloudinary extension to only output the asset filename
 
-  ```yml
-  # global
-  media_library:
-    name: cloudinary
-    output_filename_only: true
-
-  # field
-  media_library:
-    name: cloudinary
-    output_filename_only: true
-  ```
+```yaml
+# global
+media_library:
+  name: cloudinary
+  output_filename_only: true
+# field
+media_library:
+  name: cloudinary
+  output_filename_only: true
+```
 
 * Provide a dynamic URL in the site template
 
-  ```hbs
-  {{! handlebars example }}
-
-  <img src="https://res.cloudinary.com/<cloud_name>/<resource_type>/<type>/<transformations>/{{image}}"/>
-  ```
+```handlebars
+{{! handlebars example }}
+<img src="https://res.cloudinary.com/<cloud_name>/<resource_type>/<type>/<transformations>/{{image}}"/>
+```
 
 Your dynamic URL can be formed conditionally to provide any desired transformations - please see Cloudinary's [image transformation reference](https://cloudinary.com/documentation/image_transformation_reference) for available transformations.

content/docs/configuration-options.md

@@ -9,7 +9,6 @@ Alternatively, you can specify a custom config file using a link tag:
 
 ```html
 <!-- Note the "type" and "rel" attribute values, which are required. -->
-
 <link href="path/to/config.yml" type="text/yaml" rel="cms-config-url">
 ```
 

content/docs/deploy-preview-links.md

@@ -49,7 +49,7 @@ to a post in your repo may look like `content/blog/2018-01-new-post.md`, but the
 on your site would look more like: `/blog/2018-01-new-post/`. Here's how you would use
 `preview_path` in your configuration for this scenario:
 
-```yml
+```yaml
 collections:
   - name: blog
     folder: content/blog
@@ -65,9 +65,8 @@ template, `{{slug}}` is only the url-safe [identifier
 field](../configuration-options/#identifier_field), while in the `preview_path` template, `{{slug}}`
 is the entire slug for the entry. For example:
 
-```yml
+```yaml
 # for an entry created Jan 1, 2000 with identifier "My New Post!"
-
 collections:
   - name: posts
     slug: {{year}}-{{month}}-{{slug}} # {{slug}} will compile to "my-new-post"
@@ -91,17 +90,14 @@ through static site generators.
 
 ```yaml
 # This collection's date field will be inferred because it has a field named `"date"`
-
 collections:
   - name: posts
     preview_path: blog/{{year}}/{{month}}/{{title}}
     fields:
       - { name: title, label: Title }
         { name: date, label: Date, widget: date }
         { name: body, label: Body, widget: markdown }
-
 # This collection requires `path_preview_date_field` because the no obvious date field is available
-
 collections:
   - name: posts
     preview_path: blog/{{year}}/{{month}}/{{title}}

gatsby-config.js

@@ -70,7 +70,7 @@ module.exports = {
     },
     'gatsby-transformer-yaml',
     'gatsby-transformer-json',
-    'gatsby-plugin-postcss',
+    'gatsby-plugin-emotion',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-catch-links',
     {
@@ -80,7 +80,7 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: 'gatsby-plugin-manifest',
       options: {
         name: 'NetlifyCMS',
         short_name: 'NetlifyCMS',

gatsby-node.js

@@ -1,8 +1,8 @@
 const path = require('path');
 const { createFilePath } = require('gatsby-source-filesystem');
 
-exports.createPages = async ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators;
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions;
 
   const docPage = path.resolve('./src/templates/doc-page.js');
   const blogPost = path.resolve('./src/templates/blog-post.js');
@@ -51,8 +51,8 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
 
 const pad = n => (n >= 10 ? n : `0${n}`);
 
-exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
-  const { createNodeField } = boundActionCreators;
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions;
 
   if (node.internal.type === 'MarkdownRemark') {
     const value = createFilePath({ node, getNode });