Cockpit Hybrid Mode Addon
This addon provides the ability to use Cockpit in an "non headless" mode! Cockpit is by nature an headless CMS, providing a rich UI to manage contents and an API to fetch them, that means the need of a frontend that can consume, transform and display the page contents. That is the current trend of the CMS's, so why reverting that?
Please note that the addon is the result of a Proof of Concept and therefore wasn't tested, it's possible that it doesn't work properly in some scenarios.
The concept is quite simple, in Cockpit we can bind routes to a Controller, so we can make a strategy to have routes that correspond to a collection, e.g.:
- Basic Page
- Blog Post
Using the BetterSlugs addon we can define a slug field that will match the above routes, so a blog entry will be
And implement our own controller that will get the page path, find the matching entry using the slug as filter, and finally render the entry. Twig engine is used for rendering the pages, so we have all flexibility that we need to manipulate the markup. The example theme is using Boostrap 4 native. Its possible to preprocess the results using the following hooks:
- theme_hbmode_process_entry($app, &$entry) The entry array can be manipulated before being rendered.
- theme_hbmode_process_header($app, &$vars) The header variables can be changed, in the example theme the navigation menu is build using a collection.
- theme_hbmode_process_footer($app, &$vars) The footer variables (e.g. copyright, etc..) can be changed.
- Install the BetterSlugs addon - https://github.com/pauloamgomes/CockpitCMS-BetterSlugs
- Download and unpack addon to
<cockpit-folder>/addons/HBmodeinstall dependencies by running:
$ composer install
- Copy the example theme (hbmode) from the install folder to
- Copy the example collection files from the install folder to
- Import the collections entries from the install folder
storage/collections/*.jsonfiles Step 5 and 6 are only required in way to work with the example theme.
If using the Helpers addon https://github.com/pauloamgomes/CockpitCMS-Helpers the steps 4, 5 and 6 can be simplified by running on the cockpit root folder:
$ ./cp install --name HBMode
hbmode: theme: hbmode homepage: collection: basic_page slug: /page/homepage routes: blog_post: collection: blog_post route: /blog/* template: blog.html.twig basic_page: collection: basic_page route: /page/* template: page.html.twig
The theme element defines the active theme (themes must be inside the
The homepage element defines the collection and corresponding slug that will be used to serve the homepage.
The routes will define the pattern and template used for our collections, so we can have different templates.
Play with the theme and change according to your needs. Twig templates are cached, caches are removed when cleaning the global cockpit cache.
- Public pages only work when user is logged out of cockpit
- Just text and image/assets are being handled
- Security?! This is mostly a Proof of Concept, security or performaace are not being addressed.
- Depending on the needs, the theme may need to be adjusted
- Not handling layouts, blocks or more dynamic contents.
- Excluding the homepage all slugs need to have a prefix (e.g. page, blog)
- Rethink how to deal with complex fields like layout grid
- Handle of custom components
- Handle authentication (right now pages cannot be previewed)
- Have non prefixed slugs working
- Load CSS and JS from the theme info.yaml file
- Code refactoring
Copyright and license
Copyright 2019 pauloamgomes under the MIT license.