JupiterBroadcasting · MarkSort · Feb 4, 2023 · Feb 5, 2023 · Feb 5, 2023 · Feb 5, 2023
diff --git a/content/show/coder-radio/_index.md b/content/show/coder-radio/_index.md
@@ -14,6 +14,11 @@ header_image = "/images/shows/coder-radio.png"
 
 podverse_podcast_id = "ZXd_1Ojd9"
 
+[live]
+  type = "weekly"
+  day = 1
+  hour = 9
+
 [links.twitter]
   url = "https://twitter.com/coderradioshow"
 [links.email]

diff --git a/content/show/linux-unplugged/_index.md b/content/show/linux-unplugged/_index.md
@@ -14,6 +14,11 @@ header_image = "/images/shows/linux-unplugged.png"
 
 podverse_podcast_id = "g40Um-HP1"
 
+[live]
+  type = "weekly"
+  day = 0
+  hour = 12
+
 [links.twitter]
   url = "https://twitter.com/LINUXUnplugged"
 [links.email]

diff --git a/content/show/office-hours/_index.md b/content/show/office-hours/_index.md
@@ -14,6 +14,11 @@ header_image = "/images/shows/office-hours.png"
 
 podverse_podcast_id = "GLuztlxs0-"
 
+[live]
+  type = "odd-weeks"
+  day = 2
+  hour = 12
+
 [links.shownotes]
   url="https://www.officehours.hair"
 [links.email]

diff --git a/content/show/self-hosted/_index.md b/content/show/self-hosted/_index.md
@@ -14,6 +14,12 @@ header_image = "/images/shows/self-hosted.png"
 
 podverse_podcast_id = "nUl1ZCL76"
 
+[live]
+  type = "even-weeks"
+  day = 3
+  hour = 16
+  minute = 30
+
 [links.discord]
   url="https://discord.gg/U3Gvr54VRp"
 [links.twitter]

diff --git a/themes/jb/assets/js/calendar.js b/themes/jb/assets/js/calendar.js
@@ -0,0 +1,90 @@
+const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+const updateSchedules = function(tzText) {
+    const schedules = document.getElementsByClassName("schedule");
+    const tzParts = tzText.match(
+        "^\\(GMT(?<sign>[+-])(?<hours>[0-9]{2}):(?<minutes>[0-9]{2})\\) (?<name>[a-zA-Z ]+)( -|$)"
+    );
+    const tzSign = tzParts[1];
+    const tzMinute = Number.parseInt(tzSign + tzParts[3], 10);
+
+    // show data uses Pacific time, adjust by 8 hours
+    const tzHour = Number.parseInt(tzSign + tzParts[2], 10) + 8;
+
+    for (let x = 0; x < schedules.length; x++) {
+        const type = schedules[x].getAttribute("data-live-schedule-type");
+        let day = Number.parseInt(schedules[x].getAttribute("data-live-schedule-day"), 10);
+        let hour = Number.parseInt(schedules[x].getAttribute("data-live-schedule-hour"), 10);
+        let minute = Number.parseInt(schedules[x].getAttribute("data-live-schedule-minute") || "0", 10);
+
+        minute += tzMinute;
+        if (minute < 0) {
+            hour -= 1;
+            minute += 60;
+        } else if (minute >= 60) {
+            hour += 1;
+            minute -= 60;
+        }
+
+        hour += tzHour;
+        if (hour < 0) {
+            day -= 1;
+            hour += 24;
+        } else if (hour >= 24) {
+            day += 1;
+            hour -= 24;
+        }
+
+        if (day < 0) {
+            day += 7;
+        } else if (day >= 7) {
+            day -= 7;
+        }
+
+        let ampm = "am";
+        if (hour >= 12) {
+            ampm = "pm";
+            if (hour > 12) {
+                hour -= 12;
+            }
+        } else if (hour == 0) {
+            hour = 12;
+        }
+
+        const tzName = tzParts[4];
+
+        let scheduleHtml = "";
+        if (type != "weekly") {
+            scheduleHtml += "Alternating ";
+        }
+        const minuteText = minute.toString().padStart(2, '0');
+        scheduleHtml += `${daysOfWeek[day]}s<br>${hour}:${minuteText}${ampm}&nbsp;${tzName}`;
+
+        schedules[x].innerHTML = scheduleHtml;
+    }
+}
+
+const calendarOnLoad = function() {
+    const iframe = document.querySelector('iframe');
+    const calendarBase = iframe.dataset.src;
+
+    // Detect timezone automatically
+    var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    var tzname = encodeURIComponent(tz);
+    iframe.src = calendarBase + "&ctz=" + tzname;
+
+    const ctz = document.querySelector('#ctz');
+    ctz.value = tz;
+
+    updateSchedules(ctz.options[ctz.selectedIndex].text);
+
+    // Change on timezone after dropdown
+    ctz.onchange = function () {
+        var tzname = ctz.value;
+        updateSchedules(ctz.options[ctz.selectedIndex].text)
+
+        if(tzname && tzname != "none") {
+            iframe.src = calendarBase + "&ctz=" + tzname;
+        }
+    };
+}
diff --git a/themes/jb/layouts/calendar/single.html b/themes/jb/layouts/calendar/single.html
@@ -1,15 +1,21 @@
 {{ define "headcontent" }}
-
+  {{ $calendarJs := resources.Get "js/calendar.js" }}
+  {{ if hugo.IsProduction }}
+    {{ $calendarJs = $calendarJs | minify | fingerprint }}
+  {{ end }}
+  <script type="text/javascript" src="{{ $calendarJs.Permalink }}" integrity="{{ $calendarJs.Data.Integrity }}"></script>
+  <script>
+    window.onload = () => {
+      calendarOnLoad();
+    }
+  </script>
 {{end}}
 {{ define "main" }}
   <div class="container">
       <div class="content">
         <h1>{{.Title}}</h1>
-        Subscribe To The Calendar: <a href="{{.Site.Params.calendar.rss}}">iCalendar</a>
-
-        <iframe frameborder="0" scrolling="no" data-src="//www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src={{.Site.Params.calendar.embedd}}&amp;color=%235229A3" width="100%" height="400px"></iframe>
-
-        <select name="ctz" id="ctz" style="width: 100%;">
+        <h2>Regular Live Show Times</h2>
+        <select name="ctz" id="ctz" style="float: right;">
           <option value="none">-- Select Your Timezone --</option>
           <option value="Pacific/Niue">(GMT-11:00) Niue</option>
           <option value="Pacific/Pago_Pago">(GMT-11:00) Pago Pago</option>
@@ -320,24 +326,30 @@ <h1>{{.Title}}</h1>
           <option value="Pacific/Tongatapu">(GMT+13:00) Tongatapu</option>
           <option value="Pacific/Kiritimati">(GMT+14:00) Kiritimati</option>
         </select>
-    </div>
-  </div>
 
-  <script>
-    var calendarBase = document.querySelector('iframe').dataset.src;
+        <br>
+        <br>
 
-    // Detect timezone automatically
-    var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    var tzname = encodeURIComponent(tz);
-    document.querySelector('iframe').src = calendarBase + "&ctz=" + tzname;
+        <div class="container">
+          <div class="columns is-multiline">
+             {{ range where .Site.Pages  "Section" "show" }}
+              {{ if (isset .Params "live") }}
+                <div class="column is-6 is-3-fullhd is-3-desktop is-12-mobile"  style="display: flex;">
+                  {{ partial "episode/schedule.html" . }}
+                </div>
+              {{ end }}
+            {{ end }}
+          </div>
+        </div>
 
-    // Change on timezone after dropdown
-    document.querySelector('#ctz').onchange = function () {
-      var tzname = document.querySelector('#ctz').value;
-
-      if(tzname && tzname != "none") {
-        document.querySelector('iframe').src = calendarBase + "&ctz=" + tzname;
-      }
-    };
-  </script>
+        <br>
+        <br>
+
+        Subscribe To The Calendar: <a href="{{.Site.Params.calendar.rss}}">iCalendar</a>
+
+        <iframe frameborder="0" scrolling="no" data-src="//www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src={{.Site.Params.calendar.embedd}}&amp;color=%235229A3" width="100%" height="400px"></iframe>
+
+
+    </div>
+  </div>
 {{end}}
diff --git a/themes/jb/layouts/partials/episode/schedule.html b/themes/jb/layouts/partials/episode/schedule.html
@@ -0,0 +1,19 @@
+<a href="{{ .Permalink }}">
+  <div class="card card-episode">
+    <div class="card-image">
+      <img src="{{.Params.header_image }}" width="432" height="242" alt="{{.Title}}">
+    </div>
+    <div class="card-content">
+      <div class="content">
+        <h3>{{.Title}}</h3>
+        <p class="schedule"
+           data-live-schedule-type="{{ index .Params.live.type }}"
+           data-live-schedule-day="{{ index .Params.live.day }}"
+           data-live-schedule-hour="{{ index .Params.live.hour }}"
+           {{ if (isset .Params.live "minute") }}
+             data-live-schedule-minute="{{ index .Params.live.minute }}"
+          {{ end }}></p>
+      </div>
+    </div>
+  </div>
+</a>