Merge pull request #412 from typelevel/filter-projects

Add filter tabs to Projects page

Author: valencik

.gitignore

@@ -1,4 +1,5 @@
 _site
+*.sw?
 .idea
 /vendor/bundle
 css/main.css
@@ -9,3 +10,4 @@ target
 .jekyll-cache/
 .metals
 .DS_Store
+.direnv/

_data/filter-projects.yml

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

_includes/_project_membership.html

@@ -0,0 +1,7 @@
+<div class="project-membership">
+  {% if project.affiliate %}
+  <img src="https://img.shields.io/badge/typelevel-affiliate%20project-FFB4B5.svg" alt="Typelevel Affiliate Project" />
+  {% else %}
+  <img src="https://img.shields.io/badge/typelevel-organization%20project-FF6169.svg" alt="Typelevel Organization Project" />
+  {% endif %}
+</div>

_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,38 @@
+---
+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 %}
+        {% include _project_membership.html %}
+      </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 %}
@@ -23,13 +24,7 @@ <h3>{{ project.title }}</h3>
           <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>
+        {% include _project_membership.html %}
       </a>
       {% endfor %}
     </div>

projects/organization.html

@@ -0,0 +1,38 @@
+---
+layout: page
+title: Projects
+permalink: /projects/organization/
+---
+
+<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 %}
+        {% include _project_membership.html %}
+      </a>
+      {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</div>
+{% include _cta-projects.html %}