What's involved in implementing a "Recipe" Card?

Developer help
1

I’m looking into what would be involved in implementing a “recipe” card. Here’s my guess about how it might work:

  1. Follow the example of existing cards to get the “Recipe” card to appear as an option
  2. Build an HTML form which collects all the Recipe details
  3. Store the recipe in the database using Mobiledoc with a new “Recipe” type and special “recipe” JSON data structure.
  4. When it’s time to preview/render the Recipe, use some custom JavaScript to translate the recipe both into HTML for display and also the “recipe” JSON format that would be injected into the HTML “” section.

From reviewing the existing cards, it looks like there’s currently not one that injects content into the document as well as the body.

Does this flow sound right?

Thanks!

1 Like
2

I found that cards are loaded here:

There is no mechanism there to load non-default cards. It seems the code needs to be patched/forked to load non-default cards.

However, it does not seem hard to make this extensionable. There could be a config value for “extraCardModules”, which would be an array of additional modules names to load.

Then, within a try/catch, the code here in mobiledoc.js could try to load each module. If the module is successfully is found and loaded, it would be appended to the list of cards here.

That could solve the rendering part at least. I still need to find the frontend code where the cards are created and edited.

1 Like
3

I did some more research into using Ghost for posting structured recipe content. I found no precedents for people doing this, but I confirmed that Wordpress absolutely dominates when it comes to recipe blogging. There are multiple fully-featured extensions for Wordpress.

With Ghost, there’s the extra hurdle that you have fork the project just to have custom card support. Three years ago a Ghost issue said that custom cards were on the “long term radar”. I don’t expect that foundational piece to appear any time soon.

If you just want to post a small number of recipes on Ghost with structured LD+JSON metadata, you could do that by using a tool which generates the metadata directly. Then copy/paste into the place on the post edit screen to inject code into the header. Here are two tools for that:

1.Entree Schema Markup Generator (JSON-LD, Microdata & RDFa)
2. Recipe Schema Markup Generator | Web Code Tools

This would take about an extra 5 minutes per recipe to post.Then you’d have to manually keep the meta data and post content in sync if you made changes.

If you plan to post a lot of recipes, today Wordpress is the right tool for the job.

1 Like