jekyll-wren 0.4 → 0.4.1

data/_includes/meta.html

@@ -1,82 +1,82 @@
-{%comment%} ensures this file works with posts and pages {%endcomment%}
-{%- if page.date -%}
-  {%- assign p = page -%}
-  {%- assign align = 'center' -%}
-{%- else -%}
-  {%- assign p = post -%}
-  {%- assign align = 'left' -%}
-{% endif %}
-
-{%comment%} Sets the default date format as ISO 8601 {%endcomment%}
-{% assign date_format = site.wren.date_format | default: "%Y-%m-%d" %}
-
-<p class="post-meta" {{ align | prepend: 'style= "text-align: ' | append: ';"'}}>
-  {%comment%} assign variables prevents overflow between entries {%endcomment%}
-  {%- assign original_date = p.date | date: date_format -%}
-  {%- assign modified_date = p.modified_date -%}
-  {%comment%} if post was modified, add * and add that date as hover text {%endcomment%}
-  {%- if modified_date -%}
-    {%- assign modified_date = modified_date | date: date_format | prepend: 'Updated on ' -%}
-    {%- assign original_date = original_date | append: '*' -%}
-  {%- endif -%}
-  <time title="{{ modified_date }}" class="dt-published" datetime="{{ original_date | date_to_xmlschema }}" itemprop="datePublished">
-    {{ original_date }}
-  </time>
-
-  {%comment%} passing content to be analysed by reading-time explicitly {%endcomment%}
-  • {%- include reading-time.html text=p.content -%}
-
-  {%comment%} if tag given, give as comma-separated list with links to tag page {%endcomment%}
-  {%- if p.tags -%}
-    {%- for tag in p.tags -%}
-      {%- if forloop.first == true %}• {% endif %}
-      <a href={{ 'blog/tags#' | append: tag | relative_url }}>{{ tag }}</a>
-      {%- if forloop.last == false %}, {% endif %}
-    {%- endfor -%}
-  {%- endif %}
-
-  {%comment%} if authors given, give as comma-separated list {%endcomment%}
-  {%- if p.author -%}
-    {%- for author in p.author -%}
-      {%- if forloop.first == true -%}• {% endif -%}
-        {%- assign author_id = author | replace: ' ', '_' -%}
-        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-          <span class="p-author h-card" itemprop="name">
-            <a href={{ 'blog/authors#' | append: author_id | relative_url }}>{{author}}</a>
-            {%- if forloop.last == false -%}, {%- endif -%}
-          </span>
-        </span>
-    {% endfor %}
-  {%- endif -%}
-
-  {%comment%} indicate if the post was first published elsewhere first {%endcomment%}
-  {%- if p.first_published_on -%}
-    {%comment%} allow specifying a specific URL at which it was published {%endcomment%}
-    {%- if p.first_published_url -%}
-      {%- assign fpo_string = "First published on " | append: p.first_published_url -%}
-    {%- else -%}
-      {%- assign fpo_string = "First published on " | append: p.first_published_on -%}
-    {%- endif -%}
-    {%comment%} construct expected icon path, then check if exists {%endcomment%}
-    {%- assign icon_path = p.first_published_on | prepend: 'assets/social-icons/' | append: '.svg' -%}
-    {%- assign found = false -%}
-    {%- for static_file in site.static_files -%}
-      {%- if static_file.path contains icon_path -%}
-        {%- assign found = true -%}
-      {%- endif -%}
-    {%- endfor -%}
-    {%comment%} if it doesn't, use the default source icon {%endcomment%}
-    {%- if found == false -%}
-      {%- assign icon_path = 'assets/social-icons/Default.svg' -%}
-    {%- endif -%}
-    {%comment%} put that all together with a.svg.use for the button {%endcomment%}
-    •
-    <a title="{{ fpo_string }}" alt="{{ fpo_string }}">
-      <svg style="vertical-align: sub; width: 16px; height: 16px;" =>
-        <use xlink:href="{{ icon_path | append: '#soc' | relative_url }}"/>
-      </svg>
-    </a>
-  {%- endif -%}
-  {%comment%} add user's custom meta; anything can go here! {%endcomment%}
-  {%- include custom-meta.html -%}
-</p>
+{%comment%} ensures this file works with posts and pages {%endcomment%}
+{%- if page.date -%}
+  {%- assign p = page -%}
+  {%- assign align = 'center' -%}
+{%- else -%}
+  {%- assign p = post -%}
+  {%- assign align = 'left' -%}
+{% endif %}
+
+{%comment%} Sets the default date format as ISO 8601 {%endcomment%}
+{% assign date_format = site.wren.date_format | default: "%Y-%m-%d" %}
+
+<p class="post-meta" {{ align | prepend: 'style= "text-align: ' | append: ';"'}}>
+  {%comment%} assign variables prevents overflow between entries {%endcomment%}
+  {%- assign original_date = p.date | date: date_format -%}
+  {%- assign modified_date = p.modified_date -%}
+  {%comment%} if post was modified, add * and add that date as hover text {%endcomment%}
+  {%- if modified_date -%}
+    {%- assign modified_date = modified_date | date: date_format | prepend: 'Updated on ' -%}
+    {%- assign original_date = original_date | append: '*' -%}
+  {%- endif -%}
+  <time title="{{ modified_date }}" class="dt-published" datetime="{{ original_date | date_to_xmlschema }}" itemprop="datePublished">
+    {{ original_date }}
+  </time>
+
+  {%comment%} passing content to be analysed by reading-time explicitly {%endcomment%}
+  • {%- include reading-time.html text=p.content -%}
+
+  {%comment%} if tag given, give as comma-separated list with links to tag page {%endcomment%}
+  {%- if p.tags -%}
+    {%- for tag in p.tags -%}
+      {%- if forloop.first == true %}• {% endif %}
+      <a href={{ 'blog/tags#' | append: tag | relative_url }}>{{ tag }}</a>
+      {%- if forloop.last == false %}, {% endif %}
+    {%- endfor -%}
+  {%- endif %}
+
+  {%comment%} if authors given, give as comma-separated list {%endcomment%}
+  {%- if p.author -%}
+    {%- for author in p.author -%}
+      {%- if forloop.first == true -%}• {% endif -%}
+        {%- assign author_id = author | replace: ' ', '_' -%}
+        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+          <span class="p-author h-card" itemprop="name">
+            <a href={{ 'blog/authors#' | append: author_id | relative_url }}>{{author}}</a>
+            {%- if forloop.last == false -%}, {%- endif -%}
+          </span>
+        </span>
+    {% endfor %}
+  {%- endif -%}
+
+  {%comment%} indicate if the post was first published elsewhere first {%endcomment%}
+  {%- if p.first_published_on -%}
+    {%comment%} allow specifying a specific URL at which it was published {%endcomment%}
+    {%- if p.first_published_url -%}
+      {%- assign fpo_string = "First published on " | append: p.first_published_url -%}
+    {%- else -%}
+      {%- assign fpo_string = "First published on " | append: p.first_published_on -%}
+    {%- endif -%}
+    {%comment%} construct expected icon path, then check if exists {%endcomment%}
+    {%- assign icon_path = p.first_published_on | prepend: 'assets/social-icons/' | append: '.svg' -%}
+    {%- assign found = false -%}
+    {%- for static_file in site.static_files -%}
+      {%- if static_file.path contains icon_path -%}
+        {%- assign found = true -%}
+      {%- endif -%}
+    {%- endfor -%}
+    {%comment%} if it doesn't, use the default source icon {%endcomment%}
+    {%- if found == false -%}
+      {%- assign icon_path = 'assets/social-icons/Default.svg' -%}
+    {%- endif -%}
+    {%comment%} put that all together with a.svg.use for the button {%endcomment%}
+    •
+    <a title="{{ fpo_string }}" alt="{{ fpo_string }}">
+      <svg style="vertical-align: sub; width: 16px; height: 16px;" =>
+        <use xlink:href="{{ icon_path | append: '#soc' | relative_url }}"/>
+      </svg>
+    </a>
+  {%- endif -%}
+  {%comment%} add user's custom meta; anything can go here! {%endcomment%}
+  {%- include custom-meta.html -%}
+</p>

data/_includes/navigation.html

@@ -1,70 +1,70 @@
-{%comment%}
-  In principle other content could be displayed in the <header> element (as in
-  Minima) but stock Wren only uses it for navigation links. Also shouldn't be
-  confused with head.html which provides HTML <head> meta information. 
-{%endcomment%}
-
-<header class="site-header">
-  {%comment%} <nav> notifies browser there are navigation links {%endcomment%}
-  <nav class="site-nav">
-    {%comment%} always include link to home in navbar {%endcomment%}
-    <a class="page-link" href="{{ site.baseurl }}/" title="Home" alt="Home">
-      <svg>
-        {%comment%} #nav acts as an anchor for the import {%endcomment%}
-        <use xlink:href="{{ 'assets/nav-icons/home.svg#nav' | relative_url }}"/>
-      </svg>
-    </a>
-
-    {%comment%} display any pages listed in _config.yml in order {%endcomment%}
-    {%- for path in site.wren.header_pages -%}
-      {%comment%} shortcuts for basic page info {%endcomment%}
-      {%- assign my_page = site.pages | where: "path", path | first -%}
-      {%- assign title = my_page.title | escape -%}
-
-      {%comment%} prepend '/' so split works even if file in root {%endcomment%}
-      {%- assign clean_path = path | prepend: '/' | split: '/' -%}
-      {%comment%} need an ID by which to look for navigation icons {%endcomment%}
-      {%- if clean_path[-1] == 'index.html' -%}
-        {%comment%} ID is containing directory if link an index file {%endcomment%}
-        {%- assign id  = clean_path[-2] -%}
-      {%- else -%}
-        {%comment%} ID is filename if not an index file {%endcomment%}
-        {%- assign id = clean_path[-1] | remove: '.md' | remove: '.html' -%}
-      {%- endif -%}
-
-      {%comment%} construct expected icon path, then check if exists {%endcomment%}
-      {%- assign icon_path = id | prepend: 'assets/nav-icons/' | append: '.svg' -%}
-      {%- assign found = false -%}
-      {%- for static_file in site.static_files -%}
-        {%- if static_file.path contains icon_path -%}
-          {%- assign found = true -%}
-        {%- endif -%}
-      {%- endfor -%}
-      {%comment%} if it doesn't, use the default navigation icon {%endcomment%}
-      {%- if found == false -%}
-        {%- assign icon_path = 'assets/nav-icons/default.svg' -%}
-      {%- endif -%}
-
-      {%comment%} put that all together with a.svg.use for the button {%endcomment%}
-      <a class="page-link" href="{{ my_page.url | relative_url }}" title="{{ title }}" alt="{{ title }}">
-        <svg>
-          <use xlink:href="{{ icon_path | append: '#nav' | relative_url }}"/>
-        </svg>
-      </a>
-    {%- endfor -%}
-
-    {%comment%} always include link to RSS in navbar {%endcomment%}
-    <a class="page-link" href="{{ 'feed.xml' | relative_url }}" title="Feed">
-      <svg>
-        <use xlink:href="{{ 'assets/nav-icons/rss.svg#nav' | relative_url }}"/>
-      </svg>
-    </a>
-
-    {%comment%} always include shortcut to top of page in navbar {%endcomment%}
-    <a class="page-link" href="#" title="Top" alt="Top">
-      <svg>
-        <use xlink:href="{{ 'assets/nav-icons/top.svg#nav' | relative_url }}"/>
-      </svg>
-    </a>
-  </nav>
-</header>
+{%comment%}
+  In principle other content could be displayed in the <header> element (as in
+  Minima) but stock Wren only uses it for navigation links. Also shouldn't be
+  confused with head.html which provides HTML <head> meta information. 
+{%endcomment%}
+
+<header class="site-header">
+  {%comment%} <nav> notifies browser there are navigation links {%endcomment%}
+  <nav class="site-nav">
+    {%comment%} always include link to home in navbar {%endcomment%}
+    <a class="page-link" href="{{ site.baseurl }}/" title="Home" alt="Home">
+      <svg>
+        {%comment%} #nav acts as an anchor for the import {%endcomment%}
+        <use xlink:href="{{ 'assets/nav-icons/home.svg#nav' | relative_url }}"/>
+      </svg>
+    </a>
+
+    {%comment%} display any pages listed in _config.yml in order {%endcomment%}
+    {%- for path in site.wren.header_pages -%}
+      {%comment%} shortcuts for basic page info {%endcomment%}
+      {%- assign my_page = site.pages | where: "path", path | first -%}
+      {%- assign title = my_page.title | escape -%}
+
+      {%comment%} prepend '/' so split works even if file in root {%endcomment%}
+      {%- assign clean_path = path | prepend: '/' | split: '/' -%}
+      {%comment%} need an ID by which to look for navigation icons {%endcomment%}
+      {%- if clean_path[-1] == 'index.html' -%}
+        {%comment%} ID is containing directory if link an index file {%endcomment%}
+        {%- assign id  = clean_path[-2] -%}
+      {%- else -%}
+        {%comment%} ID is filename if not an index file {%endcomment%}
+        {%- assign id = clean_path[-1] | remove: '.md' | remove: '.html' -%}
+      {%- endif -%}
+
+      {%comment%} construct expected icon path, then check if exists {%endcomment%}
+      {%- assign icon_path = id | prepend: 'assets/nav-icons/' | append: '.svg' -%}
+      {%- assign found = false -%}
+      {%- for static_file in site.static_files -%}
+        {%- if static_file.path contains icon_path -%}
+          {%- assign found = true -%}
+        {%- endif -%}
+      {%- endfor -%}
+      {%comment%} if it doesn't, use the default navigation icon {%endcomment%}
+      {%- if found == false -%}
+        {%- assign icon_path = 'assets/nav-icons/default.svg' -%}
+      {%- endif -%}
+
+      {%comment%} put that all together with a.svg.use for the button {%endcomment%}
+      <a class="page-link" href="{{ my_page.url | relative_url }}" title="{{ title }}" alt="{{ title }}">
+        <svg>
+          <use xlink:href="{{ icon_path | append: '#nav' | relative_url }}"/>
+        </svg>
+      </a>
+    {%- endfor -%}
+
+    {%comment%} always include link to RSS in navbar {%endcomment%}
+    <a class="page-link" href="{{ 'feed.xml' | relative_url }}" title="Feed">
+      <svg>
+        <use xlink:href="{{ 'assets/nav-icons/rss.svg#nav' | relative_url }}"/>
+      </svg>
+    </a>
+
+    {%comment%} always include shortcut to top of page in navbar {%endcomment%}
+    <a class="page-link" href="#" title="Top" alt="Top">
+      <svg>
+        <use xlink:href="{{ 'assets/nav-icons/top.svg#nav' | relative_url }}"/>
+      </svg>
+    </a>
+  </nav>
+</header>

data/_includes/reading-time.html

@@ -1,41 +1,41 @@
-{% comment %}
-  This is an amazing example of how Liquid templates can behave exactly
-  like functions. Used as {% include reading-time.html text=content %},
-  this template takes an optional variable `text` as input and returns
-  how long it takes to read the content of that variable as output. If
-  no text given it just analyses the page its included in instead.
-{% endcomment %}
-
-{%comment%} check which provides fallback for `text` {%endcomment%} 
-{%- if include.text -%}
-  {%- assign text = include.text -%}
-{%- else -%}
-  {%- assign text = content -%}
-{%- endif -%}
-
-{%comment%} set the default reading speed {%endcomment%} 
-{%- assign wpm = site.wren.wpm | default: 180 -%}
-
-{%comment%}
-  Liquid can't do arithmetic within conditional expressions. We'll
-  need wpm/2 to check if the post is less than 30 seconds so have
-  to assign it a variable before the check happens.
-{%endcomment%}  
-{%- assign wp30s = wpm | divided_by: 2 -%}
-
-{%comment%}
-  This is a simple reading time calculation is based entirely on the
-  number of words; Medium is more complex and counts images as well.
-{%endcomment%} 
-{%- assign words = text | number_of_words -%}
-
-{%- if words > 0 and words < wp30s -%}
-  {%comment%} if takes less than 30 secs, just say 30 secs {%endcomment%} 
-  {%- assign time = '30 sec' -%}
-{%- else -%}
-  {%comment%} otherwise, give reading time to nearest minute {%endcomment%} 
-  {%- assign time = words | plus: wp30s | divided_by: wpm | append: ' min' -%}
-{%- endif -%}
-
-{%comment%} give Medium-style output {%endcomment%} 
-{{ time | append: ' read' }}
+{% comment %}
+  This is an amazing example of how Liquid templates can behave exactly
+  like functions. Used as {% include reading-time.html text=content %},
+  this template takes an optional variable `text` as input and returns
+  how long it takes to read the content of that variable as output. If
+  no text given it just analyses the page its included in instead.
+{% endcomment %}
+
+{%comment%} check which provides fallback for `text` {%endcomment%} 
+{%- if include.text -%}
+  {%- assign text = include.text -%}
+{%- else -%}
+  {%- assign text = content -%}
+{%- endif -%}
+
+{%comment%} set the default reading speed {%endcomment%} 
+{%- assign wpm = site.wren.wpm | default: 180 -%}
+
+{%comment%}
+  Liquid can't do arithmetic within conditional expressions. We'll
+  need wpm/2 to check if the post is less than 30 seconds so have
+  to assign it a variable before the check happens.
+{%endcomment%}  
+{%- assign wp30s = wpm | divided_by: 2 -%}
+
+{%comment%}
+  This is a simple reading time calculation is based entirely on the
+  number of words; Medium is more complex and counts images as well.
+{%endcomment%} 
+{%- assign words = text | number_of_words -%}
+
+{%- if words > 0 and words < wp30s -%}
+  {%comment%} if takes less than 30 secs, just say 30 secs {%endcomment%} 
+  {%- assign time = '30 sec' -%}
+{%- else -%}
+  {%comment%} otherwise, give reading time to nearest minute {%endcomment%} 
+  {%- assign time = words | plus: wp30s | divided_by: wpm | append: ' min' -%}
+{%- endif -%}
+
+{%comment%} give Medium-style output {%endcomment%} 
+{{ time | append: ' read' }}

data/_includes/social-list.html

@@ -1,46 +1,46 @@
-{%comment%} values come from mix of config and data file {%endcomment%}
-{%- assign config = site.wren.social_links -%}
-{%- assign data   = site.wren_social_data -%}
-
-{%comment%} double loop allows multiple from same service {%endcomment%}
-{%- for service in config -%}
-  {%- for entry in service[1] -%}
-    {%comment%} can give username as object or value {%endcomment%}
-    {%- assign handle = entry.username | default: entry -%}
-
-    {%comment%}
-      Key by which config identifies the service. Note that this key doesn't have to
-      be known to the data file also; this template's logic will muddle through what
-      information it has and piece together a button as best it can.
-    {%endcomment%}
-    {%-assign key = service[0] -%}
-
-    {%comment%} checks if Wren covers service, if not switch to fallbacks {%endcomment%}
-    {%- assign name = data[key]["name"] | default: entry.name -%}
-    {%- assign icon = data[key]["name"] | default: "Default" -%}
-
-    {%comment%} url can come from config or datafile {%endcomment%}
-    {%- assign url = entry.instance | default: data[key]["url"] -%}
-
-    {%comment%} handle service specific url delimiters {%endcomment%}
-    {%- if key == "mastodon" or key == "medium" -%}
-      {%- assign delimiter = "/@" -%}
-    {%- else -%}
-      {%- assign delimiter = "/" -%}
-    {%- endif -%}
-
-    {%comment%} id allows URLs to differ from usernames {%endcomment%}
-    {%- assign url_handle = entry.id | default: handle -%}
-
-    {%comment%} generate the full profile url {%endcomment%}
-    {%- assign profile_link = url | prepend: 'https://' | append: delimiter | append: url_handle -%}
-
-    {%comment%} actual HTML which forms the social button {%endcomment%}
-    <a rel="author" alt="{{ name }}" title="{{ handle }}" href="{{ profile_link }}">
-      <svg>
-        {%comment%} #soc acts as an anchor for the import {%endcomment%}
-        <use xlink:href="{{ icon | prepend: '/assets/social-icons/' | append: '.svg#soc' | relative_url }}"/>
-      </svg>
-    </a>
-  {%endfor%}
-{% endfor %}
+{%comment%} values come from mix of config and data file {%endcomment%}
+{%- assign config = site.wren.social_links -%}
+{%- assign data   = site.wren_social_data -%}
+
+{%comment%} double loop allows multiple from same service {%endcomment%}
+{%- for service in config -%}
+  {%- for entry in service[1] -%}
+    {%comment%} can give username as object or value {%endcomment%}
+    {%- assign handle = entry.username | default: entry -%}
+
+    {%comment%}
+      Key by which config identifies the service. Note that this key doesn't have to
+      be known to the data file also; this template's logic will muddle through what
+      information it has and piece together a button as best it can.
+    {%endcomment%}
+    {%-assign key = service[0] -%}
+
+    {%comment%} checks if Wren covers service, if not switch to fallbacks {%endcomment%}
+    {%- assign name = data[key]["name"] | default: entry.name -%}
+    {%- assign icon = data[key]["name"] | default: "Default" -%}
+
+    {%comment%} url can come from config or datafile {%endcomment%}
+    {%- assign url = entry.instance | default: data[key]["url"] -%}
+
+    {%comment%} handle service specific url delimiters {%endcomment%}
+    {%- if key == "mastodon" or key == "medium" -%}
+      {%- assign delimiter = "/@" -%}
+    {%- else -%}
+      {%- assign delimiter = "/" -%}
+    {%- endif -%}
+
+    {%comment%} id allows URLs to differ from usernames {%endcomment%}
+    {%- assign url_handle = entry.id | default: handle -%}
+
+    {%comment%} generate the full profile url {%endcomment%}
+    {%- assign profile_link = url | prepend: 'https://' | append: delimiter | append: url_handle -%}
+
+    {%comment%} actual HTML which forms the social button {%endcomment%}
+    <a rel="author" alt="{{ name }}" title="{{ handle }}" href="{{ profile_link }}">
+      <svg>
+        {%comment%} #soc acts as an anchor for the import {%endcomment%}
+        <use xlink:href="{{ icon | prepend: '/assets/social-icons/' | append: '.svg#soc' | relative_url }}"/>
+      </svg>
+    </a>
+  {%endfor%}
+{% endfor %}

data/_includes/video-player.html

@@ -1,66 +1,66 @@
-{% comment %}
-  Embedded video player for a bunch of different host websites.
-  Takes the parameters `site` for video host, `alt` for the title,
-  and `id` for the video ID (usually in the URL) and then returns
-  the iframe needed to embed that video in a page. It's based on
-  the templates from https://github.com/nathancy/jekyll-embed-video
-  but combined into a one player, rather than players for each host.
-{% endcomment %}
-
-{% comment %} default player variables {% endcomment %}
-{%- assign width  = "500px" -%}
-{%- assign height = "281px" -%}
-{%- assign allow_autoplay   = false -%}
-{%- assign allow_fullscreen = true -%}
-
-{% comment %}
-  Some sites also ask for the site doing the embedding for
-  security purposes, so this quick check makes sure things
-  keep working seamlessly between local and prod builds.
-{% endcomment %}
-{%- if jekyll.environment == "production" -%}
-  {%- assign host = site.url -%}
-{%- else -%}
-  {%- assign host = "127.0.0.1" -%}
-{% endif -%}
-
-{% comment %} shortcut variables {% endcomment %}
-{%- assign id     = include.id -%}
-{%- assign source = include.site -%}
-
-{%- if source == "Dailymotion" -%}
-  {%- assign url = "dailymotion.com/embed/video/" -%}
-  {%- elsif source == "Google Drive" -%}
-  {%- assign url = "drive.google.com/file/d/" -%}
-{%- elsif source == "Streamable" -%}
-  {%- assign url = "streamable.com/s/" -%}
-{%- elsif source == "Twitch" -%}
-  {%- assign url = "clips.twitch.tv/embed?clip=" -%}
-  {%- assign id = id | append: "&parent=" | append: host -%}
-{%- elsif source == "Vimeo" -%}
-  {%- assign url = "player.vimeo.com/video/" -%}
-{%- elsif source == "YouTube" -%}
-  {%- assign url = "youtube.com/embed/" -%}
-{%- endif -%}
-
-<iframe
-  class  = "video-embed"
-  alt    = "{{ include.alt }}"
-  title  = "{{ include.alt }}"
-  src    = "{{ url | append: id | prepend: 'https://' }}"
-  width  = {{ width }}
-  height = {{ height }}
-  frameborder = "0"
-  scrolling = "no"
-  {% if allow_autoplay == true -%}
-    allow = "autoplay"
-    autoplay = true
-  {% else -%}
-    autoplay = false
-  {%- endif -%}
-  {% if allow_fullscreen == true -%}
-    webkitallowfullscreen
-    mozallowfullscreen
-    allowfullscreen
-  {%- endif -%}>
-</iframe>
+{% comment %}
+  Embedded video player for a bunch of different host websites.
+  Takes the parameters `site` for video host, `alt` for the title,
+  and `id` for the video ID (usually in the URL) and then returns
+  the iframe needed to embed that video in a page. It's based on
+  the templates from https://github.com/nathancy/jekyll-embed-video
+  but combined into a one player, rather than players for each host.
+{% endcomment %}
+
+{% comment %} default player variables {% endcomment %}
+{%- assign width  = "500px" -%}
+{%- assign height = "281px" -%}
+{%- assign allow_autoplay   = false -%}
+{%- assign allow_fullscreen = true -%}
+
+{% comment %}
+  Some sites also ask for the site doing the embedding for
+  security purposes, so this quick check makes sure things
+  keep working seamlessly between local and prod builds.
+{% endcomment %}
+{%- if jekyll.environment == "production" -%}
+  {%- assign host = site.url -%}
+{%- else -%}
+  {%- assign host = "127.0.0.1" -%}
+{% endif -%}
+
+{% comment %} shortcut variables {% endcomment %}
+{%- assign id     = include.id -%}
+{%- assign source = include.site -%}
+
+{%- if source == "Dailymotion" -%}
+  {%- assign url = "dailymotion.com/embed/video/" -%}
+  {%- elsif source == "Google Drive" -%}
+  {%- assign url = "drive.google.com/file/d/" -%}
+{%- elsif source == "Streamable" -%}
+  {%- assign url = "streamable.com/s/" -%}
+{%- elsif source == "Twitch" -%}
+  {%- assign url = "clips.twitch.tv/embed?clip=" -%}
+  {%- assign id = id | append: "&parent=" | append: host -%}
+{%- elsif source == "Vimeo" -%}
+  {%- assign url = "player.vimeo.com/video/" -%}
+{%- elsif source == "YouTube" -%}
+  {%- assign url = "youtube.com/embed/" -%}
+{%- endif -%}
+
+<iframe
+  class  = "video-embed"
+  alt    = "{{ include.alt }}"
+  title  = "{{ include.alt }}"
+  src    = "{{ url | append: id | prepend: 'https://' }}"
+  width  = {{ width }}
+  height = {{ height }}
+  frameborder = "0"
+  scrolling = "no"
+  {% if allow_autoplay == true -%}
+    allow = "autoplay"
+    autoplay = true
+  {% else -%}
+    autoplay = false
+  {%- endif -%}
+  {% if allow_fullscreen == true -%}
+    webkitallowfullscreen
+    mozallowfullscreen
+    allowfullscreen
+  {%- endif -%}>
+</iframe>