Add Platform Filter Functionality (Github, GitLab, etc.)

_includes/scripts.html

@@ -77,6 +77,16 @@
         <% }) %>
       </ul>
     </div>
+    <div class="filters-panel cf">
+      <label class="filter-label" >Popular platforms:</label>
+      <ul class="popular-platforms">
+      <% _.each(popularPlatforms, function(entry, key){ %>
+        <li>
+          <a title="Popular Platform: <%-entry.hostname%>" tabindex="0"><%-entry.hostname%> <span class="popular-platforms__frequency">(<%-entry.frequency%>)</span></a>
+        </li>
+      <% }) %>
+      </ul>
+    </div>
   </menu>
   <div class="projects">
     <% let count=0 %> <% _.each(projects, function(project) { %> <%

javascripts/main.js

@@ -64,12 +64,19 @@ define([
     return `about ${Math.round(elapsed / msPerYear)} years ago`;
   }
 
-  const renderProjects = function (projectService, tags, names, labels, date) {
+  const renderProjects = function (
+    projectService,
+    tags,
+    names,
+    labels,
+    date,
+    platforms
+  ) {
     const allTags = projectService.getTags();
 
     projectsPanel.html(
       compiledtemplateFn({
-        projects: projectService.get(tags, names, labels, date),
+        projects: projectService.get(tags, names, labels, date, platforms),
         relativeTime,
         tags: allTags,
         popularTags: projectService.getPopularTags(6),
@@ -78,6 +85,9 @@ define([
         selectedNames: names,
         labels: projectService.getLabels(),
         selectedLabels: labels,
+        platforms: projectService.getPlatforms(),
+        popularPlatforms: projectService.getPopularPlatforms(4),
+        selectedPlatforms: platforms,
       })
     );
     date = date || 'invalid';
@@ -172,6 +182,40 @@ define([
         }
       });
     });
+
+    projectsPanel.find('ul.popular-platforms li a').each((i, elem) => {
+      // add selected class on load
+      let selPlatforms = getParameterByName('platforms') || '';
+      if (selPlatforms) {
+        selPlatforms = selPlatforms.split(',');
+        for (let i = 0; i < selPlatforms.length; i++) {
+          $(`a:contains(${selPlatforms[i]})`).addClass('selected');
+        }
+      }
+
+      $(elem).on('click', function (e) {
+        e.preventDefault();
+
+        $(this).toggleClass('selected');
+
+        let curPlatform = $(this).text().split('(')[0].trim() || '';
+        let selPlatforms = getParameterByName('platforms') || '';
+        if (selPlatforms.indexOf(curPlatform) === -1) {
+          selPlatforms += selPlatforms ? `,${curPlatform}` : curPlatform;
+        } else {
+          selPlatforms = selPlatforms
+            .split(',')
+            .filter((platform) => platform !== curPlatform)
+            .join(',');
+        }
+
+        location.href = updateQueryStringParameter(
+          getFilterUrl(),
+          'platforms',
+          encodeURIComponent(selPlatforms)
+        );
+      });
+    });
   };
 
   /*
@@ -228,6 +272,7 @@ define([
       $('#back2Top').fadeOut();
     }
   });
+
   $(document).ready(() => {
     $('#back2Top').click((event) => {
       event.preventDefault();
@@ -335,8 +380,9 @@ define([
           const labels = prepareForHTML(getParameterByName('labels'));
           const names = prepareForHTML(getParameterByName('names'));
           const tags = prepareForHTML(getParameterByName('tags'));
+          const platforms = prepareForHTML(getParameterByName('platforms'));
           const date = getParameterByName('date');
-          renderProjects(projectsSvc, tags, names, labels, date);
+          renderProjects(projectsSvc, tags, names, labels, date, platforms);
         });
 
         this.get('/', () => {

javascripts/projectsService.js

@@ -196,6 +196,46 @@ define(['underscore', 'tag-builder', 'project-ordering'], (
     return _.flatten(results, (arr1, arr2) => arr1.append(arr2));
   };
 
+  /*
+   * The function here is used for front end filtering when given
+   * selecting certain projects. It ensures that only the selected projects
+   * are returned. If none of the platforms was added to the filter.
+   * Then it fallsback to show all the projects.
+   * @param Array projects : An array having all the Projects in _data
+   * @param Array projectPlatformsSorted : This is another array showing all the
+   *              projects in a sorted order
+   * @param Array platforms : This is an array with the given platform filters.
+   */
+  const applyPlatformsFilter = function (
+    projects,
+    projectPlatformsSorted,
+    platforms
+  ) {
+    if (typeof platforms === 'string') {
+      platforms = platforms.split(',');
+    }
+
+    platforms = _.map(
+      platforms,
+      (entry) => entry && entry.replace(/^\s+|\s+$/g, '')
+    );
+
+    if (!platforms || !platforms.length || platforms[0] == '') {
+      return projects;
+    }
+
+    // find all projects with the given platforms
+    results = _.map(platforms, (hostname) => {
+      return _.filter(projects, (project) => {
+        const curHostname = new URL(String(project.upforgrabs.link)).hostname;
+        return curHostname === hostname;
+      });
+    });
+
+    // the above statements returns n arrays in an array, which we flatten here and return then
+    return _.flatten(results, (arr1, arr2) => arr1.append(arr2));
+  };
+
   const extractTags = function (projectsData) {
     const tagBuilder = new TagBuilder();
     _.each(projectsData, (entry) => {
@@ -218,6 +258,7 @@ define(['underscore', 'tag-builder', 'project-ordering'], (
     const tagsMap = {};
     const namesMap = {};
     const labelsMap = {};
+    const platformsMap = {};
 
     const projects = orderAllProjects(_projectsData.projects, (length) =>
       _.shuffle(_.range(length))
@@ -228,7 +269,7 @@ define(['underscore', 'tag-builder', 'project-ordering'], (
     });
 
     _.each(_projectsData.projects, (project) => {
-      if (project.name.toLowerCase) {
+      if (project.name) {
         namesMap[project.name.toLowerCase()] = project;
       }
     });
@@ -237,7 +278,20 @@ define(['underscore', 'tag-builder', 'project-ordering'], (
       labelsMap[project.upforgrabs.name.toLowerCase()] = project.upforgrabs;
     });
 
-    this.get = function (tags, names, labels, date) {
+    _.each(_projectsData.projects, (project) => {
+      const platform = new URL(project.upforgrabs.link);
+
+      if (platform.hostname in platformsMap) {
+        platformsMap[platform.hostname].frequency += 1;
+      } else {
+        platformsMap[platform.hostname] = {
+          hostname: platform.hostname,
+          frequency: 1,
+        };
+      }
+    });
+
+    this.get = function (tags, names, labels, date, platforms) {
       let filteredProjects = projects;
       if (names && names.length) {
         filteredProjects = applyNamesFilter(
@@ -263,13 +317,24 @@ define(['underscore', 'tag-builder', 'project-ordering'], (
           tags
         );
       }
+      if (platforms && platforms.length) {
+        filteredProjects = applyPlatformsFilter(
+          filteredProjects,
+          this.getPlatforms(),
+          platforms
+        );
+      }
       return filteredProjects;
     };
 
     this.getTags = function () {
       return _.sortBy(tagsMap, (entry) => entry.name.toLowerCase());
     };
 
+    this.getPlatforms = function () {
+      return _.sortBy(platformsMap, (entry) => entry.hostname.toLowerCase());
+    };
+
     this.getNames = function () {
       return _.sortBy(namesMap, (entry) => entry.name.toLowerCase());
     };
@@ -281,6 +346,16 @@ define(['underscore', 'tag-builder', 'project-ordering'], (
     this.getPopularTags = function (popularTagCount) {
       return _.take(_.values(tagsMap), popularTagCount || 10);
     };
+
+    this.getPopularPlatforms = function (popularPlatformCount) {
+      return _.take(
+        _.sortBy(
+          _.values(platformsMap),
+          (platform) => platform.frequency
+        ).reverse(),
+        popularPlatformCount || 6
+      );
+    };
   };
 
   return ProjectsService;

stylesheets/stylesheet.css

@@ -883,20 +883,23 @@ form {
   width: 16px;
 }
 
-.popular-tags,
+.popular-tags, 
+.popular-platforms,
 .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 1em 0.5em;
 }
 
-ul.popular-tags li,
+ul.popular-tags li, 
+ul.popular-platforms li,
 ul.tags li {
   list-style: none;
   padding-left: 0;
 }
 
 .popular-tags a,
+.popular-platforms a,
 .tags a {
   display: inline-flex;
   align-content: center;
@@ -916,6 +919,7 @@ ul.tags li {
 .popular-tags a:hover,
 .popular-tags a:focus,
 .popular-tags a:focus-within,
+.popular-platforms a:hover,
 .tags a:hover,
 .tags a:focus,
 .tags a:focus-within {
@@ -924,12 +928,22 @@ ul.tags li {
   color: var(--databox-text);
 }
 
-.popular-tags a span.popular-tags__frequency {
+.popular-tags a span.popular-tags__frequency,
+.popular-platforms a span.popular-platforms__frequency {
   margin-left: 0.45em;
   font-size: 10px;
   color: var(--body-color);
 }
 
+.popular-platforms a.selected {
+  background-color: var(--databox-text);
+  color: var(--abs);
+}
+
+.popular-platforms a.selected span.popular-platforms__frequency {
+  color: var(--abs);
+}
+
 @media (max-width: 768px) {
   body {
     padding: 0 0;