eleventy-plugin-cloudcannon
v1.2.1
Published
Eleventy plugin to create CloudCannon editor details
Downloads
5,086
Readme
Eleventy Plugin CloudCannon
An Eleventy (11ty) plugin that creates CloudCannon build information.
This plugin runs during your Eleventy build, discovering your pages, collections, and data files to create a JSON file used to automatically integrate the site with CloudCannon.
Installation
You don't have to install anything when building on CloudCannon. This plugin is automatically installed before your site is built. This gives you the latest support, new features, and fixes as they are released.
Although not recommended, you can disable the automatic installation and install the plugin manually.
When installing manually, you'll have to upgrade when new versions are released. You could also follow these steps to debug an integration issue locally.
Start by enabling the "Manage eleventy-plugin-cloudcannon plugin manually" option in CloudCannon for your site in Site Settings / Build.
npm install --save eleventy-plugin-cloudcannon
Add the following addPlugin
call to your .eleventy.js
file.
The second parameter is optional, and used to pass plugin options.
const pluginCloudCannon = require('eleventy-plugin-cloudcannon');
module.exports = function (eleventyConfig) {
const options = {
pathPrefix: '/',
dir: {
input: '.',
data: '_my-custom-data',
layouts: '_layouts',
includes: '_my-includes'
}
};
eleventyConfig.addPlugin(pluginCloudCannon, options);
return options;
};
Configuration
This plugin uses an optional configuration file as a base to generate _cloudcannon/info.json
(used to integrate your site with CloudCannon).
Add your global CloudCannon configuration to this file, alongside any optional configuration for this plugin.
Configuration files should be in the same directory you run npx @11ty/eleventy
. The first
supported file found in this order is used:
cloudcannon.config.json
cloudcannon.config.yaml
cloudcannon.config.yml
cloudcannon.config.js
cloudcannon.config.cjs
Alternatively, use the CLOUDCANNON_CONFIG_PATH
environment variable to use a specific config file
in a custom location:
$ CLOUDCANNON_CONFIG_PATH=src/cloudcannon.config.js npx @11ty/eleventy
Example content for cloudcannon.config.cjs
:
module.exports = {
// Global CloudCannon configuration
_inputs: {
title: {
type: 'text',
comment: 'The title of your page.'
}
},
_select_data: {
colors: ['Red', 'Green', 'Blue']
},
// Base path to your site source files, same as input for Eleventy
source: 'src',
// The subpath your built output files are mounted at
base_url: '/documentation',
// Populates collections for navigation and metadata in the editor
collections_config: {
people: {
// Base path for files in this collection, relative to source
path: 'content/people',
// Whether this collection produces output files or not
output: true,
// Collection-level configuration
name: 'Personnel',
_enabled_editors: ['data']
},
posts: {
path: '_posts',
output: true
},
pages: {
name: 'Main pages'
}
},
// Generates the data for select and multiselect inputs matching these names
data_config: {
// Populates data with authors from an data file with the matching name
authors: true,
offices: true
},
paths: {
// The default location for newly uploaded files, relative to source
uploads: 'assets/uploads',
// The path to site data files, relative to source
data: 'data', // defaults to _data
// The path to site layout files, relative to source
layouts: '_layouts', // defaults to _includes
// The path to site include files, relative to source
includes: '_partials' // defaults to _includes
}
};
See the CloudCannon documentation for more information on the available features you can configure.
Plugin options
Configuration is set in cloudcannon.config.*
, but the plugin also automatically
reads the following from Eleventy if unset:
paths
fromdir
in.eleventy.js
optionsbase_url
frompathPrefix
in.eleventy.js
optionssource
from the--input
CLI option ordir.input
in.eleventy.js
options
These options match Eleventy's configuration format and are set in one of three ways:
Requires automatic installation.
module.exports = function (eleventyConfig) { return { pathPrefix: '/', dir: { input: '.', data: '_my-custom-data', layouts: '_layouts', includes: '_my-includes' } }; };
Requires automatic installation or needs to be before the call to addPlugin
.
module.exports = function (eleventyConfig) { eleventyConfig.cloudcannonOptions = { pathPrefix: '/', dir: { input: '.', data: '_my-custom-data', layouts: '_layouts', includes: '_my-includes' } }; };
const pluginCloudCannon = require('eleventy-plugin-cloudcannon'); module.exports = function (eleventyConfig) { const options = { pathPrefix: '/', dir: { input: '.', data: '_my-custom-data', layouts: '_layouts', includes: '_my-includes' } }; eleventyConfig.addPlugin(pluginCloudCannon, options); return options; };
License
MIT