A CLI for Cockpit Headless CMS that uses Cockpit SDK
-
Parses data structures from a project outputing meta-data that can be used directly on Cockpit.
-
Gets data from Cockpit collection schemas and components groups to make it easier to manipulate or generate.
cd my-app
npm install cockpit-cli
cockpit-cli [options]
#For example (--verbose || -v)
cockpit-cli --init, --menu, --components, --help
When setting up a project run --init
so that the CLI can set up a /cockpit
folder with a config.js
file to connect the project to cockpit using cockpit-sdk .
module.exports = {
host: "<HOST>",
accessToken: "<ACCESS_TOKEN>"
};
To edit the file at ./cockpit/config.js
:
-
Go into Cockpit and access a
collection
edit menu where the tab with the descriptionOther
should be selected. -
Enable the
CONTENT PREVIEW
option. This is where thehost
is (or should be). -
Copy the contents of those fields to the
config.js
file. -
The
accessToken
can be retrieved on Cockpit settings page atAPI access
. Choose betweenFull access API-key
or aCustom key
but please bear in mind that aCustom Key
permission level can be restricted in comparison to aFull access API-key
.
It's possible to edit theconfig.js
file at anytime but if in doubt about which one to choose, please checkout Cockpit API documentation.
└── src
├── components
│ ├── footer
│ │ └── definition.js
│ │ └── index.js
| |
│ └── heading
│ └── definition.js
│ └── index.js
|
└── layouts
└── bar
└── definition.js
└── index.js
# Or from the root
├── components
| └── paragraph
| └── definition.js
| └── index.js
|
└── layouts
└── bar
└── definition.js
└── index.js
folders: ['components', 'layouts', 'materials', 'elements', 'meta', 'pages', 'scripts']
definition.js
files should contain the structure for Cockpit components
like field names, types and options. Checkout the Cockpit fieldtypes documentation.
A paragraph
component could have a definition.js
file as described:
module.exports = {
group: "test",
fields: [
{
name: "color",
type: "collectionlink",
options: {
link: "Colors"
}
},
{
name: "text",
type: "textarea",
default: ""
},
{
name: "container",
type: "select",
options: {
options: ["medium", "small", "spaceless", "left-aligned"]
},
default: ""
},
{
name: "lead",
type: "boolean",
default: false
}
]
};
The output result from parsing this component
with the CLI is this:
"paragraph": {
"group": "test",
"fields": [
{
"name": "color",
"type": "collectionlink",
"options": {
"link": "Colors"
}
},
{
"name": "text",
"type": "textarea",
"default": ""
},
{
"name": "container",
"type": "select",
"options": {
"options": [
"medium",
"small",
"spaceless",
"left-aligned"
]
},
"default": ""
},
{
"name": "lead",
"type": "boolean",
"default": false
}
]
}
The CLI parses the content of the definition.js
file to .json
as showed above, and it can separate them in groups
by detecting if there is a value assigned to the key group
in the component/definition.js
file.
If no groups are specified then all groups are selected and this means all the definitions.js
files are going to be parsed and it is possible to generate a cockpit/components.json
file with all the parsed data or copy that data to the clipboard.
Launches the CLI menu where it's possible to:
-
💾 All collections
creates a folder at/cockpit/schemas
that contains data from all the schemas in all the collections in parsed to.json
format . -
💾 Select a collection
creates a folder at/cockpit/schemas
that contains data from the schema of the selected collection. -
The
Save
option always overwrites previous folders or files created by the CLI.
-
✂️ All
parses all thedefinition.js
files and copies the parsed result to the clipboard. -
✂️ Groups
launches a new menu where it is possible to select one of thegroups
that are defined in the project data structuredefinition.js
and copies the data from the component or components that correspond to the selectedgroup
to clipboard. -
💾 Save File
creates a file at/cockpit/components.json
with all the parsed data from all thedefinition.js
files. -
The
Save
option always overwrites previous folders or files created by the CLI.
Cockpit has a core
components structure, this means that when adding a new component there will always be a group of components already pre-defined to which it is possible to add your own.
The CLI outputs a data structure ready to be added to cockpit components.js
file.
- Go to Cockpit
- Access finder
- Select the
config folder
and inside it thecomponents.js
file
The parsed structure by the CLI can be pasted here, for example, adding the data of a specific component group
or overwriting the complete file by pasting the data from all component groups
.
The parsed data should be pasted in components.js
as an object:
window.CP_LAYOUT_COMPONENTS = {};
Only the contents of this object should be edited, like this:
window.CP_LAYOUT_COMPONENTS = {
"paragraph": {
"group": "test",
"fields": [
{
"name": "color",
"type": "collectionlink",
"options": {
"link": "Colors"
}
},
{
"name": "text",
"type": "textarea",
"default": ""
},
{
"name": "container",
"type": "select",
"options": {
"options": ["medium", "small", "spaceless", "left-aligned"]
},
"default": ""
},
{
"name": "lead",
"type": "boolean",
"default": false
}
]
}
}
After the file is saved and when trying to add a new component to a cockpit collection these components that were parsed by the CLI should now appear as an option inside their specified groups
.
Do not worry, just creat one:
- Go to Cockpit
- Access finder
- Select this icon
- Choose
folder
and name itconfig
- Go inside
config folder
and click the same icon - Choose
file
and name itcomponents.js
- Paste this inside the file:
window.CP_LAYOUT_COMPONENTS = {};
This simply acts as a shortcut to create the /cockpit/components.json
file and to copy the parsed data to the clipboard.