index.html

---
layout: default
title: iwanttolearnruby
---

<ul class='links'>
  <li><a href="#all" id="post" class='current'>all</a></li>
  {% for category in site.categories %}
    <li><a href="#{{ category | first }}" id="{{ category | first }}">{{ category | first }}</a></li>
  {% endfor %}
</ul>

<div class="posts">
{% for post in site.posts %}
  <div class='post {{ post.categories | join ' ' }}'>

    <a href="{{ post.link }}">
      {% if post.image %}
        {% if post.image contains 'http://' or post.image contains 'https://' %}
          <img src="{{ post.image }}" width="300" height="180" />
        {% else %}
          <img src="images/{{ post.image }}" width="300" height="180" />
        {% endif %}
      {% else %}
        <img src="images/default.png" width="300" height="180" />
      {% endif %}
    </a>

    <h3>
      <a href="{{ post.link }}">{{ post.title }}</a>
      <span class="link"><a href="{{ post.link }}">{{ post.link }}</a></span>
    </h3>

    <p>{{ post.content }}</p>

    <ul>
      {% for price in post.price %}
        <li class='price'>{{ price }}</li>
      {% endfor %}
      {% for category in post.categories %}
        <li class='category'>{{ category }}</li>
      {% endfor %}
      {% for level in post.level %}
        <li class='level'>{{ level }}</li>
      {% endfor %}
      {% for instruction in post.instruction %}
        <li class='instruction'>{{ instruction }}</li>
      {% endfor %}
    </ul>
  </div>
{% endfor %}
</div>

<script type="text/javascript">
  $(function(){
    $(".links li").tsort();
    $(".post").tsort();

    $(".links a").click(function(e){
      $('.links a').removeClass('current');
      filter_class = $(this).attr('id');
      $(this).addClass('current');
      $('.post').hide();
      $("." + filter_class).show();
      $('html, body').animate({scrollTop:0}, 'slow');
      return false; // remove this later so people can actually link to sections
    });
  });

</script>