Standardizing Ghost Client Development

Standardizing Ghost Client Development

While Ghost is a great blogging platform, developers of custom themes may find themselves reinventing some common blog functionality (Google analytics, blog comments, etc.) Each developer has most likely come up with their own way to implement each of these features in their blog. But what happens when the blog owner changes themes? Right now, they'd have to redo all of their code injection to match the requirements of the new theme. If there was a standard way to define these properties, then switching themes would be easy and would not require any changes on the user's part.

Jack Preston has developed a great standard for setting common configuration values by using his GTCA object. It meets the needs of a good standard for configuration variables.

It is a great idea and I'd like to expand on it a little.

Functional Standardization

While configuration settings are the current purpose behind GTCA, I would like to put forth an additional use case: functional standardization.

There are things that I would like to add to all of my themes that require the user of the theme to call a function on the window object. It would be nice if I could roll those calls into a functional GTCA standard.

However, this will require a bit more effort with regard to GTCA development and deployment. In short, it would require that GTCA go from being a simple "include this code somewhere in your page before {{ghost_head}}" to being a full-fledged CDN-hosted .js file that theme designers could include (or download).


Here is what I would add first if GTCA were to add functions in addition to variables. This code adds the ability to bind icons to any element by using a specific CSS class and providing a Font Awesome icon name as well as an optional size.

Then, all the GTCA-compliant theme author would have to do is add a link to the gtca.min.js file in their default.hbs file.

Then, they would instruct their users to put the following code in their settings on Ghost:

window.__themeCfg.iconMap.defaultIconSize = 'fa-lg';
window.__themeCfg.addLinkIcon('nav-home', 'fa-home');

Of course, this opens the doors for the possible nightmare of dependencies (my code makes use of jQuery). I'm sure I could rewrite my code to be plain old JavaScript, so that would limit some of the liability.

So, in this case, I would include a link to the gtca.min.js file as well as the gtca-icon-map.min.js file in my default.hbs file.

My idea is not fully fleshed out, but I'd like to put it out there for discussion. I think GTCA is a great idea and a good start to add client functionality to Ghost.

I am afraid that this line of thinking could lead to over engineering and we'd end up with a big giant mess, but I do feel that some basic functionality in addition to configuration data would be acceptable.