### Install Dependencies and Run Middleman

Source: https://decapcms.org/docs/middleman

Installs project dependencies using Bundler and starts the Middleman development server.

```bash
bundle install
middleman server

```

--------------------------------

### Example Article Content

Source: https://decapcms.org/docs/middleman

Content for an example blog post in Markdown format with frontmatter.

```markdown
---
title: Example Article
date: 2019-01-01
---

This is an example article. You probably want to delete it and write your own articles once you finished this guide!

```

--------------------------------

### Create Nuxt App and Start Development

Source: https://decapcms.org/docs/nuxt

Use npx to create a new Nuxt project, navigate into the project directory, and start the development server.

```bash
npx create-nuxt-app <name-of-your-new-project>
cd <name-of-your-new-project>
npm run dev

```

--------------------------------

### Install Gatsby CLI and Create New Site

Source: https://decapcms.org/docs/gatsby

Installs the Gatsby CLI globally and creates a new Gatsby site using the default starter blog. Navigates into the new site's directory.

```bash
npm install -g gatsby-cli
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
cd blog
```

--------------------------------

### Initialize NextJS Project and Install Dependencies

Source: https://decapcms.org/docs/nextjs

Sets up a new NextJS project, installs core dependencies, and adds necessary development tools like frontmatter-markdown-loader.

```bash
# Create new directory and navigate into it
mkdir awesome-kitties
cd awesome-kitties

# Initialize a new project
npm init -y

# Install required dependencies
npm install --save react react-dom next

# Install webpack loader for Markdown (Use version 3+)
npm install --save-dev frontmatter-markdown-loader

# If using NextJS v11.0.0 or above, @babel/core and @babel/preset-react has to be installed as dependencies of frontmatter-markdown-loader
npm install --save-dev @babel/core @babel/preset-react

# Create folder for pages (default for NextJS), and add a index file
mkdir pages
touch pages/index.js

# Create a folder for content, and a markdown file:
mkdir content
touch content/home.md

# Create a folder for static assets
mkdir public
```

--------------------------------

### Check Hugo Installation

Source: https://decapcms.org/docs/hugo

Verifies that Hugo has been successfully installed by displaying its help options.

```bash
hugo help

```

--------------------------------

### Example Configuration for Posts Collection

Source: https://decapcms.org/docs/i18n

A comprehensive example showing top-level i18n settings combined with collection and field-level configurations for a 'posts' collection.

```yaml
i18n:
  structure: multiple_folders
  locales: [en, de, fr]

collections:
  - name: posts
    label: Posts
    folder: content/posts
    create: true
    i18n: true
    fields:
      - label: Title
        name: title
        widget: string
        i18n: true
      - label: Date
        name: date
        widget: datetime
        i18n: duplicate
      - label: Body
        name: body
        widget: markdown

```

--------------------------------

### Configure Media and Public Folders (Hugo Example)

Source: https://decapcms.org/docs/configure-decap-cms

Configures both the media folder for storage within the repository and the public folder for referencing uploaded media in the published site. This example is suitable for generators like Hugo.

```yaml
# These lines should *not* be indented
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
```

--------------------------------

### Install PropTypes Dependency

Source: https://decapcms.org/docs/custom-widgets

Install the 'prop-types' package for defining component property types.

```bash
npm install --save prop-types
```

--------------------------------

### Example package.json for Custom Widget

Source: https://decapcms.org/docs/custom-widgets

This is an example of a complete 'package.json' file, including 'peerDependencies' and 'scripts', for a custom Decap CMS widget.

```json
{
  "name": "decap-cms-widget-starter",
  "description": "A boilerplate for creating Decap CMS widgets.",
  "author": "name of developer",
  "keywords": [
    "netlify",
    "decap-cms",
    "cms",
    "widget",
    "starter",
    "boilerplate"
  ],
  "version": "0.0.1",
  "homepage": "https://github.com/decaporg/decap-cms-widget-starter",
  "license": "MIT",
  "main": "dist/main.js",
  "devDependencies": {
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "decap-cms": "^1.5.0",
    "react": "^16.3.2",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.20.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.14",
    "webpack-serve": "^0.3.1"
  },
  "dependencies": {
    "prop-types": "^15.6.1"
  },
  "peerDependencies": {
    "react": "^16"
  },
  "scripts": {
    "start": "webpack-serve --static public --open"
  }
}
```

--------------------------------

### Install Middleman

Source: https://decapcms.org/docs/middleman

Installs the Middleman gem. Ensure Ruby and RubyGems are installed first.

```bash
gem install middleman

```

--------------------------------

### Install Webpack and Babel Dependencies

Source: https://decapcms.org/docs/custom-widgets

Install the necessary development dependencies for building React components with Webpack and Babel.

```bash
npm install --save-dev babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader html-webpack-plugin decap-cms react source-map-loader style-loader webpack webpack-cli webpack-serve
```

--------------------------------

### File Collection Configuration Example

Source: https://decapcms.org/docs/collection-file

This example demonstrates how to configure a 'files' collection with multiple uniquely defined files, each having its own set of fields and file path. Use this for managing distinct configuration files or unique content pages.

```yaml
collections:
  - label: "Pages"
    name: "pages"
    files:
      - label: "About Page"
        name: "about"
        file: "site/content/about.yml"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Intro, name: intro, widget: markdown}
          - label: Team
            name: team
            widget: list
            fields:
              - {label: Name, name: name, widget: string}
              - {label: Position, name: position, widget: string}
              - {label: Photo, name: photo, widget: image}
      - label: "Locations Page"
        name: "locations"
        file: "site/content/locations.yml"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Intro, name: intro, widget: markdown}
          - label: Locations
            name: locations
            widget: list
            fields:
              - {label: Name, name: name, widget: string}
              - {label: Address, name: address, widget: string}
```

--------------------------------

### Install VitePress

Source: https://decapcms.org/docs/vitepress

Install VitePress as a development dependency using npm.

```bash
npm install --save-dev vitepress

```

--------------------------------

### Initial Git Commit and Remote Setup

Source: https://decapcms.org/docs/gridsome

Initializes a Git repository, adds all files, creates an initial commit, and sets up the remote origin for a GitHub repository.

```bash
git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin main
```

--------------------------------

### File Widget Configuration Example

Source: https://decapcms.org/docs/widgets/file

Configures a file field with a default file path and custom media library settings for multiple selections.

```yaml
- label: "Manual PDF"
  name: "manual_pdf"
  widget: "file"
  default: "/uploads/general-manual.pdf"
  media_library:
    config:
      multiple: true

```

--------------------------------

### Create and Develop Gridsome Website

Source: https://decapcms.org/docs/gridsome

Creates a new Gridsome project, navigates into the project directory, and starts the local development server.

```bash
# To create a new project run
gridsome create gridsome-netlify-blog

# Then navigate to the project folder
cd gridsome-netlify-blog

# To start local dev server at http://localhost:8080
gridsome develop
```

--------------------------------

### Install Gridsome CLI

Source: https://decapcms.org/docs/gridsome

Installs the Gridsome command-line interface tool globally using Yarn or NPM.

```bash
# Using Yarn
yarn global add @gridsome/cli

# Using NPM
npm install --global @gridsome/cli
```

--------------------------------

### Run NextJS Development Server

Source: https://decapcms.org/docs/nextjs

Starts the NextJS development server to view the application locally.

```bash
npm run dev

```

--------------------------------

### Create Custom Widget Directory

Source: https://decapcms.org/docs/custom-widgets

Start by creating a new directory for your custom widget package.

```bash
mkdir my-custom-widget
```

--------------------------------

### Example URL for Pre-populating Fields

Source: https://decapcms.org/docs/dynamic-default-values

This URL demonstrates how to pass parameters to pre-populate fields, including nested fields and fields requiring URL encoding.

```html
/#/collections/posts/new?title=first&object.title=second&body=%23%20content
```

--------------------------------

### Initial Git Commit and Remote Setup

Source: https://decapcms.org/docs/gatsby

Stages all changes, creates an initial commit, adds a remote origin for a GitHub repository, and pushes the main branch.

```bash
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin main

```

--------------------------------

### Install Hugo using Homebrew

Source: https://decapcms.org/docs/hugo

Installs the Hugo command line tool on macOS and Linux using Homebrew.

```bash
brew install hugo

```

--------------------------------

### Create and Serve a New Hugo Site

Source: https://decapcms.org/docs/hugo

Commands to create a new Hugo project, navigate into it, and start the Hugo development server.

```bash
hugo new site <name-of-your-new-project>
cd <name-of-your-new-project>
hugo server

```

--------------------------------

### Decap CMS Configuration Example

Source: https://decapcms.org/docs/docusaurus

Example configuration for Decap CMS, specifying media folder, public folder, and collection definitions.

```yaml
media_folder: "static/img"
public_folder: "/img/"

collections:
- name: blog
  label: "blog"
  folder: blog
  identifier_field: title
  extension: md
  widget: "list"
  create: true
  slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
  fields:
    - { name: title, label: Title, widget: string }
    - { name: body, label: Body, widget: markdown }
    - { name: slug, label: Slug, widget: string }
    - label: "Tags"
      name: "tags"
      widget: "list"
    - label: "Authors"
      name: "authors"
      widget: "list"
      fields:
        - { name: name, label: Name, widget: string }
        - { name: title, label: Title, widget: string }
        - { name: url, label: URL, widget: string }
        - { name: imageUrl, label: ImageURL, widget: string }
```

--------------------------------

### Blog Collection Configuration

Source: https://decapcms.org/docs/configure-decap-cms

Example configuration for a blog collection, defining fields for posts stored in '_posts/blog'.

```yaml
collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "_posts/blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
      - { label: "Body", name: "body", widget: "markdown" }
```

--------------------------------

### Image Widget Configuration Example

Source: https://decapcms.org/docs/widgets/image

This snippet shows a basic configuration for the Image widget, including a label, name, widget type, default value, and media library configuration for multiple selections.

```yaml
- label: "Featured Image"
  name: "thumbnail"
  widget: "image"
  choose_url: true
  default: "/uploads/chocolate-dogecoin.jpg"
  media_library:
    config:
      multiple: true

```

--------------------------------

### Example Collection Configuration

Source: https://decapcms.org/docs/dynamic-default-values

This is a sample Decap CMS collection configuration demonstrating fields that can be pre-populated via URL parameters.

```yaml
collections:
  - name: posts
    label: Posts
    folder: content/posts
    create: true
    fields:
      - label: Title
        name: title
        widget: string
      - label: Object
        name: object
        widget: object
        fields:
          - label: Title
            name: title
            widget: string
      - label: body
        name: body
        widget: markdown
```

--------------------------------

### Install nuxt/content Module

Source: https://decapcms.org/docs/nuxt

Add the nuxt/content module to your project using yarn or npm.

```bash
yarn add @nuxt/content
or
npm i @nuxt/content
```

--------------------------------

### Nested Collection Configuration Example

Source: https://decapcms.org/docs/collection-nested

This example shows how to configure a collection to support nested entries and path editing. Ensure the `nested` object has `depth` and optionally `summary` and `subfolders`, and the `meta` object includes a `path` property.

```yaml
collections:
  - name: pages
    label: Pages
    label_singular: Page
    folder: content/pages
    create: true
    fields: [
      {name: title, label: Title, widget: string},
      {name: body, label: Body, widget: markdown},
    ]
    # Add nested and meta objects
    nested:
      depth: 100
      summary: '{{title}}'
      subfolders: true
    meta: { path: { widget: string, label: 'Path', index_file: '_index' } }
```

--------------------------------

### Install Decap CMS and Gatsby Plugin

Source: https://decapcms.org/docs/gatsby

Installs the necessary Decap CMS app and Gatsby plugin dependencies for your site.

```bash
npm install --save decap-cms-app gatsby-plugin-netlify-cms
```

--------------------------------

### Object Widget Configuration Example

Source: https://decapcms.org/docs/widgets/object

This example demonstrates how to configure an Object widget to group various fields including a nested Object widget. It shows how to set labels, names, widget types, default values, and collapsed states for nested fields.

```yaml
- label: "Profile"
  name: "profile"
  widget: "object"
  summary: '{{fields.name}}: {{fields.birthdate}}'
  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"
      collapsed: true
      fields: 
        - {label: "Street Address", name: "street", widget: "string"}
        - {label: "City", name: "city", widget: "string"}
        - {label: "Postal Code", name: "post-code", widget: "string"}
```

--------------------------------

### Markdown Widget Configuration Example

Source: https://decapcms.org/docs/widgets/markdown

This example shows how to configure the markdown widget for a 'body' field, which is recognized by the CMS for saving markdown file content.

```yaml
- { label: 'Blog post content', name: 'body', widget: 'markdown' }
```

--------------------------------

### Basic Map Widget Configuration

Source: https://decapcms.org/docs/widgets/map

This example shows the basic configuration for adding a map widget to a form. It specifies the label, name, and widget type.

```yaml
- {label: "Location", name: "location", widget: "map" }
```

--------------------------------

### Example Summary String Configuration

Source: https://decapcms.org/docs/summary-strings

This configuration demonstrates how to use various transformations on fields within a summary string template. It shows uppercasing the title, formatting the date, and truncating the body.

```yaml
collections:
  - name: 'posts'
    label: 'Posts'
    folder: '_posts'
    summary: "{{title | upper}} - {{date | date('YYYY-MM-DD')}} – {{body | truncate(20, '***')}}"
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

```

--------------------------------

### Registering Remark Plugin with Global Settings

Source: https://decapcms.org/docs/widgets/richtext

This example shows how to register a remark plugin and provide global settings, such as customizing the bullet character for lists. This allows for consistent markdown output across plugins.

```javascript
// provide global settings to all plugins, e.g. for customizing `remark-stringify`
CMS.registerRemarkPlugin({ settings: { bullet: '-' } });
```

--------------------------------

### String Widget with Pattern Validation

Source: https://decapcms.org/docs/widgets

This example shows how to configure a string widget with a required pattern for validation, ensuring the input meets specific criteria.

```yaml
label: "Title"
name: "title"
widget: "string"
pattern: ['.{12,}', "Must have at least 12 characters"]
```

--------------------------------

### Nuxt Project Directory Structure

Source: https://decapcms.org/docs/nuxt

Example of the expected directory structure for a Nuxt project after setting up Decap CMS, including the content and static/admin directories.

```text
root/
├ content/
├ components/
├ layouts/
├ middleware/
├ pages/
├ plugins/
├ static/
│  └ admin/
│     ├ index.html
│     └ config.yml
├ store/
└ // .editorconfig, .gitignore, nuxt.config.js, etc...

```

--------------------------------

### Example Markdown Blog Post Structure

Source: https://decapcms.org/docs/gatsby

Illustrates the front matter and body structure of a typical Markdown blog post in the Gatsby starter blog.

```markdown
---
title: New Beginnings
date: "2015-05-28T22:40:32.169Z"
description: This is an optional description for SEO and Open Graph purposes, rather than the default generated excerpt.
---

Far far away, behind the word mountains, far from the countries Vokalia and
Consonantia, there live the blind texts.

```

--------------------------------

### Example Markdown Content for Home Page

Source: https://decapcms.org/docs/nextjs

Defines the structure and content for the home page using frontmatter for metadata and Markdown for body text.

```markdown
---
title: Awesome kitties
date: 2019-03-17T19:31:20.591Z
cats:
  - description: 'Maru is a Scottish Fold from Japan, and he loves boxes.'
    name: Maru (まる)
  - description: Lil Bub is an American celebrity cat known for her unique appearance.
    name: Lil Bub
  - description: 'Grumpy cat is an American celebrity cat known for her grumpy appearance.'
    name: Grumpy cat (Tardar Sauce)
---
Welcome to my awesome page about cats of the internet.

This page is built with NextJS, and content is managed in Decap CMS

```

--------------------------------

### Basic Color Widget Configuration

Source: https://decapcms.org/docs/widgets/color

Configure a basic color widget with a label and name. This snippet shows the minimal setup for the color widget.

```yaml
- { label: 'Color', name: 'color', widget: 'color' }
```

--------------------------------

### Initialize Decap CMS with npm

Source: https://decapcms.org/docs/install-decap-cms

Import and initialize Decap CMS in your project after installing it via npm. Ensure this script runs only on your CMS page.

```javascript
import CMS from "decap-cms-app";
// Initialize the CMS object
CMS.init();
// Now the registry is available via the CMS object.
CMS.registerPreviewTemplate("my-template", MyTemplate);

```

--------------------------------

### Registering a Preview Template with Collection Data Fetching

Source: https://decapcms.org/docs/customization

Registers a preview template that fetches collection data asynchronously using `getCollection`. This example shows how to iterate over fetched posts and log their data.

```html
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script>
  var PostPreview = createClass({
    render: async function() {
      var posts = await getCollection('posts');
      var arr = [];
      posts.forEach((t) => {
        const getingData = t.get('data');
        console.log(getingData);
      });
      return null;
    }
  });

  CMS.registerPreviewTemplate("posts", PostPreview);
</script>
```

--------------------------------

### Image Size Limit Configuration

Source: https://decapcms.org/docs/widgets/image

This example demonstrates how to set a maximum file size limit for uploads directly into an image field using the media library configuration. This is specific to the default media library.

```yaml
  media_library:
    config:
      max_file_size: 512000 # in bytes, only for default media library

```

--------------------------------

### Initialize Netlify CLI

Source: https://decapcms.org/docs/docusaurus

Connect the Netlify CLI to your GitHub repository to begin the deployment process. Follow the prompts to configure build commands and deployment directories.

```bash
netlify init
```

--------------------------------

### Install vite-plugin-decap-cms

Source: https://decapcms.org/docs/vitepress

Install the Vite plugin for Decap CMS as a development dependency.

```bash
npm install --save-dev vite-plugin-decap-cms

```

--------------------------------

### Initialize VitePress Project

Source: https://decapcms.org/docs/vitepress

Initialize a new VitePress project using the command-line interface.

```bash
npx vitepress init

```

--------------------------------

### Create New Middleman Site

Source: https://decapcms.org/docs/middleman

Initializes a new Middleman project and navigates into the project directory.

```bash
middleman init blog
cd blog

```

--------------------------------

### Initialize Git Repository and Push to GitHub

Source: https://decapcms.org/docs/hugo

Commands to initialize a Git repository, add all files, commit them, set up a remote origin, and push to the main branch on GitHub.

```bash
git init # Initialize a Git repository
git add . # Add every file
git commit -m "Initial Commit" # Commit every file with the message 'Initial Commit'
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git # Create a new repo on GitHub and add it to this project as a remote repository.
git push -u origin main # Push your changes

```

--------------------------------

### Install Decap CMS Dependencies

Source: https://decapcms.org/docs/gridsome

Installs Decap CMS and necessary Gridsome plugins using Yarn or NPM.

```bash
# Using Yarn
yarn add decap-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark

# Using NPM
npm add decap-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark
```

--------------------------------

### Install Decap CMS via npm

Source: https://decapcms.org/docs/install-decap-cms

Install the decap-cms-app package using npm. This command saves the package as a dependency in your project.

```bash
npm install decap-cms-app --save

```

--------------------------------

### Initialize npm Package

Source: https://decapcms.org/docs/custom-widgets

Initialize a new npm package within your widget directory.

```bash
npm init
```

--------------------------------

### Initialize Decap CMS with Complete Configuration and Ignore config.yml

Source: https://decapcms.org/docs/manual-initialization

Provide a complete configuration object to `init()` and set `load_config_file: false` to ignore the `config.yml` file entirely. This improves performance and prevents load errors if `config.yml` is missing.

```javascript
init({
  config: {
    backend: {
      name: 'git-gateway',
    },
    load_config_file: false,
    media_folder: "static/images/uploads",
    public_folder: "/images/uploads",
    collections: [
      {
        label: "Blog",
        name: "blog",
        folder: "_posts/blog",
        create: true,
        fields: [
          { label: "Title", name: "title", widget: "string" },
          { label: "Publish Date", name: "date", widget: "datetime" },
          { label: "Featured Image", name: "thumbnail", widget: "image" },
          { label: "Body", name: "body", widget: "markdown" },
        ],
      },
    ],
  },
})
```

--------------------------------

### Import CMS and Initialize (npm)

Source: https://decapcms.org/docs/manual-initialization

Import the CMS and the `init` function from the `decap-cms-app` package when using npm.

```javascript
import CMS, { init } from 'decap-cms-app'
```

--------------------------------

### Configure Hidden Widget

Source: https://decapcms.org/docs/widgets

Example of configuring a hidden widget with a default value.

```yaml
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}

```

--------------------------------

### Navigate to Widget Directory

Source: https://decapcms.org/docs/custom-widgets

Change your current directory to the newly created widget directory.

```bash
cd my-custom-widget
```

--------------------------------

### Create a New Blog Post File

Source: https://decapcms.org/docs/docusaurus

Create an empty Markdown file for a new blog post with a specific naming convention.

```bash
touch ./blog/2021-11-15-first-blog-post.md
```

--------------------------------

### Collection with Filter Configuration

Source: https://decapcms.org/docs/configure-decap-cms

Example configuration for a collection that filters entries based on a specific field value.

```yaml
collections:
  - name: "posts"
    label: "Post"
    folder: "_posts"
    filter:
      field: language
      value: en
    fields:
      - { label: "Language", name: "language" }
```

--------------------------------

### Build Production Version

Source: https://decapcms.org/docs/custom-widgets

Execute this command to create a production build of your custom widget. The output will be placed in the 'dist' directory.

```bash
npm run build

```

--------------------------------

### Initialize Git Repository and Commit Changes

Source: https://decapcms.org/docs/docusaurus

Initialize a local Git repository, rename the main branch, stage all files, and make an initial commit.

```bash
git init
git branch -m main
git add .
git commit -m 'Initial commit'
```

--------------------------------

### Configure Media Library with Uploadcare

Source: https://decapcms.org/docs/configuration-options

Sets up the media library integration, passing specific configuration options to the chosen library.

```yaml
media_library:
  name: uploadcare
  config:
    publicKey: demopublickey
```

--------------------------------

### Create a New Docusaurus Project

Source: https://decapcms.org/docs/docusaurus

Use npx to create a new Docusaurus site scaffold and then navigate into the project directory to run the development server.

```bash
npx create-docusaurus@latest my-website classic
cd my-website
npm run start
```

--------------------------------

### Initialize Decap CMS with Partial Configuration

Source: https://decapcms.org/docs/manual-initialization

Pass a configuration object to `init()` to merge with or override settings in `config.yml`. This is useful for setting dynamic properties like the backend.

```javascript
init({
  config: {
    backend: {
      name: 'git-gateway',
    },
  },
})
```

--------------------------------

### Use code style for filenames, directories, and paths

Source: https://decapcms.org/docs/writing-style-guide

Format filenames, directories, and paths using inline code style for clarity.

```bash
Open the `config.yaml` file.
```

```bash
Go to the `/docs/guides` directory.
```

```bash
Open the `/admin/index.html` file.
```

--------------------------------

### Configure Blog Collection Preview Path

Source: https://decapcms.org/docs/deploy-preview-links

Sets a preview path for a blog collection, mapping repository paths to site URLs. Uses 'slug' for the site path.

```yaml
collections:
  - name: blog
    folder: content/blog
    slug: {{year}}-{{month}}-{{slug}}
    preview_path: blog/{{slug}}

```

--------------------------------

### Update Decap CMS via npm or Yarn

Source: https://decapcms.org/docs/releases

Use standard package manager commands to update Decap CMS if installed via npm or Yarn.

```bash
npm update decap-cms-app
# or
yarn upgrade decap-cms-app
```

--------------------------------

### Select Widget with String Options

Source: https://decapcms.org/docs/widgets/select

Demonstrates the basic usage of the select widget with options provided as an array of strings. The selected string value is saved directly.

```yaml
- label: "Align Content"
  name: "align"
  widget: "select"
  options: ["left", "center", "right"]

```

```yaml
align: "center"

```

--------------------------------

### Render Object Field in Preview

Source: https://decapcms.org/docs/customization

Access a single object field using `widgetsFor`. This example demonstrates rendering an object with fields like 'front_limit' and 'author'.

```javascript
<script>
var GeneralPreview = createClass({
  // Object fields are simpler than lists - instead of `widgetsFor` returning
  // an array of objects, it returns a single object. Accessing the shape of
  // that object is the same as the shape of objects returned for list fields:
  //
  // {
  //   data: { front_limit: 0, author: 'Chris' },
  //   widgets: { front_limit: (<WidgetComponent>), author: (WidgetComponent>)}
  // }
  render: function() {
    var entry = this.props.entry;
    var title = entry.getIn(['data', 'site_title']);
    var posts = entry.getIn(['data', 'posts']);

    return h('div', {},
      h('h1', {}, title),
      h('dl', {},
        h('dt', {}, 'Posts on Frontpage'),
        h('dd', {}, this.props.widgetsFor('posts').getIn(['widgets', 'front_limit']) || 0),

        h('dt', {}, 'Default Author'),
        h('dd', {}, this.props.widgetsFor('posts').getIn(['data', 'author']) || 'None'),
      )
    );
  }
});

CMS.registerPreviewTemplate("general", GeneralPreview);
</script>


```

--------------------------------

### Custom Frontmatter Delimiter

Source: https://decapcms.org/docs/configuration-options

Specify a custom delimiter for frontmatter if the default (e.g., '---') is not suitable. This can be a single string or an array for distinct start and end delimiters.

```yaml
collections:
  - name: "pages"
    folder: "_pages"
    create: true
    fields:
      - {"label": "Title", "name": "title", "widget": "string"}
      - {"label": "Body", "name": "body", "widget": "markdown"}
    frontmatter_delimiter: "~~~"
```

```yaml
collections:
  - name: "events"
    folder: "_events"
    create: true
    fields:
      - {"label": "Event Name", "name": "event_name", "widget": "string"}
      - {"label": "Date", "name": "date", "widget": "datetime"}
    frontmatter_delimiter: ["<---", "--->"]
```

--------------------------------

### Create Admin Directory

Source: https://decapcms.org/docs/docusaurus

Navigate into the static directory and create an admin subdirectory to house Decap CMS configuration files.

```bash
cd static
mkdir admin
```

--------------------------------

### Initialize Decap CMS with Default Configuration

Source: https://decapcms.org/docs/manual-initialization

Call the `init()` function without any arguments to initialize Decap CMS with its default configuration, similar to the old import method.

```javascript
init()
```

--------------------------------

### Global Cloudinary Media Library Configuration

Source: https://decapcms.org/docs/cloudinary

Set global configurations for the Cloudinary widget in Decap CMS, affecting all instances. This example sets default image transformations.

```yaml
# global
media_library:
  name: cloudinary
  output_filename_only: false
  config:
    default_transformations:
      - - fetch_format: auto
          width: 160
          quality: auto
          crop: scale
```

--------------------------------

### DateTime Widget with Custom Formatting

Source: https://decapcms.org/docs/widgets

Example of a datetime widget configured with custom date and time formats, a default value set to the current time, and specific display format.

```yaml
- label: "Start time"
  name: "start"
  widget: "datetime"
  default: "{{now}}"
  date_format: "DD.MM.YYYY" # e.g. 24.12.2021
  time_format: "HH:mm" # e.g. 21:07
  format: "LLL"
  picker_utc: false
```

--------------------------------

### Export Custom Widget Components

Source: https://decapcms.org/docs/custom-widgets

Rename the exports in 'src/index.js' to match your custom widget's name. This example shows how to export 'AwesomeControl' and 'AwesomePreview' if your widget is named 'decap-cms-widget-awesome'.

```javascript
if (typeof window !== 'undefined') {
  window.AwesomeControl = Control
  window.AwesomePreview = Preview
}

export { Control as AwesomeControl, Preview as AwesomePreview }

```

--------------------------------

### Create Decap CMS Config Files

Source: https://decapcms.org/docs/docusaurus

Navigate into the admin directory and create the necessary config.yml and index.html files for Decap CMS.

```bash
cd admin
touch config.yml
touch index.html
```

--------------------------------

### Render List of Authors in Preview

Source: https://decapcms.org/docs/customization

Use `widgetsFor` to map over a list of items, accessing nested data for each item. This example shows how to render a list of authors with their names and descriptions.

```javascript
<script>
var AuthorsPreview = createClass({
  // For list fields, the widgetFor function returns an array of objects
  // that you can map over in your template. If our field is a list of
  // authors containing two entries, with fields `name` and `description`,
  // the return value of `widgetsFor` would look like this:
  //
  // [{
  //   data: { name: 'Mathias', description: 'Co-Founder'},
  //   widgets: { name: (<WidgetComponent>), description: (WidgetComponent>)}
  // },
  // {
  //   data: { name: 'Chris', description: 'Co-Founder'},
  //   widgets: { name: (<WidgetComponent>), description: (WidgetComponent>)}
  // }]
  //
  // Templating would look something like this:

  render: function() {
    return h('div', {},

      // This is a static header that would only be rendered once for the entire list
      h('h1', {}, 'Authors'),

      // Here we provide a simple mapping function that will be applied to each
      // object in the array of authors
      this.props.widgetsFor('authors').map(function(author, index) {
        return h('div', {key: index},
          h('hr', {}),
          h('strong', {}, author.getIn(['data', 'name'])),
          author.getIn(['widgets', 'description'])
        );
      })
    );
  }
});
CMS.registerPreviewTemplate("authors", AuthorsPreview);
</script>


```

--------------------------------

### Configure Uploadcare Integration Settings

Source: https://decapcms.org/docs/uploadcare

Set integration-specific options like `autoFilename` and `defaultOperations` in your `config.yml`. This example enables automatic filename appending and sets a default image resize operation.

```yaml
media_library:
  name: uploadcare
  config:
    publicKey: YOUR_UPLOADCARE_PUBLIC_KEY
  settings:
    autoFilename: true
    defaultOperations: '/resize/800x600/'

```

--------------------------------

### Configure Individual Field with Uploadcare Media Library

Source: https://decapcms.org/docs/uploadcare

Customize Uploadcare widget settings for a specific field in your `config.yml`. This example enables multiple file selection and disables the preview step.

```yaml
fields:
  name: cover
  label: Cover Image
  widget: image
  media_library:
    config:
      multiple: true
      previewStep: false

```

--------------------------------

### Git Gateway Configuration with PKCE Authentication

Source: https://decapcms.org/docs/git-gateway-backend

Configure Git Gateway with PKCE authentication for custom identity services. This setup enables PKCE and specifies custom endpoints and client IDs.

```yaml
backend:
    name: git-gateway
    # Enables PKCE authentication with the git-gateway backend. After auth,
    # sends the access_token for all requests to the git-gateway host.
    auth_type: pkce
    # The base OAuth2 URL. Here is an obfuscated AWS Cognito example.
    base_url: https://your-cognito-instance.auth.us-east-1.amazoncognito.com
    # If you need to customize the authorize or token endpoints for PKCE, do that here
    #auth_endpoint: oauth2/authorize
    #auth_token_endpoint: oauth2/token
    # The OAuth2 client ID
    app_id: your-oauth2-client-id
    # The base URL of your custom git-gateway. Note that the last part of the path
    # should be "bitbucket", "gitlab", or "github", so the implementation can automatically
    # determine which backend API to use when making requests.
    gateway_url: https://your.gitgateway.host/git-gateway/bitbucket/
    # Override the Netlify git-gateway status check
    status_endpoint: https://your.gitgateway.host/api/v2/components.json
    # Optional: defaults to "master"
    branch: main
```

--------------------------------

### Import CMS and Initialize (Script Tag)

Source: https://decapcms.org/docs/manual-initialization

Access the CMS and `init` function from the global `window` object when using a script tag.

```javascript
const { CMS, initCMS: init } = window
```

--------------------------------

### Basic Folder Collection Configuration

Source: https://decapcms.org/docs/collection-folder

Defines a 'Blog' folder collection with a title, date, thumbnail, and body field. Allows new entries to be created.

```yaml
collections:
  - label: "Blog"
    name: "blog"
    folder: "_posts/blog"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}
```

--------------------------------

### Enable Manual Initialization

Source: https://decapcms.org/docs/manual-initialization

Set this global flag to `true` before importing Decap CMS to enable manual initialization mode.

```javascript
window.CMS_MANUAL_INIT = true
```

--------------------------------

### Boolean Widget Configuration Example

Source: https://decapcms.org/docs/widgets/boolean

This snippet shows how to configure the boolean widget in your Decap CMS config. It sets a label, a name for the data field, specifies the widget type as 'boolean', and sets the default value to true.

```yaml
- {label: "Draft", name: "draft", widget: "boolean", default: true}
```

--------------------------------

### Basic Richtext Widget Configuration

Source: https://decapcms.org/docs/widgets/richtext

This snippet shows the basic configuration for using the richtext widget in a Decap CMS setup. It's commonly used for the main content of a blog post, named 'body' to ensure proper file saving.

```yaml
- { label: 'Blog post content', name: 'body', widget: 'richtext' }
```

--------------------------------

### Example Output of Variable Type List Widget

Source: https://decapcms.org/docs/variable-type-widgets

This shows the resulting data structure when using the variable type list widget configuration. Each item in the 'sections' array is an object with a 'type' key indicating its specific structure (e.g., 'carousel' or 'spotlight'), followed by its unique fields.

```yaml
title: Home
sections:
  - type: carousel
    header: Image Gallery
    template: carousel.html
    images:
      - images/image01.png
      - images/image02.png
      - images/image03.png
  - type: spotlight
    header: Spotlight
    template: spotlight.html
    text: Hello World
  - type: carousel
    header: Image Gallery
    template: carousel.html
    images:
      - images/image04.png
      - images/image05.png
      - images/image06.png
```