diff --git a/content/_index.md b/content/_index.md
index b0b3b2ca090916111a6e3464a57946b19df240cc..c5d05212ded199a2b1019d322316fddd8eb3d411 100644
--- a/content/_index.md
+++ b/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 >}}
diff --git a/content/projects/_index.md b/content/projects/_index.md
index e1359c2dfbc324fe2607638f2beec975ae647d34..1ec7ea1b7a09c5a8f20a55a87f03afce671c35a9 100644
--- a/content/projects/_index.md
+++ b/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 >}}
+
diff --git a/js/main.js b/js/main.js
index 98fa1ff5815b4e481b35e40e28d6808c303403ec..8a920e4c5a87b525dce0ccdc067a3c5a0bb48144 100644
--- a/js/main.js
+++ b/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'
diff --git a/js/src/featured-projects.js b/js/src/featured-projects.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb277008bdc1a969e0ca47e99e15015718fdaa50
--- /dev/null
+++ b/js/src/featured-projects.js
@@ -0,0 +1,138 @@
+/*!
+ * 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);
+
+
diff --git a/js/src/projects.js b/js/src/projects.js
index 110c5cf9c67f2e3e80608dc279c7aea9323ce55c..242a280e5a0276c8fce45a79d7a4c7c10bb94072 100644
--- a/js/src/projects.js
+++ b/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) {
diff --git a/js/templates/homepage-featured-projects.mustache b/js/templates/homepage-featured-projects.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..2a4c0a170657ab0384d9a4f40d91a29a56017640
--- /dev/null
+++ b/js/templates/homepage-featured-projects.mustache
@@ -0,0 +1,27 @@
+{{#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 <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
diff --git a/js/templates/tpl-projects-item.mustache b/js/templates/tpl-projects-item.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..384fdd896d269db4514135bbc0c02c679c6f0028
--- /dev/null
+++ b/js/templates/tpl-projects-item.mustache
@@ -0,0 +1,22 @@
+{{#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 ></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
diff --git a/layouts/shortcodes/home/projects.html b/layouts/shortcodes/home/projects.html
index 1d2c47c1bc9b94b3257272c420b63d34f84628ef..f97eb1ce519e3328bc84e6662dde0d52eaf8b60a 100644
--- a/layouts/shortcodes/home/projects.html
+++ b/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 <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">
diff --git a/less/_components/homepage.less b/less/_components/homepage.less
index ce0fa90ff433083dfa184b4739da2312a13cdb54..9191a3a3dbdd2fbfd7e667b4fce5f2fa051f53ed 100644
--- a/less/_components/homepage.less
+++ b/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);