Add featured component section

sass/custom/_paulus.scss

@@ -303,7 +303,7 @@ p.note {
       width: 202px;
       height: 142px;
       background-color: #fefefe;
-      margin-right: 8px;
+      margin-right: 4px;
       margin-bottom: 8px;
       border-radius: 2px;
       box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;

source/_components/arduino.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: arduino.png
 ha_category: DIY
+featured: true
 ---
 
 The [Arduino](https://www.arduino.cc/) device family are microcontroller boards that are often based on the ATmega328 chip. They come with digital input/output pins (some can be used as PWM outputs), analog inputs, and a USB connection. The equipment depends on the [type](https://www.arduino.cc/en/Main/Products) of board. The most common ones are the Arduino Uno and the Arduino Leonardo with 14 digital input/output pins and 6 analog input pins.

source/_components/automation.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Automation
 ---
 
 This page will go into more detail about the various options the `automation` component offers. If

source/_components/configurator.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Other
 ---
 
 <p class='note'>

source/_components/device_sun_light_trigger.markdown

@@ -1,12 +1,13 @@
 ---
 layout: component
-title: "Automating your lights"
+title: "Presence based lights"
 description: "Instructions how to automate your lights with Home Assistant."
 date: 2015-01-20 22:36
 sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Automation
 ---
 
 Home Assistant has a built-in component called `device_sun_light_trigger` to help you automate your lights. The component will:

source/_components/device_tracker.nmap_scanner.markdown

@@ -8,6 +8,7 @@ comments: false
 sharing: true
 footer: true
 ha_category: Presence Detection
+featured: true
 ---
 
 

source/_components/device_tracker.owntracks.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: owntracks.png
 ha_category: Presence Detection
+featured: true
 ---
 
 

source/_components/discovery.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Other
 ---
 
 

source/_components/group.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Organization
 ---
 
 Groups allow the user to combine multiple entities into 1. If all entities are switches or lights they can be controlled as one.
@@ -15,7 +16,7 @@ Groups allow the user to combine multiple entities into 1. If all entities are s
 # Example configuration.yaml entry
 # A comma seperated list of states that have to be tracked as a single group
 # Grouped states should share the same type of states (ON/OFF or HOME/NOT_HOME)
-group: 
+group:
   living_room:
     - light.Bowl
     - light.Ceiling

source/_components/ifttt.markdown

@@ -8,7 +8,8 @@ comments: false
 sharing: true
 footer: true
 logo: ifttt.png
-ha_category: Other
+ha_category: Automation
+featured: true
 ---
 
 [IFTTT](https://ifttt.com) is a web service that allows users to create chains of simple conditional

source/_components/introduction.markdown

@@ -10,11 +10,14 @@ footer: true
 ha_category: Other
 ---
 
-The introduction component is loaded by default on a new Home Assistant instance. 
+The introduction component will show a card in the UI with steps on how to get started. It will also
+print the same message to the console when starting up.
+
+The introduction component is loaded by default on a new Home Assistant instance.
 
 ```yaml
 # Example configuration.yaml entry
-introduction: 
+introduction:
 ```
 
-To disable this component, just remove the `introduction:` entry from your `configuration.yaml` file. 
+To disable this component, just remove the `introduction:` entry from your `configuration.yaml` file.

source/_components/keyboard.markdown

@@ -7,7 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
-ha_category: Other
+ha_category: Automation
 ---
 
 

source/_components/light.hue.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: philips_hue.png
 ha_category: Light
+featured: true
 ---
 
 

source/_components/media_player.cast.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: google_cast.png
 ha_category: Media Player
+featured: true
 ---
 
 

source/_components/media_player.kodi.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: kodi.png
 ha_category: Media Player
+featured: true
 ---
 
 

source/_components/media_player.plex.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: plex.png
 ha_category: Media Player
+featured: true
 ---
 
 

source/_components/media_player.sonos.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: sonos.png
 ha_category: Media Player
+featured: true
 ---
 
 

source/_components/mqtt.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: mqtt.png
 ha_category: Hub
+featured: true
 ---
 
 MQTT (aka MQ Telemetry Transport) is a machine-to-machine or "Internet of Things" connectivity protocol on top of TCP/IP. It allows extremely lightweight publish/subscribe messaging transport.

source/_components/notify.pushbullet.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: pushbullet.png
 ha_category: Notifications
+featured: true
 ---
 
 

source/_components/scene.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Organization
 ---
 
 A user can create scenes that capture the states you want certain entities to be. For example a scene

source/_components/script.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Automation
 ---
 
 The script component allows users to create a sequence of service calls and delays. Scripts can be

source/_components/sensor.forecast.markdown

@@ -8,6 +8,7 @@ comments: false
 sharing: true
 footer: true
 ha_category: Weather
+featured: true
 ---
 
 

source/_components/sensor.mysensors.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: mysensors.png
 ha_category: Sensor
+featured: true
 ---
 
 

source/_components/shell_command.markdown

@@ -7,7 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
-ha_category: Other
+ha_category: Automation
 ---
 
 

source/_components/simple_alarm.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Automation
 ---
 
 

source/_components/thermostat.nest.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: nest_thermostat.png
 ha_category: Thermostat
+featured: true
 ---
 
 

source/_components/wink.markdown

@@ -9,6 +9,7 @@ sharing: true
 footer: true
 logo: wink.png
 ha_category: Hub
+featured: true
 ---
 
 

source/_components/zone.markdown

@@ -7,6 +7,7 @@ sidebar: true
 comments: false
 sharing: true
 footer: true
+ha_category: Organization
 ---
 
 Zones allow you to specify certain regions on earth (for now). When a device tracker sees a device

source/components/index.markdown

@@ -19,7 +19,8 @@ Support for these components is provided by the Home Assistant community.
 {% assign categories = components | sort: 'ha_category' | map: 'ha_category' %}
 
 <div class="filter-button-group">
-  <a href='#' class="btn current" data-filter="*">All</a>
+  <a href='#' class="btn" data-filter="*">All</a>
+  <a href='#' class="btn current" data-filter=".featured">Featured</a>
 
   {% comment %} Jekyll 2.5.2 does not support the uniq filter :/ {% endcomment %}
   {% assign category_printed = '' %}
@@ -39,7 +40,7 @@ Support for these components is provided by the Home Assistant community.
 <div id="componentContainer">
   {% for component in components %}
     {% if component.ha_category %}
-      <a href='{{ component.url }}' class='{{ component.ha_category | slugify }}'>
+      <a href='{{ component.url }}' class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'>
         <div class='img-container'>
           {% if component.logo %}
             <img src='/images/supported_brands/{{ component.logo }}'>
@@ -53,7 +54,7 @@ Support for these components is provided by the Home Assistant community.
 </div>
 
 {% comment %}
-## Not done yet
+## Pages without categories
 
 {% for component in components %}
   {% unless component.ha_category %}
@@ -62,42 +63,20 @@ Support for these components is provided by the Home Assistant community.
 {% endfor %}
 {% endcomment %}
 
-## {% linkable_title Organization %}
-| Type | Description
-| ---- | -----------
-| [Group](/components/group.html) | Allows grouping of entities
-| [Scene](/components/scene.html) | Allow defining preferred state of a set of entities
-| [Zone](/components/zone.html) | Allow defining zones on the map
-
-## {% linkable_title Automation %}
-
-| Type | Description
-| ---- | -----------
-| [Automation](/components/automation.html) | Allow for automating service calls when a specific state is met.
-| [Script](/components/script.html) | Allow user to define scripts to run from within Home Assistant.
-| [Zone](/components/zone.html) | Allow user to define zones within Home Assistant.
-| [Device sun light trigger](/components/device_sun_light_trigger.html) | Slowly fade in the lights to compensate the setting sun. Also turns on lights when you get home after dark.
-| [Simple alarm](/components/simple_alarm.html) | Let the lights blink red when the lights turn on while no one is home.
-
-## {% linkable_title Misc %}
-
-| Type | Description
-| ---- | -----------
-| [Configurator](/components/configurator.html) | Component used by other components to get configuration from the user.
-| [Discovery](/components/discovery.html) | Discover and configure new devices.
-
-
 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
 <script type="text/javascript">
 $(window).load(function(){
     var $container = $('#componentContainer');
     $container.isotope({
-        filter: '*',
+        filter: '.featured',
         animationOptions: {
             duration: 750,
             easing: 'linear',
             queue: false
+        },
+        masonry: {
+          columnWidth: 210
         }
     });