Building from Source: Creating new Koenig cards

Developer help
1

Hey folks, I’ve been working on a project which involves the Ghost CMS, and was hoping to expand on the Koeing card feature. Ultimately, I’m looking to add new cards and get rid of the old ones (read: default). Deletion of the old cards went well, so that’s not a concern. Background: I’ve been doing FE development on Ghost for about a year now, so I have a good understanding of the platform’s general workings.

What I’m hung up on is understanding how Koenig works. To me, it looks like there’s two components to each card, a koenig-card-CARDNAME.js and a koenig-card-CARDNAME.hbs. There’s also a requirement to register these cards in the cards.js file. I can create new cards, add them in, however they fail to render, with console logs making it clear that there’s a lot more required to add a new card.

So, my main questions are therefore:

  • How do I register a new card, what has to be done to make it usable in the editor;
  • What do the fields in the CARD_MENU.items object do;
  • Is there any developer documentation anywhere that I can dig into?

Thanks in advance!

Update: The use case assumes a non-technical end user who is not comfortable with HTML, but needs to create specific layouts. My objective is to eliminate direct contact with HTML for the user, and letting them populate text blocks within clearly defined areas.

1 Like
2

@spectral have you looked into exactly how it is that snippets are handled in the backend? What if snippets could be exported along with a theme? Or exported with content? Or somehow made portable?

1 Like
3

Good suggestion @denvergeeks I’ve taken a look at these before and they don’t quite fit the use case. I should have specified earlier: the end user is a non-technical end user. Essentially I’m trying to abstract away any contact with HTML to make sure there’s less moving parts which can be broken.

4

Snippets are injected into the database as HTML, so they can be exported to, for example, Gatsby.

I ultimately figured out how to do what I’m doing. To create custom cards, you’ll need to add a component here register it over here then for the tricky part, you will need to add the card to this library (inside the node modules), add it to the exports here then persist the patch with patch package. Lots of moving parts, but ultimately possible.

1 Like