gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(fix): widget example code layout on Site (#1606)

Browse Source 
* Fix widget example layout

* Stop running MarkDown through Prettier.
This commit is contained in:
Tony Alves 2018-08-14 07:37:07 -07:00 committed by Caleb
parent 05622b8eee
commit 583377bc92
16 changed files with 136 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -25,7 +25,7 @@
"dryrun": "lerna publish --skip-npm --skip-git",
"publish": "run-s bootstrap dryrun build && git checkout . && lerna publish",
"format": "run-s \"lint:css -- --fix --quiet\" \"lint:js -- --fix --quiet\" \"format:prettier -- --write\"",
"format:prettier": "prettier \"{{packages,scripts,website}/**/,}*.{js,css,md,json,yml,yaml}\"",
"format:prettier": "prettier \"{{packages,scripts,website}/**/,}*.{js,css,json,yml,yaml}\"",
"lint": "run-p -c --aggregate-output lint:*",
"lint-quiet": "run-p -c --aggregate-output \"lint:* -- --quiet\"",
"lint:css": "stylelint --ignore-path .gitignore \"{packages/**/*.{css,js},website/**/*.css}\"",

7
website/content/docs/widgets/boolean.md
View File

@ -11,7 +11,6 @@ The boolean widget translates a toggle switch input to a true/false value.
- **Options:**
- `default`: accepts `true` or `false`; defaults to `false`
- **Example:**
```yaml
- { label: 'Draft', name: 'draft', widget: 'boolean', default: true }
```
```yaml
- { label: 'Draft', name: 'draft', widget: 'boolean', default: true }
```

15
website/content/docs/widgets/date.md
View File

@ -12,11 +12,10 @@ The date widget translates a date picker input to a date string. For saving date
- `default`: accepts a date string, or an empty string to accept blank input; otherwise defaults to current date
- `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
- **Example:**
```yaml
- label: 'Birthdate'
name: 'birthdate'
widget: 'date'
default: ''
format: 'MMM Do YY'
```
```yaml
- label: 'Birthdate'
name: 'birthdate'
widget: 'date'
default: ''
format: 'MMM Do YY'
```

15
website/content/docs/widgets/datetime.md
View File

@ -12,11 +12,10 @@ The datetime widget translates a datetime picker to a datetime string. For savin
- `default`: accepts a datetime string, or an empty string to accept blank input; otherwise defaults to current datetime
- `format`: optional; accepts Moment.js [tokens](https://momentjs.com/docs/#/parsing/string-format/); defaults to raw Date object (if supported by output format)
- **Example:**
```yaml
- label: 'Start time'
name: 'start'
widget: 'datetime'
default: ''
format: 'LLL'
```
```yaml
- label: 'Start time'
name: 'start'
widget: 'datetime'
default: ''
format: 'LLL'
```

13
website/content/docs/widgets/file.md
View File

@ -11,10 +11,9 @@ The file widget allows editors to upload a file or select an existing one from t
- **Options:**
- `default`: accepts a file path string; defaults to null
- **Example:**
```yaml
- label: 'Manual PDF'
name: 'manual_pdf'
widget: 'file'
default: '/uploads/general-manual.pdf'
```
```yaml
- label: 'Manual PDF'
name: 'manual_pdf'
widget: 'file'
default: '/uploads/general-manual.pdf'
```

7
website/content/docs/widgets/hidden.md
View File

@ -11,7 +11,6 @@ Hidden widgets do not display in the UI. In folder collections that allow users
- **Options:**
- `default`: accepts any valid data type; recommended for collections that allow adding new items
- **Example:**
```yaml
- { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' }
```
```yaml
- { label: 'Layout', name: 'layout', widget: 'hidden', default: 'blog' }
```

13
website/content/docs/widgets/image.md
View File

@ -11,10 +11,9 @@ The image widget allows editors to upload an image or select an existing one fro
- **Options:**
- `default`: accepts a file path string; defaults to null
- **Example:**
```yaml
- label: 'Featured Image'
name: 'thumbnail'
widget: 'image'
default: '/uploads/chocolate-dogecoin.jpg'
```
```yaml
- label: 'Featured Image'
name: 'thumbnail'
widget: 'image'
default: '/uploads/chocolate-dogecoin.jpg'
```

13
website/content/docs/widgets/index.md
View File

@ -18,12 +18,11 @@ The following options are available on all fields:
- `pattern`: add field validation by specifying a list with a [regex pattern](https://regexr.com/) and an error message; more extensive validation can be achieved with [custom widgets](https://www.netlifycms.org/docs/custom-widgets/#advanced-field-validation)
- **Example:**
```yaml
- label: 'Title'
name: 'title'
widget: 'string'
pattern: ['.{12,}', 'Must have at least 12 characters']
```
```yaml
- label: 'Title'
name: 'title'
widget: 'string'
pattern: ['.{12,}', 'Must have at least 12 characters']
```
## Default widgets

73
website/content/docs/widgets/list.md
View File

@ -14,46 +14,39 @@ The list widget allows you to create a repeatable item in the UI which saves as
- `field`: a single widget field to be repeated
- `fields`: a nested list of multiple widget fields to be included in each repeatable iteration
- **Example** (`field`/`fields` not specified):
```yaml
- label: 'Tags'
name: 'tags'
widget: 'list'
default: ['news']
```
```yaml
- label: 'Tags'
name: 'tags'
widget: 'list'
default: ['news']
```
- **Example** (`allow_add` marked `false`):
```yaml
- label: 'Tags'
name: 'tags'
widget: 'list'
allow_add: false
default: ['news']
```
```yaml
- label: 'Tags'
name: 'tags'
widget: 'list'
allow_add: false
default: ['news']
```
- **Example** (with `field`):
```yaml
- label: 'Gallery'
name: 'galleryImages'
widget: 'list'
field:
- { label: Image, name: image, widget: image }
```
```yaml
- label: 'Gallery'
name: 'galleryImages'
widget: 'list'
field:
- { label: Image, name: image, widget: image }
```
- **Example** (with `fields`):
```yaml
- label: 'Testimonials'
name: 'testimonials'
widget: 'list'
fields:
- { label: Quote, name: quote, widget: string, default: 'Everything is awesome!' }
- label: Author
name: author
widget: object
fields:
- { label: Name, name: name, widget: string, default: 'Emmet' }
- { label: Avatar, name: avatar, widget: image, default: '/img/emmet.jpg' }
```
```yaml
- label: 'Testimonials'
name: 'testimonials'
widget: 'list'
fields:
- { label: Quote, name: quote, widget: string, default: 'Everything is awesome!' }
- label: Author
name: author
widget: object
fields:
- { label: Name, name: name, widget: string, default: 'Emmet' }
- { label: Avatar, name: avatar, widget: image, default: '/img/emmet.jpg' }
```

13
website/content/docs/widgets/markdown.md
View File

@ -14,11 +14,8 @@ _Please note:_ in case you want to use your markdown editor to fill a markdown's
- `default`: accepts markdown content
- `buttons`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`.
- **Example:**
```yaml
- { label: 'Blog post content', name: 'body', widget: 'markdown' }
```
This would render as:
![Markdown widget example](/img/widgets-markdown.png)
```yaml
- { label: 'Blog post content', name: 'body', widget: 'markdown' }
```
This would render as:
![Markdown widget example](/img/widgets-markdown.png)

19
website/content/docs/widgets/number.md
View File

@ -14,13 +14,12 @@ The number widget uses an HTML number input, saving the value as a string, integ
- `min`: accepts a number for minimum value accepted; unset by default
- `max`: accepts a number for maximum value accepted; unset by default
- **Example:**
```yaml
- label: 'Puppy Count'
name: 'puppies'
widget: 'number'
default: 2
valueType: 'int'
min: 1
max: 101
```
```yaml
- label: 'Puppy Count'
name: 'puppies'
widget: 'number'
default: 2
valueType: 'int'
min: 1
max: 101
```

41
website/content/docs/widgets/object.md
View File

@ -12,24 +12,23 @@ The object widget allows you to group multiple widgets together, nested under a
- `default`: you can set defaults within each sub-field's configuration
- `fields`: (**required**) a nested list of widget fields to include in your widget
- **Example:**
```yaml
- label: 'Profile'
name: 'profile'
widget: 'object'
fields:
- { label: 'Public', name: 'public', widget: 'boolean', default: true }
- { label: 'Name', name: 'name', widget: 'string' }
- label: 'Birthdate'
name: 'birthdate'
widget: 'date'
default: ''
format: 'MM/DD/YYYY'
- label: 'Address'
name: 'address'
widget: 'object'
fields:
- { label: 'Street Address', name: 'street', widget: 'string' }
- { label: 'City', name: 'city', widget: 'string' }
- { label: 'Postal Code', name: 'post-code', widget: 'string' }
```
```yaml
- label: 'Profile'
name: 'profile'
widget: 'object'
fields:
- { label: 'Public', name: 'public', widget: 'boolean', default: true }
- { label: 'Name', name: 'name', widget: 'string' }
- label: 'Birthdate'
name: 'birthdate'
widget: 'date'
default: ''
format: 'MM/DD/YYYY'
- label: 'Address'
name: 'address'
widget: 'object'
fields:
- { label: 'Street Address', name: 'street', widget: 'string' }
- { label: 'City', name: 'city', widget: 'string' }
- { label: 'Postal Code', name: 'post-code', widget: 'string' }
```

20
website/content/docs/widgets/relation.md
View File

@ -15,15 +15,13 @@ The relation widget allows you to reference items from another collection. It pr
- `searchFields`: (**required**) list of one or more names of fields in the referenced collection to search for the typed value
- `valueField`: (**required**) name of the field from the referenced collection whose value will be stored for the relation
- **Example** (assuming a separate "authors" collection with "name" and "twitterHandle" fields):
```yaml
- label: 'Post Author'
name: 'author'
widget: 'relation'
collection: 'authors'
searchFields: ['name', 'twitterHandle']
valueField: 'name'
displayFields: ['twitterHandle', 'followerCount']
```
```yaml
- label: 'Post Author'
name: 'author'
widget: 'relation'
collection: 'authors'
searchFields: ['name', 'twitterHandle']
valueField: 'name'
displayFields: ['twitterHandle', 'followerCount']
```
The generated UI input will search the authors collection by name and twitterHandle, and display each author's handle and follower count. On selection, the author name will be saved for the field.

33
website/content/docs/widgets/select.md
View File

@ -14,22 +14,19 @@ The select widget allows you to pick a single string value from a dropdown menu.
- string values: the label displayed in the dropdown is the value saved in the file
- object with `label` and `value` fields: the label displays in the dropdown; the value is saved in the file
- **Example** (options as strings):
```yaml
- label: 'Align Content'
name: 'align'
widget: 'select'
options: ['left', 'center', 'right']
```
```yaml
- label: 'Align Content'
name: 'align'
widget: 'select'
options: ['left', 'center', 'right']
```
- **Example** (options as objects):
```yaml
- label: 'City'
name: 'airport-code'
widget: 'select'
options:
- { label: 'Chicago', value: 'ORD' }
- { label: 'Paris', value: 'CDG' }
- { label: 'Tokyo', value: 'HND' }
```
```yaml
- label: 'City'
name: 'airport-code'
widget: 'select'
options:
- { label: 'Chicago', value: 'ORD' }
- { label: 'Paris', value: 'CDG' }
- { label: 'Tokyo', value: 'HND' }
```

7
website/content/docs/widgets/string.md
View File

@ -11,7 +11,6 @@ The string widget translates a basic text input to a string value. For larger te
- **Options:**
- `default`: accepts a string; defaults to an empty string
- **Example:**
```yaml
- { label: 'Title', name: 'title', widget: 'string' }
```
```yaml
- { label: 'Title', name: 'title', widget: 'string' }
```

7
website/content/docs/widgets/text.md
View File

@ -11,7 +11,6 @@ The text widget takes a multiline text field and saves it as a string. For short
- **Options:**
- `default`: accepts a string; defaults to an empty string
- **Example:**
```yaml
- { label: 'Description', name: 'description', widget: 'text' }
```
```yaml
- { label: 'Description', name: 'description', widget: 'text' }
```