Multiplane – a frontend on top of Cockpit CMS

Multiplane is a lightweight PHP frontend – based on the headless Cockpit CMS. It was never meant as a one-click solution, but as a base for developers, who like to fiddle, to create individual websites.

Unfortunately, it never took off. After wasting half a decade of my life many iterations of learning and fine-tuning, I had to stop. The project heavily relied on internal APIs – and Multiplane became incompatible with Cockpit version 2.

Toggle table of contents

What I’ve learned

A lot! About object oriented programming, error handling, reactive UI frameworks, open source licenses, user interaction, writing documentation, weird edge cases and much more…

Communicating in English with people from all around the globe was a great experience. At some point I noticed, that my restricted vocabulary wasn’t too small. It was actually the right amount to chat with other non-native speakers.

Finding and solving bugs, helping others, seeing my own source code being used by others felt great. Now I know, how content management systems work. I touched all parts, wrote many of them myself, read vendor libraries and fixed bugs over there.

Everything’s great, right? Some hard learned lessons:

Writing a CMS is too big for one person. Also for two. And probably for three.

Don’t use internal APIs! (Well…, I still do. But I keep the number low and add code comments with warnings now.)

Avoid vendor lock-in! Always! And keep the number of dependencies low.

Accessibility doesn’t work as an after-thought.

There is no such thing as an “open source community”. Rarely, I encounter beautiful people and have intense, eye-opening conversations. Sometimes, I can peek in a brilliant mind by reading their source codes. Often, I lose faith in humanity. Mostly it’s reclusive, sometimes lonely – or para-social.

Don’t use an open source project as the primary source for your self-esteem. You may break with the next vendor update. As a general rule: Don’t derive your self-esteem from a single source – not from work, not from a single person, not from your pet project. Or as marketers would say: diversification is key.

What I’ve done

I wrote a head for a headless CMS. “Why reinventing the wheel?” you may ask.

In short: I wasn’t able to find an existing system, that matched my goals:^[1]

1. Privacy by design and by default
2. Developer friendly
   • no plugins needed to deactivate half of the core features
   • ability to adjust everything
   • theming without div soup
3. Clean backend for my clients
4. Structured data to keep the system and data portable and future proof
5. Modular and reusable code
6. Semantic html, responsive css, usable without JavaScript
7. Multilingualism by design

Long answer: In the past, I mostly worked with WordPress and the static site generator (SSG) jekyll. Sometimes I had a look at different systems.

I liked jekyll’s data structure. Personally, I don’t have a problem with writing text in markdown, changing a data set in YAML or adding missing (liquid) templates matching that change. But you can’t expect this from non-programmers. They need a well-arranged user interface. Also, I missed forms without loading third party services via JavaScript – an unsolved problem of all SSGs. And… it’s written in Ruby, which I never learned or even touched. I can’t write or modify plugins.

WordPress seems to be user friendly – as long, as your data fits their predefined structure. It’s not developer friendly: more than 2.000 functions in the global scope, backwards compatibility to the outdated PHP5, many similar named functions, no output buffer. Their plugin ecosystem is full of adware and bloatware. No sensibility for privacy (e. g. Google fonts, Gravatar), security issues… the list goes on.

With Cockpit, I found the ideal backend. It’s easy to extend, stores data in a structured way and provides multiple interfaces to query that data. While exploring it, I discovered a lot of on-board tools – for building a frontend.

My first prototype was Monoplane, only useful for simple, single-language portfolio websites. It evolved to CpMultiplane – later renamed to Multiplane – with many more features like multilingualism, full-text search and custom post types.

Components

Multiplane is both: a wrapper (or framework) and a Cockpit addon. It loads Cockpit as a library, sets some constants, changes a few variables and than registers itself, the module Multiplane.

Cockpit CMS (backend)

Cockpit is headless without a frontend. It is created for pure data management in a structured way and has multiple interfaces to get or change that data. Multiplane uses the PHP API for the frontend and the default user interface as backend.

The most important libraries are already included, but in total it was kept clean and simple. It’s modular, event based and was made to be customized.

Multiplane (frontend)

This module is the gateway between backend (Cockpit) and frontend (Multiplane) to create different configuration profiles or to adjust the user interface.

It also takes care of translating url paths into database request and to deliver the data as HTML.

UniqueSlugs addon

By default, Cockpit only provides cryptic strings as unique identifiers. This addon creates unique, human-readable and SEO-friendly url parts from page titles (called “slug”).

FormValidation addon

Cockpit’s core Forms module is quite rudimentary. The FormValidation addon provides a form builder and validator.

Other addons

Incomplete list of more useful addons:

• ImageResize to handle different image formats (thumbnail, medium, big) automatically
• rljUtils for useful helpers, UI adjustments and security fixes in multi-user setups
• VideoLinkField to extract information and download thumbnails from videos on YouTube or Vimeo
• EditorFormats (by Paulo Gomes) to fine-tune the WYSIWYG editor

Base and child theme

Multiplane ships with one base theme, creatively named “rljbase”, that serves as skeleton for child themes and provides:

• template files for most use cases (using “Lexy” templating, part of Cockpit v1’s core)
• a rudimentary, responsive layout (CSS)
• a lightweight JavaScript library mp.js

It works without JavaScript, but without JS, some features would be missing:

• simple cookie management
• handling privacy events (cookie banner when embedding third-party resources)
• video embedding
  • without JS: display linked thumbnail to video
  • with JS: emit privacy event for user consent before embedding
• simple image lightbox
• simple mail address protection (converts obfuscated addresses to valid ones)
• preventing a :target jump in the pure CSS mobile navigation^[2]

Resources

• Multiplane on Codeberg
• Thread in Cockpit forum about Monoplane and Multiplane
• Thread in Cockpit forum about why I left
• Multiplane docs repository (website with docs is offline)
• inofficial docs for Cockpit v1 by zeraton (official v1 docs are offline)
• Cockpit v1 source code
• official Cockpit website