add session and reconfig upcoming band for better user experience

_data/insights-videos.yaml

@@ -1,13 +1,18 @@
+#titles for page
+
 sectiontitle: "Upcoming Podcast"
 socialdescription: "View the Podcast on these platforms"
 futureheadline: "Scheduled Podcasts"
 
-futurevideos:
+# Next upcoming session (update weekly)
+nextsessiontitle: "EPISODE #214: Quarkus and build reproducibility: are we there yet?"
+nextsessiondate: "2025-08-04T13:00Z"
+nextsessionguest: "Guillaume Smet"
 
-- title: "No Session - Holidays"
-  link: 
-  date: "July 28, 2025"
-  authors: "None"
+
+# upcoming session list (update weekly)
+
+futurevideos:
 
 - title: "EPISODE #214: Quarkus and build reproducibility: are we there yet?"
   link: 
@@ -24,10 +29,10 @@ futurevideos:
   date: "August 18, 2025"
   authors: "None"
 
-- title: "EPISODE #216: To Be Scheduled"
+- title: "EPISODE #216: What's new with Leyden"
   link: 
   date: "August 25, 2025"
-  authors: "To Be Announced"
+  authors: "Andrew Dinn"
 
 - title: "No Session - Holidays"
   link: 
@@ -55,7 +60,7 @@ futurevideos:
   authors: "Willem Jan Glerum"
 
 
-  
+# past session list (move last upcoming to this list weekly)
 
 pastheadline: "Archived Podcast Videos"
 

_includes/insights-band.html

@@ -1,26 +1,30 @@
-<div class="full-width-bg component awards-band">
+<div class="full-width-bg component">
   <div class="grid-wrapper">
     <div class="width-12-12">
       <h3 class="mt-0">{{ site.data.insights-videos.sectiontitle }}</h3>
-      <h5>{{ site.data.insights-videos.sectionsubhead }}</h5>
     </div>
-    <div class="width-7-12 width-12-12-m">
+    <div class="width-6-12 width-12-12-m">
       <div class="iframe-container">
       <iframe src="https://player.restream.io/?token=f07d2d026ed3464da2396dd5f2ffbd86" allow="autoplay" allowfullscreen frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
     </div>
     </div>
-    <div class="width-5-12 width-12-12-m">
+    <div class="width-6-12 width-12-12-m">
       <div class="streamingiconblock">
-      <h4 class="mt-0">{{ site.data.insights-videos.socialdescription }}</h4>
+      <h4>Join us for our next upcoming session</h4>
+      <h5>{{ site.data.insights-videos.nextsessiontitle }}</h5>
+      <p>Special Guest: {{ site.data.insights-videos.nextsessionguest }}</p>
+      <p id="convertedTime" data-utc="{{ site.data.insights-videos.nextsessiondate }}"></p>
+
+      <p>Have a topic idea or want to propose a guest? Add your <a href="https://github.com/quarkusio/quarkus-insights">suggestion to our github issues</a> with the label of "Insights".</p>
+
+      <h5>{{ site.data.insights-videos.socialdescription }}</h5>
       <ul>
-      <li><a href="https://facebook.com/quarkusio" target="_blank"><i class="fab fa-facebook-square fa-3x"></i></a></li>
-      <li><a href="https://twitch.tv/quarkusio" target="_blank"><i class="fab fa-twitch fa-3x"></i></a></li>
-      <li><a href="https://youtube.com/quarkusio" target="_blank"><i class="fab fa-youtube fa-3x"></i></a></li>
-      <li><a href="https://www.linkedin.com/company/quarkusio/" target="_blank"><i class="fab fa-linkedin fa-3x"></i></a></li>
-    </ul>
-    <!--
-    <p><a href="https://feeds.listenbox.app/rss/9w4VBtq9s1v/audio.rss" target="_blank">RSS Audio Feed</a>&nbsp;|&nbsp;<a href="https://feeds.listenbox.app/rss/9w4VBtq9s1v/video.rss" target="_blank">RSS Video Feed</a></p>
-    -->
+        <li><a href="https://facebook.com/quarkusio" target="_blank"><i class="fab fa-facebook-square fa-3x"></i></a></li>
+        <li><a href="https://twitch.tv/quarkusio" target="_blank"><i class="fab fa-twitch fa-3x"></i></a></li>
+        <li><a href="https://youtube.com/quarkusio" target="_blank"><i class="fab fa-youtube fa-3x"></i></a></li>
+        <li><a href="https://www.linkedin.com/company/quarkusio/" target="_blank"><i class="fab fa-linkedin fa-3x"></i></a></li>
+      </ul>
+
     </div>
     </div>
   </div>

_layouts/base.html

@@ -105,6 +105,7 @@
   <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>
   <script src="{{ '/assets/javascript/randomize.js' | relative_url }}" type="text/javascript"></script>
+  <script src="{{ '/assets/javascript/time.js' | relative_url }}" type="text/javascript"></script>
 </body>
 
 </html>

_sass/quarkus.scss

@@ -782,10 +782,19 @@ ol.bibliography li {
 // Insights page
 
 .streamingiconblock {
-  margin: 50px auto;
+  margin: 0px auto;
   text-align: center;
 
+    @media screen and (max-width: 768px) {
+    margin-top: 50px;
+  }
+
 h4 {
+  margin-top: 0px !important;
+  padding-top: 0px;
+}
+
+h5 {
   font-weight: 800;
 }
 

assets/javascript/time.js

@@ -0,0 +1,21 @@
+ // Option 1: Get from a data attribute
+ const utcDateString = document.getElementById('convertedTime').dataset.utc;
+
+ // Convert to user's local date and time
+ const localDate = new Date(utcDateString);
+
+ // Format the output
+ const options = {
+   weekday: 'long',
+   year: 'numeric',
+   month: 'long',
+   day: 'numeric',
+   hour: '2-digit',
+   minute: '2-digit',
+   timeZoneName: 'short'
+ };
+
+ const localDateTimeString = localDate.toLocaleString(undefined, options);
+
+ // Set the readable local date as content
+ document.getElementById("convertedTime").textContent = `Date & Time: ${localDateTimeString}`;