Skip to content

Commit

Permalink
Extend framework to support multiday conferences
Browse files Browse the repository at this point in the history
- Improve webfont preloading
- Design improvements in most layouts
- Live indication fixes in talk overview layout
- Reduce whitespace generation
- Rename live button and modal include
  • Loading branch information
lorenzschmid committed Nov 28, 2020
1 parent d06fa9c commit edd7656
Show file tree
Hide file tree
Showing 32 changed files with 866 additions and 633 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
jekyll-theme-conference (2.5.4)
jekyll-theme-conference (3.0.0)
jekyll (~> 4.0)

GEM
Expand Down
72 changes: 43 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@

![Screenshot](screenshot.png)

This is a [Jekyll](http://jekyllrb.com) theme based on [Bootstrap 4](http://getbootstrap.com) which can be used to make a simple, responsive website for a one-day conference or workshop with parallel tracks containing:
This is a responsive [Jekyll](http://jekyllrb.com) theme based on [Bootstrap 4](http://getbootstrap.com) for conferences. It contains

- program / schedule,
- talk and speaker descriptions with
+ links to slides, and
+ embedded recordings,
- multiday program / schedule,
- talk and speaker descriptions,
- map for directions,
- live indication and embedded video streaming.
- realtime live indications during the conference, and
- supports embedded video streaming or recordings.

All components such as talks, speakers or rooms are represented as collection of files. The schedule is given is defined via a simple structure stored in a [YAML](https://en.wikipedia.org/wiki/YAML) file. There is no need for databases and once generated the website consists only of static files. A script and workflows are available for easy import, e.g. [frab](https://github.com/frab/frab/wiki/Manual#introduction) compatible schedules.
The design is easily modifiable and is adapted for mobile uses and printing.
All components such as talks, speakers or rooms are represented as collection of files. The schedule is given is defined via a simple structure stored in a [YAML](https://en.wikipedia.org/wiki/YAML) file. There is no need for databases and once generated the website consists only of static files. A script and workflows are available for easy import, e.g. of [frab](https://github.com/frab/frab/wiki/Manual#introduction) compatible schedules.
The design is easily customizable and is adapted for mobile uses and printing.

The theme was originally created for the yearly Winterkongress conference of the [Digital Society Switzerland](https://digitale-gesellschaft.ch/). You can see this theme in action here:

Expand Down Expand Up @@ -322,10 +321,8 @@ In order to help users navigating the program during the congress, a _Live_ indi

This can be further extended if some of the talks have an associated live stream: Upon clicking one of the live indications a modal will open containing the corresponding live stream embedded. The URL to the live stream has to be set via `live` property in each room (see the _Content_ > _Room_ section below).

In order to activate the functionality the `live` property has to be set containing
In order to activate the functionality, each day in the `program.yml` file must contain a `date` property (see section _Content_ > _Schedule / Program_ below) and the `live` property has to be set in the configuration file containing

- the date of the day at which the conference takes place (`date`),
- the timezone in which the conference takes place (`timezone`),
- how long a pause between two consecutive talks has to be for the live indication to pause (`time_stop`),
- optionally if streaming is enabled (`streaming`) with indications
+ how many minutes the stream goes active before a talk (`time_prepend`),
Expand All @@ -336,8 +333,6 @@ In order to activate the functionality the `live` property has to be set contain
```yaml
conference:
live:
date: 01.01.2020
timezone: GMT+1
time_stop: 240 # in minutes
streaming:
time_pause: 60 # in minutes
Expand Down Expand Up @@ -464,33 +459,52 @@ The actual schedule defining when and in which room a talk takes place is stored

### Schedule / Program

The schedule of the conference linking the talks with the rooms and indicating when each talk talks place and how long it goes is set in the `_data/program.yml` file. It consists of an array of rooms each consisting of a
The schedule of the conference linking the talks with the rooms and indicating when each talk talks place and how long it goes is set in the `_data/program.yml` file. It contains a list of days, whereby each day contains a list of rooms, whereby each room contains a list of talks.

- `room` name (must correspond to one of the room identifier), and
- an array of `talks` which also can be empty `[]`.
Each day consists of

The order of the room in the file defines the order of the rooms on the website (program and room listings). Each talk in the array consists of
- a list of rooms (`rooms`) in which talks are taking place on that day
- optionally, the day's `name`, e.g. the weekday
- optionally, the short form of the day's name (`abbr`), and
- optionally only if no live indications are active, a `date` in the format `YYYY-MM-DD`.

Each room consists of

- the room's `name` (must correspond to one of the room identifier), and
- a list of talks (`talks`) which also can be empty `[]`.

The order of the rooms in the list defines the order of the rooms as shown in the schedule on the program page. For the live streaming or the room overview the order of the rooms is alphabetical but can be adapted via the [main configuration file](https://jekyllrb.com/docs/collections/#sort-by-front-matter-key).

Each talk consists of

- a `name` (must correspond to one of the talk identifier),
- a starting time `time_start` given as `H:M` ([`strftime`](http://www.strfti.me) formated), and
- an end time `time_end`.

The array should (manually) be ordered by time. Currently talks can only take place on the same day and multi-day conferences are not supported.
The list of talks should (manually) be ordered by time, i.e. the first occurring talk should be listed first.

Example:

```yaml
- room: Room A
talks:
- name: Vim Impetus Placerat Cotidieque Ad
time_start: '12:00'
time_end: '12:45'
- name: Condimentum Vitae Sapien Pellentesque
time_start: '12:45'
time_end: '13:30'
- room: Room B
talks:
...
days:
- name: Monday
abbr: Mo
date: 2020-01-31
rooms:
- name: Room A
talks:
- name: Vim Impetus Placerat Cotidieque Ad
time_start: '12:00'
time_end: '12:45'
- name: Condimentum Vitae Sapien Pellentesque
time_start: '12:45'
time_end: '13:30'
- name: Room B
talks:
- name: Arcu Non Odio
time_start: '12:00'
time_end: '13:00'
```

### Talks
Expand Down
8 changes: 4 additions & 4 deletions _data/lang.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ version: 5

en:
pronoun:
on_: on
at: at
in: in
for: for
Expand Down Expand Up @@ -30,7 +31,6 @@ en:
title: Location
directions: Directions
talks: Talks in this room
no_talks: no talks planned
focus_conf: Center map on conference location
focus_me: Show my current location
program:
Expand All @@ -45,6 +45,7 @@ en:

de:
pronoun:
on_: am
at: um
in: im Raum
for: für
Expand Down Expand Up @@ -73,7 +74,6 @@ de:
title: Örtlichkeit
directions: Anreise
talks: Vorträge in diesem Raum
no_talks: keine Vorträge geplant
focus_conf: Karte auf den Konferenz-Ort zentrieren
focus_me: Meinen aktuellen Standort anzeigen
program:
Expand All @@ -88,6 +88,7 @@ de:

fr:
pronoun:
on_: le
at: à
in: dans
for: pour
Expand Down Expand Up @@ -116,7 +117,6 @@ fr:
title: Lieu
directions: Indications
talks: Présentations dans cette salle
no_talks: pas des présentations prévues
focus_conf: Centrer la carte sur le lieu de la conférence
focus_me: Afficher ma localisation actuelle
program:
Expand All @@ -131,6 +131,7 @@ fr:

pt:
pronoun:
on_: no
at: às
in: em
for: por
Expand Down Expand Up @@ -159,7 +160,6 @@ pt:
title: Localização
directions: Indicações
talks: Apresentações nesta sala
no_talks: não estão previstas apresentações
focus_conf: Centralizar o mapa para o local da conferência
focus_me: Mostrar minha localização atual
program:
Expand Down
41 changes: 23 additions & 18 deletions _data/program.yml
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
- room: Room A
talks:
- name: Vim Impetus Placerat Cotidieque Ad
time_start: '12:00'
time_end: '12:45'
- name: Condimentum Vitae Sapien Pellentesque
time_start: '12:45'
time_end: '13:30'
days:
- name: Monday
abbr: Mo
date: 2020-01-31
rooms:
- name: Room A
talks:
- name: Vim Impetus Placerat Cotidieque Ad
time_start: '12:00'
time_end: '12:45'
- name: Condimentum Vitae Sapien Pellentesque
time_start: '12:45'
time_end: '13:30'

- room: Room B
talks:
- name: Arcu Non Odio
time_start: '12:00'
time_end: '13:00'
- name: Room B
talks:
- name: Arcu Non Odio
time_start: '12:00'
time_end: '13:00'

- room: Room C
talks:
- name: Eu Nisl Nunc Mi Ipsum Faucibus
time_start: '13:30'
time_end: '14:30'
- name: Room C
talks:
- name: Eu Nisl Nunc Mi Ipsum Faucibus
time_start: '13:30'
time_end: '14:30'
48 changes: 35 additions & 13 deletions _includes/js/conference-live.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
window.conference.live = (function() {
{%- include partials/get_conf_time.html -%}
{%- assign time_start = conf_start -%}
{%- assign time_end = conf_end -%}
{%- include partials/get_timestamp.html -%}

let confStart = {{ timestamp_start }};
let confEnd = {{ timestamp_end }};
window.conference.live = (function() {
{% assign d = site.data.program.days | first -%}
{%- include partials/get_day_time.html -%}
{%- assign t = day_start_talk -%}

{%- include partials/get_talk_timestamp.html -%}
{%- assign conf_start = timestamp_start -%}

{%- assign d = site.data.program.days | last -%}
{%- include partials/get_day_time.html -%}
{%- assign t = day_end_talk -%}

{%- include partials/get_talk_timestamp.html -%}
{%- assign conf_end = timestamp_end -%}

let confStart = {{ conf_start }};
let confEnd = {{ conf_end }};
let confDur = confEnd - confStart;

let freezeTime = false;
Expand Down Expand Up @@ -78,10 +87,22 @@
startUpdate();
};

let setTime = function (newTime) {
let setTime = function (newTime, newDay=1) {
pauseTime();

let d = new Date(confStart * 1000);
let dayIdx;
if (Number.isInteger(newDay)) {
dayIdx = newDay-1;
}
else if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(newDay)) {
dayIdx = data.days.find(o => o.name === newDay);
}
else {
dayIdx = data.days.find(o => o.name === newDay);
}
newDate = data.days[dayIdx].date;

let d = new Date(newDate);
newTime = newTime.split(':');
d.setHours(newTime[0], newTime[1]);

Expand All @@ -90,12 +111,13 @@
update();
};

let getTime = function (tConvert = time()) {
let getTime = function (tConvert=time()) {
let d = new Date(tConvert * 1000);
let dStr = d.toISOString().slice(0,10);
let h = d.getHours();
let m = d.getMinutes();

return h + ":" + (m < 10 ? "0" : "") + m;
return dStr +" "+ h +":"+ (m < 10 ? "0" : "") + m;
};

let timeUnit = function () {
Expand Down Expand Up @@ -168,7 +190,7 @@
// Hide when active
if (!liveHide[i].classList.contains('d-none')) {
liveHide[i].classList.add('d-none');
breal;
break;
}
}
else {
Expand Down
48 changes: 48 additions & 0 deletions _includes/js/conference-program.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
// Vertical Scroll Sync
{% include js/syncscroll.js %}

window.conference.program = (function() {
let updateHash = function (hash) {
let scrollPosition = $('body').scrollTop() || $('html').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollPosition);
};

let init = function () {
if ($('#day-list')) {
// Switch to day if page load with hash
var hash = window.location.hash;
if (hash) {
$('#day-list a[href="' + hash + '"]').tab('show');
}
// Switch to day if today
else {
let d = new Date();
let dStr = d.getFullYear() +"-"+ (d.getMonth()+1) +"-"+ d.getDate()
// since a timezone compensation is added when passed as string, today's date has also
// to be passed as string (as it is done below)
let today = new Date(dStr);

$('a[data-toggle="tab"]').each(function () {
let d = new Date($(this).data('date'));

if (today.getTime() === d.getTime()) {
$(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 (e) {
updateHash(this.hash);
});
}
};

return {
init: init
};
})();

window.conference.program.init();
20 changes: 10 additions & 10 deletions _includes/js/conference.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// Style Framework: Bootstrap
// Global app variable
window.conference = {};

// Bootstrap (Style Framework)
{% include js/jquery-3.5.1.min.js %}
{% include js/popper.min.js %}
{% include js/bootstrap.js %}

// Icons: FontAwesome
// FontAwesome (Icons)
// Imported via CSS and webfonts

// Vertical Scroll Sync: Syncscroll
{% include js/syncscroll.js %}

// Global app variable
window.conference = {};
// Program
{% include js/conference-program.js %}

// Map Display Framework: Leaflet
// Leaflet (Map Display)
{% if site.conference.location.hide != true and site.conference.location.map.enable %}
{% include js/leaflet.js %}
{% include js/leaflet-easybutton.js %}
Expand All @@ -22,10 +22,10 @@ window.conference = {};
{% include js/conference-map.js %}
{% endif %}

// Bootstrap Extension: Modals
// Modals ("Popups")
{% include js/conference-modal.js %}

// Live
// Live and Streaming
{% if site.conference.live %}
{% include js/conference-live.js %}
{% endif %}
Loading

0 comments on commit edd7656

Please sign in to comment.