Sorting and alias expansion

build/_includes/icons/brand.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Brand Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Brand Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'id' %}
+
+    {% for icon in icons_brand %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/currency.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Currency Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Currency Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'id' %}
+
+    {% for icon in icons_currency %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/directional.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Directional Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Directional Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'id' %}
+
+    {% for icon in icons_directional %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/medical.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Medical Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Medical Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'id' %}
+
+    {% for icon in icons_medical %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/new.html

@@ -8,12 +8,10 @@
   {% endif %}
 
   <div class="row the-icons">
-    {% assign icons_new = icons | version:site.fontawesome.version %}
+    {% assign icons_new = icons | expand_aliases | version:site.fontawesome.version | sort_by:'id' %}
+
     {% for icon in icons_new %}
-      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-      {% for alias in icon.aliases %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-      {% endfor %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/text-editor.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Text Editor Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Text Editor Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'id' %}
+
+    {% for icon in icons_text_editor %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/video-player.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Video Player Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Video Player Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'id' %}
+
+    {% for icon in icons_video_player %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_includes/icons/web-application.html

@@ -2,13 +2,10 @@
   <h2 class="page-header">Web Application Icons</h2>
 
   <div class="row the-icons">
-    {% for icon in icons %}
-      {% if icon.categories contains "Web Application Icons" %}
-        <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.id }}"></i> icon-{{ icon.id }}</a></div>
-        {% for alias in icon.aliases %}
-          <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ alias }}"></i> icon-{{ alias }} <span class="muted">(alias)</span></a></div>
-        {% endfor %}
-      {% endif %}
+    {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'id' %}
+
+    {% for icon in icons_web_application %}
+      <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div>
     {% endfor %}
   </div>
 

build/_layouts/icon.html

@@ -13,8 +13,14 @@ module Jekyll
     def initialize(icon_object)
       @icon_object = icon_object
 
+      # Class name used in CSS and HTML
+      @icon_object['class'] = icon_object['id']
+      # Normalize the aliases
+      @icon_object['aliases'] ||= []
+
       @name = icon_object['name']
       @id = icon_object['id']
+      @class = icon_object['class']
       @aliases = icon_object['aliases']
       @unicode = icon_object['unicode']
       @created = icon_object['created']
@@ -56,6 +62,25 @@ module Jekyll
   end
 
   module IconFilters
+    def expand_aliases(icons)
+      expanded = []
+
+      icons.each { |icon|
+        # Remove the aliases since we are expanding them
+        expanded << icon.reject{ |k| k == 'aliases'}
+
+        icon['aliases'].each { |alias_id|
+          alias_icon = expanded[-1].dup
+          alias_icon['class'] = alias_id
+          alias_icon['alias_of'] = icon
+
+          expanded << alias_icon
+        }
+      }
+
+      return expanded
+    end
+
     def category(icons, cat)
       icons.select { |icon| icon['categories'].include?(cat) }
     end
@@ -63,6 +88,10 @@ module Jekyll
     def version(icons, version)
       icons.select { |icon| icon['created'] == version }
     end
+
+    def sort_by(icons, sort_key)
+      icons.sort_by! { |icon| icon[sort_key] }
+    end
   end
 
   Liquid::Template.register_filter(IconFilters)