webDNA Component Library

Context 

<h1>
    Sample Data</h1>

<p>
    Here is the set of sample data to be used throughout the styleguide components.
</p>

<ul>
    <li>
        <a href="#people">People</a>
    </li>
    <li>
        <a href="#images">Images</a>
    </li>
    <li>
        <a href="#siteName">Sitename</a>
    </li>
    <li>
        <a href="#siteUrl">Siteurl</a>
    </li>
</ul>

<h3 id="people">People</h3>

<dl>
    <hr/>

    <dl>
        <dt>name</dt>
        <dd>
            John Smith
        </dd>
        <dt>telephone</dt>
        <dd>
            555 - 3246591
        </dd>
        <dt>gender</dt>
        <dd>
            Male
        </dd>
        <dt>email</dt>
        <dd>
            john@exampleemail.com
        </dd>
        <dt>avatar</dt>
        <dd>
            <img src="http://i.pravatar.cc/300" />
        </dd>
    </dl>
</dl>
<hr/>

<dl>
    <dt>name</dt>
    <dd>
        Lucy Carter
    </dd>
    <dt>telephone</dt>
    <dd>
        555 - 6327445
    </dd>
    <dt>gender</dt>
    <dd>
        Female
    </dd>
    <dt>email</dt>
    <dd>
        lucy@exampleemail.com
    </dd>
    <dt>avatar</dt>
    <dd>
        <img src="http://i.pravatar.cc/300" />
    </dd>
</dl>
</dl>
<hr/>

<dl>
    <dt>name</dt>
    <dd>
        Simon Fletcher
    </dd>
    <dt>telephone</dt>
    <dd>
        555 - 2335213
    </dd>
    <dt>gender</dt>
    <dd>
        Male
    </dd>
    <dt>email</dt>
    <dd>
        simon@exampleemail.com
    </dd>
    <dt>avatar</dt>
    <dd>
        <img src="http://i.pravatar.cc/300" />
    </dd>
</dl>
</dl>
<hr/>

<dl>
    <dt>name</dt>
    <dd>
        Jeremy Edwards
    </dd>
    <dt>telephone</dt>
    <dd>
        555 - 4297642
    </dd>
    <dt>gender</dt>
    <dd>
        Male
    </dd>
    <dt>email</dt>
    <dd>
        jeremy@exampleemail.com
    </dd>
    <dt>avatar</dt>
    <dd>
        <img src="http://i.pravatar.cc/300" />
    </dd>
</dl>
</dl>
<hr/>

<dl>
    <dt>name</dt>
    <dd>
        Sarah Jones
    </dd>
    <dt>telephone</dt>
    <dd>
        555 - 6678903
    </dd>
    <dt>gender</dt>
    <dd>
        Female
    </dd>
    <dt>email</dt>
    <dd>
        sarah@exampleemail.com
    </dd>
    <dt>avatar</dt>
    <dd>
        <img src="http://i.pravatar.cc/300" />
    </dd>
</dl>
</dl>

<h3 id="images">Images</h3>

<dl>
    <hr/>

    <dt>normal</dt>
    <dd>
        <img src="https://unsplash.it/2000/1500/?random" />
    </dd>
</dl>
<hr/>

<dt>greyscale</dt>
<dd>
    <img src="https://unsplash.it/g/2000/1500/?random" />
</dd>
</dl>
<hr/>

<dt>blurred</dt>
<dd>
    <img src="https://unsplash.it/2000/1500/?random&blur" />
</dd>
</dl>
<hr/>

<dt>avatar</dt>
<dd>
    <img src="http://i.pravatar.cc/800" />
</dd>
</dl>

<h3 id="siteName">Sitename</h3>

<p>
    siteName
</p>

<h3 id="siteUrl">Siteurl</h3>

<p>
    /
</p>
 
{% macro output( val, handle ) %}{% spaceless %}
  {% set handle = handle is iterable ? handle|join( '.' ) : handle %}
  {% set imageTypes = [
    'images',
    'avatar'
    ] %}
  {% if handle in imageTypes %}
    <img src="{{ val }}" />
  {% else %}
    {{ val }}
  {% endif %}
{% endspaceless %}{% endmacro %}
{% import _self as functions %}

<h1>Sample Data</h1>

<p>
  Here is the set of sample data to be used throughout the styleguide components.
</p>

{# Create table of contents #}
<ul>
  {% for handle,context in _self.context %}
    <li>
      <a href="#{{ handle }}">{{ handle|capitalize }}</a>
    </li>
  {% endfor %}
</ul>


{# Automatically loop through all the context data just to output what is stored #}
{% for handle,context in _self.context %}

  <h3 id="{{ handle }}">{{ handle|capitalize }}</h3>

  {# Check to see if we are dealing with an area #}
  {% if context is iterable %}
    <dl>
      {% for itemKey,item in context %}
      <hr/>

        {% if item is iterable %}
          <dl>
            {% for key,val in item %}
              <dt>{{ key }}</dt>
              <dd>
                {{ functions.output( val, key ) }}
              </dd>
            {% endfor %}
          </dl>
        {% else %}
          <dt>{{ itemKey }}</dt>
          <dd>
            {{ functions.output( item, handle ) }}
          </dd>
        {% endif %}
    </dl>
    {% endfor %}

  {% else %}
    {# Probably just a string to output #}
    <p>
      {{ functions.output( context, handle ) }}
    </p>
  {% endif %}

{% endfor %}

{
  "people": [
    {
      "name": "John Smith",
      "telephone": "555 - 3246591",
      "gender": "Male",
      "email": "john@exampleemail.com",
      "avatar": "http://i.pravatar.cc/300"
    },
    {
      "name": "Lucy Carter",
      "telephone": "555 - 6327445",
      "gender": "Female",
      "email": "lucy@exampleemail.com",
      "avatar": "http://i.pravatar.cc/300"
    },
    {
      "name": "Simon Fletcher",
      "telephone": "555 - 2335213",
      "gender": "Male",
      "email": "simon@exampleemail.com",
      "avatar": "http://i.pravatar.cc/300"
    },
    {
      "name": "Jeremy Edwards",
      "telephone": "555 - 4297642",
      "gender": "Male",
      "email": "jeremy@exampleemail.com",
      "avatar": "http://i.pravatar.cc/300"
    },
    {
      "name": "Sarah Jones",
      "telephone": "555 - 6678903",
      "gender": "Female",
      "email": "sarah@exampleemail.com",
      "avatar": "http://i.pravatar.cc/300"
    }
  ],
  "images": {
    "normal": "https://unsplash.it/2000/1500/?random",
    "greyscale": "https://unsplash.it/g/2000/1500/?random",
    "blurred": "https://unsplash.it/2000/1500/?random&blur",
    "avatar": "http://i.pravatar.cc/800"
  },
  "siteName": "siteName",
  "siteUrl": "/"
}

There are no notes for this item.