jekyll-theme-conference 4.0.2 → 4.1.0

data/_layouts/program.html

@@ -18,7 +18,7 @@
         {%- for d in site.data.program.days -%}
           {%- include get_day_hash.html %}
           <li class="nav-item" role="presentation">
-            <a class="nav-link {%- if forloop.index == 1 %} active{% endif %}" id="tab-{{ day_hash }}" data-bs-toggle="tab" {%- if d.date -%}{%- include 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>
+            <a class="nav-link {%- if forloop.index == 1 %} active{% endif %}" id="tab-{{ day_hash }}" data-bs-toggle="tab" {%- if d.date -%}{%- include 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 | escape }}</a>
           </li>
         {%- endfor %}
       </ul>
@@ -33,26 +33,22 @@
     {%- endif %}
 
     <div class="program-table-container w-100 overflow-x-scroll">
-      <table class="table program-table w-auto mx-auto align-top mb-0" role="grid" aria-label="{{ site.data.lang[site.conference.lang].program.schedule | default: 'Conference schedule' }}{% if nbr_days > 1 %} - {{ day_name }}{% endif %}">
+      <table class="table program-table w-auto mx-auto align-top mb-0" aria-label="{{ site.data.lang[site.conference.lang].program.schedule | default: 'Conference schedule' }}{% if nbr_days > 1 %} - {{ day_name | escape }}{% endif %}">
         <thead>
           <tr>
             <th scope="col" class="program-time text-center" aria-label="{{ site.data.lang[site.conference.lang].program.time | default: 'Time' }}">#</th>
-            <th scope="col" class="program-space"></th>
             {%- assign nbr_rooms = d.rooms | size -%}
             {%- for r in d.rooms -%}
               {%- assign room = site.rooms | where: 'name', r.name | first %}
               <th scope="col" class="program-talk text-center" id="room-{{ day_hash }}-{{ forloop.index }}">
                 {%- if room.hide or location_hide -%}
-                  {{- room.name -}}
+                  {{- room.name | escape -}}
                 {%- else -%}
                   <a class="text-reset link-underline-primary link-underline-opacity-0 link-underline-opacity-100-hover" href="{{ room.url | prepend: site.baseurl }}">
-                    {{- room.name -}}
+                    {{- room.name | escape -}}
                   </a>
                 {%- endif -%}
               </th>
-              {%- unless forloop.last %}
-                <th scope="col" class="program-space" aria-hidden="true"></th>
-              {%- endunless -%}
             {%- endfor %}
           </tr>
         </thead>
@@ -107,6 +103,8 @@
                       {{- current_hour | append: ':' | append: current_min -}}
                     {%- endif -%}
                   {%- else -%}
+                    {%- comment -%} Hour for screen readers, e.g. "10:15" instead of ":15" {%- endcomment -%}
+                    <span class="visually-hidden">{{ current_hour }}</span>
                     {%- if current_min < 10 -%}
                       {{- ':0' | append: current_min -}}
                     {%- else -%}
@@ -115,9 +113,17 @@
                   {%- endif -%}
                 </th>
               {%- else -%}
-                <th scope="row"></th>
+                <th scope="row">
+                  {%- comment -%} Time for screen readers only {%- endcomment -%}
+                  <span class="visually-hidden">
+                    {%- if current_min < 10 -%}
+                      {{- current_hour | append: ':0' | append: current_min -}}
+                    {%- else -%}
+                      {{- current_hour | append: ':' | append: current_min -}}
+                    {%- endif -%}
+                  </span>
+                </th>
               {%- endif %}
-              <td></td>
 
               {%- for r in d.rooms -%}
                 {%- assign room = site.rooms | where: 'name', r.name | first -%}
@@ -176,8 +182,16 @@
                     {%- endunless -%}
 
                     {%- include get_track_properties.html -%}
-                    <td rowspan="{{ talk_nbr_steps }}" class="program-talk p-0 h-100">
-                      <div class="h-100 p-2 bg-{{ track_color }}-subtle text-{{ track_color }}-emphasis border-4 border-start border-{{ track_color }}-subtle shadow-sm overflow-hidden">
+                    {%- comment -%} Colour on the cell itself: a child cannot stretch over all spanned rows {%- endcomment %}
+                    <td rowspan="{{ talk_nbr_steps }}" class="program-talk p-2 bg-{{ track_color }}-subtle text-{{ track_color }}-emphasis border-start border-{{ track_color }}-subtle shadow-sm">
+                      <div class="overflow-hidden">
+                        {%- comment -%} Time and track for screen readers: visually given by row and colour {%- endcomment %}
+                        <span class="visually-hidden">
+                          {%- if talk_start_hour < 10 -%}0{%- endif -%}{{- talk_start_hour -}}:{%- if talk_start_min_exact < 10 -%}0{%- endif -%}{{- talk_start_min_exact -}}
+                          –
+                          {%- if talk_end_hour < 10 -%}0{%- endif -%}{{- talk_end_hour -}}:{%- if talk_end_min_exact < 10 -%}0{%- endif -%}{{- talk_end_min_exact -}}
+                          {%- if talk.track -%}, {{ talk.track | escape }}{%- endif -%}
+                        </span>
 
                         {%- include show_live_icon.html class="mb-2" %}
 
@@ -202,10 +216,6 @@
                   <td class="program-talk"></td>
                 {%- endunless -%}
 
-                {%- if forloop.last != true %}
-                  <td class="program-space"></td>
-                {%- endif -%}
-
               {%- endfor %}
 
             </tr>
@@ -224,10 +234,10 @@
 
   {%- if site.conference.talks.tracks %}
     {%- unless page.hide_legend -%}
-      <h5 class="mt-4">{{ site.data.lang[site.conference.lang].program.legend | default: "Caption" }}</h5>
+      <h2 class="h5 mt-4">{{ site.data.lang[site.conference.lang].program.legend | default: "Caption" }}</h2>
       {%- for track_prop in site.conference.talks.tracks %}
         <div class="d-block d-sm-inline-block m-1 p-1 ps-2 pe-2 bg-{{ track_prop.color | default: 'light' }}-subtle text-{{ track_prop.color | default: 'light' }}-emphasis border-start border-4 border-{{ track_prop.color | default: 'light' }}-subtle fw-normal">
-          {{- track_prop.name -}}
+          {{- track_prop.name | escape -}}
         </div>
       {%- endfor -%}
     {%- endunless -%}

data/_layouts/room.html

@@ -6,7 +6,7 @@
 
   <!-- title for print: -->
   <h1 class="display-5 mb-3 d-none d-print-inline">
-    {{ this_room.name }}
+    {{ this_room.name | escape }}
   </h1>
 
   <!-- title shown in browser: -->
@@ -24,15 +24,15 @@
     {% for r in d.rooms %}
       {% if this_room.name == r.name and r.talks.size > 0 %}
         {% unless room_talks %}
-          <h5 class="mt-4 mb-2">
+          <h2 class="h5 mt-4 mb-2">
             {{ site.data.lang[site.conference.lang].location.talks | default: "Talks in this room" }}:
-          </h5>
+          </h2>
           {% assign room_talks = true %}
         {% endunless %}
 
-        <h6 class="mt-1 mb-2">
-          {{- day_name -}}
-        </h6>
+        <h3 class="h6 mt-1 mb-2">
+          {{- day_name | escape -}}
+        </h3>
 
         <table class="mw-100">
         {%- for t in r.talks -%}
@@ -47,4 +47,6 @@
   {% endfor %}
 
   {%- include footer.html -%}
+{%- else -%}
+  {%- include hidden_page.html -%}
 {%- endunless -%}

data/_layouts/speaker-overview.html

@@ -24,16 +24,16 @@
 
         {% assign cur_letter = last_letter %}
         <div class="col-count">
-          <h3>{{ cur_letter }}</h3>
+          <h2 class="h3">{{ cur_letter | escape }}</h2>
           <ul class="list-unstyled">
       {% endif %}
 
       <li class="fw-light">
         {% if speaker.hide %}
-          {{ speaker.first_name }} {{ speaker.last_name }}
+          {{ speaker.first_name | escape }} {{ speaker.last_name | escape }}
         {% else %}
-          <a class="link-underline-primary link-underline-opacity-0 link-underline-opacity-100-hover" href="{{ speaker.url | prepend: site.baseurl }}">
-            {{ speaker.first_name }} {{ speaker.last_name }}
+          <a class="d-inline-block py-1 link-underline-primary link-underline-opacity-0 link-underline-opacity-100-hover" href="{{ speaker.url | prepend: site.baseurl }}">
+            {{ speaker.first_name | escape }} {{ speaker.last_name | escape }}
           </a>
         {% endif %}
       </li>

data/_layouts/speaker.html

@@ -8,17 +8,17 @@
   </p>
 
   <h1 class="fw-light mb-3 text-break">
-    {{ speaker.first_name }} {{ speaker.last_name }}
+    {{ speaker.first_name | escape }} {{ speaker.last_name | escape }}
   </h1>
 
   {{ content }}
 
-  {% include get_link_types.html %}
+  {% include get_link_types.html context="speaker" %}
 
   {% if has_icon_links > 0 %}
     <ul class="list-unstyled">
       {% for link in speaker.links %}
-        {% include get_link.html type="icon" %}
+        {% include get_link.html type="icon" context="speaker" %}
         {% if link_valid %}
           {{ link_list_item }}
         {% endif %}
@@ -27,11 +27,11 @@
   {% endif %}
 
   {% if has_regular_links > 0 %}
-    <h5 class="mt-4 mb-1">{{ site.data.lang[site.conference.lang].more_information | default: "More Information" }}:</h5>
+    <h2 class="h5 mt-4 mb-1">{{ site.data.lang[site.conference.lang].more_information | default: "More Information" }}:</h2>
 
     <ul class="list-unstyled">
       {% for link in speaker.links %}
-        {% include get_link.html %}
+        {% include get_link.html context="speaker" %}
         {% if link_valid %}
           {{ link_list_item }}
         {% endif %}
@@ -50,7 +50,7 @@
   {% endfor %}
 
   {% if active_speaker %}
-    <h5 class="mt-4 mb-2">{{ site.data.lang[site.conference.lang].speaker.talks | default: "Talks at this conference" }}:</h5>
+    <h2 class="h5 mt-4 mb-2">{{ site.data.lang[site.conference.lang].speaker.talks | default: "Talks at this conference" }}:</h2>
 
     <table class="mw-100">
     {%- for d in site.data.program.days -%}
@@ -73,9 +73,11 @@
 
   <p class="d-print-none d-pwa-none mt-5">
     <a href="{{ page.collection | prepend: '/' | prepend: site.baseurl }}" class="btn btn-outline-secondary">
-      <i class="bi bi-people" aria-hidden="true"></i>&nbsp;{{ site.data.lang[site.conference.lang].overview | default: "Overview" }}
+      {% include icon.html name="people" %}&nbsp;{{ site.data.lang[site.conference.lang].overview | default: "Overview" }}
     </a>
   </p>
 
   {%- include footer.html -%}
+{%- else -%}
+  {%- include hidden_page.html -%}
 {%- endunless -%}

data/_layouts/stream-overview.html

@@ -19,10 +19,12 @@
       {%- endif %}
 
     <div class="col-md mb-4">
-      <h3 id="stream-heading-{{ forloop.index }}">{{ room.name }}</h3>
+      <h2 class="h3" id="stream-heading-{{ forloop.index }}">{{ room.name | escape }}</h2>
       <div class="ratio ratio-16x9">
         {%- include get_room_live_href.html %}
-        <iframe src="{{ room_live_href }}" allowfullscreen title="{{ site.data.lang[site.conference.lang].live.stream | default: 'Live Stream' }}: {{ room.name }}" aria-labelledby="stream-heading-{{ forloop.index }}"></iframe>
+        {%- comment -%} Loaded by the embed module, after consent {%- endcomment %}
+        <iframe data-embed-src="{{ room_live_href | escape }}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen title="{{ site.data.lang[site.conference.lang].live.stream | default: 'Live Stream' }}: {{ room.name | escape }}" aria-labelledby="stream-heading-{{ forloop.index }}"></iframe>
+        {%- include embed_consent.html href=room_live_href click_to_load=site.conference.live.streaming.click_to_load %}
       </div>
     </div>
 

data/_layouts/sw.js

@@ -1,65 +1,140 @@
 const BASE_URL = "{{ site.baseurl }}";
 const VERSION = "{{ site.time | date: '%Y%m%d%H%M%S' }}";
-const CACHE_NAME = `jekyll-conference-theme-${VERSION}`;
+const CACHE_PREFIX = "jekyll-conference-theme-";
+const CACHE_NAME = `${CACHE_PREFIX}${VERSION}`;
 
-// Resources will be loaded from site.json at runtime
-let APP_STATIC_RESOURCES = [];
+// Fall back to the cached page when the network is this slow, e.g. on a
+// crowded conference Wi-Fi (the response still updates the cache)
+const NETWORK_TIMEOUT_MS = 3000;
+const HTTP_NOT_MODIFIED = 304;
 
-// Install event - cache resources
+// Copy of the previous build (cache), or nothing on the first install
+const previousCache = async () => {
+  const names = (await caches.keys()).filter((name) => name.startsWith(CACHE_PREFIX) && name !== CACHE_NAME);
+  return names.length ? caches.open(names[names.length - 1]) : null;
+};
+
+// Store a resource in the new cache, downloading only what changed since the
+// previous build: theme bundles carry their content hash (e.g.
+// conference.bundle.css?v=1a2b3c), all other resources are revalidated (304)
+const precache = async (cache, previous, url) => {
+  const cached = previous && (await previous.match(url));
+  if (cached && new URL(url, self.location.href).searchParams.has("v")) {
+    return cache.put(url, cached);
+  }
+
+  const headers = {};
+  if (cached?.headers.has("ETag")) {
+    headers["If-None-Match"] = cached.headers.get("ETag");
+  }
+  if (cached?.headers.has("Last-Modified")) {
+    headers["If-Modified-Since"] = cached.headers.get("Last-Modified");
+  }
+
+  const response = await fetch(url, { cache: "no-store", headers });
+  if (response.status === HTTP_NOT_MODIFIED && cached) {
+    return cache.put(url, cached);
+  }
+  if (!response.ok) {
+    throw new Error(`${response.status} ${url}`);
+  }
+  return cache.put(url, response);
+};
+
+// Install event - precache all pages and assets listed in site.json
 self.addEventListener("install", (event) => {
   event.waitUntil(
-    fetch(BASE_URL + "/assets/js/site.json")
-      .then((response) => {
+    (async () => {
+      try {
+        const response = await fetch(`${BASE_URL}/assets/js/site.json`, { cache: "no-store" });
         if (!response.ok) {
           throw new Error(`Failed to load site.json: ${response.status}`);
         }
-        return response.json();
-      })
-      .then((data) => {
-        // Combine pages and assets from site.json, excluding the service worker itself
-        APP_STATIC_RESOURCES = [
-          ...(data.pages || []),
-          ...(data.assets || []),
-        ].filter((url) => !url.includes("/sw.js"));
-
-        return caches.open(CACHE_NAME).then((cache) => {
-          return cache.addAll(APP_STATIC_RESOURCES);
-        });
-      })
-      .catch((error) => {
+        const { pages = [], assets = [] } = await response.json();
+
+        // Cache each resource on its own, so one missing file does not
+        // leave the whole cache empty
+        const cache = await caches.open(CACHE_NAME);
+        const previous = await previousCache();
+        const results = await Promise.allSettled([...pages, ...assets].map((url) => precache(cache, previous, url)));
+        const failed = results.filter((result) => result.status === "rejected");
+        if (failed.length) {
+          console.warn(`Service worker could not cache ${failed.length} resource(s)`);
+        }
+      } catch (error) {
         console.error("Service worker install failed:", error);
-        // Still resolve to allow service worker to activate
-        return Promise.resolve();
-      }),
+      }
+
+      // Activate new versions right away (schedule updates)
+      await self.skipWaiting();
+    })(),
   );
 });
 
-// Activate event - clean up old caches
+// Activate event - remove outdated caches of this theme only
 self.addEventListener("activate", (event) => {
   event.waitUntil(
-    caches.keys().then((cacheNames) => {
-      return Promise.all(
-        cacheNames.map((cacheName) => {
-          if (cacheName !== CACHE_NAME) {
-            return caches.delete(cacheName);
-          }
-        }),
+    (async () => {
+      const cacheNames = await caches.keys();
+      await Promise.all(
+        cacheNames
+          .filter((name) => name.startsWith(CACHE_PREFIX) && name !== CACHE_NAME)
+          .map((name) => caches.delete(name)),
       );
-    }),
+      await self.clients.claim();
+    })(),
   );
 });
 
-// Fetch event - serve from cache, fallback to network
+// Network first: latest page, data or asset version; when offline or the
+// network is too slow, the cached copy (ignoring the version query, e.g.
+// main.css?t=1793258390)
+const networkFirst = async (event) => {
+  const { request } = event;
+  const network = fetch(request).then(async (response) => {
+    if (response.ok) {
+      const cache = await caches.open(CACHE_NAME);
+      await cache.put(request, response.clone());
+    }
+    return response;
+  });
+  event.waitUntil(network.catch(() => {}));
+
+  const timeout = new Promise((resolve) => setTimeout(resolve, NETWORK_TIMEOUT_MS));
+  try {
+    const response = await Promise.race([network, timeout]);
+    if (response) {
+      return response;
+    }
+  } catch {
+    // Offline: answer from the cache below
+  }
+
+  const cached = await caches.match(request, { ignoreSearch: true });
+  return cached || network;
+};
+
+// Cache first: versioned assets do not change once cached
+const cacheFirst = async (event) => (await caches.match(event.request)) || networkFirst(event);
+
+// Fetch event - only handle same-origin GET requests within the site,
+// except the service worker itself and documents (e.g. slides, not offline)
 self.addEventListener("fetch", (event) => {
-  // Skip caching the service worker itself
-  if (event.request.url.includes("/sw.js")) {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  if (request.method !== "GET" || url.origin !== self.location.origin || !url.pathname.startsWith(`${BASE_URL}/`)) {
+    return;
+  }
+  if (url.pathname === `${BASE_URL}/sw.js` || url.pathname.startsWith(`${BASE_URL}/documents/`)) {
     return;
   }
 
-  event.respondWith(
-    caches.match(event.request).then((response) => {
-      // Return cached version or fetch from network
-      return response || fetch(event.request);
-    }),
-  );
+  // Example: /program/ (navigation) and /assets/js/data.json change during the conference
+  if (request.mode === "navigate" || url.pathname.endsWith(".json")) {
+    event.respondWith(networkFirst(event));
+    return;
+  }
+
+  event.respondWith(cacheFirst(event));
 });

data/_layouts/talk-overview.html

@@ -12,11 +12,11 @@
 
 {% if site.conference.talks.tracks %}
   {% for track_prop in site.conference.talks.tracks %}
-    <h3 class="mt-4 mb-3">
+    <h2 class="h3 mt-4 mb-3">
       <span class="badge rounded-0 bg-{{ track_prop.color | default: 'light' }}-subtle text-{{ track_prop.color | default: 'light' }}-emphasis border-4 border-start border-{{ track_prop.color | default: 'light' }}-subtle d-block d-sm-inline text-wrap">
-        {{ track_prop.name }}
+        {{ track_prop.name | escape }}
       </span>
-    </h3>
+    </h2>
     <ul class="list-unstyled">
       {% for talk in site.talks -%}
         {% if talk.track == track_prop.name %}

data/_layouts/talk.html

@@ -9,7 +9,7 @@
         <div class="h6 mt-2 mb-0 me-1 pe-1 pb-1">
           {% include get_track_properties.html %}
           <span class="d-block d-sm-inline p-1 px-2 bg-{{ track_color }}-subtle text-{{ track_color }}-emphasis border-start border-4 border-{{ track_color }}-subtle fw-normal">
-            {{ talk.track }}
+            {{ talk.track | escape }}
           </span>
         </div>
       {% endif %}
@@ -25,7 +25,7 @@
     </div>
   {% endif %}
 
-  <h1 class="fw-light text-break">{{ talk.name }}</h1>
+  <h1 {% if talk.lang %}lang="{{ talk.lang | escape }}" {% endif %}class="fw-light text-break">{{ talk.name | escape }}</h1>
 
   <p class="mb-3 fw-light">
     {% include list_speakers.html %}
@@ -44,14 +44,18 @@
     {% endfor %}
   </div>
 
-  {{ content }}
+  {% if talk.lang %}
+    <div lang="{{ talk.lang | escape }}">{{ content }}</div>
+  {% else %}
+    {{ content }}
+  {% endif %}
 
-  {% include get_link_types.html %}
+  {% include get_link_types.html context="talk" %}
 
   {% if has_icon_links > 0 %}
     <ul class="list-unstyled">
       {% for link in talk.links %}
-        {% include get_link.html type="icon" color=track_color %}
+        {% include get_link.html type="icon" color=track_color context="talk" %}
         {% if link_valid %}
           {{ link_list_item }}
         {% endif %}
@@ -60,11 +64,11 @@
   {% endif %}
 
   {% if has_regular_links > 0 %}
-    <h5 class="mt-4 mb-1">{{ site.data.lang[site.conference.lang].more_information | default: "More information" }}:</h5>
+    <h2 class="h5 mt-4 mb-1">{{ site.data.lang[site.conference.lang].more_information | default: "More information" }}:</h2>
 
     <ul class="list-unstyled">
       {% for link in talk.links %}
-        {% include get_link.html color=track_color %}
+        {% include get_link.html color=track_color context="talk" %}
         {% if link_valid %}
           {{ link_list_item }}
         {% endif %}
@@ -74,14 +78,16 @@
 
   <p class="d-print-none d-pwa-none mt-5">
     <a href="{{ page.collection | prepend: '/' | prepend: site.baseurl }}" class="btn btn-outline-secondary me-2">
-      <i class="bi bi-megaphone" aria-hidden="true"></i>&nbsp;{{ site.data.lang[site.conference.lang].overview | default: "Overview" }}
+      {% include icon.html name="megaphone" %}&nbsp;{{ site.data.lang[site.conference.lang].overview | default: "Overview" }}
     </a>
 
     {%- include get_program_config.html -%}
     <a href="{{ program_url | prepend: site.baseurl }}" class="btn btn-outline-secondary">
-      <i class="bi bi-calendar4-week" aria-hidden="true"></i>&nbsp;{{ site.data.lang[site.conference.lang].program.title | default: "Program" }}
+      {% include icon.html name="calendar4-week" %}&nbsp;{{ site.data.lang[site.conference.lang].program.title | default: "Program" }}
     </a>
   </p>
 
   {%- include footer.html -%}
+{%- else -%}
+  {%- include hidden_page.html -%}
 {%- endunless -%}

data/_sass/bootstrap-icons/font/bootstrap-icons.css

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/)
+ * Bootstrap Icons v1.13.2 (https://icons.getbootstrap.com/)
  * Copyright 2019-2024 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)
  */