Add timezone parameter and calculate all timestamps according to it

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    jekyll-theme-conference (3.6.5)
+    jekyll-theme-conference (3.6.6)
       jekyll (~> 4.0)
 
 GEM

README.md

@@ -31,6 +31,7 @@ The theme was originally created for the yearly Winterkongress conference of the
   * [Theme Verification](#theme-verification)
   * [Collection URLs](#collection-urls)
   * [Language](#language)
+  * [Timezone](#timezone)
   * [Navigation Bar](#navigation-bar)
   * [Open Graph Link Preview](#open-graph-link-preview)
   * [Main Landing Page](#main-landing-page)
@@ -251,6 +252,17 @@ conference:
   lang: en
 ```
 
+### Timezone
+
+Multiple dynamic features such as showing the current day in the program or live indications require correct timing. Define the timezone in which the conference takes place with the `tz` property set to a valid [UTC timezone offset](https://en.wikipedia.org/wiki/List_of_UTC_offsets) in the format `"+/-HH:MM"`:
+
+Example:
+
+```yaml
+conference:
+  tz: "+02:00"
+```
+
 ### Navigation Bar
 
 The navigation bar is located at the top and visible on every site. On the right it show the title of the website (`site.title`) followed by the links listed under the `links` property of the `navigation` property. See the _Content_ > _Links_ section below for the available properties per link.

_config.example.yml

@@ -56,6 +56,9 @@ conference:
   # Language
   lang: en
 
+  # Timezone
+  tz: "+02:00"
+
   # Show theme errors:
   show_errors: True
 

_includes/js/program.js

@@ -6,37 +6,36 @@ window.conference.program = (() => {
     };
 
     const init = () => {
-        if ($('#day-list')) {
+        if ($("#day-list")) {
             // Switch to day if page load with hash
             const hash = window.location.hash;
             if (hash) {
-                $('#day-list a[href="' + hash + '"]').tab('show');
+                $('#day-list a[href="' + hash + '"]').tab("show");
             }
 
             // Switch to day if today
             else {
-                let today = new Date();
-                today.setHours(0,0,0,0);
+                const now = new Date();
+                const tsNow = Math.floor(now.getTime() / 1000);
 
                 $('a[data-toggle="tab"]').each(function () {
-                    let d = new Date($(this).data('date'));
-                    d.setHours(0,0,0,0);
+                    const tsMidnight = new Date($(this).data("ts") * 1000);
 
-                    if (today.getTime() === d.getTime()) {
-                        $(this).tab('show');
+                    if (tsMidnight <= tsNow < tsMidnight + 24 * 60 * 60) {
+                        $(this).tab("show");
                         updateHash(this.hash);
                     }
                 });
             }
 
             // Add current selected day as hash to URL while keeping current scrolling position
-            $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
+            $('a[data-toggle="tab"]').on("shown.bs.tab", function () {
                 updateHash(this.hash);
             });
         }
     };
 
     return {
-        init: init
+        init: init,
     };
 })();

_includes/partials/get_talk_time.html

@@ -1,5 +1,5 @@
-{%- assign talk_start = t.time_start -%}
-{%- assign talk_end = t.time_end -%}
+{%- assign talk_start = t.time_start | default: "00:00" -%}
+{%- assign talk_end = t.time_end | default: "00:00" -%}
 
 {%- if talk_start contains ' +' -%}
   {%- assign talk_start_day = talk_start | split: ' +' | last | plus: 0 -%}

_includes/partials/get_talk_timestamp.html

@@ -1,9 +1,15 @@
 {%- include partials/get_talk_time.html -%}
 
-{%- assign datetime_start = d.date | append: " " | append: talk_start -%}
+{%- assign datetime_start = d.date | append: "T" | append: talk_start | append: ":00" -%}
+{%- if site.conference.tz -%}
+  {%- assign datetime_start = datetime_start | append: site.conference.tz -%}
+{%- endif -%}
 {%- assign add_days_start = talk_start_day | times: 24 | times: 60 | times: 60 -%}
 {%- assign timestamp_start = datetime_start | date: "%s" | plus: add_days_start | date: "%s" -%}
 
-{%- assign datetime_end = d.date | append: " " | append: talk_end -%}
+{%- assign datetime_end = d.date | append: "T" | append: talk_end | append: ":00" -%}
+{%- if site.conference.tz -%}
+  {%- assign datetime_end = datetime_end | append: site.conference.tz -%}
+{%- endif -%}
 {%- assign add_days_end = talk_end_day | times: 24 | times: 60 | times: 60 -%}
 {%- assign timestamp_end = datetime_end | date: "%s" | plus: add_days_end | date: "%s" -%}

_layouts/program.html

@@ -16,7 +16,7 @@ <h1 class="display-5 {% if nbr_days > 1 -%} mb-2 {%- else -%} mb-4 {%- endif %}
       {%- for d in site.data.program.days -%}
         {%- include partials/get_day_hash.html %}
         <li class="nav-item" role="presentation">
-          <a class="nav-link btn btn-outline-secondary {%- if forloop.index == 1 %} active{% endif %}" id="tab-{{ day_hash }}" data-toggle="tab" {%- if d.date %} data-date="{{ d.date }}" {%- endif %} href="#{{ day_hash }}" role="tab" aria-controls="{{ day_hash }}" aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}">{{ day_name }}</a>
+          <a class="nav-link btn btn-outline-secondary {%- if forloop.index == 1 %} active{% endif %}" id="tab-{{ day_hash }}" data-toggle="tab" {%- if d.date -%}{%- include partials/get_talk_timestamp.html %} data-ts="{{ timestamp_start }}" {%- endif %} href="#{{ day_hash }}" role="tab" aria-controls="{{ day_hash }}" aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}">{{ day_name }}</a>
         </li>
       {%- endfor %}
     </ul>

jekyll-theme-conference.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-conference"
-  spec.version       = "3.6.5"
+  spec.version       = "3.6.6"
   spec.authors       = ["Lorenz Schmid"]
   spec.email         = ["lorenzschmid@users.noreply.github.com"]