Background

As an independent publishing platform, there are many very beautiful themes developed by Ghost team and 3rd party developers, and there are many many very beautiful website powered by Ghost. Currently the themes developers focus more on the customization of global layout of the site, the menu bars, navigation, post card appearance, etc. These themes and templates are used to enhance the appearance and the user experience of the overall site. But few of them has enough improvement on the post itself.

This is exactly we want to do - bring the immersion storytelling ability into Ghost platform.

Objective

In order to bring better story reading experience to the readers, we need the following abilities:

  • A universal extensible mechanism that allows us to insert different kinds of content fragments in posts.
  • A universal hook mechanism that allows us to use some scripts to control the appearance and behavior of content within the scope of the post. Such interaction may be triggered by events such as reading progress changes or button clicks.
  • Some optimized post templates allow us to show readers an immersive reading experience, such as a large background image/video/map, and overlap with the narrative content in the view. These templates should be easy to activate and compatible with the default post templates.

Solution

Our solution including the following items:

  1. A customized distribution of Ghost package, with generic extension card mechanism available both at the Ghost server side and also the Ghost admin client.
  2. A set of extension cards is also available for download.
  3. A storytelling theme which has a premium custom template for posts and pages. The custom template has smart layout process for the content so that it works for both desktop browser and mobile web view. It also provide i18n support with Chinese translation, and enable PWA support.

Comparison

Original Ghost platform provides embed cards and integration support, why we need to reinvent the wheel? The integration is mainly used at the server side, which enable user-defined behavior upon a certain event. Our work is mostly on the front-end and administration client side, so we compare the difference between our extension card solution and the original embed card as following:

embeded card extension card
underlying HTML tag iframe div
content type compatible with any web pages depends on the implementation
content storage hosted by the 3rd web sites depends on the card implementation, could be integrated into the post mobiledoc data structure
Javascript interactivity very difficult to manage. depends on the JS developed by 3rd party web site unified render and hooks, easy to implement