Add js to hide events with past dates (view only future) #1889
Conversation
|
😭 Deploy PR Preview failed. |
|
I think it would probably be better by filtering the things directly in Jekyll, instead of using Javascript. There's definitely a way to do it given the blog posts are filtered by default when they are in the future. |
+1 for automating this, one way or another. One advantage of doing it client-side is that it means people see the right thing, even if the site hasn't built for a while. Since we have to have a scheduled job to sync the docs from the main site, that's less of a factor than it would be if we only built when things changed... but there might still be a twelve-hour window between a broadcast and the re-render of the site, when we'd show the wrong thing. The disadvantage of doing it client-side is it sends more data to the client and pushes work to the browser, possibly slowing site render a touch. |
| function getCompareDate() { | ||
| var d = new Date(), | ||
| month = '' + (d.getMonth() + 1), | ||
| day = '' + d.getDate(), | ||
| year = d.getFullYear(); | ||
| if (month.length < 2) month = '0' + month; | ||
| if (day.length < 2) day = '0' + day; | ||
| return [year, month, day].join(''); | ||
| } | ||
| var elements = document.querySelectorAll('[future-date]'); | ||
| Array.prototype.forEach.call(elements, function(el, i){ | ||
| if(el.getAttribute('future-date').split('-').join('') < getCompareDate()) el.remove(); | ||
| }); |
There was a problem hiding this comment.
I'd be reluctant to do any hand-parsing of dates. It's just too error-prone, when there are battle-tested utilities available. For this scenario, I think it can be done with built-in libraries, without even needing an extra dependency.
This code filters out past events, so it could be adapted to filter out past events older than a month ago, or future events, or whatever criteria we want.
const now = new Date().getTime(); // This gives a number, which is nice and comparable, rather than comparing individual elements
Array.prototype.forEach.call(elements, function(el, i){
const date = new Date(el.getAttribute('future-date')); // This might fiddling with, depending on what the format is of this attribute
const isInThePast = date.getTime() < now;
if(isInThePast) el.remove();
});
There was a problem hiding this comment.
(The code above should be a drop-in replacement for future-date.js, but I haven't actually tested it, and I'm a bit hazy on the future-date attribute and if it's trying to filter out past events or future events, so I might have swapped the logic.)
|
Thinking about it more, I'd be inclined to take @insectengine's client-side version. Well, take with my update to do less hand-processing of dates :) That ensures people see the most-correct data. Then, we can do a follow-on piece to do a server-side filter to not even send the browser the stuff-that-shouldnt-be-there. That will ensure we don't build up a cruft of obsolete events over time, and keep the site load light. |
|
Not a big fan of the JS, I think doing it with Jekyll would be better and probably not more complex but I don't have any cycles atm to have a look so let's merge. |
Implemented a version this javascript solution to allow us to only view future dates in the events.yaml file.
https://jekyllcodex.org/without-plugin/future-dates/
This will reduce the amount of times we need to submit PRs to keep the events page up to date.