Commit 53bc20d5 authored by Eric Poirier's avatar Eric Poirier
Browse files

#7 - Create a projects page


Signed-off-by: Eric Poirier's avatarEric Poirier <eric.poirier@eclipse-foundation.org>
parent 4caf6ed5
......@@ -62,3 +62,8 @@ pluralizeListTitles = false
name = "Sponsors"
url = "/index.html#sponsors"
weight = 3
[[menu.main]]
name = "Projects"
url = "/projects"
weight = 4
---
title: "Projects"
seo_title: "Projects - Eclipse IDE Working Group"
content_classes: "padding-top-50"
hide_sidebar: true
hide_page_title: false
container: "container"
header_wrapper_class: "header-sub-pages"
---
{{< projects >}}
......@@ -13,6 +13,7 @@
import 'eclipsefdn-solstice-assets';
import 'jquery';
import './src/projects'
(function ($) {
if ($('.ide-members-slider').length) {
......
/*!
* 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 'jquery';
import "numeral";
import List from 'list.js';
const EclipseProjectList = (function ($) {
if ($('#update-project').length) {
var projectsAssociation = {
Standards: {
'iot.paho': true,
'iot.paho.incubator': true,
'iot.californium': true,
'iot.om2m': true,
'iot.mosquitto': true,
'iot.wakaama': true,
'iot.leshan': true,
'iot.concierge': true,
'iot.4diac': true,
'iot.tinydtls': true,
'iot.milo': true,
'iot.cyclonedds': true,
'iot.unide': true,
'iot.thingweb': true,
'iot.tahu': true,
'iot.keyple': true,
'iot.amlen': true,
'iot.oneofour': true,
'iot.sparkplug': true,
},
Devices: {
'automotive.kuksa': true,
'iot.concierge': true,
'iot.cyclonedds': true,
'iot.hawkbit.hara': true,
'iot.mita': true,
'iot.mraa': true,
'iot.paho': true,
'iot.paho.incubator': true,
'iot.sparkplug': true,
'iot.tahu': true,
'iot.upm': true,
'iot.volttron': true,
'iot.wakaama': true,
'iot.zenoh': true,
},
Gateways: {
'iot.agail': true,
'iot.concierge': true,
'iot.kura': true,
'iot.leshan': true,
'iot.mraa': true,
'iot.sparkplug': true,
'iot.tahu': true,
'iot.upm': true,
'iot.volttron': true,
},
Cloud: {
'iot.amlen': true,
'iot.arrowhead': true,
'iot.ditto': true,
'iot.hawkbit': true,
'iot.hono': true,
'iot.kapua': true,
'iot.leshan': true,
'iot.mosquitto': true,
'iot.sparkplug': true,
'iot.streamsheets': true,
'iot.tahu': true,
'iot.volttron': true,
'iot.vorto': true,
},
Tools: {
'iot.4diac': true,
'iot.editdor': true,
'iot.embed-cdt': true,
'iot.packages': true,
},
Models: {
'iot.vorto': true,
'iot.unide': true,
'iot.thingweb': true,
},
Security: {
'iot.californium': true,
'iot.keti': true,
'iot.leshan': true,
'iot.tinydtls': true,
},
Edge: {
'iot.fog05': true,
'iot.iofog': true,
'iot.kura': true,
'iot.mosquitto': true,
'iot.zenoh': true,
},
// rest is 'others' (Ignite, ...)
};
var projectAliases = {
'iot.californium': 'Eclipse Californium',
'iot.4diac': 'Eclipse 4DIAC',
};
$.ajax({
type: 'GET',
url: '/js/projects.json',
dataType: 'json',
cache: true,
success: function (data) {
var projectBoxes = {};
var projectInfos = [];
var val = 20;
$('.progress-bar')
.css('width', val + '%')
.attr('aria-valuenow', val);
var i = 0;
$.each(data, function (key, value) {
if (value.state === 'Archived') {
return true;
}
i++;
var val = 20 + (i / Object.keys(data).length) * 80;
$('.progress-bar')
.css('width', val + '%')
.attr('aria-valuenow', val);
// Clean up and remove HTML.
if (value.project_id in projectAliases) {
value.name = projectAliases[value.project_id];
}
var title = stringJanitor(value.name);
var id = stringJanitor(value.project_id);
var link = value.url;
if (!validateUrl(link)) {
link = 'http://projects.eclipse.org/projects/' + id;
}
var desc = stringJanitor(value.summary, {
cut: true,
ellipsis:
' [&hellip;] <br><a href="' + link + '"> Read more&hellip;</a>',
});
if (
id == 'rt.ecf' ||
id == 'tools.mtj' ||
id == 'technology.koneki' ||
id == 'tools.titan' ||
id == 'iot.tiaki' ||
id == 'technology.sensinact' ||
id == 'technology.iottestware' ||
id == 'iot.krikkit' ||
id == 'technology.uomo' ||
id == 'iot.risev2g'
)
return true;
const projectInfo = {};
projectInfo.link = value.url;
if (!validateUrl(projectInfo.link)) {
projectInfo.link = 'http://projects.eclipse.org/projects/' + id;
}
projectInfo.logo =
value.logo || '//fakeimg.pl/400x200/f5f5f5/000/?text=' + title; //; || 'https://placeholdit.imgix.net/~text?txtsize=42&txt=' + title + '&w=200&h=80&bg=f5f5f5&txtclr=000000' ; //|| 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
projectInfo.id = id;
projectInfo.name = title;
projectInfo.logo_alt = title;
projectInfo.project_state = value.state;
projectInfo.labels = '';
for (var k in projectsAssociation) {
if (projectsAssociation[k][value.project_id]) {
projectInfo.labels +=
' ' + ' <span class="badge">' + k + '</span>';
}
}
projectInfo.description = desc;
projectInfo.fullDescription = stringJanitor(value.summary);
projectInfo.version = 'none';
if (value.releases[0]) {
projectInfo.version = value.releases[0].name;
}
projectInfo.downloadUrl = value.url;
projectInfos.push(projectInfo);
i++;
});
var options = {
item: '<li class="col-md-24"><div class="media">\
<div class="row"><div class="col-sm-4">\
<a href="#" class="link">\
<img class="media-object img-responsive logo logo_alt center-block" alt="project">\
</a>\
</div>\
<div class="col-sm-20">\
<h4 class="media-heading name"> </h4><span class="labels"></span>\
<div class="row">\
<p class="fullDescription" style="display:none;"></p>\
<p class="description col-md-16"></p>\
<div class="col-md-8 details"><div class="row">\
<p class="downloads" style="display:none;"></p>\
<div class="col-md-24"><p>Latest release: <span class="badge version">1.4</span></p></div>\
<div class="col-md-24 margin-bottom-10"><p>Project status: <span class="badge project_state">Incubating</span></p></div>\
<div class="col-md-24"><p><a class="btn btn-sm btn-primary downloadUrl" href="#">Get Started</a></p></div>\
</div></div>\
</div>\
</div></div>\
</div><hr></li>',
valueNames: [
'name',
'description',
'fullDescription',
{
name: 'logo',
attr: 'src',
},
'version',
{
name: 'link',
attr: 'href',
},
{
name: 'downloadUrl',
attr: 'href',
},
{
name: 'logo_alt',
attr: 'alt',
},
'labels',
'project_state',
],
};
const list = new List('project-list', options, projectInfos);
for (var i in list.visibleItems) {
var elem = list.visibleItems[i].elm;
var logoElem = $('img.logo', elem);
if (logoElem.attr('src').includes('fakeimg')) {
logoElem.addClass('has-placeholder-logo');
}
}
$('#update-project').empty();
$('#update-project').removeClass('loading');
$('.btn-filter-project').on('click', function () {
setTimeout(function () {
list.filter();
list.filter(computeFilterFunction());
}, 10);
});
},
});
var computeFilterFunction = function () {
return function (item) {
var filter = [];
$('.btn-filter-project').each(function (index, elem) {
console.log($(elem));
if ($(elem).hasClass('active')) filter.push($(elem).text());
});
if (filter.length == 0) return true;
var found = false;
for (var i = 0; i < filter.length; i++) {
var element = filter[i];
if (item.values().labels.indexOf(element) !== -1) {
found = true;
continue;
}
found = false;
break;
}
return found;
};
};
// Validate URL.
var validateUrl = function validateUrl(str) {
return /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test(
str
);
};
// Remove html, add ellipsis and cut strings.
var stringJanitor = function (str, options) {
var settings = $.extend(
{
// These are the defaults.
start: 0,
end: 250,
html: false,
ellipsis: '',
cut: false,
},
options
);
var text = '';
// Remove HTML.
if (!settings.html) {
text = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/g, '');
}
// Shorten the string.
if (settings.cut) {
if (text.length < settings.end) {
return text;
} else {
var cutat = text.lastIndexOf(' ', settings.end);
if (cutat !== -1) {
text = text.substring(settings.start, cutat) + settings.ellipsis;
}
}
}
return text;
};
}
})(jQuery);
// The global jQuery object is passed as a parameter
export default EclipseProjectList;
// The global jQuery object is passed as a parameter
......@@ -39,6 +39,7 @@
{{end}}
</ul>
{{end}}
{{ if eq $.Section ""}}
<div class="row jumbotron-custom-social-container">
<div class="col-xs-12 padding-right-0">
<ul class="list-inline jumbotron-custom-social-icons-left">
......@@ -53,6 +54,7 @@
{{ partial "jumbotron_socials.html" . }}
</div>
</div>
{{ end }}
</div>
</div>
</div>
......
<!--
Copyright (c) 2020 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
-->
<section class="first margin-top-40" id="projects">
<div class="row" id="project-list">
<div class="col-md-12 col-md-offset-6 search-and-sort margin-top-30">
<input aria-label="Search for a project" type="text" class="form-control search center-block" placeholder="Start typing to filter projects…">
<div class="margin-top-30 margin-bottom-20 text-center"></div>
</div>
<div class="col-md-24 text-center">
<p class="margin-bottom-0 margin-top-20">Filter by categories:</p>
<div class="margin-top-10">
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-devices">Devices</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-gateways">Gateways</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-cloud">Cloud</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-standards">Standards</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-tools">Tools</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-models">Models</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-security">Security</button>
<button class="btn btn-xs btn-secondary btn-filter-project" data-toggle="button" id="btn-edge">Edge</button>
</div>
<hr>
</div>
<ul class="list list-unstyled"></ul>
<div class="loading col-md-24" id="update-project">
Loading projects list...
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
......@@ -557,4 +557,29 @@ footer#solstice-footer {
.footer-ef-logo {
width:150px;
margin-bottom:30px;
}
.header-sub-pages {
@media (min-width: @screen-md-min) {
.jumbotron-custom {
height: 30vh;
min-height: 300px;
}
}
}
.btn-filter-project {
margin-bottom:10px;
padding-top: 5px;
padding-bottom: 5px;
min-width: 95px;
font-size: 12px;
}
main h1 {
text-align: center;
margin-top: 60px;
font-size: 45px;
color: @brand-secondary;
font-weight: 700;
}
\ No newline at end of file
This diff is collapsed.
......@@ -17,14 +17,18 @@
"watch": "NODE_ENV=development webpack --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production webpack --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"postinstall": "NODE_ENV=production npm run production",
"build_netlify": "NODE_ENV=production npm run production"
"postinstall": "NODE_ENV=production npm run production && npm run fetch_project && npm run yaml2json_projects",
"build_netlify": "NODE_ENV=production npm run production",
"yaml2json_projects": "node node_modules/js-yaml/bin/js-yaml.js -c data/eclipsefdn_projects.yaml | node node_modules/json-minify/index.js > static/js/projects.json",
"fetch_project": "NODE_ENV=production node node_modules/eclipsefdn-hugo-solstice-theme/bin/projects/index.js -l data -u https://projects.eclipse.org/api/projects?working_group=internet-things-iot"
},
"dependencies": {
"core-js": "^3.8.2",
"eclipsefdn-hugo-solstice-theme": "0.0.129",
"js-yaml": "^3.13.1",
"json-minify": "^1.0.0"
"json-minify": "^1.0.0",
"list.js": "^1.2.0",
"numeral": "^1.4.5"
},
"browserslist": "last 5 version, > 0.2%, not dead, IE 11"
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment