Add tags filtering

_layouts/recipe.html

@@ -1,4 +1,4 @@
-<article class="recipe">
+<article class="recipe mix {{ page.tags | join: ' ' }}">
     <div class="recipe-half">
         {{page.time}}
         {{content}}

_sass/_recipes.scss

@@ -29,4 +29,34 @@
   .recipe-half {
     width: 48%;
   }
+}
+
+.tags-menu {
+  padding-bottom: 30px;
+  text-align: center;
+}
+
+.tags-menu ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border: 1px solid #999999;
+  display: inline-block;
+  margin-bottom: 40px;
+}
+
+.tags-menu ul li {
+  display: inline-block;
+  padding: 0px 25px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 40px;
+  font-weight: 600;
+  color: #333333;
+  text-transform: capitalize;
+  position: relative;
+}
+
+.tags-menu ul li.filter.mixitup-control-active{
+  color: #894bc3;
 }

index.html

@@ -3,11 +3,30 @@
 title: מתכונים
 ---
 
-<div class="posts">
+
+<div class="tags-menu">
+<ul>
+    <li class="filter" data-filter="all">הכל</li>
+    {% for tag in site.tags %}
+    <li class="filter" data-toggle=".{{tag | first}}">{{tag | first}}</li>
+    {% endfor %}
+</ul>
+</div>
+
+
+
+
+<div class="recipes-container">
   {% for post in site.posts reversed %}
 
  {{post}}
 
   {% endfor %}
 </div>
 
+<script src="{{ site.baseurl }}/js/plugins.js"></script>
+<script>
+    var containerEl = document.querySelector('.recipes-container');
+    var mixer = mixitup(containerEl);
+</script>
+