Add filter tabs to projects page

Author: valencik

_data/filter-projects.yml

@@ -0,0 +1,9 @@
+- title: All Projects
+  url: /projects/
+  category: allProjects
+- title: Member
+  url: /projects/member/
+  category: member
+- title: Affiliate
+  url: /projects/affiliate/
+  category: affiliate

_includes/_tab-projects.html

@@ -0,0 +1,5 @@
+<ul class="tab">
+    {% for tabItem in site.data.filter-projects %}
+    <li><a href="{{ site.baseurl }}{{tabItem.url}}" {% if tabItem.url == page.url %} class="active" {% endif %}>{{tabItem.title}}</a></li>
+    {% endfor %}
+</ul>

projects/affiliate.html

@@ -0,0 +1,44 @@
+---
+layout: page
+title: Projects
+permalink: /projects/affiliate/
+---
+
+<div id="section-page">
+  <div class="container">
+    <div class="masthead-page">
+      <h1><span>{{ page.title }}</span></h1>
+      <p>{{site.data.description.projectsDescription}}</p>
+      {% include _tab-projects.html %}
+    </div>
+
+    <div class="projects-list">
+      {% for project in site.projects %}
+      {% if project.affiliate %}
+      <a href="{{ project.github }}" class="project-item">
+        <div class="project-item-content">
+          <div>
+            <img src="{{ site.baseurl }}/img/assets/icon-project.svg" alt="">
+            <h3>{{ project.title }}</h3>
+          </div>
+          <p>{{ project.description }}</p>
+        </div>
+        {% if project.category %}
+        <div class="project-item-tag">
+          <p>{{ project.category }}</p>
+        </div>
+        {% endif %}
+        <div class="project-membership">
+          {% if project.affiliate %}
+          <img src="https://img.shields.io/badge/typelevel-affiliate-FFB4B5" alt="Typelevel affiliate" />
+          {% else %}
+          <img src="https://img.shields.io/badge/typelevel-member-FF6169" alt="Typelevel member" />
+          {% endif %}
+        </div>
+      </a>
+      {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+{% include _cta-projects.html %}

projects/index.html

@@ -7,6 +7,7 @@
     <div class="masthead-page">
       <h1><span>{{ page.title }}</span></h1>
       <p>{{site.data.description.projectsDescription}}</p>
+      {% include _tab-projects.html %}
     </div>
     <div class="projects-list">
       {% for project in site.projects %}

projects/member.html

@@ -0,0 +1,44 @@
+---
+layout: page
+title: Projects
+permalink: /projects/member/
+---
+
+<div id="section-page">
+  <div class="container">
+    <div class="masthead-page">
+      <h1><span>{{ page.title }}</span></h1>
+      <p>{{site.data.description.projectsDescription}}</p>
+      {% include _tab-projects.html %}
+    </div>
+
+    <div class="projects-list">
+      {% for project in site.projects %}
+      {% if project.affiliate != true %}
+      <a href="{{ project.github }}" class="project-item">
+        <div class="project-item-content">
+          <div>
+            <img src="{{ site.baseurl }}/img/assets/icon-project.svg" alt="">
+            <h3>{{ project.title }}</h3>
+          </div>
+          <p>{{ project.description }}</p>
+        </div>
+        {% if project.category %}
+        <div class="project-item-tag">
+          <p>{{ project.category }}</p>
+        </div>
+        {% endif %}
+        <div class="project-membership">
+          {% if project.affiliate %}
+          <img src="https://img.shields.io/badge/typelevel-affiliate-FFB4B5" alt="Typelevel affiliate" />
+          {% else %}
+          <img src="https://img.shields.io/badge/typelevel-member-FF6169" alt="Typelevel member" />
+          {% endif %}
+        </div>
+      </a>
+      {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+{% include _cta-projects.html %}