🔥 Editing tools for Clay
npm install --save @nymdev/clay-kiln
Kiln will automatically compile scripts and styles after installing.
To include it in your site, add it to your bootstrap:
components: clay-kiln: allow: true
Then add it to any layouts you want to use it on:
components: layout: instances: article-layout: top: - _ref: /components/clay-kiln
Kiln will automatically display its toolbar (and load its scripts and styles) when you visit a page with
?edit=true as a query param.
Kiln has a simple client-side api that is used to extend its functionality. It consists of a global
kiln object, with
decorators (array), and
- Behaviors — run on each field when opening forms
- Decorators — run on each field (elements with
data-editable) when the page is loaded
- Validators — run when clicking the
PUBLISHbutton and block publishing if they don't validate
To add custom
validators, simply add them to the
kiln object before the page's
DOMContentLoaded event fires.
Inside The Kiln
validators are standardized, we may add them into the kiln directly. They live in their respective folders, and can be overridden by clay instances as needed.
- Behaviors — scripts and styles for standard behaviors
- Controllers — handlers attached to editable components, forms, toolbars, etc
- Decorators — scripts for standard decorators, including
- Media — svgs used by standard behaviors, decorators, and other kiln elements
- Services — internal services including editing, database access, and form creation
- Styleguide — Kiln styleguide, used by standard behaviors, decorators, validators, and other kiln elements
- Validators — scripts for standard validators
This file bootstraps internal and external
validators. When the
DOMContentLoaded event fires it instantiates a
component-edit controller for each component on the page. This controller calls the decorators it needs (to attach click events to editable elements, or add placeholders, etc) and instantiates any services required (like component selectors).
npm testwill run
karmatests (the latter being run on browserify).
npm run lintwill run
eslintlocally on the script folders, as well as
npm run test-localwill run
karmatests locally (using
karma.local.conf.js) and auto-watch for changes
gulp watchwill automatically re-compile scripts and styles on change