kiln-5-docs.md

Kiln 5.0 Documentation

Narrative

Introduction

• npm installation stuff
• clay-kiln component
• kilnInternals component list
• user experience

Components

• template
  • kiln assumptions / styling
    • single root element
    • head components syntax
    • position: relative
  • data-uri
  • data-editable and data-placeholder
  • compiling templates for kiln
• schema
  • _description and _devDescription
  • fields + inputs (basic info)
  • groups (basic info)
  • preloading schemas for kiln
• models + controllers
  • preloading data on page load
  • not running client-side js in edit mode
  • preloading models for kiln
  • model.save and model.render timeouts

The Kiln UI

• edit vs view modes
• clay menu
  • page lists and searching
    • authors vs contributors
  • new page templates
  • users + auth
• undo / redo
• contributors + add to page
• find on page
  • head component lists
  • invisible component lists
• preview
• publish
  • scheduling
  • publishing immediately
  • custom urls
  • health check + validation
• deep-linking (forms, etc)

Manipulating Components

• component lists and properties
  • head
  • invisible
  • page-specific
• dragdrop reordering
  • limitations (same component)
• when should items be separate components vs complex lists?
• adding components
  • include
  • exclude
  • fuzzy
• removing components

Editing Components

• inline wysiwyg
• regular forms
  • sections
    • use for overrides
    • grouped by feature
• settings form
  • sections
    • grouped by feature
  • when to use settings:
    • head/invisible components
    • optional, non-frequently-accessed fields
    • manual fallbacks for automatic logic
• _label
• _reveal
• placeholders
  • validation (in placeholder)
• types of fields
  • standard inputs (text, radio, checkbox)
  • non-standard inputs
    • simple-list
    • segmented-button
    • powerful select
    • complex-list
  • attached buttons
    • lock
    • magic-button
• shared arguments
  • help
  • validate
    • required regular and conditional
    • min/max and counter
    • pattern for text inputs

Saving and Publishing

• saving component timeline
  • model timeouts
  • pubsub
  • kiln-specific pubsub
• rendering
• validation
• publishing

Customizing Kiln

• validators
• inputs + modals (mediaplay-picker as example)
• handlebars helpers
• selector + toolbar buttons
• vue plugins
• kiln api
  • standard classes
  • exported components
  • utils
  • accessing state
  • dispatching actions

Reference

Component Blueprint

• template
  • regular component
  • head component
• model
  • save
  • render
• schema
  • description
  • devDescription
  • version
  • fields
    • _label
    • _has
      • string syntax
      • object syntax
        • shared: help
        • shared: validate
        • shared: attachedButton
    • _reveal
    • _placeholder
  • groups
    • settings
    • _label
    • fields
    • _placeholder
      • ifEmpty

API

• classes
• utils
• components
• state
• actions