add javascript to display time in local time and text edits

Author: insectengine

_data/insights-videos.yaml

@@ -6,7 +6,7 @@ futureheadline: "Scheduled Podcasts"
 
 # Next upcoming session (update weekly)
 nextsessiontitle: "EPISODE #214: Quarkus and build reproducibility: are we there yet?"
-nextsessiondate: "August 4, 2025"
+nextsessiondate: "2025-08-04T13:00Z"
 nextsessionguest: "Guillaume Smet"
 
 

_includes/insights-band.html

@@ -3,19 +3,19 @@
     <div class="width-12-12">
       <h3 class="mt-0">{{ site.data.insights-videos.sectiontitle }}</h3>
     </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>Join us for our next upcoming session</h4>
       <h5>{{ site.data.insights-videos.nextsessiontitle }}</h5>
-      <p>Special Guest: {{ site.data.insights-videos.nextsessionguest }}<br>
-      Date: {{ site.data.insights-videos.nextsessiondate }} at GMT+02:00 CET (9:00 am EST)</p>
+      <p>Special Guest: {{ site.data.insights-videos.nextsessionguest }}</p>
+      <p id="convertedTime" data-utc="{{ site.data.insights-videos.nextsessiondate }}"></p>
 
-      <p>Have and idea for a topic or guest? Add your <a href="https://github.com/quarkusio/quarkus-insights">suggestion to our github issues</a> with the label of "Insights"!</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>

_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>

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}`;