h-recipe

By chimo on (updated on )

Last week, I revamped how the “recipe” section on here is laid out.

The recipes are now split across five categories:

  • Desserts
  • Drinks
  • Ingredients (for a lack of a better term)
  • Mains
  • Sides

The URLs also reflect this (ex: /desserts/brownies/).

At the same time, I updated the yaml markup for recipes to be more structured. Especially when it comes to the ingredients list. Each ingredient is now (usually) composed of:

  • a measurement (ex: 2)
  • a unit (ex: cup)
  • a name (ex: berries)
  • a description (ex: fresh or thawed)

Which is represented in YAML via:

ingredients:
  - measurement: 2
    unit: cup
    name: berries
    description: (fresh or frozen, thawed)
  - measurement: 2-4
    unit: tablespoons
    name: maple syrup

Which then allows for structured HTML markup such as:

<ul>
  <li class="h-ingredient">
    <span class="p-measurememt">2</span>
    <span class="p-unit">cup</span>
    <span class="p-name">berries</span>
    <span class="p-description">(fresh or frozen, thawed)</span>
  </li>
  <li class="h-ingredient">
    <span class="p-measurememt">2-4</span>
    <span class="p-unit">tablespoons</span>
    <span class="p-name">maple syrup</span>
  </li>
</ul>

The HTML markup is based on the h-recipe microformat, except that I’m making “ingredient” a structured object since I want to capture other details about it along with its name.

I have no idea if this is the proper way of implementing this, but this microformats parser seems to return something similar to what I had in mind.

By the way, the “layout” that translates the YAML to HTML is located here, if that’s of any interest.