Merge pull request #58 from shapeblue/refactor
Refactor: fix twitter, who, announcements, make events (more) dynamic - (content unchanged)
Merged with 2x LGTM
diff --git a/source/index.html.erb b/source/index.html.erb
index 1139679..0ab61bf 100644
--- a/source/index.html.erb
+++ b/source/index.html.erb
@@ -23,275 +23,186 @@
<div class="row">
<div class="col-lg-6">
+
<div class="panel panel-default">
<div class="panel-heading">
-
- Latest Announcement
-
- <a href="https://blogs.apache.org/cloudstack/feed/entries/atom"><img src="/images/feed-icon-14x14.png" class="pull-right" alt=""></a>
-
- </div>
-
- <div id="headline" class="panel-body">
- </div>
- </div>
- <div class="panel panel-default">
- <div class="panel-heading">
-
About CloudStack
-
</div>
-
<div class="panel-body">
-
-<p>
-Apache CloudStack is open source software designed to deploy and manage large networks of virtual machines, as a highly available, highly scalable Infrastructure as a Service (IaaS) cloud computing platform. CloudStack is used by a number of service providers to offer public cloud services, and by many companies to provide an on-premises (private) cloud offering, or as part of a hybrid cloud solution.
-</p>
-
-<p>
-CloudStack is a turnkey solution that includes the entire "stack" of features most organizations want with an IaaS cloud: compute orchestration, Network-as-a-Service, user and account management, a full and open native API, resource accounting, and a first-class User Interface (UI).
-</p>
-
-<p>
-CloudStack currently supports the most popular hypervisors: VMware, KVM, Citrix XenServer, Xen Cloud Platform (XCP), Oracle VM server and Microsoft Hyper-V.
-</p>
-
-<p>
-Users can manage their cloud with an easy to use Web interface, command line tools, and/or a full-featured RESTful API. In addition, CloudStack provides an API that's compatible with AWS EC2 and S3 for organizations that wish to deploy hybrid clouds.
-</p>
-
-<a href="about.html"><button type="button" class="btn btn-info">Learn More</button></a>
-
+ <p>Apache CloudStack is open source software designed to deploy and manage large networks of virtual machines, as a highly available, highly scalable Infrastructure as a Service (IaaS) cloud computing platform. CloudStack is used by a number of service providers to offer public cloud services, and by many companies to provide an on-premises (private) cloud offering, or as part of a hybrid cloud solution.</p>
+ <p>CloudStack is a turnkey solution that includes the entire "stack" of features most organizations want with an IaaS cloud: compute orchestration, Network-as-a-Service, user and account management, a full and open native API, resource accounting, and a first-class User Interface (UI).</p>
+ <p>CloudStack currently supports the most popular hypervisors: VMware, KVM, Citrix XenServer, Xen Cloud Platform (XCP), Oracle VM server and Microsoft Hyper-V.</p>
+ <p>Users can manage their cloud with an easy to use Web interface, command line tools, and/or a full-featured RESTful API. In addition, CloudStack provides an API that's compatible with AWS EC2 and S3 for organizations that wish to deploy hybrid clouds.</p>
+ <a href="about.html"><button type="button" class="btn btn-info">Learn More</button></a>
</div>
-
</div>
+
<div class="panel panel-default">
<div class="panel-heading">
-
-Join Us
-
+ Latest Announcements
+ <a href="https://blogs.apache.org/cloudstack/feed/entries/atom"><img src="images/feed-icon-14x14.png" class="pull-right" alt=""></a>
</div>
+ <div class="panel-body">
+ <div id="atom-cloudstack" style="margin-left: 4px;"></div>
+ </div>
+ </div>
- <div class="panel-body">
- <p>
- Learn more about getting involved with Apache CloudStack on the <a href="contribute.html">Contributing to Apache CloudStack</a> page, or go straight to our <a href="developers.html">Developer Resources</a> page.
- </p>
- </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ CloudStack Events
+ </div>
+ <div class="panel-body" id="events">
+ <h4>Upcoming CloudStack Events</h4>
+ <p>There's always plenty of Cloudstack Events happening in different parts of the world. These range from Meetups, User Groups to <a href="http://cloudstackcollab.org/">CloudStack Collaboration Conference</a>
+ events. Each event will feature a lot of opportunities to learn,
+ collaborate and engage with the CloudStack community. The CloudStack
+ Collaboration Conferences are valuable for both developers and users, and
+ are a great way to get involved with the community.</p>
+ <ul type="disc" style="padding-inline-start: 15px">
+ <div id="csv-events"></div>
+ </ul>
+ <p> View videos from previous CloudStack Collaboration Conferences:</p>
+ <ul type="disc" style="padding-inline-start: 15px">
+ <li>
+ <a
+ href="https://www.youtube.com/playlist?list=PLU2OcwpQkYCwcPxZMKX2BFoKE0Z7g1ENH"
+ target="_blank">
+ CloudStack Collaboration Conference June 2018 in Montreal
+ </a>
+ </li>
+ <li>
+ <a
+ href="https://www.youtube.com/playlist?list=PLCfLScXpEyAS4YkJpeqDriP7JcU82Tx2r"
+ target="_blank">
+ CloudStack Collaboration Conference June 2016 in Montreal
+ </a>
+ </li>
+ <li>
+ <a
+ href="https://www.youtube.com/playlist?list=PLGeM09tlguZSeNyOyQKJHNX4pxgK-yoTA"
+ target="_blank">
+ CloudStack Collaboration Conference Europe 2015 in Dublin
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
-</div>
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ Join Us
+ </div>
+ <div class="panel-body">
+ <p>Learn more about getting involved with Apache CloudStack on the <a href="contribute.html">Contributing to Apache CloudStack</a> page, or go straight to our <a href="developers.html">Developer Resources</a> page.</p>
+ </div>
+ </div>
+
+
+ </div>
+
+ <div class="col-lg-6">
+
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ Get CloudStack
+ </div>
+ <div class="panel-body">
+ <p class="text-warning">Apache CloudStack <%= data.cloudstack.versions.main %> is out!</p>
+ <% if data.cloudstack.versions.main_islts %>
+ <p>This is current CloudStack LTS release.</p>
+ <% else %>
+ <p>This is non-LTS release of CloudStack.</p>
+ <% end %>
+ <a href="downloads.html"><button type="button" class="btn btn-success">Download</button></a>
+ <a href="<%= data.cloudstack.versions.main_docs_url %>"><button type="button" class="btn btn-success">Documentation</button></a>
+ <p style="margin-top: 20px;">If you prefer proven stability rather than the newest features, please take a look at the previous LTS release.</p>
+ <p class="text-warning">Previous Apache CloudStack LTS Release is <%= data.cloudstack.versions.lts %>.</p>
+ <a href="downloads.html"><button type="button" class="btn btn-success">Download</button></a>
+ <a href="<%= data.cloudstack.versions.lts_docs_url %>"><button type="button" class="btn btn-success">Documentation</button></a>
+ <p style="margin-top: 20px;">
+ Looking for other versions of Apache CloudStack? You can find them in our <a href="archives.html">archives</a> page as well.
+ </p>
+ </div>
+ </div>
+
+
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ What are people saying?
+ </div>
+ <div class="panel-body">
+ <div class="tw">
+ <a class="twitter-timeline" data-height="1000" data-theme="light" href="https://twitter.com/CloudStack?ref_src=twsrc%5Etfw">Tweets by CloudStack</a>
+ <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
-<div class="col-lg-6">
- <div class="panel panel-default">
- <div class="panel-heading">
- Get CloudStack
- </div>
- <div class="panel-body">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script type="text/javascript" src="javascripts/FeedEk.min.js"></script>
- <p class="text-warning">Apache CloudStack <%= data.cloudstack.versions.main %> is out!</p>
- <% if data.cloudstack.versions.main_islts %>
- <p>This is current CloudStack LTS release.</p>
- <% else %>
- <p>This is non-LTS release of CloudStack.</p>
- <% end %>
+<script type="text/javascript">
+ $(function () {
+ $('#atom-cloudstack').FeedEk({
+ FeedUrl: 'https://blogs.apache.org/cloudstack/feed/entries/atom',
+ ShowDesc: false,
+ MaxCount: 3,
+ DateFormat: 'D',
+ DateFormatLang: 'en'
+ });
+ });
+</script>
- <a href="downloads.html"><button type="button" class="btn btn-success">Download</button></a>
- <a href="<%= data.cloudstack.versions.main_docs_url %>"><button type="button" class="btn btn-success">Documentation</button></a>
-
- <p style="margin-top: 20px;">If you prefer proven stability rather than the newest features, please take a look at the previous LTS release.</p>
- <p class="text-warning">Previous Apache CloudStack LTS Release is <%= data.cloudstack.versions.lts %>.</p>
- <a href="downloads.html"><button type="button" class="btn btn-success">Download</button></a>
- <a href="<%= data.cloudstack.versions.lts_docs_url %>"><button type="button" class="btn btn-success">Documentation</button></a>
+<script type="text/javascript">
+ $(document).ready(function() {
+ $.ajax({
+ type: "GET",
+ // github controlled datasource
+ url: "https://raw.githubusercontent.com/apache/cloudstack-www/master/data/acs-events.csv",
+ dataType: "text",
+ success: function(data) {processData(data);}
+ });
+ });
+
+ function processData(data) {
+ var lines = data.split(/\r\n|\n/);
- <p style="margin-top: 20px;">
- Looking for other versions of Apache CloudStack? You can find them in our <a href="archives.html">archives</a> page as well.
- </p>
+ //Set up the data arrays
- </div>
+ var event_title = [];
+ var event_link = [];
+ var event_location = [];
+ var event_date = [];
- </div>
+ var headings = lines[0].split(','); // Splice up the first row to get the headings - not used after atm
- <div class="panel panel-default">
- <div class="panel-heading">
- CloudStack Events
- </div>
+ for (var j=1; j<lines.length; j++) {
+ var values = lines[j].split(','); // Split up the comma seperated values
+ // read in event details as arrays
+ event_title.push(values[0]);
+ event_link.push(values[1]);
+ event_location.push(values[2]);
+ event_date.push(values[3]);
+ }
+// alert(lines);
- <div class="panel-body" id="events">
-
- <h4>Upcoming CloudStack Events</h4>
-<p>
- There's always plenty of Cloudstack Events happening in different parts of
- the world. These range from Meetups, User Groups to
- <a href="http://cloudstackcollab.org/">
- CloudStack Collaboration Conference
- </a>
- events. Each event will feature a lot of opportunities to learn,
- collaborate and engage with the CloudStack community. The CloudStack
- Collaboration Conferences are valuable for both developers and users, and
- are a great way to get involved with the community.
-</p>
-<ul type="disc">
- <li>
- <a
- href="https://www.meetup.com/de-DE/german-CloudStack-user-group/events/259269366/"
- target="_blank"
- >
- April CloudStack Meetup (Germany)
- </a>
- , Sankt Augustin (Bonn), 11<sup>th</sup> April
- </li>
- <li>
- <a
- href="http://br.cloudstackcollab.org/"
- target="_blank"
- >
- CloudStack Collaboration Conference Brazil
- </a>
- , Florianopolis, 26<sup>th</sup> April
- </li>
- <li>
- <a
- href="https://www.eventbrite.co.uk/e/cloudstack-european-user-group-meetup-tickets-55911193886"
- target="_blank"
- >
- CloudStack European User Group meetup
- </a>
- , Sofia, 13<sup>th</sup> June
- </li>
- <li>
- <a
- href="http://us.cloudstackcollab.org/"
- target="_blank"
- >
- CloudStack Collaboration Conference North America
- </a>
- , Las Vegas, 9<sup>th</sup> - 11<sup>th</sup> September
- </li>
-</ul>
-<p>
- View videos from previous CloudStack Collaboration Conferences:
-</p>
-<ul type="disc">
- <li>
- <a
- href="https://www.youtube.com/playlist?list=PLU2OcwpQkYCwcPxZMKX2BFoKE0Z7g1ENH"
- target="_blank">
- CloudStack Collaboration Conference June 2018 in Montreal
- </a>
- </li>
- <li>
- <a
- href="https://www.youtube.com/playlist?list=PLCfLScXpEyAS4YkJpeqDriP7JcU82Tx2r"
- target="_blank">
- CloudStack Collaboration Conference June 2016 in Montreal
- </a>
- </li>
- <li>
- <a
- href="https://www.youtube.com/playlist?list=PLGeM09tlguZSeNyOyQKJHNX4pxgK-yoTA"
- target="_blank">
- CloudStack Collaboration Conference Europe 2015 in Dublin
- </a>
- </li>
-</ul>
-
-
- </div>
-
- </div>
-
- <div class="panel panel-default">
- <div class="panel-heading">
- What are people saying?
- </div>
- <div class="panel-body">
-
- <a class="twitter-timeline" href="https://twitter.com/search?q=cloudstack" data-widget-id="383337162126544896" data-chrome="nofooter transparent noheader noborders noscrollbar">Tweets about "CloudStack"</a>
- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-
- </div>
-
- </div>
-
-</div>
-
-</div>
-
-<script>
-var maxEntries = 3; // if 0 then there will be no limit
-
-function slug(str){
- return str.replace(/\s/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
+ var div = document.getElementById("csv-events");
+ var html = "";
+ for (var i=0;i<lines.length;i++) {
+ if (typeof event_location[i] !== "undefined") {
+ html += '<li> <a href=\"' + event_link[i] + '\" target=\"_blank\">' + event_title[i] + "</a> , " + event_location[i] + ", " + event_date[i] + "</li>";
+ }
+ }
+
+ // write html to page
+ div.innerHTML = html;
}
-/**
- * This function appends rss feed items to divs with the same slug
- * Name is the title of the feed, when slugged i use it as a div id
- * File is the rss feed
- */
-function newFeed(id, file) {
- $.getJSON("//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D%22"+encodeURIComponent(file)+"%22&format=json&callback=?", function(d) {
- var count = 0;
- $(d.query.results.feed.entry).each(function() {
- if(maxEntries == 0 || maxEntries>count){
- var title = this.title.content;
- var content = this.content.content;
- var pubDate = new Date(this.published);
- // Format however you want, I only went for link and title
- var anItem = "<h4>"+title+"</h4><p>"+pubDate+"</p>"+content+"<hr />";
- $("#"+id).append(anItem);
- if (count==0)
- $("#headline").append("<p>"+title+"<br/><a href='#news'>Read more here.</a></p>");
- count++;
- }
- });
- });
-};
+
</script>
-<p><a name='news'></a><br /> </p><p> </p>
-
-<div class="panel panel-default">
- <div class="panel-heading">
- Project Announcements
- </div>
- <div class="panel-body">
- <div id="feed">
- </div>
-
- </div>
-
-</div>
-
-<script>
-newFeed("feed", "https://blogs.apache.org/cloudstack/feed/entries/atom");
-</script>
-
-<script>
-var maxEvents = 3; // if 0 then there will be no limit
-
-/**
- * This function appends rss feed items to divs with the same slug
- * Name is the title of the feed, when slugged i use it as a div id
- * File is the rss feed
- */
-function newEventList(id, file) {
- $.getJSON("//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D%22"+encodeURIComponent(file)+"%22&format=json&callback=?", function(d) {
- var count = 0;
- $(d.query.results.feed.entry).each(function() {
- if(maxEvents == 0 || maxEvents>count){
- var title = this.title;
- var link = this.link.href;
- var anItem = "<p><a href='"+link+"' target='_blank'>"+title+"</a></p>";
- $("#"+id).append(anItem);
- count++;
- }
- });
- $("#events").append("<p><small>For more events, take a look at the <a href='http://lanyrd.com/topics/apache-cloudstack/' target='_blank'>Apache CloudStack topic page</a> on Lanyrd.</small></p>");
- });
-};
-
-newEventList("events", "http://lanyrd.com/topics/apache-cloudstack/feed/");
-
-</script>
diff --git a/source/javascripts/FeedEk.min.js b/source/javascripts/FeedEk.min.js
new file mode 100644
index 0000000..dd0dcca
--- /dev/null
+++ b/source/javascripts/FeedEk.min.js
@@ -0,0 +1,4 @@
+/*! FeedEk jQuery RSS/ATOM Feed Plugin v3.1.1
+* https://jquery-plugins.net/FeedEk/FeedEk.html https://github.com/enginkizil/FeedEk
+* Author : Engin KIZIL */
+!function (r) { r.fn.FeedEk = function (t) { var a, i = r.extend({ MaxCount: 5, ShowDesc: !0, ShowPubDate: !0, DescCharacterLimit: 0, TitleLinkTarget: "_blank", DateFormat: "", DateFormatLang: "en" }, t), e = r(this).attr("id"), n = ""; r("#" + e).empty(), null != i.FeedUrl && (r("#" + e).append('<img src="loader.gif" />'), r.ajax({ url: "https://feed.jquery-plugins.net/load?url=" + encodeURIComponent(i.FeedUrl) + "&maxCount=" + i.MaxCount + "&dateCulture=" + i.DateFormatLang + "&dateFormat=" + i.DateFormat, dataType: "json", success: function (t) { r("#" + e).empty(), null != t.data && (r.each(t.data, function (t, e) { n += '<li><div class="itemTitle"><a href="' + e.link + '" target="' + i.TitleLinkTarget + '" >' + e.title + "</a></div>", i.ShowPubDate && (a = new Date(e.publishDate), n += '<div class="itemDate">', 0 < r.trim(i.DateFormat).length ? n += e.publishDateFormatted : n += a.toLocaleDateString(), n += "</div>"), i.ShowDesc && (n += '<div class="itemContent">', 0 < i.DescCharacterLimit && e.description.length > i.DescCharacterLimit ? n += e.description.substring(0, i.DescCharacterLimit) + "..." : n += e.description, n += "</div>") }), r("#" + e).append('<ul class="feedEkList">' + n + "</ul>")) } })) } }(jQuery);
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
index 42cce97..fe54454 100644
--- a/source/layouts/layout.erb
+++ b/source/layouts/layout.erb
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
<html>
<head>
<title>Apache CloudStack: Open Source Cloud Computing</title>
@@ -29,15 +29,7 @@
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="icon" href="images/favicon.ico">
-
-<!-- Commenting out this template stuff until we figure out how to make it work with middleman
- {% if headers.atom %}
- <link rel="alternate" href="{{ headers.atom.url }}"
- type="application/atom+xml" title="{{ headers.atom.title }}" />
- {% endif %}
-
- {% if headers.base %}<base href="{{ headers.base }}" />{% endif %}
--->
+
<!-- {% if headers.notice %}{{ headers.notice }}{% endif %} -->
<!-- Twitter Bootstrap and jQuery after this line. -->
<script src="https://code.jquery.com/jquery-latest.js"></script>
diff --git a/source/loader.gif b/source/loader.gif
new file mode 100644
index 0000000..1d4bfaf
--- /dev/null
+++ b/source/loader.gif
Binary files differ
diff --git a/source/stylesheets/bootstrap.css b/source/stylesheets/bootstrap.css
index d7527a0..c0e73a2 100755
--- a/source/stylesheets/bootstrap.css
+++ b/source/stylesheets/bootstrap.css
@@ -5299,8 +5299,8 @@
@media screen and (min-width: 768px) {
.jumbotron {
- padding-top: 48px;
- padding-bottom: 48px;
+ padding-top: 24px;
+ padding-bottom: 24px;
}
.container .jumbotron {
padding-right: 60px;
diff --git a/source/stylesheets/custom.css b/source/stylesheets/custom.css
index bd91bb7..3f51ba3 100644
--- a/source/stylesheets/custom.css
+++ b/source/stylesheets/custom.css
@@ -22,4 +22,71 @@
text-decoration: none;
color: initial;
+}
+
+.ul {
+ padding-inline-start: 4px;
+}
+
+.feedEkList {
+ padding:4px 6px;
+ color:#3E3E3E;
+ margin-left: 4px;
+ margin-bottom: 0px;
+}
+
+.feedEkList li {
+ border-bottom:1px;
+ padding:4px 0px 4px;
+}
+
+.feedEkList li:last-child {
+ border-bottom:none;
+}
+
+.feedEkList ul {
+ margin-bottom: 0;
+}
+
+
+
+/*
+UNUSED BUT LEFT IN FOR REFERENCE
+.itemTitle a{font-weight:bold; color:#4EBAFF !important; text-decoration:none }
+.itemTitle a:hover{ text-decoration:underline }
+.itemDate{font-size:11px;color:#AAAAAA;}
+*/
+
+blockquote.twitter-tweet {
+ display: inline-block;
+ font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
+ font-size: 9px;
+ font-weight: bold;
+ line-height: 12px;
+ border-color: #eee #ddd #bbb;
+ border-radius: 5px;
+ border-style: solid;
+ border-width: 1px;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+ margin: 10px 5px;
+ padding: 0 16px 16px 16px;
+ max-width: 468px;
+}
+
+blockquote.twitter-tweet p {
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 16px;
+}
+
+blockquote.twitter-tweet a {
+ color: inherit;
+ font-weight: normal;
+ text-decoration: none;
+ outline: 0 none;
+}
+
+blockquote.twitter-tweet a:hover,
+blockquote.twitter-tweet a:focus {
+ text-decoration: underline;
}
\ No newline at end of file
diff --git a/source/who.html.markdown b/source/who.html.markdown
index 9a4cc42..2f320d3 100644
--- a/source/who.html.markdown
+++ b/source/who.html.markdown
@@ -21,7 +21,10 @@
## PMC
Active Project Management Committee contains (in alphabetical order of their usernames):
+
{:.table-bordered}
+
+
| Username | Name |
|----------|------|
|akarasulu|Alex Karasulu|
@@ -66,21 +69,27 @@
|weizhou|Wei Zhou|
|widodh|Wido den Hollander|
|willchan|William Chan|
+
+
## Emeritus PMC Members
+
PMC members who are no longer active include:
+ Alex Huang (ahuang)
+ Disheng Su (edison)
+ Ian Duffy (duffy)
+ Olivier Lamy (olamy)
-
+
+
+
## Committers
-Active list of committers (in alphabetical order of their usernames)
-
Active list of committers (in alphabetical order of their usernames):
+
{:.table-bordered}
+
+
| Username | Name |
|----------|------|
|ahmad|Ahmad Emneina|
@@ -200,6 +209,9 @@
|willchan|William Chan|
|yasker|Sheng Yang|
|ynojima|Yoshikazu Nojima|
-
+
+
+
## Emeritus Committers
+
Committers who are no longer active include:
