Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Re-write Quick Start with Identity/Git Gateway #639

Merged
merged 1 commit into from Oct 11, 2017

Conversation

verythorough
Copy link
Contributor

@verythorough verythorough commented Sep 29, 2017

Addresses part of #600

- Summary
Updates the Quick Start doc to use Netlify Identity and Git Gateway.

- Test plan
You can check the GitHub rendering at
https://github.com/netlify/netlify-cms/blob/quick-start-identity/docs/quick-start.md
(Note that the links to Intro and Quick Start at the end of the doc will not work in this view, due to issues discussed in #511)

I'm also pushing a temporary branch to netlify-cms-www to test rendering on netlifycms.org:
https://quick-start-test--netlify-cms-www.netlify.com/docs/quick-start/

- Description for the changelog

Update the Quick Start doc to use Netlify Identity and Git Gateway.

- A picture of a cute animal (not mandatory but encouraged)
underwater-afghan-hound
OK, maybe not cute, but kind of funny? 馃槣

Copy link
Contributor

@erquhart erquhart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the delay, did this review a while ago and forgot to submit.

@@ -38,9 +14,9 @@ Hexo, Middleman | `/source`
Spike | `/views`

Notes:
- Gatsby treats the `static` folder more strictly and will not render the admin page as the other generators. You will have to make a [page component](https://www.gatsbyjs.org/docs/building-with-components/) containing the necessary scripts of the Netlify CMS app in the admin page. However, the `config.yml` is to be placed in the `static` folder in the same way.
*Gatsby treats the `static` folder more strictly and will not render the admin page as the other generators. You will have to make a [page component](https://www.gatsbyjs.org/docs/building-with-components/) containing the necessary scripts of the Netlify CMS app in the admin page. However, the `config.yml` file (described below) can be placed in the `static` folder as with other generators.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Asterisk should be removed (unless you meant to put asterisks on both side for emphasis).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This asterisk is supposed to refer to the asterisk next to Gatsby in the table above. However, the whole paragraph is going to end up conflicting with @tech4him1's recent edit.

@@ -60,14 +36,17 @@ The first file, `admin/index.html`, is the entry point for the Netlify CMS admin
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>

<link rel="stylesheet" href="https://unpkg.com/netlify-cms@~0.4/dist/cms.css" />
<!-- Include the styles for the Netlify CMS UI, after your own styles -->
<link rel="stylesheet" href="https://unpkg.com/netlify-cms@>0.5.0-beta.1/dist/cms.css" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both url's should be beta.10. Very soon to be plain 0.5.0, though!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The link as written will pick up the latest beta, so it's getting beta.10 right now.

</body>
</html>
```
*\*Note: The CMS links above pull from [unpkg](https://unpkg.com/#/), a service that serves [npm](https://www.npmjs.com/) packages over a CDN, with versioning built into the URL. In this example, we're pulling a beta version of the CMS (`@>0.5.0-beta.1`), in order to support Netlify Identity and Git Gateway. You will probably want to update these URLs after [version 0.5.0](https://github.com/netlify/netlify-cms/releases) is released.*
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

*\*?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first * triggers the italics, and the second is escaped so it actually displays. I suppose it might be a little clearer if I use _ for the italics.
(And, come to think of it, the visible asterisk isn't really appropriate here, because there's no referring asterisk. OK! I'll remove! :P )

`image` | file picker widget with drag-and-drop | file path saved as string, image uploaded to media folder
`number` | text input with `+` and `-` buttons | number
`markdown` | rich text editor with raw option | markdown-formatted string
As described above, the `widget` property specifies a built-in or custom UI widget for a given field. When a content editor enters a value into a widget, that value will be saved in the document front matter as the value for the `name` specified for that field. A full listing of available widgets can be found in the [Widgets doc](/docs/widgets).

Based on this example, you can go through the post types in your site and add the appropriate settings to your `config.yml` file. Each post type should be listed as a separate node under the `collections` field.

### Filter
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know how this made it back in, would you mind removing? Filtering shouldn't be in the quick start guide.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it ever left. And yeah, totally agree it doesn't belong here, but it's not documented anywhere else. I don't see a better place for it in the existing docs, so I suggest we leave it here for the next short while until we have a dedicated config doc.

}
</script>
```
*Note this script require ES6 and will not work on IE11. For legacy browser support, you'll need to use a transpiler like [Babel](https://babeljs.io/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"...For legacy browser support, use function expressions (function () {}) in place of the arrow functions (() => {}), or use a transpiler like...".

Also remove prepended asterisk.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if I just convert the code to use function expressions instead? Or do you think it's better to use the arrow functions and include the note?

Copy link
Contributor

@Benaiah Benaiah Oct 5, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say use arrows and include a note; I think we should default to ES6/ES2015/whatever-you-call-it-now in docs, since that's what we use in the code. Do you think it would be a good idea to include a link to another version of it in ES5, or is that not worth the risk of them not getting updated simultaneously in the future?

@verythorough
Copy link
Contributor Author

Removed the note about using a beta version, and made a few edits in response to feedback.

}
</script>
```
Note: This script requires modern JavaScript and will not work on IE11. For legacy browser support, use function expressions (`function () {}`) in place of the arrow functions (`() => {}`), or use a transpiler like [Babel](https://babeljs.io/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would change "This script" to "This example script" so that people realize that they can do it however they want, this is just an example that uses modern JS.

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
```

You'll need to add this to the `<head>` of your CMS index page at `/admin/index.html`, as well as the `<head>` of your site's main index page. Depending on how your site generator is set up, this may mean you need to add it to the default template, or to a "partial" ir "include" template. If you can find where the site stylesheet is linked, that's probably the right place. Alternatively, you can include the script in your site using Netlify's [Script Injection](https://www.netlify.com/docs/inject-analytics-snippets/) feature.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"partial" ir "include" template -- ir should be or

@verythorough
Copy link
Contributor Author

Updated.

@tech4him1 thanks for the catch!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants