Add asciinema support

templates/macros/asciinema.html

@@ -0,0 +1,30 @@
+{%- import "macros/colocated_asset.html" as colocated_asset -%}
+
+{# Load an asciinema file and insert it into the page #}
+{%- macro asciinema(path, colocated=false, preload=false) -%}
+{%- set name = path | replace(from='.', to='-') | replace(from='/', to='-') -%}
+{%- if not page.extra.use_asciinema -%}
+    {{ throw(message='Please set extra.use_asciinema in page front-matter') }}
+{%- endif -%}
+
+{%- if colocated == true -%}
+    {%- set path = colocated_asset::colocated_asset(path=path, get_url=true) | trim -%}
+{%- endif -%}
+
+<div id="asciinema-{{ name }}"></div>
+<script>
+(() => {
+    const script = document.getElementById('asciinema-player')
+    const el = document.getElementById('asciinema-{{ name }}')
+    const go = () => {
+        AsciinemaPlayer.create('{{ path | safe }}', el, {preload: {{ preload }} })
+    }
+    // the script could have already loaded
+    if (window.AsciinemaPlayer != null) {
+        go()
+    } else {
+        script.addEventListener('load', go)
+    }
+})()
+</script>
+{%- endmacro asciinema -%}

templates/macros/colocated_asset.html

@@ -1,10 +1,16 @@
-<!--
-       Returns the file path of the colocated asset.
-       When Zola uses `resize_image` it looks relative to the `content` folder.
-       This means you have to reference the full page asset colocation path.
--->
-{%- macro colocated_asset(path) -%}
-       {%- set page_url_components = page.relative_path | default(value=section.relative_path) | split(pat='/') -%}
-       {%- set page_base = page_url_components | slice(end=page_url_components | length - 1) | join(sep='/') -%}
-       {{ page_base ~ '/' ~ path }}
+{#
+Returns the file path of the colocated asset.
+When Zola uses `resize_image` it looks relative to the `content` folder.
+This means you have to reference the full page asset colocation path.
+
+The get_url parameter specifies whether you want the URL or the file path.
+#}
+{%- macro colocated_asset(path, get_url=false) -%}
+{%- if get_url -%}
+    {{ page.path ~ path }}
+{%- else -%}
+    {%- set page_url_components = page.relative_path | default(value=section.relative_path) | split(pat='/') -%}
+    {%- set page_base = page_url_components | slice(end=page_url_components | length - 1) | join(sep='/') -%}
+    {{ page_base ~ '/' ~ path }}
+{%- endif -%}
 {%- endmacro colocated_asset -%}

templates/page.html

@@ -13,6 +13,11 @@
 <meta property="og:description" content="{{ config.description }}" />
 {% endif %}
 
+{% if page.extra.use_asciinema %}
+<script id="asciinema-player" defer type="text/javascript" src="{{ get_url(path='js/asciinema-player.min.js', cachebust=true) | safe }}"></script>
+<link type="text/css" rel="stylesheet" href="{{ get_url(path='css/asciinema-player.css', cachebust=true) | safe }}">
+{% endif %}
+
 {% endblock pagemeta %}
 
 {% block content %}
@@ -32,7 +37,7 @@
 
 {{ page.content | safe }}
 
-{% if config.extra.debug and config.mode == "Serve" %}
+{% if config.extra.debug %}
     <pre><code>{{ __tera_context | escape | safe }}</code></pre>
 {% endif %}
 

templates/shortcodes/asciinema.html

@@ -0,0 +1,7 @@
+{%- import "macros/asciinema.html" as asciinema -%}
+
+{{ asciinema::asciinema(
+    path=path,
+    colocated=colocated | default(value=false),
+    preload=preload | default(value=false)
+) }}