---
pagination:
  data: recipes
  size: 1
  resolve: values
  alias: recipe
  addAllPagesToCollections: true
permalink: "recipes/{{ recipe.title | slug }}/"
eleventyComputed:
  title: "{{ recipe.title }}"
layout: main.njk
tags: recipe
---
<a href="{{ '/' | url }}">↜ back</a>

<div id="recipe-meta">
  <h1 id="recipe-title">{{ recipe.title }}</h1>
  <p id="recipe-description">{{ recipe.description }}</p>

  <p id="recipe-details">
    <span id="recipe-author">
      Added by
      <a href="{{ recipe.author.tilde }}~{{ recipe.author.username }}">~{{ recipe.author.username }}</a>
      <small><i>({{ recipe.author.tilde | domain }})</i></small>
    </span>
    &bull;
    <span id="recipe-date">Added {{ recipe.date | date }}</span>
    {% if recipe.timings %}
      &bull;
      <span id="recipie-times">
        Prep: {{ recipe.timings.prep }} min,
        Cook: {{ recipe.timings.cook }} min,
        Total: {{ recipe.timings.cook + recipe.timings.prep }} min
      </span>
    {% endif %}
    {% if recipe.servings %}
      &bull;
      <span id="recipie-servings">{{ recipe.servings }} servings</span>
    {% endif %}
  </p>
</div>

<div id="recipe-ingredients">
  <h2>Ingredients</h2>

  <ul>
  {% for ingredient in recipe.ingredients %}
    <li>{{ ingredient }}</li>
  {% endfor %}
  </ul>
</div>

<div id="recipe-instructions">
  <h2>Instructions</h2>

  <ol>
    {% for step in recipe.instructions %}
      <li>{{ step }}</li>
    {% endfor %}
  </ol>
</div>

<div id="recipe-footer">
  {% if recipe.source %}
    <p>Source: {{ recipe.source }}</p>
  {% endif %}
</div>