### Global Configuration Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/using-the-configuration-cascade.mdx

Configure options that apply everywhere on your site. This example sets global input and select data configurations.

```YAML
_inputs:
  image_path:
    type: image
    comment: Helpful message here
    options:
      width: 90
      height: 120
_select_data:
  colors:
    - Red
    - Blue

```

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

### Start the Component Playground

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/component-playground.mdx

Run this command in your repository's root to start the Bookshop component playground. Add `--help` to see all available options.

```bash
npx @bookshop/browser #1
```

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

### Install Bookshop Astro Integration (Yarn)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-astro-guide/getting-set-up.mdx

Install the `@bookshop/astro-bookshop` integration using Yarn. Ensure exact version matching.

```bash
yarn add --exact @bookshop/astro-bookshop
```

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

### CloudCannon Configuration File Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/what-is-the-cloudcannon-configuration-file.mdx

This example demonstrates a typical CloudCannon configuration file, defining source paths and collection configurations for various content types.

```YAML
source: /
paths:
  uploads: public/uploads
  static: public
collections_config:
  pages:
    path: pages
    name: Pages
    icon: wysiwyg
    url: "/[full_slug]/"
  blog:
    path: blog
    name: Blog
    icon: post_add
    url: "/blog/[full_slug]/"
  services:
    path: services
    name: Services
    icon: volunteer_activism
  staff_members:
    path: staff-members
    name: Staff Members
    icon: groups
  data:
    path: data
    name: Site Elements
    icon: important_devices
```

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

### Install Bookshop Astro Integration (npm)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-astro-guide/getting-set-up.mdx

Install the `@bookshop/astro-bookshop` integration using npm. Ensure exact version matching.

```bash
npm i --save-exact @bookshop/astro-bookshop
```

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

### Install Eleventy Bookshop Plugin (npm)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/getting-set-up.mdx

Use npm to install the Bookshop plugin for Eleventy. Ensure exact version matching.

```bash
npm i --save-exact @bookshop/eleventy-bookshop
```

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

### Install Eleventy Bookshop Plugin (Yarn)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/getting-set-up.mdx

Use Yarn to install the Bookshop plugin for Eleventy. Ensure exact version matching.

```bash
yarn add --exact @bookshop/eleventy-bookshop
```

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

### Collection Configuration Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/using-the-configuration-cascade.mdx

Configure options for all files within a specific collection. This example defines input and select data configurations for the 'pages' collection.

```YAML
collections_config:
  pages:
    _inputs:
      image_path:
        type: image
        comment: Helpful message here
        options:
          width: 90
          height: 120
    _select_data:
      colors:
        - Red
        - Blue

```

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

### Front Matter Configuration Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/using-the-configuration-cascade.mdx

Configure options for a single file using front matter. This example sets a specific image path, input configuration for it, and select data.

```YAML
image_path: /uploads/me.png
_inputs:
  image_path:
    type: image
    comment: Helpful message here
    options:
      width: 90
      height: 120
_select_data:
  colors:
    - Red
    - Blue

```

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

### Structure Configuration Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/using-the-configuration-cascade.mdx

Configure inputs and select data within a structure. This example defines an 'image' input and 'colors' select data for a 'gallery' structure.

```YAML
_structures:
  gallery:
    values:
      - label: Image
        icon: image
        _inputs:
          image:
            type: image
            options:
              width: 50
              height: 50
          caption:
            comment: Applies inside this structure
        _select_data:
          colors:
            - Red
            - Blue
        value:
          image: /uploads/placeholder.png
          caption:
          color:

```

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

### Install CloudCannon Configuration Types

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/reference/typescript/index.mdx

Install the configuration types package as a development dependency.

```bash
npm install --save-dev @cloudcannon/configuration-types
```

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

### Schema Configuration Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/using-the-configuration-cascade.mdx

Configure options for all files within a specific schema of a collection. This example sets input and select data for 'default' and 'landing_page' schemas within the 'pages' collection.

```YAML
collections_config:
  pages:
    schemas:
      default:
        path: 'schemas/page.md'
        _inputs:
          image_path:
            type: image
            comment: Helpful message here
            options:
              width: 90
              height: 120
      landing_page:
        path: 'schemas/landing-page.md'
        _select_data:
          colors:
            - Red
            - Blue

```

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

### Define data path for products

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/define-your-data.mdx

This example demonstrates how to specify the path for a data key, in this case, 'products', which will be populated from the 'data/products' directory.

```YAML
data_config:
  products:
    path: data/products
```

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

### File Inclusion Snippet Example (Markdown)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/snippets-using-python-markdown.mdx

This example shows how to include content from an external file using the '--8<' include syntax, typically used with snippet configurations.

```Markdown
--8<-- "filename.ext"
```

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

### Instruction Article Front Matter Example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/STYLE_GUIDE.mdx

This is an example of the front matter structure for an instruction article. It includes metadata like schema, UUID, creation timestamp, article details, category, and related articles. Note that `_uuid` and `_created_at` are auto-generated.

```yaml
---
_schema: default
_uuid: [generated]
_created_at: '[timestamp]'
details:
  title: [Action-oriented Title]
  description: Learn how to [action] in CloudCannon.
  image: >-
    https://cc-dam.imgix.net/documentation/images/default-thumbnail/2023-Q4/CloudCannon-Documentation-Thumbnail.png
  category:
    - Instructions
  related_articles:
    - _type: developer_articles
      item: [UUID of related article]
author_notes:
  docshots: Needs docshots
---
```

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

### Schedule file format example

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/scheduling-your-next-build-automatically.mdx

The `_schedule.txt` file uses a comma-separated format with run date, build name, and source filename.

```plaintext
2020-10-22T10:00:00+00:00,Publish Post,_posts/2020-10-22-because-of-the-internet.md
2020-11-22T10:00:00+00:00,Publish Post,_posts/2020-11-22-the-history-of-marketing.md
```

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

### Create a Custom LiquidJS Filter

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/custom-plugins.mdx

Define a custom LiquidJS filter by exporting a function that accepts a `Liquid` argument. This example registers a `load_yaml` filter using the `js-yaml` dependency. Ensure dependencies are installable and bundleable for web targets.

```javascript
import yaml from "js-yaml";

module.exports = function (Liquid) {
    this.registerFilter("load_yaml", (text) => {
        return yaml.load(text)
    });
}
```

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

### Initialize Bookshop Project

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/getting-set-up.mdx

Run this command in your project's root to create the Bookshop directory structure and configuration files.

```bash
npx @bookshop/init --new _component-library --framework eleventy
```

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

### Serve Development Site with Deno

Source: https://github.com/cloudcannon/platform-documentation/blob/main/README.md

Builds the static site with Pagefind and starts a local development server. Deno handles dependency downloads automatically on the first run.

```bash
deno task serve
```

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

### Bookshop Component with Front Matter Data

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/configuring-live-editing.mdx

Example of a Liquid component that uses front matter data and is bound to a Bookshop component. This setup allows for live editing of component data directly in CloudCannon's Visual Editor.

```liquid
---
title: About
layout: base.liquid
permalink: /about/
hero_component:
  title: On a mission to change email marketing
  description: We're here to breathe new air into email marketing and help grow your business.
  button:
    text: "Try This Free"
    link: "/signup"
---

{% bookshop "about/hero" bind: hero_component %}

```

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

### Install React Connector

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/using-live-editing-with-react.mdx

Install the CloudCannon React Connector package using npm.

```shell
npm i @cloudcannon/react-connector
```

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

### Good Example: Simple Term Documentation

Source: https://github.com/cloudcannon/platform-documentation/blob/main/STYLE_GUIDE.mdx

Use this format for defining simple terms with a brief explanation and a relevant documentation link. Keep descriptions to two sentences.

```yaml
_schema: default
glossary_term_name: Collection
term_description: >-
  A group of related files with a similar format (e.g., a folder of pages, blog posts, or data files). Once you group your files into *Collections*, they appear in the *Site Navigation* for easy access.
documentation_link: /documentation/user-articles/what-is-a-collection/
```

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

### Install CloudCannon JavaScript API Types

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/reference/typescript/index.mdx

Install the JavaScript API types package as a development dependency.

```bash
npm install --save-dev @cloudcannon/javascript-api
```

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

### Install Visual Editor Connector

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/live-editing-with-vue.mdx

Install the CloudCannon Visual Editor connector as a development dependency using npm.

```shell
npm i -D @cloudcannon/visual-editor-connector
```

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

### Hugo Shortcode Examples

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/snippets-using-hugo-shortcodes.mdx

Examples of Hugo shortcode syntaxes, including shortcodes with positional arguments and markdown-style shortcodes.

```markdown
# hugo_shortcode_positional_args
{{< custom_shortcode arg1 arg2 >}}

# hugo_markdown_shortcode_positional_args
{{% custom_shortcode arg1 arg2 %}}
```

```markdown
# hugo_paired_shortcode_positional_args
{{< custom_shortcode arg1 arg2 >}} content {{< /custom_shortcode >}}
```

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

### Example `auth-routes.txt` File

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/google-saml-site-authentication/configure-saml-authenticated-routes.mdx

Specify URLs that require authentication by listing their paths in `auth-routes.txt`. Use the wildcard `*` to match multiple pages or subdirectories. This file should be placed in the root directory of your output Site.

```text
/staff/*
/internal-announcements.html
```

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

### YAML Configuration for New File Paths

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/set-the-path-for-new-files.mdx

Configure the path for new files using placeholders and define inputs for user confirmation. This example sets a path for posts and specifies inputs for 'date' and 'slug'.

```YAML
collections_config:
  posts:
    create:
      path: 'news/{date|year}/{slug}[count].md'
      _inputs:
        date:
          comment: Use the starting date here
        slug:
          comment: This is used for your filename

```

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

### Install Editable Regions NPM Package

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/configure-component-editable-regions.mdx

Install the CloudCannon Editable Regions NPM package in your website project using npm.

```bash
npm install @cloudcannon/editable-regions
```

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

### Front Matter for Guide Pages

Source: https://github.com/cloudcannon/platform-documentation/blob/main/STYLE_GUIDE.mdx

This front matter structure is for regular guide pages. Customize the title, order, and description to match the content of each page.

```yaml
---
_schema: default
_uuid: [generated]
_created_at: '[timestamp]'
details:
  title: [Descriptive Page Title]
  order: [number]
  image: >-
    https://cc-dam.imgix.net/documentation/images/guides/getting-started/guide-thumbnails/CloudCannon-Getting-Started-Thumbnail-Universal.png
  description: Learn about [topic] and how to [action].
  start_nav_group: null
  related_articles: null
author_notes:
  docshots: Needs docshots
---

```

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

### Install CloudCannon Svelte Connector

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/live-editing-with-svelte.mdx

Use npm to install the CloudCannon Svelte connector package. This package provides the necessary functions for enabling live editing.

```shell
npm i @cloudcannon/svelte-connector
```

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

### Good Example: Abbreviation Documentation

Source: https://github.com/cloudcannon/platform-documentation/blob/main/STYLE_GUIDE.mdx

Use this format for defining abbreviations. Provide the full term and a concise explanation, along with a documentation link.

```yaml
_schema: default
glossary_term_name: DAM
term_description: >-
  An abbreviation of Digital Asset Management. A DAM is a system for storing, organizing, and retrieving media files like images and videos.
documentation_link: /documentation/user-articles/introduction-to-assets-and-dams/
```

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

### Configure Button Component Inputs

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-astro-guide/configuring-inputs.mdx

Demonstrates how input configurations are unique to each component. This example configures the 'text' input with a specific comment and the 'color' input as a select type with predefined options, distinct from other components.

```yaml
blueprint:
  text: "Hello World!"
  color: "#034AD8"

_inputs:
  text:
    comment: "A different comment specific to the button component"
  color:
    type: select
    options:
      values:
        - "#034AD8"
        - "#403AFC"
```

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

### Markdown in HTML Snippet Example (Markdown)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/snippets-using-python-markdown.mdx

This is an example of how Markdown content within an HTML div with a 'result' class is rendered. It demonstrates the 'python_markdown_markdown_in_html' template's capability.

```Markdown
<div markdown class="result">
This is a *Markdown* Paragraph.
</div>
```

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

### Good Example: Generic Term Documentation

Source: https://github.com/cloudcannon/platform-documentation/blob/main/STYLE_GUIDE.mdx

Use this format for generic terms where a specific documentation link is not applicable. Provide a clear definition.

```yaml
_schema: default
glossary_term_name: YAML
term_description: >-
  A human-readable data serialization format commonly used for configuration files.
documentation_link:
```

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

### Example Hero Component Blueprint and Template

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-eleventy-guide/nesting-components.mdx

Demonstrates a 'hero' component's blueprint, including nesting a button and a set of content blocks. The corresponding Eleventy template shows how to render these nested components, including checks for optional components.

```yml
spec:
  structures: [content_blocks]

blueprint:
  hero_text: Hello World
  cta_button: bookshop:button
  column_components: [bookshop:structure:content_blocks]
```

```liquid
<div class="hero">
  <h1>{{ hero_text }}</h1>
  {% if cta_button %} <!--1-->
    {% bookshop "button" bind: cta_button %}
  {% endif %}
  {% for component in column_components %}
    {% bookshop "{{ component._bookshop_name }}" bind: component %}
  {% endfor %}
</div>
```

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

### Example Data for Unique Array Items

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/configure-an-array-input.mdx

Demonstrates data structure for an array input where `unique_on` is configured. This example shows duplicate paths which would fail validation.

```YAML
related_articles:
  - path: /articles/first-article.md
    featured: true
  - path: /articles/first-article.md
    featured: false
```

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

### Build Static Site with Deno

Source: https://github.com/cloudcannon/platform-documentation/blob/main/README.md

Builds the static site, including Pagefind search functionality. This command is used for production builds.

```bash
deno task build
```

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

### Example of an Unpaired Eleventy Include Usage

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/snippets-using-eleventy-shortcodes.mdx

This markdown example demonstrates the usage of an unpaired Eleventy Liquid include shortcode for a 'callout' component, passing 'type' and 'message' as arguments.

```Markdown
# My Post

{% include 'callout' type: 'info' message: 'This is my shortcode' %}
```

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

### Example Object Input Configuration

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/configure-an-object-input.mdx

The `options.subtype` key determines the Object input's subtype. Use 'tabbed' for a tabbed interface and 'mutable' for a mutable interface.

```Markdown
---
seo:
  title: How you can optimize publishing workflows for your content team
  image: /images/logo.svg
  description: CloudCannon's drafting and publishing workflows can tie all of your optimizations together, offering enhanced control, flexibility, and coordination.
event:
  details:
    title:
    image:
    description:
  cast:
    main_cast:
      - Actor A
      - Actor B
      - Actor C
    special_guests:
      - Actor X
      - Actor Y
      - Actor Z
terminology:
  CloudCannon: A CMS for static websites.
  Input: An editing interface for structured data.
  new_term: ''

---

Blog content goes here.

```

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

### Example of a Paired Eleventy Shortcode Usage

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/snippets-using-eleventy-shortcodes.mdx

This is an example of how the configured 'tint' shortcode would be used within an Eleventy Nunjucks file to apply a red tint to specific text.

```Nunjucks
{% tint "#ff0000" %}This text should be red{% endtint %}
```

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

### Eleventy Render Example (Liquid)

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/articles/snippets-using-eleventy-shortcodes.mdx

Shows how to use the Eleventy 'render' tag with Liquid templating to process a specified template file and pass arguments to it.

```markdown
# eleventy_liquid_render
{% render 'custom_render' arg="value" %}
```

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

### Bare-bones Bookshop Specification File

Source: https://github.com/cloudcannon/platform-documentation/blob/main/developer/guides/bookshop-astro-guide/using-structures.mdx

A minimal `sample.bookshop.yml` file demonstrating the essential `spec` and `blueprint` sections for configuring a Bookshop component in CloudCannon.

```yaml
spec: #1
  structures:
    - content_blocks
  label: My Component

blueprint: #2
  text: "Hello World!"

preview: #3

_inputs: #4
```