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

This commit is contained in:
Zeb Pykosz
2020-01-23 21:55:18 -05:00
committed by Shawn Erquhart
parent 7b0838dfef
commit 3d474b1944
69 changed files with 7769 additions and 6834 deletions

View File

@ -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)
```

View File

@ -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,12 +44,11 @@ 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
@ -58,7 +56,6 @@ The GitHub backend supports [deploy preview links](../deploy-preview-links). Net
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)

View File

@ -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,7 +234,6 @@ init()
* your `config.yml` can be missing its backend property, allowing you
* to set this property at runtime.
*/
init({
config: {
backend: {
@ -247,7 +241,6 @@ init({
},
},
})
/**
* 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 })
```

View File

@ -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.

View File

@ -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">
```

View File

@ -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,7 +90,6 @@ 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}}
@ -99,9 +97,7 @@ collections:
- { 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}}