Add js to hide events with past dates (view only future)

_data/events.yaml

@@ -2,50 +2,65 @@ headline: "Select Upcoming Events"
 
 upcomingevents:
 
+- title: "test"
+  type: test
+  link: https://quarkus.io/
+  date: 2024-02-04
+  displaydate: "test"
+  location: test
+  description:  Test
+  thumbnail: default_logo.png
+
 - title: "DEV World"
   type: In Person
   link: https://github.com/quarkusio/quarkus/discussions/36904
-  date: "February 29 - March 1, 2024"
+  date: 2024-03-01
+  displaydate: "February 29 - March 1, 2024"
   location: Amsterdam, Netherlands
   description:  Europe's Leading Tech City will offer a 2 Day Festival of Tech with Developers from around the Planet, the must attend event for you and your whole Tech Team to attend.
   thumbnail: devworld_logo.png
 
 - title: "KubeCon Europe"
   type: In Person
   link: https://github.com/quarkusio/quarkus/discussions/38536
-  date: "March 19-22, 2024"
+  date: 2024-03-01
+  displaydate: "March 19-22, 2024"
   location: Paris, France
   description: The Cloud Native Computing Foundation’s flagship conference gathers adopters and technologists from leading open source and cloud native communities.
   thumbnail: kubconeu_2024.png
 
 - title: "Microsoft JDConf"
   type: Virtual
   link: https://github.com/quarkusio/quarkus/discussions/38537
-  date: "March 27-28, 2024"
+  date: 2024-03-28
+  displaydate: "March 27-28, 2024"
   location: 
   description: JDConf, a key event in the Java landscape, is returning in 2024 for an exceptional two-day virtual experience. Our mission is to provide a world-class, engaging event accessible to attendees from every corner of the globe. With each year, JDConf has expanded its content and global reach, now drawing thousands of live viewers worldwide and fostering a network of local community events.
   thumbnail: jdconf_2024.png
 
 - title: "DevNexus"
   type: In Person
   link: https://github.com/quarkusio/quarkus/discussions/38538
-  date: "April 9-11, 2024"
+  date: 2024-04-11
+  displaydate: "April 9-11, 2024"
   location: Atlanta, Geogia
   description: The longest-running and Largest Java Ecosystem Conference in the World.
   thumbnail: devnexus_logo.png
 
 - title: "Great International Developer Summit 2024"
   type: In Person
   link: https://github.com/quarkusio/quarkus/discussions/36902
-  date: "April 23-26, 2024"
+  date: 2024-04-26
+  displaydate: "April 23-26, 2024"
   location: Bengaluru, India
   description:  Embark on a transformative journey at GIDS 2024. From April 23-26, experience an extraordinary four-day program brimming with technical brilliance, captivating conversations, and visionary insights. Engage with trailblazing minds in software engineering and architecture, and discover the companies shaping the future of technology.
   thumbnail: gids_logo.png
 
 - title: "Red Hat Summit 2024"
   type: In Person
   link: https://github.com/quarkusio/quarkus/discussions/38539
-  date: "May 6-9, 2024"
+  date: 2024-05-09
+  displaydate: "May 6-9, 2024"
   location: Denver, Colorado
   description:  Red Hat® Summit and AnsibleFest bring together IT professionals, customers, partners, and peers to provide you the tools, connections, and knowledge to support your technology goals.
   thumbnail: redhatsummit_logo.png

_includes/events-band.html

@@ -4,7 +4,7 @@
     <h3 class="mt-0">{{ site.data.events.headline }}</h3>
   </div>
   {% for item in site.data.events.upcomingevents %}
-    <div class="width-6-12 event">
+    <div class="width-6-12 event" future-date="{{ item.date | date: '%Y-%m-%d' }}">
       <div class="grid-wrapper">
         <div class="img-wrapper">
           <a href="{{ item.link }}" target="_blank">
@@ -13,7 +13,7 @@ <h3 class="mt-0">{{ site.data.events.headline }}</h3>
         </div>
         <div class="info-wrapper">
           <p class="title"><a href="{{ item.link }}" target="_blank">{{ item.title }}</a></p>
-          <p class="eventdate">Date: {{ item.date }}</br>Location: {{ item.location }}</br>
+          <p class="eventdate">Date: {{ item.displaydate }}</br>Location: {{ item.location }}</br>
           Event Type: {{ item.type }}</p><p> {{ item.description }}</p>
         </div>
       </div>

_layouts/base.html

@@ -82,6 +82,7 @@
   <script src="{{ '/assets/javascript/clipboard.min.js' | relative_url }}" type="text/javascript"></script>
   <script src="{{ '/assets/javascript/copy.js' | relative_url }}" type="text/javascript"></script>
   <script src="{{ '/assets/javascript/asciidoc-tabs.js' | relative_url }}" type="text/javascript"></script>
+  <script src="{{ '/assets/javascript/future-date.js' | relative_url }}" type="text/javascript"></script>
 </body>
 
 </html>

assets/javascript/future-date.js

@@ -0,0 +1,13 @@
+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();
+});