From f642639f0c3ee4fefc5e0d456202545692aade13 Mon Sep 17 00:00:00 2001
From: Thomas Cullen <thomascullen92@gmail.com>
Date: Sun, 5 Nov 2017 16:55:16 +0000
Subject: [PATCH] Add search to home page (#197)

---
 _data/tags.yml       | 3 +++
 _includes/icon.html  | 4 +++-
 _includes/icons.html | 7 ++++++-
 index.html           | 7 +++++++
 style.css            | 1 +
 5 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 _data/tags.yml

diff --git a/_data/tags.yml b/_data/tags.yml
new file mode 100644
index 0000000..96f0345
--- /dev/null
+++ b/_data/tags.yml
@@ -0,0 +1,3 @@
+bell: notification
+bell-off: notification-off
+check: tick
diff --git a/_includes/icon.html b/_includes/icon.html
index 3cff361..16a44d8 100644
--- a/_includes/icon.html
+++ b/_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>
diff --git a/_includes/icons.html b/_includes/icons.html
index 8e2ad88..79857c3 100644
--- a/_includes/icons.html
+++ b/_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/'  %}
diff --git a/index.html b/index.html
index 94a555f..a61dd8b 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index e73af6c..c44e43f 100644
--- a/style.css
+++ b/style.css
@@ -102,6 +102,7 @@
 }
 
 .carbon-img {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   margin-right: 1rem;