Unify link configurations throughout the theme

Gemfile.lock

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

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:
 
@@ -305,7 +301,7 @@ 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 overviw page, set the `hide_icons` property to `true`.
+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:
 
@@ -417,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
@@ -433,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
@@ -445,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
 

_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')

_includes/partials/footer.html

@@ -14,7 +14,7 @@ <h5 class="modal-title" id="link-modal-label"></h5>
         <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>

_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 %}

_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 %}

_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 %}

_layouts/home.html

@@ -24,15 +24,11 @@ <h1 class="display-3">
     {% 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 %}

_layouts/speaker.html

@@ -12,16 +12,41 @@ <h1 class="font-weight-light mb-3">
 
   {{ 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 %}