Punchcard Content Types

Combines with Input Plugins to create Content Types in the Punchcard CMS

Installation

npm install punchcard-content-types --save

Usage

Defining a Content Type

Content Types are defined as YAML files. They include a name, a description, and an array of attributes describing which Input Plugins should be used and configured. By default, content types will be looked for in the content-types directory from the current running process. If using the config module, contentTypes.directory can be set to the path being used, again relative to the directory of the current running process.

name: My Awesome Content Typedescription: I'm making an awesome new content type!attributes:
- type: textid: favorite-rangername: Favorite Power Rangerdescription: This is my favorite power rangerinputs:
text:
placeholder: I like the Green Ranger
- type: selectid: favorite-ice-creamname: Favorite Ice Creaminputs:
select:
settings:
options:
- Chocolate
- Vanilla
- Strawberryrequired: true
- type: date-rangeid: awesome-yearsname: Awesome Yearsinputs:
startDate:
label: Start Datesettings:
year:
min: 1980endDate:
label: End Datesettings:
year:
max: 2015

Content Types

There are three ways to retrieve content types; you can retrieve the raw content type definitions, the content type definitions with their input plugins merged together with the definition's settings, and a single content type that has been merged. The later will also allow you to pass in configuration from your application to merge with the definition, allowing, for instance, the value of a given input plugin to be added.

All methods return a Promise.

Raw Content Types

Will return an Array of content type definitions, each being an Object. There are no parameters to pass in.

constcontentTypes=require('punchcard-content-types');contentTypes.raw().then(types=>{// Raw Content Typesconsole.log(types);});

Merged Content Types

Will return an Array of content type definitions, each being an Object, with attributes replaced by individual Input Plugin instances that have been merged with the raw content type options. There are no parameters to pass in.

constcontentTypes=require('punchcard-content-types');contentTypes().then(types=>{// Merged Content Typesconsole.log(types);});

Merged Content Type using config

Will return an Array of content type definitions (that contains only one content type), each being an Object, with attributes replaced by individual Input Plugin instances that have been merged with the raw content type options. There are no parameters to pass in.

constcontentTypes=require('punchcard-content-types');constfooContentObj={'name': 'FooRific','description': 'A very foo content model.','attributes': [{'type': 'email','id': 'email','name': 'Email','description': 'Your email is your username',},],};// Content Type object must be an arraycontentTypes([fooContentObj]).then(types=>{// Array with one Content Typeconsole.log(types);});

Single Content Type

Will return an Object of a single merged content type, optionally with userland config that will be merged on top of the merged content type. Users may choose to pass in the Array of merged content types in for it to work with, or have it load and merge content types itself.

• typeRequired - id name of content type to be retrieved.
• config - Object with keys matching input plugin id from content type definitions, values being object containing the keys from inputs and values being object to be merged.
• loadedTypes - Array of loaded, merged content types

constcontentTypes=require('punchcard-content-types');constconfig={'favorite-ice-cream': {select: {value: 'Vanilla'}}}contentTypes.only('my-awesome-content-type',config).then(types=>{// Single Content Typeconsole.log(types);});

Input Plugins

The tests for input plugins are available if using the AVA test runner. To do so, add a test file, import the plugin tester, and pass AVA's test and the plugin in to the test scaffolding.

importtestfrom'ava';importtypesfrom'punchcard-content-types';importpluginfrom'../';// Input Plugin's index.jstypes.pluginTests(test,plugin);

Create your forms

Usage

In your node application:

contcontent=require('punchcard-content-types');content.only('my-awesome-content-type').then(type=>{returncontent.form(type);}).then(form=>{// use form object within your html to create a content type form (see below)});

In your HTML

<formaction="{{action}}" method="post" enctype="multipart/form-data" novalidate>
{{form.html | safe}}
<fieldsetid="sunrise-sunset"><legend>Select Sunrise and Sunset</legend><labelfor="sunrise-date"><inputtype="date" name="sunrise-date" id="sunrise-date" value="{{data['sunrise-date'].value}}"></label><labelfor="sunrise-time"><inputtype="time" name="sunrise-time" id="sunrise-time" value="{{data['sunrise-time'].value}}"></label><labelfor="sunset-date"><inputtype="date" name="sunset-date" id="sunset-date" value="{{data['sunset-date'].value}}"></label><labelfor="sunset-time"><inputtype="time" name="sunset-time" id="sunset-time" value="{{data['sunset-time'].value}}"></label></fieldset><buttontype="submit">Submit</button><buttontype="cancel">Cancel</button></form><script>{{form.validation|safe}}{{form.scripts|safe}}</script><scripttype="text/javascript" src="/js/sunrise-sunset.js"></script>

Form response object

form.html// string of wrapped form elements; should be placed inside a <form> tagform.validation// validation, wrapped for browser via browserifyform.script// UX scripts, wrapped for browser via browserify