Redo projects.js

Signed-off-by: Eric Poirier <eric.poirier@eclipse-foundation.org>

content/_index.md

@@ -23,7 +23,15 @@ header_wrapper_class: "featured-jumbotron-home"
     count="5"
     templatePath="/js/templates/featured-story-custom.mustache" >}}
 
-{{< home/projects highlight="ecd.openvsx:ecd.theia:ecd.jkube">}}
+{{< home/projects 
+    projectIds="ecd.openvsx,ecd.theia,ecd.jkube"
+    templateId="homepage-featured-projects"
+    url="https://projects.eclipse.org/api/projects?working_group=cloud-development-tools"
+    classes="margin-top-30"
+    >}}
+
+{{< mustache_js template-id="homepage-featured-projects" path="/js/templates/homepage-featured-projects.mustache" >}}
+
 {{< home/whats-new >}}
 {{< mustache_js template-id="homepage-news-list-item" path="/js/templates/homepage-news-list-item.mustache" >}}
 {{< home/stats >}}

content/projects/_index.md

@@ -9,4 +9,11 @@ container: "container-fluid"
 main_content_class: "col-sm-18 col-sm-offset-3"
 ---
 
-{{< page/projects >}}
\ No newline at end of file
+{{< home/projects 
+    templateId="tpl-projects-item"
+    url="https://projects.eclipse.org/api/projects?working_group=cloud-development-tools"
+    classes="margin-top-30"
+    >}}
+
+{{< page/projects >}}
+

js/main.js

@@ -14,6 +14,7 @@
 import 'eclipsefdn-solstice-assets'
 import './src/userprofile'
 import './src/projects'
+import './src/featured-projects'
 import './src/eclipseApi'
 import './src/parallax'
 import './adopters-alternate.js'

js/src/featured-projects.js

+/*!
+ * Copyright (c) 2021 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ *   Eric Poirier <eric.poirier@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import $ from 'jquery';
+import Mustache from 'mustache';
+import template from '../templates/tpl-projects-item.mustache'; 
+import "numeral";
+import List from 'list.js';
+
+export const processJSON = (json, options) => {
+
+    function getCategory(project_id) {
+        var categories = {
+            "ecd.che": "Cloud IDE",
+            "ecd.che.che4z": "Extension Marketplace",
+            "ecd.codewind": "IDE-Agnostic Library",
+            "ecd.dirigible": "Service (IDEAAS)",
+            "ecd.emfcloud": "Cloud IDE",
+            "ecd.glsp": "Diagram Editors",
+            "ecd.jkube": "Cloud IDE",
+            "ecd.openvsx": "Extension Marketplace",
+            "ecd.sprotty": "Framework",
+            "ecd.theia": "Cloud IDE",
+            "ecd.cft": "Cloud IDE",
+            "ecd.orion": "Extension Marketplace"
+        };
+        return categories[project_id];
+    }
+
+    function fileExists(url) {
+        if(url){
+            var req = new XMLHttpRequest();
+            req.open('GET', url, false);
+            req.send();
+            return req.status == 200;
+        } else {
+            return false;
+        }
+    }
+
+    // Initiate the projects array
+    let projects = json;
+
+    // Filter by project ID
+    if (options.projectIds !== undefined && options.projectIds !== "") {
+        const acceptedProjectIds = options.projectIds.split(",");
+        projects = [];
+        $(json).each(function(key, element){
+            if (acceptedProjectIds.includes(element.project_id)) {
+                projects.push(element);
+            }
+        });
+    }
+
+    $(projects).each(function(key, project){
+
+        projects[key].category = getCategory(projects[key].project_id);
+
+        projects[key].version = 'none';
+        if (project.releases[0]) {
+            projects[key].version = project.releases[0].name;
+        }
+
+        if (options.templateId !== "tpl-projects-item") {
+            $(project.project_leads).each(function(project_lead_key, project_lead){
+                projects[key].project_lead_image = '/images/ecdtools/home/silhouette.jpg';
+                projects[key].project_lead_full_name = project_lead.full_name;
+                if (fileExists('/images/ecdtools/projects/'+ project_lead.username +'.png')) {
+                    projects[key].project_lead_image = '/images/ecdtools/projects/'+ project_lead.username +'.png';
+                }
+                return false;
+            });
+        }
+        
+    });
+
+    return projects;
+};
+
+(function ($, document) {
+    $('.featured-projects').each(function (index, element) {
+        const options = {
+            id: '',
+            templateId: '',
+            projectIds: '',
+            url: '',
+            ...$(element).data(),
+        };
+
+        // fetching the users
+        function fetchProjects() {
+            return fetch(options.url)
+            .then(response => response.json())
+        }
+
+        let results = [];
+        Promise.allSettled([fetchProjects()])
+        .then(function (responses) {
+            responses.forEach((el) => {
+                // skip rejected promises
+                if (el.status === 'fulfilled') {
+                    const projects = processJSON(el.value, options);
+                  if (projects.length > 0) {
+                    results = projects;
+                  }
+                }
+            });
+
+            const data = {
+                items: results,
+            };
+
+            // Render component
+            let html = '';
+            //console.log(options);
+            if (options.templateId !== '' && document.getElementById(options.templateId)) {
+                const theme = document.getElementById(options.templateId).innerHTML;
+                html = Mustache.render(theme, data);
+            } else {
+                html = template(data);
+            }
+            element.innerHTML += html;
+        })
+        .catch(err => console.log(err));
+    });
+})(jQuery, document);
+
+

js/src/projects.js

@@ -14,7 +14,7 @@ const EclipseProjectList = (function ($) {
 
     $.ajax({
       type: 'GET',
-      url: '/js/projects.json',
+      url: 'https://projects.eclipse.org/api/projects?working_group=cloud-development-tools',
       dataType: 'json',
       cache: true,
       success: function (data) {

js/templates/homepage-featured-projects.mustache

+{{#items}}
+<li class="col-xs-24 col-sm-8">
+    <div class="project-item">
+        <h3 class="h4">
+        <span class="image-container vertical-align margin-bottom-20 text-center">
+            {{#logo}}
+                <img class="logo img img-responsive margin-auto" src="{{ logo }}" alt="{{ name }} logo" height="50"/>
+            {{/logo}}
+            {{^logo}}
+                <i style="width:70px;height:70px;" class="center-block" data-feather="file-text" stroke-width="1"></i>
+            {{/logo}}
+        </span>
+        </h3>
+        <p class="match-height-item-by-row description"><span>The Project:</span> {{{ summary }}}
+        <br><a href="{{ website_url }}" target="_blank" title="Learn more about {{ name }}">Learn more&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a></p>
+        <div class="row">
+            <div class="col-xs-12 padding-right-0">
+                <img class="img-responsive featured-section-projects-picture" src="{{ project_lead_image }}" alt="{{ project_lead_full_name }}">
+            </div>
+            <div class="col-xs-12 padding-left-0 padding-top-20">
+                <p class="project-lead"><span>Project Lead:</span><br>
+                {{ project_lead_full_name }}</p>
+            </div>
+        </div>
+    </div>
+</li>
+{{/items}}
\ No newline at end of file

js/templates/tpl-projects-item.mustache

+{{#items}}
+<li class="col-md-8 col-sm-12">
+   <div class="featured-projects-item">
+      <div class="featured-projects-item-category category labels">{{ category }}</div>
+      <div class="featured-projects-item-content match-height-item" style="height: 330px;">
+         <a href="{{ website_url }}" class="link">
+          <img class="featured-projects-item-img img-responsive logo logo_alt" alt="{{ name }}" src="{{ logo }}">
+        </a>                        
+         <div class="featured-projects-item-text">
+            <p class="featured-projects-item-heading name">{{ name }}</p>
+            <p class="description">{{ summary }}</p>
+            <p><a class="downloadUrl" href="{{ website_url }}">Get Started &gt;</a></p>
+         </div>
+      </div>
+      <hr>
+      <div class="details">
+         <p>Latest release: <strong class="version">{{ version }}</strong></p>
+         <p>Project status: <strong class="project_state">{{ state }}</strong></p>
+      </div>
+   </div>
+</li>
+{{/items}}
\ No newline at end of file

layouts/shortcodes/home/projects.html

@@ -11,73 +11,21 @@
   SPDX-License-Identifier: EPL-2.0
 -->
 
-{{ $highlights:= split (.Get "highlight") ":" }}
-{{/* Pre process projects to find projects with the given working groups (if one is set) */}}
-{{ range sort $.Site.Data.eclipsefdn_projects "name" "asc" }}
-  {{ $project_contains_working_group := false }}
-  {{ if $.Site.Params.projects_working_group }}
-    {{ $working_group_id := $.Site.Params.projects_working_group }}
-    {{ range .working_groups }}
-      {{ if and (ne $project_contains_working_group true) (eq .id $working_group_id) }}
-        {{ $project_contains_working_group = true }}
-      {{ end }}
-    {{ end }}
-  {{ end }}
-
-  {{ if or (not ($.Site.Params.projects_working_group)) (eq $project_contains_working_group true) }}
-    {{ $.Scratch.SetInMap "wg_projects" .name . }}
-  {{ end }}
-{{ end }}
-
-{{ $scratch := .Scratch }}
-
-
+{{ $id := .Get "id" | default "featured-story-container" }}
+{{ $templateId := .Get "templateId" }}
+{{ $projectIds :=  .Get "projectIds" }}
+{{ $url :=  .Get "url" }}
+{{ $classes :=  .Get "classes" }}
 
 <section id="wg-projects" class="container featured-section featured-section-projects" data-filter-wg="{{ $.Site.Params.projects_working_group }}">
   <div class="row">
     <div class="col-md-18 col-md-offset-3">
       <h2 id="projects" class="brand-primary text-center heading-underline">Featured Projects</h2>
-      <ul class="list-inline margin-top-30">
-        {{ range $highlights }}
-          {{ $id:=.}}
-          {{ range first 1 (where ($.Scratch.GetSortedMapValues "wg_projects") "project_id" $id) }} 
-          <li class="col-xs-24 col-sm-8">
-            <div class="project-item">
-              <h3 class="h4">
-                <span class="image-container vertical-align margin-bottom-20 text-center">
-                  {{ if .logo }}
-                  <img class="logo img img-responsive margin-auto" src="{{ .logo | relURL }}" alt="{{ .name }} logo" height="50"/>
-                  {{ else }}
-                  <i style="width:70px;height:70px;" class="center-block" data-feather="file-text" stroke-width="1"></i>
-                  {{ end }}
-                </span>
-              </h3>
-              <p class="match-height-item-by-row description"><span>The Project:</span> {{ .summary | safeHTML }}
-                <br><a href="{{ .website_url | default .url }}" target="_blank" title="Learn more about {{ .name }}">Learn more&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a></p>
-              <div class="row">
-                {{ range first 1 .project_leads }}
-                  <div class="col-xs-12 padding-right-0">
-                    {{ $scratch.Set "user_picture" "static/images/ecdtools/projects/" }}
-                    {{ $scratch.Add "user_picture" .username }}
-                    {{ $scratch.Add "user_picture" ".png" }}
-                    {{ $user_picture := $scratch.Get "user_picture" }}   
-                    {{ if (fileExists $user_picture) }}
-                      <img class="img-responsive featured-section-projects-picture" src="images/ecdtools/projects/{{ .username }}.png" alt="{{ .full_name }}">
-                    {{ else }}
-                    <img class="img-responsive featured-section-projects-picture" src="images/ecdtools/home/silhouette.jpg" alt="{{ .full_name }}">
-                    {{ end }}
-                  </div>
-                  <div class="col-xs-12 padding-left-0 padding-top-20">
-                      <p class="project-lead"><span>Project Lead:</span><br>
-                        {{ .full_name }}</p>
-                  </div>
-                {{ end }}
-              </div>
-            </div>
-          </li>
-          {{ end }}
-        {{ end }}
-      </ul>
+      <ul class="featured-projects list-inline {{ $classes }}" 
+           id="{{ $id }}"
+           data-project-ids="{{ $projectIds }}" 
+           data-template-id="{{ $templateId }}"
+           data-url="{{ $url }}"></ul>
     </div>
   </div>
   <p class="text-center margin-top-30">

less/_components/homepage.less

@@ -162,7 +162,6 @@
     }
     & > div:not(#featured-more-projects) {
       padding:20px;
-      padding-bottom: 0;
       background-color: #fff;
       margin-bottom:20px;
       box-shadow: 4px 4px 8px rgba(0,0,0,0.3);