🔥 Editing tools for Clay 🔥
Powering New York Magazine, Vulture, The Cut, Grub Street. Created by New York Media.
npm install --save clay-kiln
Kiln comes with compiled scripts and styles, most of which will be automatically inlined by the template.
The logged-in scripts must be copied (from dist/clay-kiln-edit.js
and dist/clay-kiln-view.js
) into your publicly-served assets directory, as they'll be linked by <script src="https://github.com/clay/clay-kiln/raw/master/[site assetPath]/js/clay-kiln-edit.js">
and <script src="https://github.com/clay/clay-kiln/raw/master/[site assetPath]/js/clay-kiln-view.js">
.
This allows your end users' browsers to cache the (fairly weighty) Kiln application code, speeding up page loads across your sites.
As Kiln itself is a component, it must be included in your layouts and have some data, e.g. allow: true
(a convention we use for components that don't otherwise have data in them). Add an instance of Kiln to your bootstraps:
components:
clay-kiln:
instances:
general:
allow: true
Then create a non-editable component list in your layout (preferably near the end), and add a reference to your Kiln instance:
components:
layout:
instances:
article:
kilnInternals:
-
_ref: /_components/clay-kiln/instances/general
Make sure you add that component list to your layout template, and double check that it isn't editable:
<div class="kiln-internals">{{ > component-list kilnInternals }}</div>