jekyll-theme-conference 3.2.0 → 3.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4f5a6058ed0096854e4b7d4714298ea9bc253a394b8170d3ae2d280bec3913e
-  data.tar.gz: 5ed07180716fc59636f3b5a9634fd7d430166796285566751a927ce9f15be913
+  metadata.gz: b3463207643540289c9e9bc5f6c7bf57a63d0b1f48f3dc72e4a0dac3f98d2034
+  data.tar.gz: 1c475f305b05cea1a9866f025e2d215320b1b20a7c8ce8a79769d3e310732d3e
 SHA512:
-  metadata.gz: '08f8a0a6c90e0c23ee563b18200cbbd902385d388373c5b77ad05c6fda440914825b685771907947f7f2165378e2edd13ef7421d75133bf3e6d38f3ea6c75d8b'
-  data.tar.gz: 7095bab0d1cd826c3f1921d203ff67ae51f69c0d218196a0e45530cc227d2c3bab3e3b10529ffa27e840980fef9f9e6ed7cc5c6c3aa111a43ba2d7363bd54ddc
+  metadata.gz: a250438190ceec15cfc5bebf1d73dffa1a07c0f3c5056b39ff180273abdd37dc16c0b8e2a69e16f7493730ac4cb017b86a08c6890933f714fc91010742a15e12
+  data.tar.gz: d1fec1808da818d9d241ecd3dede1253f60f4e4d2fde4b260433b32d57b8e0bc4714c1afa00a0746e7317fadb0de61f323f48ca7443b9d80610d5781bfd635d3

data/README.md

@@ -32,24 +32,27 @@ The theme was originally created for the yearly Winterkongress conference of the
   * [Collection URLs](#collection-urls)
   * [Language](#language)
   * [Navigation Bar](#navigation-bar)
+  * [Open Graph Link Preview](#open-graph-link-preview)
   * [Main Landing Page](#main-landing-page)
   * [Information Boxes](#information-boxes)
-  * [Live Indications & Streaming](#live-indications---streaming)
+  * [Live Indications & Streaming](#live-indications--streaming)
+  * [Map](#map)
   * [Talk Settings](#talk-settings)
   * [Speaker Settings](#speaker-settings)
   * [Location Settings](#location-settings)
   * [Program Settings](#program-settings)
 - [Content](#content)
-  * [Schedule / Program](#schedule---program)
+  * [Schedule / Program](#schedule--program)
   * [Talks](#talks)
   * [Speakers](#speakers)
   * [Rooms](#rooms)
   * [Links](#links)
 - [Overview Pages](#overview-pages)
-  * [Location / Room Overview](#location---room-overview)
+  * [Location / Room Overview](#location--room-overview)
   * [Live Stream Overview](#live-stream-overview)
   * [Additional Pages](#additional-pages)
 - [Design](#design)
+- [Development](#development)
 - [License](#license)
 
 
@@ -137,9 +140,9 @@ In order to be up and running simply use the default content of this repository
 
 ### Automatic Import
 
-There exists a Python file in this repository, `_tools/create_entries.py`, which can be used to import content from a [frab](https://github.com/frab/frab/wiki/Manual#introduction) compatible JSON file (e.g. from [pretalx.com](https://pretalx.com/p/about/)) or a CSV table and generate the different talk, speakers and room files automatically. It has as only dependency [PyYAML](https://pypi.org/project/PyYAML/):
+There exists a Python file in this repository, `_tools/create_entries.py`, which can be used to import content from a [frab](https://github.com/frab/frab/wiki/Manual#introduction) compatible JSON file (e.g. from [pretalx.com](https://pretalx.com/p/about/)) or a CSV table and generate the different talk, speakers and room files automatically.
 
-1. Copy the file `_tools/create_entries.py` from this repository
+1. Copy the files `_tools/create_entries.py` and `_tools/requirements.txt` from this repository
 
 2. Create a virtual environment and activate it
 
@@ -148,10 +151,10 @@ There exists a Python file in this repository, `_tools/create_entries.py`, which
    source venv/bin/activate
    ```
 
-3. Install PyYAML
+3. Install the requirements
 
    ```bash
-   pip install pyyaml
+   pip install -r _tools/requirements.txt
    ```
 
 4. Execute the script, e.g. to show the help type
@@ -167,7 +170,7 @@ In case you do not want to install the entire Ruby/Jekyll toolchain on your mach
 
 - `build.yml`: automatically builds and minimizes the website upon adding a new tag starting with a `v` (e.g. `v2020.01.01`). It then attaches the generated website as an archive to a release for easy downloading. Requires `purgecss.config.js` to be copied to the project's root too.
 - `test.yml`: automatically tries to build the website upon a new pull request. It can thus be used as status check before merging.
-- `schedule.yml`: automatically generates the schedule and content files when a new pull request contains a `schedule.json` file (see the _Automatic Import_subsection above). Thus, it allows quick updates of the site's content from [pretalx.com](https://pretalx.com/p/about/) exports.
+- `schedule.yml`: automatically generates the schedule and content files when a new pull request contains a `schedule.json` file (see the _Automatic Import_ subsection above). Thus, it allows quick updates of the site's content from [pretalx.com](https://pretalx.com/p/about/) exports.
 
 To get started, simply copy the desired workflow file to your repository and adapt it to your needs:
 
@@ -281,9 +284,32 @@ conference:
     ...
     logo:
       name: Magic Organisation
+      img: 'logo.svg'  # inside /assets/images/
       url: 'https://github.com'
 ```
 
+### Open Graph Link Preview
+
+The theme automatically includes the necessary `<meta>` tags to ease link previewing when sharing links based on the [Open Graph protocol](https://ogp.me/) and [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards). These tags control how a link is presented when shared via different platform and apps. In order to disable these `<meta>` tags add the `disable: true` setting (default: `false`) to the `link_preview` property.
+
+In order to generate a meaningful description for each of the links, the preposition for the conference title as given under the `title` property can be defined by using the `preposition` property. For example, if `title` is set to "Conference 2020" the corresponding `preposition` would be "at". The template can then use it to generate descriptions such as "Talk *at* Conference 2020".
+
+Optionally, an image which is shown as preview for all links can be specified. For sharing via Open Graph an image ratio of 1.91:1 and an ideal size of 1200x630 pixel is recommended. For sharing via Twitter an image ratio of 1:1 and a minimal size of 600x600 pixel (better 1200x1200 pixel) is recommended. SVG image files are not supported. It is activate through the `img` property under the `link_preview` property containing an image file shown for Open Graph (`open_graph`) and on the Twitter Cards (`twitter`), whereby the path to the image file relative to the `/assets/images/` folder has to be specified.
+
+```yaml
+title: Conference 2020
+preposition: 'at'
+
+...
+
+conference:
+  link_preview:
+    disable: false
+    img:
+      twitter: 'twitter_preview.png'      # inside /assets/images/
+      open_graph: 'facebook_preview.png'  # inside /assets/images/
+```
+
 ### Main Landing Page
 
 The main landing page is shown at the root of the website to greet new visitors. In order to show it you need to create a `index.md` file in the root of your website's folder and specify its layout as `layout: main`. The remaining customizations are specified in the `_config.yml` file.
@@ -354,27 +380,50 @@ conference:
 
 In order to help users navigating the program during the congress, a _Live_ indication can be shown next to talks which are currently taking place. A small JavaScript functions keeps the site automatically up-to-date (without the need to refresh) showing the indication as soon as the talk has started and hiding it once it is over (according to the timetable indicated in the `_data/program.yml` file).
 
-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). Instead of opening the modal an external link can also be used.
+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 embedded live stream. The URL to the live stream has to be set via `live` property in each room (see the _Content_ > _Room_ section below). Instead of opening the modal an external link can also be used.
 
-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
+In order to activate these functionalities, 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
 
 - 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
+- optionally under the `streaming` property:
+  + if streaming should be enabled (`enable`), and if enabled
   + how many minutes the stream goes active before a talk (`time_prepend`),
   + how many minutes the stream stays active after a talk (`time_extend`),
   + how long a pause between two consecutive talks has to be for the stream to pause (`time_pause`), and
   + optionally an external (absolute) link to which the user will be redirected instead of opening the modal (`external`),
-- optionally a demo mode setting, whereby the JavaScript function cycles through the entire program in five minutes for demonstration purposes (`demo: true`, default: `false`).
+- optionally under the `demo` property:
+  + if a demonstration mode should be enabled (`enable`), whereby the JavaScript function cycles continuously through the entire program in a few minutes, and if enabled
+  + how long the demonstration should take (`duration`), and
+  + how long the pause between two demonstration cycle should be (`pause`).
 
 ```yaml
 conference:
   live:
     time_stop: 240      # in minutes
     streaming:
+      enable: true
       time_pause:   60  # in minutes
       time_prepend:  5  # in minutes
       time_extend:   5  # in minutes
-    demo: false
+    demo:
+      enable: false
+      duration: 300  # in seconds
+      pause:     10  # in seconds
+```
+
+### Map
+
+In order to help users finding your venue, an [OpenStreetMap](https://www.openstreetmap.org/) container displaying a map can be shown on any page. The map's initial position is globally defined and thus the same for all map containers. You can define the initial position of the map by setting the default zoom level `default_zoom`, the center coordinates `home_coord`, and the map provider for the tiles `map_provider`. Alternative map providers can be found [here](https://leaflet-extras.github.io/leaflet-providers/preview/).
+The map contains small control buttons to zoom in and out, center the map back to the initial position, and show the visitors current location (has to be manually activated and granted by the visitor).
+
+The map can be added to any page by setting `map: true` in its Front Matter or on the location main page by setting `conference.location.map: true` (see _Location Settings_ section below).
+
+```yaml
+conference:
+  map:
+    default_zoom: 17
+    home_coord: 47.37808, 8.53935
+    map_provider: "OpenStreetMap.Mapnik"
 ```
 
 ### Talk Settings
@@ -429,8 +478,9 @@ In order to hide all rooms add the `hide: true` setting (default: `false`) to th
 
 If your `location` overview file is not located under `/location` you can indicate an alternative path by setting the `url` property (default: `/location`) under the `location` property.
 
-The `location` layout automatically includes an [OpenStreetMap](https://www.openstreetmap.org/) container to point to your venue. If you want to hide it add the `enable: false` setting (default: `true`) to the `map` property under the `location` property. Otherwise, you can define the initial position of the map by setting the default zoom level `default_zoom`, the center coordinates `home_coord`, and the map provider for the tiles `map_provider`. Alternative map providers can be found [here](https://leaflet-extras.github.io/leaflet-providers/preview/).
-The map contains small control buttons to zoom in and out, center the map back to the initial position, and show the visitors current location (has to be manually activated and granted by the visitor).
+The location main page shows a navigation bar listing all the different rooms by name. Due to the quirks of Jekyll, the main page itself cannot be listed by title as defined in its Front Matter. Instead the title of the main landing page for the navigation bar is taken from the language files and defaults to "Directions". In order to change this, you can either change the language files directly (see the _Language_ section above), or you provide an alternative title by setting the `navbar_title` to the desired title under the `location` property.
+
+The `location` layout can include a map to point to your venue by adding the `map: true` setting (default: `true`) to the `location` property. See the _Map_ section above for more information.
 
 Example:
 
@@ -438,11 +488,9 @@ Example:
 conference:
   location:
     hide: false
-    map:
-      enable: true
-      default_zoom: 17
-      home_coord: 47.37808, 8.53935
-      map_provider: "OpenStreetMap.Mapnik"
+    url: '/location'
+    navbar_title: 'Location'
+    map: true
 ```
 
 The map is based on the JavaScript Library [Leaflet](https://leafletjs.com/) and can be customized by editing the `assets/js/main.js` file, e.g. adding additional layers with markers, text, or shapes to the map. To start, copy simply the file from this repository and make use of the initialized global variable `window.conference.map` pointing to the Leaflet container.
@@ -455,11 +503,11 @@ Example:
 
 {% include js/conference.js %}
 
-(function() {
-    let map = window.conference.map;
+(() => {
+    const map = window.conference.map;
 
     if (typeof map !== 'undefined') {
-        var main_station = L.marker([47.37785, 8.54035], {
+        let main_station = L.marker([47.37785, 8.54035], {
             icon: L.divIcon({
                 className: '',
                 html: '<span class="fas fa-train"></span> Main Station',
@@ -550,7 +598,8 @@ Each talk is represented by a file in the `_talks/` directory. It must begin wit
 - the talk's `name` (used as identifier),
 - one or more existing `speakers` name(s),
 - optionally one or more `categories` of which one should be a main category as defined in the site's configuration,
-- optionally a list of `links` (see the _Links_ subsection below for the available properties per link; links with icons are treated separately and are also included on the talk overview page), and
+- optionally a list of `links` (see the _Links_ subsection below for the available properties per link; links with icons are treated separately and are also included on the talk overview page),
+- optionally a list of `live: links` (see the _Links_ subsection below for the available properties per link) which are shown below the live stream for the given talk in form of buttons, and
 - optionally `hide: true` if the talk's page should not be linked to.
 
 ### Speakers
@@ -604,6 +653,29 @@ Example:
       video: https://media.ccc.de/
 ```
 
+There exists a Python file in this repository, `_tools/import_resources.py`, which can be used to import resources such as slides and other documents from [pretalx.com](https://pretalx.com/p/about/)) via its API. It automatically downloads all files, stores them and updates the links of the talks concerned.
+
+1. Copy the files `_tools/import_resources.py` and `_tools/requirements.txt` from this repository
+
+2. Create a virtual environment and activate it
+
+   ```bash
+   python -m venv venv
+   source venv/bin/activate
+   ```
+
+3. Install the requirements
+
+   ```bash
+   pip install -r _tools/requirements.txt
+   ```
+
+4. Execute the script, e.g. to show the help type
+
+   ```bash
+   python _tools/import_resources.py --help
+   ```
+
 
 ## Overview Pages
 
@@ -623,7 +695,7 @@ If you choose a different location for the overview pages you must:
 
 ### Location / Room Overview
 
-The `location` layout contains a map container (if not disabled, see section _Location Settings_ above) which can be customized. See the section above for further details.
+The `location` layout can include a map container (if not disabled, see the _Location Settings_ section above) which can be customized (see the _Map_ section above).
 
 ### Live Stream Overview
 
@@ -633,6 +705,7 @@ The `stream-overview` layout contains all active streams on a single page (see t
 
 Additional static pages can easily be added as files and linked to via navigation bar or main landing page (see above on how to).
 
+Each of these pages can include a map at its end (e.g. to point to your venue) by adding the `map: true` setting to its Front Matter. See the _Map_ section above for more information.
 
 ## Design
 
@@ -655,6 +728,15 @@ Custom Bootstrap themes or simple color schemes such as designed with [Bootstrap
 2. Add your Bootstrap variables in front of the `@import 'conference'` line, e.g. currently the primary color is set internally to green (instead of Bootstrap's default blue): `$primary: #074 !default;`
 3. Add any additional CSS styles after it.
 
+## Development
+
+If you want to modify this theme and see its changes on an existing project, simply indicate in your `Gemfile` that you want to use the local copy of the theme by adding a `path` indication after the gem instantiation:
+
+```ruby
+group :jekyll_plugins do
+  gem "jekyll-theme-conference", path: "../[path to your local theme]"
+end
+```
 
 ## License
 

data/_includes/js/conference.js

@@ -1,31 +1,42 @@
-// Global app variable
-window.conference = {};
+// Libraries
+//   Bootstrap (Style Framework)
+{% include js/lib/jquery-3.5.1.min.js %}
+{% include js/lib/popper.min.js %}
+{% include js/lib/bootstrap.js %}
 
-// Bootstrap (Style Framework)
-{% include js/jquery-3.5.1.min.js %}
-{% include js/popper.min.js %}
-{% include js/bootstrap.js %}
+//   FontAwesome (Icons)
+//     Imported via CSS and webfonts
+
+// Conference
+window.conference = {
+    config: {
+        baseurl: '{{ site.baseurl }}'
+    }
+};
 
-// FontAwesome (Icons)
-//   Imported via CSS and webfonts
 
 // Program
-{% include js/conference-program.js %}
+{% include js/lib/syncscroll.js %}
+{% include js/program.js %}
 
 // Leaflet (Map Display)
-{% if site.conference.location.hide != true and site.conference.location.map.enable %}
-    {% include js/leaflet.js %}
-    {% include js/leaflet-easybutton.js %}
-    {% include js/leaflet-locatecontrol.js %}
-    {% include js/leaflet-providers.js %}
+{% include partials/get_enable_map.html %}
+{% if enable_map %}
+    {% include js/lib/leaflet.js %}
+    {% include js/lib/leaflet-easybutton.js %}
+    {% include js/lib/leaflet-locatecontrol.js %}
+    {% include js/lib/leaflet-providers.js %}
 
-    {% include js/conference-map.js %}
+    {% include js/map.js %}
 {% endif %}
 
 // Modals ("Popups")
-{% include js/conference-modal.js %}
+{% include js/modal.js %}
 
 // Live and Streaming
 {% if site.conference.live %}
-    {% include js/conference-live.js %}
+    {% include js/live.js %}
 {% endif %}
+
+// Load configuration and start initialization
+{% include js/init.js %}

data/_includes/js/init.js

@@ -0,0 +1,37 @@
+const init = () => {
+    // Load configuration
+    const request = new Request(window.conference.config.baseurl + '/assets/js/config.json');
+
+    fetch(request)
+    .then(response =>
+        response.json()
+    )
+    .then(config => {
+        // Add configuration to global scope
+        window.conference.config = Object.assign(window.conference.config, config);
+
+        // Execute initialization functions
+        for (const [name, module] of Object.entries(window.conference)) {
+            if (name == 'config') {
+                continue;
+            }
+
+            let c;
+            if (name in config) {
+                c = config[name];
+            }
+            let l;
+            if (name in config.lang) {
+                l = config.lang[name];
+            }
+
+            module.init(c, l)
+        }
+
+    })
+    .catch((error) => {
+        console.log(error);
+    });
+};
+
+init();