cloudcannon.config.yml

source: src
paths:
  static: ""
  uploads: assets/uploads
collections_config:
  pages:
    path: pages
    glob:
      - "!components.html"
      - "!404.html"
    icon: wysiwyg
    schemas:
      default:
        path: .cloudcannon/schemas/page.html
  data:
    path: _data
    glob:
      - "!color_groups.yml"
    icon: data_usage
    disable_url: true
    disable_add: true
    disable_add_folder: true
    disable_file_actions: true
file_config:
  - glob: _data/site.yml
    _inputs:
      social_media_links:
        type: array
        options:
          structures:
            values:
              - label: Social Media Link
                icon: link
                value:
                  link_url:
                  icon_path:
                  label:
                _inputs:
                  icon_path:
                    type: image
                    comment: This input is restricted to only allow images with type SVG
                    options:
                      accepts_mime_types:
                        - image/svg+xml
data_config:
  fonts:
    path: _data/fonts.yml
  color_groups:
    path: _data/color_groups.yml
  site:
    path: _data/site.yml
_inputs:
  favicon:
    type: image
  arrow:
    type: select
    options:
      value_key: id
      values:
        - name: Up
          id: up
        - name: Right
          id: right
        - name: Down
          id: down
        - name: Left
          id: left
  color:
    comment: >-
      Choose a custom icon color (if the icon is an SVG) and rounded border
      color (if one is included).
  icon_size:
    type: choice
    options:
      allow_empty: false
      value_key: id
      values:
        - name: Small
          id: small
        - name: Large
          id: large
  default_color:
    comment: >-
      Use the original colors of the icon without overriding them (does not
      apply to the border if one is included).
    type: checkbox
  icon_type:
    comment: >-
      Choose outline if you want lines to be filled with color and solid if you
      want the whole image filled with color.
    type: choice
    options:
      allow_empty: false
      value_key: id
      values:
        - name: Solid
          id: solid
        - name: Outline
          id: outline
  icon_path:
    type: image
  variant:
    type: select
    options:
      value_key: id
      values:
        - name: Primary
          id: primary
        - name: Secondary
          id: secondary
  arrangement:
    type: select
    comment: The layout of the icon and text together.
    options:
      value_key: id
      values:
        - name: Inline
          id: inline
        - name: Stacked
          id: stacked
  image_alignment:
    type: choice
    options:
      allow_empty: false
      value_key: id
      values:
        - name: Left
          id: left
          icon: align_horizontal_left
        - name: Right
          id: right
          icon: align_horizontal_right
  layout:
    hidden: true
  eleventyExcludeFromCollections:
    hidden: true
  draft:
    type: switch
    comment: If this is switched on, this page will not appear on the live site.
  page_description:
    comment: If empty, defaults to the description set in the SEO data file.
  featured_image:
    comment: If empty, defaults to the image set in the SEO data file.
  nav_logo_image:
    comment: >-
      If an image is uploaded it will be used over a name set in the logo text
      field.
  logo_text:
    comment: >-
      If an image is set in the logo image field, this value will not be used.
      You can change the font of a text based logo in data/theme.
  footer_logo_image:
    comment: >-
      If an image is uploaded it will be used over a name set in the logo text
      field. Please note, the footer image has a fixed width size but not a
      fixed height.
  footer_content:
    type: markdown
    options:
      link: true
      bold: true
      italic: true
      undo: true
      redo: true
      initial_height: 135
  font:
    comment: >-
      Write the name of any font from
      [https://fonts.google.com/](https://fonts.google.com/) in data/fonts to
      access it here.
  description:
    type: markdown
    options:
      link: true
      bold: true
      italic: true
      undo: true
      redo: true
      initial_height: 135
  contact_details[*].text:
    type: markdown
    options:
      link: true
      bold: true
      italic: true
      undo: true
      redo: true
      initial_height: 135
  content_alignment:
    type: choice
    options:
      allow_empty: false
      value_key: id
      preview:
        text:
          - key: name
        icon:
          - key: icon
      values:
        - name: Left
          id: left
          icon: format_align_left
        - name: Center
          id: center
          icon: format_align_center
  color_group:
    type: select
    options:
      allow_empty: false
      value_key: id
      preview:
        text:
          - key: name
        icon:
          - key: icon
      values: data.color_groups
  card_color_group:
    comment: >-
      Choose the color group for the cards in this grid. It is recommended to
      choose a color group different than that of the whole component.
    type: select
    options:
      preview:
        text:
          - key: name
        icon:
          - key: icon
      values: data.color_groups
  group_name:
    hidden: true
    comment: >-
      This input should be hidden from editors and passed through from the
      radio-group component so that these inputs function correctly.
  nav_color_group:
    comment: Choose the color group for the navigation header.
    type: select
    options:
      preview:
        text:
          - key: name
        icon:
          - key: icon
      values: data.color_groups
  footer_color_group:
    comment: Choose the color group for the footer.
    type: select
    options:
      preview:
        text:
          - key: name
        icon:
          - key: icon
      values: data.color_groups
  primary_color_group:
    comment: The default color group for styling site components.
  primary_color_group.name:
    comment: Change the name of the default color group to easily identify it later.
    label: Group Name
  primary_color_group.background_color:
    comment: The background color of site components.
  primary_color_group.foreground_color:
    comment: The color of text, icons and borders.
    label: Text Color
  primary_color_group.interaction_color:
    comment: >-
      The color for user interactions, for example focusing on text inputs or
      clicking buttons.
  custom_color_groups:
    comment: Define different color groups here to easily style site components.
  custom_color_groups[*].name:
    comment: Give your color group a name to easily identify it later.
    label: Group Name
  custom_color_groups[*].background_color:
    comment: The background color of site components.
  custom_color_groups[*].foreground_color:
    comment: The color of text, icons and borders.
    label: Text Color
  custom_color_groups[*].interaction_color:
    comment: >-
      The color for user interactions, for example focusing on text inputs or
      clicking buttons.
  id:
    comment: >-
      An optional unique identifier to link to this component (with page#id
      where id is what you set in this field).
  heading_font:
    comment: >-
      Write the name of any font from
      [https://fonts.google.com/](https://fonts.google.com/) in data/fonts to
      access it here.
  content_font:
    comment: >-
      Write the name of any font from
      [https://fonts.google.com/](https://fonts.google.com/) in data/fonts to
      access it here.
  hero_library_icon_name:
    comment: >-
      Visit [https://heroicons.com/](https://heroicons.com/) to see the full
      library.
    type: select
    options:
      values:
        - academic-cap
        - adjustments-horizontal
        - adjustments-vertical
        - archive-box-arrow-down
        - archive-box-x-mark
        - archive-box
        - arrow-down-circle
        - arrow-down-left
        - arrow-down-on-square-stack
        - arrow-down-on-square
        - arrow-down-right
        - arrow-down-tray
        - arrow-down
        - arrow-left-circle
        - arrow-left-on-rectangle
        - arrow-left
        - arrow-long-down
        - arrow-long-left
        - arrow-long-right
        - arrow-long-up
        - arrow-path-rounded-square
        - arrow-path
        - arrow-right-circle
        - arrow-right-on-rectangle
        - arrow-right
        - arrow-small-down
        - arrow-small-left
        - arrow-small-right
        - arrow-small-up
        - arrow-top-right-on-square
        - arrow-trending-down
        - arrow-trending-up
        - arrow-up-circle
        - arrow-up-left
        - arrow-up-on-square-stack
        - arrow-up-on-square
        - arrow-up-right
        - arrow-up-tray
        - arrow-up
        - arrow-uturn-down
        - arrow-uturn-left
        - arrow-uturn-right
        - arrow-uturn-up
        - arrows-pointing-in
        - arrows-pointing-out
        - arrows-right-left
        - arrows-up-down
        - at-symbol
        - backspace
        - backward
        - banknotes
        - bars-2
        - bars-3-bottom-left
        - bars-3-bottom-right
        - bars-3-center-left
        - bars-3
        - bars-4
        - bars-arrow-down
        - bars-arrow-up
        - battery-0
        - battery-100
        - battery-50
        - beaker
        - bell-alert
        - bell-slash
        - bell-snooze
        - bell
        - bolt-slash
        - bolt
        - book-open
        - bookmark-slash
        - bookmark-square
        - bookmark
        - briefcase
        - bug-ant
        - building-library
        - building-office-2
        - building-office
        - building-storefront
        - cake
        - calculator
        - calendar-days
        - calendar
        - camera
        - chart-bar-square
        - chart-bar
        - chart-pie
        - chat-bubble-bottom-center-text
        - chat-bubble-bottom-center
        - chat-bubble-left-ellipsis
        - chat-bubble-left-right
        - chat-bubble-left
        - chat-bubble-oval-left-ellipsis
        - chat-bubble-oval-left
        - check-badge
        - check-circle
        - check
        - chevron-double-down
        - chevron-double-left
        - chevron-double-right
        - chevron-double-up
        - chevron-down
        - chevron-left
        - chevron-right
        - chevron-up-down
        - chevron-up
        - circle-stack
        - clipboard-document-check
        - clipboard-document-list
        - clipboard-document
        - clipboard
        - clock
        - cloud-arrow-down
        - cloud-arrow-up
        - cloud
        - code-bracket-square
        - code-bracket
        - cog-6-tooth
        - cog-8-tooth
        - cog
        - command-line
        - computer-desktop
        - cpu-chip
        - credit-card
        - cube-transparent
        - cube
        - currency-bangladeshi
        - currency-dollar
        - currency-euro
        - currency-pound
        - currency-rupee
        - currency-yen
        - cursor-arrow-rays
        - cursor-arrow-ripple
        - device-phone-mobile
        - device-tablet
        - document-arrow-down
        - document-arrow-up
        - document-chart-bar
        - document-check
        - document-duplicate
        - document-magnifying-glass
        - document-minus
        - document-plus
        - document-text
        - document
        - ellipsis-horizontal-circle
        - ellipsis-horizontal
        - ellipsis-vertical
        - envelope-open
        - envelope
        - exclamation-circle
        - exclamation-triangle
        - eye-dropper
        - eye-slash
        - eye
        - face-frown
        - face-smile
        - film
        - finger-print
        - fire
        - flag
        - folder-arrow-down
        - folder-minus
        - folder-open
        - folder-plus
        - folder
        - forward
        - funnel
        - gif
        - gift-top
        - gift
        - globe-alt
        - globe-americas
        - globe-asia-australia
        - globe-europe-africa
        - hand-raised
        - hand-thumb-down
        - hand-thumb-up
        - hashtag
        - heart
        - home-modern
        - home
        - identification
        - inbox-arrow-down
        - inbox-stack
        - inbox
        - information-circle
        - key
        - language
        - lifebuoy
        - light-bulb
        - link
        - list-bullet
        - lock-closed
        - lock-open
        - magnifying-glass-circle
        - magnifying-glass-minus
        - magnifying-glass-plus
        - magnifying-glass
        - map-pin
        - map
        - megaphone
        - microphone
        - minus-circle
        - minus-small
        - minus
        - moon
        - musical-note
        - newspaper
        - no-symbol
        - paint-brush
        - paper-airplane
        - paper-clip
        - pause-circle
        - pause
        - pencil-square
        - pencil
        - phone-arrow-down-left
        - phone-arrow-up-right
        - phone-x-mark
        - phone
        - photo
        - play-circle
        - play-pause
        - play
        - plus-circle
        - plus-small
        - plus
        - power
        - presentation-chart-bar
        - presentation-chart-line
        - printer
        - puzzle-piece
        - qr-code
        - question-mark-circle
        - queue-list
        - radio
        - receipt-percent
        - receipt-refund
        - rectangle-group
        - rectangle-stack
        - rocket-launch
        - rss
        - scale
        - scissors
        - server-stack
        - server
        - share
        - shield-check
        - shield-exclamation
        - shopping-bag
        - shopping-cart
        - signal-slash
        - signal
        - sparkles
        - speaker-wave
        - speaker-x-mark
        - square-2-stack
        - square-3-stack-3d
        - squares-2x2
        - squares-plus
        - star
        - stop-circle
        - stop
        - sun
        - swatch
        - table-cells
        - tag
        - ticket
        - trash
        - trophy
        - truck
        - tv
        - user-circle
        - user-group
        - user-minus
        - user-plus
        - user
        - users
        - variable
        - video-camera-slash
        - video-camera
        - view-columns
        - viewfinder-circle
        - wallet
        - wifi
        - window
        - wrench-screwdriver
        - wrench
        - x-circle
        - x-mark
  hero:
    comment: >-
      If a hero is not explicitly included, the default is to display the page
      title.
    type: object
    options:
      structures: _structures.hero_blocks
  show_note:
    type: switch
    comment: >-
      Hide/show the note that contains helpful information about the live
      editing of this component.
_structures:
  content_blocks:
    style: modal