Add search to home page (#197)

_data/tags.yml

@@ -0,0 +1,3 @@
+bell: notification
+bell-off: notification-off
+check: tick

_includes/icon.html

@@ -1,3 +1,4 @@
+{% assign tags = site.data.tags[include.icon.basename] | split: ", " | join " " %}
 <li>
   <a
     href="{{ include.icon.path }}"
@@ -5,6 +6,7 @@
     download
     onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
     <span class="svg flex-none lh-none">{% include_relative {{ include.icon.path }} %}</span>
-    <span class="ml3 lh-copy f6 f5-ns tc black-60 ellipse">{{ include.icon.basename }}</span>
+    <span class="icon-name ml3 lh-copy f6 f5-ns tc black-60 ellipse">{{ include.icon.basename }}</span>
+    <span class="icon-tags dn">{{tags}}</span>
   </a>
 </li>

_includes/icons.html

@@ -1,4 +1,9 @@
-<div class="w-80 mw8 center">
+<div class="w-80 mw8 center" id="js-icons">
+  <input
+    type="search"
+    class="search fuzzy-search input-reset w-100 mb3 pv3 ph3 ph4-ns rubik f5 lh-copy bg-white br1 ba b--black-20"
+    placeholder="Search"
+  />
   <ul class="icon-grid mv0 pl0 list">
       {% for file in site.static_files %}
         {% if file.path contains 'dist/icons/'  %}

index.html

@@ -45,5 +45,12 @@ links:
   {% include icons.html %}
   {% include footer.html links=page.links %}
 
+  <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
+  <script type="text/javascript">
+    var list = new List('js-icons', {
+      valueNames: [ 'icon-name', 'icon-tags' ]
+    })
+  </script>
+
 </body>
 </html>

style.css

@@ -102,6 +102,7 @@
 }
 
 .carbon-img {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   margin-right: 1rem;