jekyll-theme-conference 2.1.1 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c643a0e8bd01e58afe44d26b8ef92322de94b904963a0d77c375a173bdcee41
-  data.tar.gz: 805184fecbf95cb9acf1eea02b5065d5bfc5043c961b05813133ebd82aa22bde
+  metadata.gz: 3a820e9261baf5ca2c75c14099c2719e2e42b88c3a7f2feebd2e037f31a55690
+  data.tar.gz: c85ac7f1cd763f6735a5b7661b6717d83e40d716f32c76e8b3a4943ea706d25e
 SHA512:
-  metadata.gz: c4847d23b59679008f7b67db989e32f3e932714f21e7cf0ce9e939ef7444a4de84221c0e42696989e9550019b396d8e84e76ff948def06ba1ee81c2948ddf892
-  data.tar.gz: 75e4e1ecdb73138ceb6f23782a7547d0d19f85ecd936a785c2d979cf3cb28b45c1272c3f6754c948cb90f82fffb11078811eadf32ebf29af08f964916a4afaf7
+  metadata.gz: cfd4cf001957a9a73a5f570df19c6e8c258113b30790480fb73e7d15dbc8c9e72348337e7af473b7314a019d82b48d94b90d2b78570aef317276db122f1d16be
+  data.tar.gz: 2632e796cdfa81dbec9b2488510d281931ccfe1f9b928fd940dd3a5263abf74fd019a4a0dd3a424eadc20e008d6d5076d62037e35ea91a35d9f147de2e649f23

data/README.md

@@ -113,7 +113,7 @@ In case you do not want to install the entire Ruby/Jekyll toolchain on your mach
 
 All configurations and customization for this theme are stored under the `conference` property in the `_config.yml` file. You can find an example configuration containing most of the here discussed parameters under `_config.example.yml` in this repository.
 
-### Theme Verifications
+### Theme Verification
 
 Upon building the theme runs some basic verification to check if all necessary files and configurations are in place. If it encounters an error it shows so in adding an information bar on all your sites. You can disable this, e.g. in a production environment, by setting `show_errors` to `false` (default: `true`).
 
@@ -181,11 +181,11 @@ conference:
 
 ### 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.  Each link consists of
+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.
 
-- the text to show (`name`),
-- a relative (`relative_url`) or absolute link address (`absolute_url`) or a collapsed menu listing additional sublinks (`menu`), and
-- optionally if it is disabled (`disabled: true`).
+Additionally, a navigation bar link can also have the following properties:
+
+- `menu` containing another list of links. This creates a dropdown menu of multiple sublinks. The sublinks have the same properties as regular links (see the _Content_ > _Links_ section).
 
 Example:
 
@@ -237,11 +237,7 @@ conference:
       img: 'main_logo.png'
 ```
 
-The title/logo on the main page is followed by a description of your site (`site.description`) and the content of your `index.md` file. It ends with an optional list of links in the form of buttons. Each link consists of
-
-- the text to show (`name`),
-- a relative (`relative_url`) or absolute link address (`absolute_url`) or a collapsed menu listing additional sublinks (`menu`), and
-- optionally if it is disabled (`disabled: true`).
+The title/logo on the main page is followed by a description of your site (`site.description`) and the content of your `index.md` file. It ends with an optional list of links in the form of buttons. See the _Content_ > _Links_ section below for the available properties per link.
 
 Example:
 
@@ -290,7 +286,7 @@ conference:
         Try again next year.
 ```
 
-### Talk Settings: Main Categories
+### Talk Settings: Main Categories and Icons
 
 Each talk can have one or multiple categories associated via FrontMatter (see the _Individual Pages: Talks_ section below for more details). Some of these categories can be elevated to so called main categories". These are used to color group the talks across the entire website, particularly in the program. In order to do so add the `main_categories` property under the `talks` property. It consists of a list of all main categories. Each main category consists of:
 
@@ -305,6 +301,8 @@ Each talk can have one or multiple categories associated via FrontMatter (see th
   - `light` (white)
   - `dark` (dark grey)
 
+Each talk can have associated links listed at the end of its content. If these links have an icon associated (see _Content_ > _Talks_ below), they are also shown on the talk overview page (e.g. to show in the overview which talk has a video recording and which not). To disable the showing of icon links on the overview page, set the `hide_icons` property to `true` (default: `false`).
+
 Example:
 
 ```yaml
@@ -316,6 +314,8 @@ conference:
         color: info
       - name: Cat B
         color: success
+    # Hide icons on talk overview page
+    hide_icons: false
 ```
 
 ### Speaker Settings: First name
@@ -413,13 +413,9 @@ Example:
 Each talk is represented by a file in the `_talks/` directory. It must begin with valid [YAML Front Matter](https://jekyllrb.com/docs/frontmatter/) containing
 
 - the talk's `name` (used as identifier),
-- one or more existing `speakers` name(s), and
-- 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` whereby each link element consist of
-  - a `name`, and
-  - either an absolute link `href` or a `file` name (of a file stored under `/documents/`)
-  - optionally a `icon` property indicating the name of a [FontAwesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) icon to be shown in front of the link name (links with icons are shown separately and above regular links without icons)
-  - optionally a `iframe` property which if set to `true` opens a modal instead where the link's source is embedded in a iframe (e.g. for embedding videos thus having a default iframe ratio of 24:11)
+- 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 `hide: true` if the talk's page should not be linked to.
 
 ### Speakers
@@ -429,9 +425,7 @@ Each speaker is represented by a file in the `_speakers/` directory. It must beg
 - the speaker's `name` (used as identifier), as well as its
 - `first_name`,
 - `last_name`,
-- optionally a list of `links` whereby each link element consist of
-  - a `name`, and
-  - either an absolute link `href` or a `file` name (of a file stored under `/documents/`)
+- optionally a list of `links` (see the _Links_ subsection below for the available properties per link; links with icons are treated separately), and
 - optionally `hide: true` if the speaker's page should not be linked to.
 
 ### Rooms
@@ -441,6 +435,32 @@ Each room is represented by a file in the `_rooms/` directory. It must begin wit
 - the room's `name`, and
 - optionally `hide: true` if the room's page should not be linked to.
 
+### Links
+
+Links are used at different location throughout the theme: They can either be used in the configuration file (for the landing page or the navigation bar), or in talks and for speakers. A link can thereby have the following properties:
+
+- the text to show (`name`),
+- optionally if it is disabled (`disabled: true`),
+- optionally if it should open in a iframe embedded in a popup-like modal in the site it self (`iframe: true`, e.g. for embedding videos thus having a default iframe ratio of 24:11)
+- optionally an icon to show (indicating the name of a [FontAwesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) icon to be shown if supported at the given location)
+- the actual link address:
+  + given relatively to the site's base address: `relative_url:`,
+  + given absolute: `absolute_url:`,
+  + pointing to a file uploaded to the `/documents` folder (for talks `/documents/slides`, for speakers `/documents/bio`): `file:`
+  + pointing to an external video: `video:`
+
+Using the `file:` indicator, the relative address is automatically set as well as the icon. Using the `video:` indicator, the link is automatically configured to open in an iframe with a corresponding title and the icon is set.
+
+Example:
+
+```yaml
+  links:
+    - name: Slides
+      file: slides.pdf
+    - name: Recording
+      video: https://media.ccc.de/
+```
+
 
 ## Overview Pages
 

data/_includes/js/conference.js

@@ -19,17 +19,32 @@
 $('#link-modal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget);
 
-  var title = button.data('title');
   var href = button.data('href');
+  var header = button.data('header');
+  var title = button.data('title');
+  var footer = button.data('footer');
   var desc = button.data('desc');
 
   var modal = $(this);
-  modal.find('.modal-title').text(title);
   modal.find('iframe').attr('src', href);
 
-  if (desc) {
+  if (header) {
+    modal.find('.modal-title').html(header);
+  }
+  else if (title) {
+    modal.find('.modal-title').text(title);
+  }
+  else {
+    modal.find('.modal-title').text('')
+  }
+
+  if (footer) {
+    modal.find('.modal-footer').removeClass('d-none')
+    modal.find('.modal-description').html(footer);
+  }
+  else if (desc) {
     modal.find('.modal-footer').removeClass('d-none')
-    modal.find('.modal-description').html(desc);
+    modal.find('.modal-description').text(desc);
   }
   else {
     modal.find('.modal-footer').addClass('d-none')

data/_includes/partials/footer.html

@@ -14,7 +14,7 @@
         <div class="modal-body">
           <iframe src="" frameborder="0" allowfullscreen></iframe>
         </div>
-        <div class="modal-footer">
+        <div class="modal-footer justify-content-start">
           <p class="modal-description"></p>
         </div>
       </div>

data/_includes/partials/get_link.html

@@ -0,0 +1,73 @@
+
+{% assign link_icon = link.icon %}
+{% assign link_iframe = link.iframe %}
+
+{% if link.absolute_url %}
+  {% assign link_href = link.absolute_url %}
+
+{% elsif link.relative_url %}
+  {% assign link_href = link.relative_url | prepend: site.baseurl %}
+
+{% elsif link.file %}
+  {% assign link_icon = "file-alt" %}
+
+  {% if talk %}
+    {% assign link_href = link.file | prepend: '/documents/slides/' | prepend: site.baseurl %}
+
+  {% elsif speaker %}
+    {% assign link_href = link.file | prepend: '/documents/bio/' | prepend: site.baseurl %}
+
+  {% else %}
+    {% assign link_href = link.file | prepend: '/documents/' | prepend: site.baseurl %}
+
+  {% endif %}
+
+{% elsif link.video %}
+  {% assign link_href = link.video %}
+  {% assign link_icon = "video" %}
+  {% assign link_iframe = true %}
+
+  {% if talk %}
+    {% capture modal_header %}
+      <h3 class="font-weight-light">{{ talk.name }}</h3>
+      <p class="mb-0 font-weight-light">
+        {% include partials/list_speakers.html %}
+      </p>
+    {% endcapture %}
+
+  {% elsif speaker %}
+    {% capture modal_header %}
+      <h3 class="mb-0 font-weight-light">
+        {{ speaker.first_name }} {{ speaker.last_name }}
+      </h3>
+    {% endcapture %}
+    {% assign modal_desc = link.name %}
+
+  {% endif %}
+
+{% endif %}
+
+{% capture link_tag -%}
+  {%- if link.disabled -%}
+    <a class="disabled{% if link_styleclass %} {{ link_styleclass }}{% endif %}">
+
+  {%- elsif link_iframe -%}
+    <a class="cursor-pointer{% if link_styleclass %} {{ link_styleclass }}{% endif %}" title="{{ link.name }}" data-toggle="modal" data-target="#link-modal" data-href="{{ link_href }}" {% if modal_header -%}
+      data-header="{{ modal_header | strip_newlines | escape }}"
+    {%- elsif modal_title -%}
+      data-title="{{ modal_title }}"
+    {%- elsif link.name -%}
+      data-title="{{ link.name }}"
+    {%- endif %} {% if modal_footer -%}
+      data-footer="{{ modal_footer | strip_newlines | escape }}"
+    {%- elsif modal_desc -%}
+      data-desc="{{ modal_desc }}"
+    {%- elsif link.description -%}
+      data-desc="{{ link.description }}"
+    {%- endif %}>
+
+  {%- else -%}
+    <a{% if link_styleclass %} class="{{ link_styleclass }}"{% endif %} href="{{ link_href }}" title="{{ link.name }}">
+
+  {%- endif -%}
+{%- endcapture %}

data/_includes/partials/get_link_types.html

@@ -0,0 +1,15 @@
+{% if talk %}
+  {% assign links = talk.links%}
+{% else if speaker %}
+  {% assign links = speaker.links%}
+{% endif %}
+
+{% assign has_icon_links = false %}
+{% assign has_regular_links = false %}
+{% for link in links %}
+  {% if link.icon or link.file or link.video %}
+    {% assign has_icon_links = true %}
+  {% else %}
+    {% assign has_regular_links = true %}
+  {% endif %}
+{% endfor %}

data/_includes/partials/navbar.html

@@ -16,30 +16,23 @@
                 {{ link.name }}
               </a>
               <div class="dropdown-menu" aria-labelledby="navbar-dropdown{{ forloop.index0 }}">
-                {% for sublink in link.menu %}
-                  {% if sublink.disabled %}
-                    <a class="dropdown-item disabled" href="#">
-                      {{ sublink.name }}
-                    </a>
-                  {% else %}
-                    <a class="dropdown-item" href="{% if sublink.absolute_url %}{{ sublink.absolute_url }}{% else %}{{ sublink.relative_url | prepend: site.baseurl }}{% endif %}">
-                      {{ sublink.name }}
-                    </a>
-                  {% endif %}
+                {% assign parent_link = link %}
+                {% for link in parent_link.menu %}
+                  {% assign link_styleclass = "dropdown-item" %}
+                  {% include partials/get_link.html %}
+                  {{ link_tag }}
+                    {{ link.name }}
+                  </a>
                 {% endfor %}
               </div>
             </li>
           {% else %}
             <li class="nav-item {% if page.url contains link.relative_url %}active{% endif %}">
-              {% if link.disabled %}
-                <a class="nav-link disabled" href="#">
-                  {{ link.name }}
-                </a>
-              {% else %}
-                <a class="nav-link" href="{% if link.absolute_url %}{{ link.absolute_url }}{% else %}{{ link.relative_url | prepend: site.baseurl }}{% endif %}">
-                  {{ link.name }}
-                </a>
-              {% endif %}
+              {% assign link_styleclass = "nav-link" %}
+              {% include partials/get_link.html %}
+              {{ link_tag }}
+                {{ link.name }}
+              </a>
             </li>
           {% endif %}
         {% endfor %}

data/_layouts/home.html

@@ -24,15 +24,11 @@
     {% if site.conference.main.links %}
       <p class="lead d-print-none">
       {% for link in site.conference.main.links %}
-        {% if link.disabled %}
-          <a class="btn btn-outline-primary btn-lg mt-2 disabled" href="#">
-            {{ link.name }}
-          </a>
-        {% else %}
-          <a class="btn btn-outline-primary btn-lg mt-2" href="{% if link.absolute_url %}{{ link.absolute_url }}{% else %}{{ link.relative_url | prepend: site.baseurl }}{% endif %}" role="button">
-            {{ link.name }}
-          </a>
-        {% endif %}
+        {% assign link_styleclass = "btn btn-outline-primary btn-lg mt-2" %}
+        {% include partials/get_link.html %}
+        {{ link_tag }}
+          {{ link.name }}
+        </a>
       {% endfor %}
       </p>
     {% endif %}

data/_layouts/speaker.html

@@ -12,16 +12,41 @@
 
   {{ content }}
 
-  {% if speaker.links %}
+  {% include partials/get_link_types.html %}
+
+  {% if has_icon_links %}
+    <ul class="list-unstyled">
+      {% for link in speaker.links %}
+        {% assign link_styleclass = "" %}
+        {% include partials/get_link.html %}
+
+        {% if link_icon %}
+          <li class="mb-1 ml-2">
+            {{ link_tag }}
+              <i class="fas fa-{{ link_icon }} pr-1"></i>
+              {{ link.name }}
+            </a>
+          </li>
+        {% endif %}
+      {% endfor %}
+    </ul>
+  {% endif %}
+
+  {% if has_regular_links %}
     <h5 class="mt-4 mb-1">{{ site.data.lang[site.conference.lang].more_information }}:</h5>
+
     <ul class="list-unstyled">
       {% for link in speaker.links %}
-        <li class="mb-1 ml-2 pl-2 border-soft-primary">
-          {% include partials/get_link_href.html %}
-          <a class="text-reset" href="{{ link_href }}">
-            {{ link.name }}
-          </a>
-        </li>
+        {% assign link_styleclass = "text-reset" %}
+        {% include partials/get_link.html %}
+
+        {% unless link_icon %}
+          <li class="mb-1 ml-2 pl-2 border-soft-primary">
+            {{ link_tag }}
+              {{ link.name }}
+            </a>
+          </li>
+        {% endunless %}
       {% endfor %}
     </ul>
   {% endif %}

data/_layouts/talk-overview.html

@@ -31,24 +31,15 @@
               <p class="mb-0">
                 {% include partials/list_sub_categories.html %}
 
-                {% assign has_icon_links = false %}
-                {% for link in talk.links %}
-                  {% if link.icon %}
-                    {% assign has_icon_links = true %}
-                  {% endif %}
-                {% endfor %}
-
-                {% if has_icon_links %}
+                {% include partials/get_link_types.html %}
+                {% if has_icon_links and site.conference.talks.hide_icons != true %}
                   <span class="{% if has_sub_categories %}ml-1{% endif %}">
                     {% for link in talk.links %}
-                      {% if link.icon %}
-                        {% include partials/get_link_href.html %}
-                        {%- if link.iframe -%}
-                          <a class="text-secondary ml-1 cursor-pointer" data-toggle="modal" data-target="#link-modal" data-title="{{ link.name }}" data-href="{{ link_href }}" title="{{ link.name }}">
-                        {%- else -%}
-                          <a class="text-secondary ml-1" href="{{ link_href }}" title="{{ link.name }}">
-                        {%- endif -%}
-                          <i class="fas fa-{{ link.icon }} pr-1"></i></a>
+                      {% assign link_styleclass = "" %}
+                      {% include partials/get_link.html %}
+                      {% if link_icon %}
+                        {{ link_tag -}}
+                          <i class="fas fa-{{ link_icon }} pr-1"></i></a>
                       {% endif %}
                     {% endfor %}
                   </span>

data/_layouts/talk.html

@@ -56,28 +56,18 @@
 
   {{ content }}
 
-  {% assign has_icon_links = false %}
-  {% assign has_regular_links = false %}
-  {% for link in talk.links %}
-    {% if link.icon %}
-      {% assign has_icon_links = true %}
-    {% else %}
-      {% assign has_regular_links = true %}
-    {% endif %}
-  {% endfor %}
+  {% include partials/get_link_types.html %}
 
   {% if has_icon_links %}
     <ul class="list-unstyled">
       {% for link in talk.links %}
-        {% if link.icon %}
+        {% assign link_styleclass = "" %}
+        {% include partials/get_link.html %}
+
+        {% if link_icon %}
           <li class="mb-1 ml-2">
-            {% include partials/get_link_href.html %}
-            {% if link.iframe %}
-              <a class="cursor-pointer" data-toggle="modal" data-target="#link-modal" data-title="{{ link.name }}" data-href="{{ link_href }}">
-            {% else %}
-              <a href="{{ link_href }}">
-            {% endif %}
-              <i class="fas fa-{{ link.icon }} pr-1"></i>
+            {{ link_tag }}
+              <i class="fas fa-{{ link_icon }} pr-1"></i>
               {{ link.name }}
             </a>
           </li>
@@ -91,14 +81,12 @@
 
     <ul class="list-unstyled">
       {% for link in talk.links %}
-        {% unless link.icon %}
+        {% assign link_styleclass = "text-reset" %}
+        {% include partials/get_link.html %}
+
+        {% unless link_icon %}
           <li class="mb-1 ml-2 pl-2 border-soft-primary">
-            {% include partials/get_link_href.html %}
-            {% if link.iframe %}
-              <a class="cursor-pointer text-reset" data-toggle="modal" data-target="#link-modal" data-title="{{ link.name }}" data-href="{{ link_href }}">
-            {% else %}
-              <a class="text-reset" href="{{ link_href }}">
-            {% endif %}
+            {{ link_tag }}
               {{ link.name }}
             </a>
           </li>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-conference
 version: !ruby/object:Gem::Version
-  version: 2.1.1
+  version: 2.2.0
 platform: ruby
 authors:
 - Lorenz Schmid
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-01 00:00:00.000000000 Z
+date: 2020-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -72,7 +72,8 @@ files:
 - _includes/js/syncscroll.js
 - _includes/partials/checks.html
 - _includes/partials/footer.html
-- _includes/partials/get_link_href.html
+- _includes/partials/get_link.html
+- _includes/partials/get_link_types.html
 - _includes/partials/get_main_category.html
 - _includes/partials/get_talk_time.html
 - _includes/partials/header.html

data/_includes/partials/get_link_href.html

@@ -1,5 +0,0 @@
-{% if link.file %}
-  {% assign link_href = link.file | prepend: '/documents/' | prepend: site.baseurl %}
-{% else %}
-  {% assign link_href = link.href %}
-{% endif %}