Docs: move Fields to own pages

content/docs/architecture.md

@@ -44,7 +44,7 @@ For a file persisted online, the `AssetProxy` only keeps information about its U
 
 The `AssetProxy` object can be used directly inside a media tag (such as `<img>`), as it will always return something that can be used by the media tag to render correctly (either the URI for the online file or a single-use blob).
 
-## Components structure and Workflows
+## Components Structure and Workflows
 Components are separated into two main categories: **Container components** and **Presentational components**.
 
 ### Entry Editing
@@ -65,7 +65,7 @@ Both control and preview widgets receive a `getAsset` selector via props. Displa
 The actual persistence of the content and medias inserted into the control component is delegated to the backend implementation. The backend will be called with the updated values and a list of `assetProxy` objects for each field of the entry, and should return a promise that can resolve into the persisted entry object and the list of the persisted media URIs.
 
 
-## Editorial Workflow implementation
+## Editorial Workflow Implementation
 
 Instead of adding logic to `CollectionPage` and `EntryPage`, the Editorial Workflow is implemented as Higher Order Components, adding UI and dispatching additional actions.
 

content/docs/azure-backend.md

@@ -1,5 +1,5 @@
 ---
-group: Accounts
+group: Backends
 weight: 20
 title: Azure
 ---

content/docs/backends-overview.md

@@ -1,5 +1,5 @@
 ---
-group: Accounts
+group: Backends
 weight: 1
 title: Overview
 ---

content/docs/bitbucket-backend.md

@@ -1,5 +1,5 @@
 ---
-group: Accounts
+group: Backends
 weight: 20
 title: Bitbucket
 ---

content/docs/custom-widgets.md

@@ -1,8 +1,9 @@
 ---
-group: Fields
+group: Customization
 weight: 20
 title: Creating Custom Widgets
 ---
+
 Decap CMS exposes a `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Decap CMS as an npm module. The available widget extension methods are:
 
 * **registerWidget:** registers a custom widget.

content/docs/deploy-preview-links.md

@@ -1,6 +1,6 @@
 ---
 group: Workflow
-weight: 10
+weight: 20
 title: Deploy Preview Links
 ---
 When using the editorial workflow, content editors can create and save content without publishing it

content/docs/editorial-workflows.md

@@ -1,10 +1,8 @@
 ---
 group: Workflow
-weight: 20
-title: Editorial Workflows
+weight: 10
+title: Editorial Workflow
 ---
-
-
 By default, saving a post in the CMS interface pushes a commit directly to the publication branch specified in `backend`. However, you also have the option to edit the [Publish Mode](../configuration-options/#publish-mode), which adds an interface for drafting, reviewing, and approving posts. To do this, add the following line to your Decap CMS `config.yml`:
 
 ```yaml

content/docs/external-oauth-clients.md

@@ -1,5 +1,5 @@
 ---
-group: Accounts
+group: Backends
 weight: 60
 title: External OAuth Clients
 ---

content/docs/git-gateway-backend.md

@@ -1,7 +1,7 @@
 ---
 title: Git Gateway
 weight: 10
-group: Accounts
+group: Backends
 ---
 
 [Git Gateway](https://github.com/netlify/git-gateway) is a Netlify open source project that allows you to add editors to your site CMS without giving them direct write access to your GitHub or GitLab repository. (For Bitbucket repositories, use the [Bitbucket backend](../bitbucket-backend/) instead.)

content/docs/gitea-backend.md

@@ -1,6 +1,6 @@
 ---
 title: Gitea / Forgejo
-group: Accounts
+group: Backends
 weight: 25
 ---
 

content/docs/github-backend.md

@@ -1,5 +1,5 @@
 ---
-group: Accounts
+group: Backends
 weight: 30
 title: GitHub
 ---

content/docs/gitlab-backend.md

@@ -1,6 +1,6 @@
 ---
 title: GitLab
-group: Accounts
+group: Backends
 weight: 40
 ---
 

content/docs/i18n.md

@@ -1,7 +1,7 @@
 ---
 group: Configuration
 weight: 10
-title: i18n Support
+title: Internationalization (i18n)
 ---
 
 The CMS can provide a side by side interface for authoring content in multiple languages.

content/docs/open-authoring.md

@@ -1,6 +1,6 @@
 ---
 group: Workflow
-weight: 20
+weight: 30
 title: Open Authoring
 ---
 

content/docs/test-backend.md

@@ -1,7 +1,7 @@
 ---
-title: Test
-group: Accounts
-weight: 50
+title: Test Backend
+group: Backends
+weight: 80
 ---
 
 You can use the `test-repo` backend to try out Decap CMS without connecting to a Git repo. With this backend, you can write and publish content normally, but any changes will disappear when you reload the page. This backend powers the Decap CMS [demo site](https://demo.decapcms.org/).

content/docs/variable-type-widgets.md

@@ -1,8 +1,8 @@
 ---
 title: Variable Type Widgets
-label: "Variable Type Widgets"
+label: Variable Type Widgets
 group: Fields
-weight: 30
+weight: 20
 ---
 
 Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Decap CMS.
@@ -15,13 +15,13 @@ To use variable types in the list widget, update your field configuration as fol
 2. Each field definition under `types` must use the `object` widget (this is the default value for
    `widget`).
 
-### Additional list widget options
+## Additional List Widget Options
 
 * `types`: a nested list of object widgets. All widgets must be of type `object`. Every object widget may define different set of fields.
 * `typeKey`: the name of the field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if `types` is not defined. Default is `type`.
 * `summary`: allows customization of a collapsed list item object in a similar way to a [collection summary](/docs/configuration-options/?#summary)
 
-### Example Configuration
+## Example Configuration
 
 The example configuration below imagines a scenario where the editor can add two "types" of content,
 either a "carousel" or a "spotlight". Each type has a unique name and set of fields.
@@ -51,7 +51,7 @@ either a "carousel" or a "spotlight". Each type has a unique name and set of fie
         - { label: Text, name: text, widget: text, default: 'Hello World' }
 ```
 
-### Example Output
+## Example Output
 
 The output for the list widget will be an array of objects, and each object will have a `type` key
 with the name of the type used for the list item. The `type` key name can be customized via the

content/docs/widgets-list.md

@@ -0,0 +1,5 @@
+---
+title: List of Widgets
+group: Fields
+weight: 15
+---

content/docs/widgets.md → content/docs/widgets-overview.md

@@ -1,5 +1,5 @@
 ---
-title: Widgets
+title: About Fields and Widgets
 group: Fields
 weight: 10
 ---
@@ -10,7 +10,7 @@ Widgets are specified as collection fields in the Decap CMS `config.yml` file. N
 
 To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://demo.decapcms.org). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/decaporg/decap-cms/blob/master/dev-test/config.yml) to see how each field was configured.
 
-## Common widget options
+## Common Widget Options
 
 The following options are available on all fields:
 
@@ -24,5 +24,3 @@ The following options are available on all fields:
     widget: "string"
     pattern: ['.{12,}', "Must have at least 12 characters"]
   ```
-
-## Default widgets

content/docs/widgets/boolean.md

@@ -1,16 +1,29 @@
 ---
-title: boolean
-label: "Boolean"
+title: Boolean
+label: Boolean
+group: Widgets
+weight: 20
 ---
 
 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` when `required` is set to `false`
-- **Example:**
-    ```yaml
-    - {label: "Draft", name: "draft", widget: "boolean", default: true}
-    ```
+**Name:** `boolean`
+
+**UI:** toggle switch
+
+**Data type:** boolean
+
+**Options**
+
+- `default`: accepts `true` or `false`; defaults to `false` when `required` is set to `false`
+
+**Example config**
+
+```yaml
+- {label: "Draft", name: "draft", widget: "boolean", default: true}
+```
+<br>
+
+**Result**
+
+![toggle switch](/img/widget-boolean.png)

content/docs/widgets/code.md

@@ -1,22 +1,35 @@
 ---
-title: code
-label: 'Code'
+title: Code
+label: Code
+group: Widgets
+weight: 30
 ---
 
 The code widget provides a code editor (powered by [Codemirror](https://codemirror.net)) with optional syntax awareness. Can output the raw code value or an object with the selected language and the raw code value.
 
-- **Name:** `code`
-- **UI:** code editor
-- **Data type:** string
-- **Options:**
-  - `default_language`: optional; default language to use
-  - `allow_language_selection`: optional; defaults to `false`: allows syntax to be changed
-  - `keys`: optional; sets key names for code and lang if outputting an object; defaults to `{ code: 'code', lang: 'lang' }`
-  - `output_code_only`: set to `true` to output the string value only, defaults to `false`
-
-- **Example:**
-  ```yaml
-  - label: 'Code'
-    name: 'code'
-    widget: 'code'
-  ```
+**Name:** `code`
+
+**UI:** code editor
+
+**Data type:** string
+
+**Options:**
+
+- `default_language`: optional; default language to use
+- `allow_language_selection`: optional; defaults to `false`: allows syntax to be changed
+- `keys`: optional; sets key names for code and lang if outputting an object; defaults to `{ code: 'code', lang: 'lang' }`
+- `output_code_only`: set to `true` to output the string value only, defaults to `false`
+
+**Example**
+
+```yaml
+- label: 'Code'
+  name: 'code'
+  widget: 'code'
+```
+
+<br>
+
+**Result**
+
+![toggle switch](/img/widget-code.png)

content/docs/widgets/color.md

@@ -1,22 +1,38 @@
 ---
-label: 'Color'
-title: color
+label: Color
+title: Color
+group: Widgets
+weight: 40
 ---
 
 The color widget translates a color picker to a color string.
 
-- **Name:** `color`
-- **UI:** color picker
-- **Data type:** string
-- **Options:**
-  - `default`: accepts a string; defaults to an empty string. Sets the default value
-  - `allowInput`: accepts a boolean, defaults to `false`. Allows manual editing of the color input value
-  - `enableAlpha`: accepts a boolean, defaults to `false`. Enables Alpha editing
-- **Example:**
-  ```yaml
-  - { label: 'Color', name: 'color', widget: 'color' }
-  ```
-- **Example:**
-  ```yaml
-  - { label: 'Color', name: 'color', widget: 'color', enableAlpha: true, allowInput: true }
-  ```
+**Name:** `color`
+
+**UI:** color picker
+
+**Data type:** string
+
+**Options:**
+
+- `default`: accepts a string; defaults to an empty string. Sets the default value
+- `allowInput`: accepts a boolean, defaults to `false`. Allows manual editing of the color input value
+- `enableAlpha`: accepts a boolean, defaults to `false`. Enables Alpha editing
+
+**Example**
+
+```yaml
+- { label: 'Color', name: 'color', widget: 'color' }
+```
+
+**Example**
+
+```yaml
+- { label: 'Color', name: 'color', widget: 'color', enableAlpha: true, allowInput: true }
+```
+
+<br>
+
+**Result**
+
+![toggle switch](/img/widget-color.png)

content/docs/widgets/datetime.md

@@ -1,6 +1,8 @@
 ---
-title: datetime
+title: Datetime
 label: DateTime
+group: Widgets
+weight: 50
 ---
 
 The datetime widget translates a datetime picker to a datetime string.
@@ -12,6 +14,7 @@ The datetime widget translates a datetime picker to a datetime string.
 **Data type:** [Day.js](https://day.js.org/)-formatted datetime string
 
 **Options:**
+
   - `default`: accepts a datetime string, or `'{{now}}'` to fill in the current datetime; otherwise defaults to empty string.
 
     <small>Unitl 3.2.1 it defaults to current datetime. To get an empty field, set default to empty string.</small>
@@ -33,3 +36,9 @@ The datetime widget translates a datetime picker to a datetime string.
     format: "LLL"
     picker_utc: false
   ```
+
+<br>
+
+**Result**
+
+![toggle switch](/img/widget-datetime.png)