convert website from hugo to gatsby (#1369)

This commit is contained in:
Zeb Pykosz
2018-07-25 07:47:26 -04:00
committed by Shawn Erquhart
parent d6c03707d8
commit 04c44518b2
113 changed files with 7441 additions and 2771 deletions

View File

@ -0,0 +1,17 @@
---
label: "Boolean"
target: boolean
---
The boolean widget translates a toggle switch input to a true/false value.
- **Name:** `boolean`
- **UI:** toggle switch
- **Data type:** boolean
- **Options:**
- `default`: accepts `true` or `false`; defaults to `false`
- **Example:**
```yaml
- {label: "Draft", name: "draft", widget: "boolean", default: true}
```

View File

@ -0,0 +1,22 @@
---
label: "Date"
target: date
---
The date widget translates a date picker input to a date string. For saving date and time together, use the datetime widget.
- **Name:** `date`
- **UI:** date picker
- **Data type:** Moment.js-formatted date string
- **Options:**
- `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"
```

View File

@ -0,0 +1,22 @@
---
label: "DateTime"
target: datetime
---
The datetime widget translates a datetime picker to a datetime string. For saving the date only, use the date widget.
- **Name:** `datetime`
- **UI:** datetime picker
- **Data type:** Moment.js-formatted datetime string
- **Options:**
- `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"
```

View File

@ -0,0 +1,20 @@
---
label: "File"
target: file
---
The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string.
- **Name:** `file`
- **UI:** file picker button opens media gallery
- **Data type:** file path string, based on `media_folder`/`public_folder` configuration
- **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"
```

View File

@ -0,0 +1,17 @@
---
label: "Hidden"
target: hidden
---
Hidden widgets do not display in the UI. In folder collections that allow users to create new items, you will often want to set a default for hidden fields, so they will be set without requiring an input.
- **Name:** `hidden`
- **UI:** none
- **Data type:** any valid data type
- **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"}
```

View File

@ -0,0 +1,20 @@
---
label: "Image"
target: image
---
The image widget allows editors to upload an image or select an existing one from the media library. The path to the image file will be saved to the field as a string.
- **Name:** `image`
- **UI:** file picker button opens media gallery allowing image files (jpg, jpeg, webp, gif, png, bmp, tiff, svg) only; displays selected image thumbnail
- **Data type:** file path string, based on `media_folder`/`public_folder` configuration
- **Options:**
- `default`: accepts a file path string; defaults to null
- **Example:**
```yaml
- label: "Featured Image"
name: "thumbnail"
widget: "image"
default: "/uploads/chocolate-dogecoin.jpg"
```

View File

@ -0,0 +1,29 @@
---
title: Widgets
weight: 30
group: reference
---
Widgets define the data type and interface for entry fields. Netlify CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. Were always adding new widgets, and you can also [create your own](https://www.netlifycms.org/docs/custom-widgets)!
Widgets are specified as collection fields in the Netlify CMS `config.yml` file. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://cms-demo.netlify.com). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/netlify/netlify-cms/blob/master/example/config.yml#L60) to see how each field was configured.
## Common widget options
The following options are available on all fields:
- `required`: specify as `false` to make a field optional; defaults to `true`
- `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"]
```
## Default widgets

View File

@ -0,0 +1,59 @@
---
label: "List"
target: list
---
The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. map a user-provided string with a comma delimiter into a list. You can choose any widget as a child of a list widget—even other lists.
- **Name:** `list`
- **UI:** if `fields` is specified, field containing a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets; if unspecified, a text input for entering comma-separated values
- **Data type:** list of widget values
- **Options:**
- `default`: if `fields` is specified, declare defaults on the child widgets; if not, you may specify a list of strings to populate the text field
- `allow_add`: if added and labeled `false`, button to add additional widgets disapears
- `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"]
```
- **Example** (`allow_add` marked `false`):
```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}
```
- **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"}
```

View File

@ -0,0 +1,25 @@
---
label: "Markdown"
target: markdown
---
The markdown widget provides a full fledged text editor - which is based on [slate](https://github.com/ianstormtaylor/slate) - that allows users to format text with features such as headings and blockquotes. Users are also allowed to write in markdown by simply flipping a switch.
*Please note:* in case you want to use your markdown editor to fill a markdown's file content after the frontmatter, you'll have name the field as `body` so then the CMS can recognize it and save the file accordingly.
- **Name:** `markdown`
- **UI:** full text editor
- **Data type:** markdown
- **Options:**
- `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)

View File

@ -0,0 +1,26 @@
---
label: "Number"
target: number
---
The number widget uses an HTML number input, saving the value as a string, integer, or floating point number.
- **Name:** `number`
- **UI:** HTML [number input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)
- **Data type:** string by default; configured by `valueType` option
- **Options:**
- `default`: accepts string or number value; defaults to empty string
- `valueType`: accepts `int` or `float`; any other value results in saving as a string
- `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
```

View File

@ -0,0 +1,35 @@
---
label: "Object"
target: object
---
The object widget allows you to group multiple widgets together, nested under a single field. You can choose any widget as a child of an object widget—even other objects.
- **Name:** `object`
- **UI:** a field containing one or more child widgets
- **Data type:** list of child widget values
- **Options:**
- `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"}
```

View File

@ -0,0 +1,28 @@
---
label: "Relation"
target: relation
---
The relation widget allows you to reference items from another collection. It provides a search input with a list of entries from the collection you're referencing, and the list automatically updates with matched entries based on what you've typed.
- **Name:** `relation`
- **UI:** text input with search result dropdown
- **Data type:** data type of the value pulled from the related collection item
- **Options:**
- `default`: accepts any widget data type; defaults to an empty string
- `collection`: (**required**) name of the collection being referenced (string)
- `displayFields`: list of one or more names of fields in the referenced collection that will render in the autocomplete menu of the control. Defaults to `valueField`.
- `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"]
```
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.

View File

@ -0,0 +1,35 @@
---
label: "Select"
target: select
---
The select widget allows you to pick a single string value from a dropdown menu.
- **Name:** `select`
- **UI:** HTML select input
- **Data type:** string
- **Options:**
- `default`: accepts a string; defaults to an empty string
- `options`: (**required**) a list of options for the dropdown menu; can be listed in two ways:
- 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"]
```
- **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" }
```

View File

@ -0,0 +1,17 @@
---
label: "String"
target: string
---
The string widget translates a basic text input to a string value. For larger textarea inputs, use the text widget.
- **Name:** `string`
- **UI:** text input
- **Data type:** string
- **Options:**
- `default`: accepts a string; defaults to an empty string
- **Example:**
```yaml
- {label: "Title", name: "title", widget: "string"}
```

View File

@ -0,0 +1,18 @@
---
label: "Text"
target: text
---
The text widget takes a multiline text field and saves it as a string. For shorter text inputs, use the string widget.
- **Name:** `text`
- **UI:** HTML textarea
- **Data type:** string
- **Options:**
- `default`: accepts a string; defaults to an empty string
- **Example:**
```yaml
- {label: "Description", name: "description", widget: "text"}
```