Surface timely events in the banner

[shazron]

Problem:

Events, which is a link in the footer of the site, is hard to discover unless we have a banner on the top of the site. For major events like PhoneGap Day we do show the banner, but for other events where team speakers are at, we don't. We need a way to show upcoming events on the site, without it being a manual process.

Right now editing the banner is a manual process:

To hide/show, uncomment:

https://github.com/phonegap/phonegap.github.io/blob/7474ad3cb69013e9db7253f1afcf67c2ac816fae/index.html#L21

To edit contents of the banner:

https://github.com/phonegap/phonegap.github.io/blob/7474ad3cb69013e9db7253f1afcf67c2ac816fae/_includes/banner.html

Proposed solution:

Requires JavaScript to make it dynamic. A .json file still needs to be uploaded to add events to.

1. Always include banner.html contents (which will be empty), but add a CSS class to not display it.
2. On page load, a script on the home page reads an events.json file on phonegap.com
3. The script parses the events.json, and sorts then chooses an upcoming event (the rule could be if it will be occurring in a month or so), and displays it. If there are multiple events in a month, cycle through them.
4. Once the event(s) are chosen, write the appropriate HTML to the DOM element that comprises the event in banner.html, and display the div.

Template:

<div class="announcement-banner">
  <a href="EVENT_LINK">EVENT_TITLE<span style="text-decoration:underline;">Get the details</span></a>
</div>

Based on banner.html, the events.json file would be in the format:

[
    { 
        "start_date": "2016-12-02",
        "end_date": "2016-12-02",
        "event_title": "Decompress AU - a community day for designers and developers.",
        "event_link": "http://2016.decompress.com.au/"
    },
    {
        "start_date": "2016-12-02",
        "end_date": "2016-12-05",
        "event_title": "dotJS - the largest JavaScript conference in Europe",
        "event_link": "https://www.dotjs.io/"
    }
]

Dates in the .json are ISO-8601.

[shazron]

Comments, etc from @GarthDB @jahoni @jenlgray ? Good idea, bad idea?

Important to note: I will do the work in a PR for further code review. The implementation will look exactly the same as the existing banner, although I don't know how the existing banner deals with text overflow.

[shazron]

The alternative is to just parse https://github.com/phonegap/phonegap.github.io/blob/master/events.html which seems to be formatted well.

[jahoni]

I'm not certain that I agree that (all) events warrant a banner. PhoneGap Day, yeah - but not others. Correct me if I am wrong.

Right now, we have 6 events on http://phonegap.com/event/, but in the most recent past (over the past year) it has been one or two, and often those have been old/stale.

I'm not convinced that events are "unfindable" either. They certainly are in the footer (with a lot of other content), but don't think they need higher prominence in the global navigation, say. If others feel that the events are really important, I'd say we need to consider adding a persistent link/section for them on the homepage (that is not in the "alert"-y banner..crying wolf with banners is lame), and/or creating a blog post to highlight specific events/speakers (like http://phonegap.com/blog/2016/11/15/phonegap-europe-tour/)

Feels like this may also be somewhat related to #140 and #154

[shazron]

I think events are really important, because this is what we do: "increase developer mindshare" about PhoneGap, which is why we do events. A prominent permanent link would be great and more ideal, but I didn't want to suggest that since that was a harder change to make (the testing aspect for all screen sizes) instead of the existing banner which has already been tested.

I'll leave it to others to discuss the merits of this change, I've done my part to surface this idea again which has been brought up before as you mentioned.

[GarthDB]

A blog post would put it on the front page while it is new.

[jahoni]

Not thinking of adding "Events" to the global navigation, but I guess we need to consider a dynamic dedicated events section on the homepage (appears when we have events, doesn't when we don't).

Likely the best fit is above the "Blog" section.