docs: convert website from postcss to emotion (#2068)
This commit is contained in:
committed by
Shawn Erquhart
parent
7b0838dfef
commit
3d474b1944
@ -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)
|
||||
```
|
||||
|
@ -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)
|
||||
|
||||
|
@ -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 })
|
||||
```
|
||||
|
||||
|
@ -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.
|
||||
|
@ -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">
|
||||
```
|
||||
|
||||
|
@ -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}}
|
||||
|
Reference in New Issue
Block a user