chore(netlify-cms): update for v2, add standalone build system (#6356)

* chore(netlify-cms): update for v2, add standalone build system * Restore yarn.lock * Format * Update yarn.lock * Add react/react-dom as devDependencies
gatsbyjs · Jul 17, 2018 · ddc9b80 · ddc9b80
1 parent 5669439
commit ddc9b80
Show file tree

Hide file tree

Showing 9 changed files with 448 additions and 888 deletions.
diff --git a/docs/docs/gatsby-starters.md b/docs/docs/gatsby-starters.md
@@ -825,16 +825,15 @@ gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog#v2
   - Support multi-language url routes within a single page component. That means you don't have to create separate pages such as `pages/en/index.js` or `pages/ko/index.js`.
 
   - Based on [gatsby-starter-default](https://github.com/gatsbyjs/gatsby-starter-default) with least modification.
-  
+
 - [devblog](https://github.com/RyanFitzgerald/devblog)
   [(demo)](https://ryanfitzgerald.github.io/devblog/)
 
   Features:
 
   - Minimalistic blog for developers
-  - Based on ```gatsby-starter-blog```
+  - Based on `gatsby-starter-blog`
   - Server-side rendering
   - Syntax highlighting via PrismJS
   - Styled Components
   - Pagination
-
diff --git a/packages/gatsby-plugin-netlify-cms/README.md b/packages/gatsby-plugin-netlify-cms/README.md
@@ -10,8 +10,7 @@ site](https://netlifycms.org).
 ## Install
 
 ```shell
-npm install --save netlify-cms
-npm install --save gatsby-plugin-netlify-cms
+npm install --save netlify-cms gatsby-plugin-netlify-cms
 ```
 
 ## How to use
@@ -26,23 +25,32 @@ Then add your Netlify CMS [configuration
 file](https://www.netlifycms.org/docs/add-to-your-site/#configuration) in
 `static/admin/config.yml`.
 
-## Configuration
+## Options
+
+Netlify CMS can be configured via the plugin options below. You can learn
+about how to pass options to plugins in the [Gatsby
+docs](https://www.gatsbyjs.org/docs/plugins/#how-to-use-gatsby-plugins).
+
+### `modulePath`
+
+(_optional_, default: `undefined`)
 
 If you need to customize Netlify CMS, e.g. registering [custom
 widgets](https://www.netlifycms.org/docs/custom-widgets/#registerwidget) or
 styling the [preview
 pane](https://www.netlifycms.org/docs/customization/#registerpreviewstyle),
-you'll need to do so in a js module and provide Gatsby with the path to your
-module. In `gatsby-config.js`, instead of simply adding the name of the plugin
-to the `plugins` array, you'll need to use an object:
+you'll need to do so in a JavaScript module and provide Gatsby with the path to
+your module via the `modulePath` option:
 
 ```javascript
 plugins: [
   {
     resolve: `gatsby-plugin-netlify-cms`,
     options: {
-      // One convention is to place your Netlify CMS customization code in a
-      // `src/cms` directory.
+      /**
+       * One convention is to place your Netlify CMS customization code in a
+       * `src/cms` directory.
+       */
       modulePath: `${__dirname}/src/cms/cms.js`,
     },
   },
@@ -52,18 +60,88 @@ plugins: [
 The js module might look like this:
 
 ```javascript
-// Your module must at least include these three imports
-import React from "react"
-import CMS from "netlify-cms"
-import "netlify-cms/dist/cms.css"
-
-// Let's say you've created widget and preview components for a custom image
-// gallery widget in separate files
-import ImageGalleryWidget from "./image-gallery-widget.js"
-import ImageGalleryPreview from "./image-gallery-preview.js"
-
-// Register the imported widget:
-CMS.registerWidget("image-gallery", ImageGalleryWidget, ImageGalleryPreview)
+import CMS from `netlify-cms`
+
+/**
+ * Let's say you've created widget and preview components for a custom image
+ * gallery widget in separate files:
+ */
+import ImageGalleryWidget from `./image-gallery-widget.js`
+import ImageGalleryPreview from `./image-gallery-preview.js`
+
+/**
+ * Register the imported widget:
+ */
+CMS.registerWidget(`image-gallery`, ImageGalleryWidget, ImageGalleryPreview)
+```
+
+### `enableIdentityWidget`
+
+(_optional_, default: `true`)
+
+`enableIdentityWidget` is `true` by default, allowing [Netlify
+Identity](https://www.netlify.com/docs/identity/) to be used without
+configuration, but you may need to disable it in some cases, such as when using
+a Netlify CMS backend that conflicts. This is currently known to be the case
+when using the GitLab backend, but only when using implicit OAuth.
+
+```javascript
+plugins: [
+  {
+    resolve: `gatsby-plugin-netlify-cms`,
+    options: {
+      enableIdentityWidget: true,
+    },
+  },
+]
+```
+
+### `stylesPath`
+
+(_optional_, default: `undefined`)
+
+Gatsby template components can be used as [preview
+templates](https://www.netlifycms.org/docs/customization/) in Netlify CMS. To
+apply your site styles to the preview pane as well, you would normally register
+a [custom
+stylesheet](https://www.netlifycms.org/docs/customization/#registerpreviewstyle),
+but your Gatsby style source may be Sass or CSS modules, and can't be passed to
+Netlify CMS as is. The `stylesPath` accepts a path or an array of paths to your
+raw styles. The styles are built using the same Webpack and Babel configuration
+that your Gatsby site uses, and the CSS output is automatically registered and
+used in the preview pane.
+
+### `publicPath`
+
+(_optional_, default: `"admin"`)
+
+Customize the path to Netlify CMS on your Gatsby site.
+
+### `htmlTitle`
+
+(_optional_, default: `Content Manager`)
+
+Customize the value of the `title` tag in your CMS HTML (shows in the browser
+bar).
+
+## Example
+
+Here is the plugin with example values for all options (note that no option is
+required):
+
+```javascript
+plugins: [
+  {
+    resolve: `gatsby-plugin-netlify-cms`,
+    options: {
+      modulePath: `path/to/custom/script.js`, // default: undefined
+      stylesPath: `path/to/styles.sass`, // default: undefined
+      enableIdentityWidget: `true`,
+      publicPath: `admin`,
+      htmlTitle: `Content Manager`,
+    },
+  },
+]
 ```
 
 ## Support

diff --git a/packages/gatsby-plugin-netlify-cms/package.json b/packages/gatsby-plugin-netlify-cms/package.json
@@ -7,17 +7,19 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@babel/runtime": "7.0.0-beta.51",
-    "html-webpack-include-assets-plugin": "^1.0.4",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "^3.2.0",
+    "lodash": "^4.17.10",
     "mini-css-extract-plugin": "^0.4.1",
-    "netlify-cms": "^1.3.5",
-    "netlify-identity-widget": "^1.4.11"
+    "netlify-identity-widget": "^1.4.11",
+    "webpack": "^4.16.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.0.0-beta.51",
-    "@babel/core": "7.0.0-beta.51",
-    "cross-env": "^5.1.4"
+    "@babel/cli": "^7.0.0-beta.53",
+    "@babel/core": "^7.0.0-beta.53",
+    "cross-env": "^5.1.3",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms#readme",
   "keywords": [
@@ -30,8 +32,8 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "gatsby": ">2.0.0-alpha",
-    "netlify-cms": "^1.0.0"
+    "gatsby": "^2.0.0-beta.29",
+    "netlify-cms": "^1.9.3"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-netlify-cms",
   "scripts": {

diff --git a/packages/gatsby-plugin-netlify-cms/src/cms-identity.js b/packages/gatsby-plugin-netlify-cms/src/cms-identity.js
@@ -0,0 +1,4 @@
+import netlifyIdentityWidget from "netlify-identity-widget"
+
+window.netlifyIdentity = netlifyIdentityWidget
+netlifyIdentityWidget.init()
diff --git a/packages/gatsby-plugin-netlify-cms/src/cms.js b/packages/gatsby-plugin-netlify-cms/src/cms.js
@@ -1,8 +1,7 @@
-/* eslint-disable no-unused-vars */
-/* eslint-env browser */
 import CMS from "netlify-cms"
 import "netlify-cms/dist/cms.css"
-import netlifyIdentityWidget from "netlify-identity-widget"
 
-window.netlifyIdentity = netlifyIdentityWidget
-netlifyIdentityWidget.init()
+// eslint-disable-next-line no-undef
+if (NETLIFY_CMS_PREVIEW_STYLES_SET) {
+  CMS.registerPreviewStyle(`styles.css`)
+}
diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-browser.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-browser.js
@@ -1,12 +1,14 @@
 import netlifyIdentityWidget from "netlify-identity-widget"
 
-exports.onInitialClientRender = () => {
-  netlifyIdentityWidget.on(`init`, user => {
-    if (!user) {
-      netlifyIdentityWidget.on(`login`, () => {
-        document.location.href = `/admin/`
-      })
-    }
-  })
-  netlifyIdentityWidget.init()
+exports.onInitialClientRender = (_, { enableIdentityWidget }) => {
+  if (enableIdentityWidget) {
+    netlifyIdentityWidget.on(`init`, user => {
+      if (!user) {
+        netlifyIdentityWidget.on(`login`, () => {
+          document.location.reload()
+        })
+      }
+    })
+    netlifyIdentityWidget.init()
+  }
 }