<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd" method="html" encoding="ISO-8859-1"/>

<!--

There are three logical ways to create documents with RecipeBook XML.
This gives three logical choices for root elements:
  * cookbook - for a collection of recipes
  * section - for part of a cookbook
  * recipe - for a stand-alone recipe

The templates for converting each of these top-level elements into an
HTML page are shown below:

-->

<!-- cookbook as the root element -->

  <xsl:template match="/cookbook">
    <html>

    <head>
      <link rel="stylesheet" type="text/css" href="recipebook.css"/>
      <meta name="generator" content="recipebook.xsl"/>
      <title><xsl:value-of select="title"/></title>
    </head>

    <body>
      <xsl:apply-templates/>
    </body>

    </html>
  </xsl:template>


<!-- section as the root element -->

  <xsl:template match="/section">
    <html>

    <head>
      <link rel="stylesheet" type="text/css" href="recipebook.css"/>
      <meta name="generator" content="recipebook.xsl"/>
      <title><xsl:value-of select="title"/></title>
    </head>

    <body>
      <xsl:apply-templates/>
    </body>

    </html>
  </xsl:template>


<!-- recipe as the root element -->

  <xsl:template match="/recipe">
    <html>

    <head>
      <link rel="stylesheet" type="text/css" href="recipebook.css"/>
      <meta name="generator" content="recipebook.xsl"/>
      <title><xsl:value-of select="title"/></title>
    </head>

    <body>
      <xsl:apply-templates/>
    </body>

    </html>
  </xsl:template>


<!-- 

HTML markup is treated differently when section and recipe are not
root elements.  Specifically these elements are wrapped in <div> tags.

-->

<!-- section as a non-root element (part of a cookbook) -->

  <xsl:template match="/cookbook/section">
    <div class="section">
      <xsl:apply-templates/>
    </div>
  </xsl:template>


<!-- recipe as a non-root element (part of a cookbook or section) -->

  <xsl:template match="section/recipe">
    <div class="recipe">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  
<!-- Titles receive different HTML markup depending on parent. -->

<!-- cookbook title -->

  <xsl:template match="/cookbook/title">
    <h1 class="cookbook-title"><xsl:value-of select="."/></h1>
  </xsl:template>


<!-- section title -->

  <xsl:template match="section/title">
    <h2 class="section-title"><xsl:value-of select="."/></h2>
  </xsl:template>


<!-- recipe title -->

  <xsl:template match="recipe/title">
    <h3 class="recipe-title"><xsl:value-of select="."/></h3>
  </xsl:template>


<!-- Hyperlinks can be used almost anywhere in a document. -->

  <xsl:template match="hyperlink">
    <a href="{@url}"><xsl:value-of select="."/></a> 
  </xsl:template>


<!--

The templates below are used for elements in recipes regardless of
if the recipe is stand-alone, part of a section or part of a cookbook.
Most elements are wrapped in HTML <div> tags or <span> tags and assigned
a class.  This is done for two reasons, one being for easy CSS styling
and the other being to aid any JavaScript routines in making sense of
the various parts of the document.

 -->


<!--

For the recipeinfo element meta-information is only marked up if the
elements actually exist.  For example, if author is not given there will
not be a blank entry where a name should appear.

-->
 
  <xsl:template match="recipe/recipeinfo">
    <div class="recipeinfo">
      <p>
        <xsl:if test="blurb">
          <span class="blurb"><xsl:value-of select="blurb"/></span><br/>
        </xsl:if>
        <xsl:if test="genre">
          File under: <span class="genre"><xsl:value-of select="genre"/></span><br/>
        </xsl:if>
        <xsl:if test="author">
          Recipe by: <span class="author"><xsl:value-of select="author"/></span><br/>
        </xsl:if>
        <xsl:if test="source">
          Source: <span class="source"><xsl:apply-templates select="source"/></span><br/>
        </xsl:if>
        <xsl:if test="yield">
          Yield: <span class="yield"><xsl:value-of select="yield"/></span><br/>
        </xsl:if>
        <xsl:if test="preptime">
          Preptime: <span class="preptime"><xsl:value-of select="preptime"/></span><br/>
        </xsl:if>
      </p>
    </div>
  </xsl:template>


<!-- ingredientlist -->

  <xsl:template match="recipe/ingredientlist">
    <h4 class="ingredientlist-heading">Ingredients</h4>
    <div class="ingredientlist">
      <p>
        <xsl:apply-templates/>
      </p>
    </div>
  </xsl:template>


<!-- individual ingredients -->

  <xsl:template match="ingredient">
    <span class="ingredient"><xsl:apply-templates/></span><br/>
  </xsl:template>


<!--

Specific parts of ingredients are also wrapped in HTML <span> tags.
This is done to help JavaScript routines generate sensible shopping
lists from the list of ingredients and equipment lists from the
preparation steps.

-->

  <xsl:template match="ingredient/quantity">
    <span class="quantity"><xsl:value-of select="."/></span>
  </xsl:template>

  <xsl:template match="ingredient/unit">
    <span class="unit"><xsl:value-of select="."/></span>
  </xsl:template>

  <xsl:template match="ingredient/fooditem">
    <span class="fooditem"><xsl:value-of select="."/></span>
  </xsl:template>


  <xsl:template match="preparation/equipment">
    <span class="equipment"><xsl:value-of select="."/></span>
  </xsl:template>

<!--

Preparation, serving and notes elements are all displayed in a simple
paragraph format.

-->


<!-- preparation -->

  <xsl:template match="recipe/preparation">
    <h4 class="preparation-heading">Preparation Instructions</h4>
    <div class="preparation">
      <p><xsl:apply-templates/></p>
    </div>
  </xsl:template>


<!-- serving -->

  <xsl:template match="recipe/serving">
    <h4 class="serving-heading">Serving Instructions</h4>
    <div class="serving">
      <p><xsl:apply-templates/></p>
    </div>
  </xsl:template>


<!-- notes -->

  <xsl:template match="recipe/notes">
    <h4 class="notes-heading">Notes</h4>
    <div class="notes">
      <p><xsl:apply-templates/></p>
    </div>
  </xsl:template>

</xsl:stylesheet>

