Add basic responsive image support

Author: kazk

.gitignore

@@ -2,3 +2,5 @@ node_modules/
 public/
 # Generated by PostCSS
 static/styles.css
+# Generated by resize_image function
+static/processed_images/

README.md

@@ -47,6 +47,7 @@ Zola's [shortcodes] allow easily inject HTML in Markdown and reduce repetition.
 - `airtable(id: string, color?: string = "gray")` [embeds Airtable base][airtable-embed] with `id` with optional `color` for `backgroundColor`.
 - `container(type: note|tip|info|warning|danger, title?: string)` wraps `body` in a styled container `<div>` with icon, similar to [gridsome-remark-container]. `title` defaults to `type`.
 - `details(summary: string)` wraps `body` in `<details>` with `<summary>`.
+- `figure(src: string, alt?: string, themed?: bool = false)` produces centered responsive image inside `<figure>` with `alt` in `<figcaption>` if provided. `src` is a co-located asset and relative to the page or section. If `themed` is true, `light`/`dark` image variants are used. `src` is a file name without `-light`/`-dark` suffix. For example, `figure(src='foo.png', themed=true)` requires `foo-light.png` and `foo-dark.png`.
 
 ## TODO
 

content/2018/2018-04-16_next-gen-code-execution-engine/index.md

@@ -13,7 +13,7 @@ Along with this new release, we are also releasing a number of updates that come
 
 ### New Languages
 
-{{ themed_figure(src="new-languages.png", alt="PowerShell, Fortran, Julia, and NASM are now supported") }}
+{{ figure(src="new-languages.png", alt="PowerShell, Fortran, Julia, and NASM are now supported", themed=true) }}
 
 We now support [**PowerShell**](https://en.wikipedia.org/wiki/PowerShell), [**Fortran**](https://en.wikipedia.org/wiki/Fortran), [**Julia**](https://en.wikipedia.org/wiki/Julia_(programming_language)) & [**NASM**](https://en.wikipedia.org/wiki/Netwide_Assembler)**!** These languages are in beta and as of press time don’t have any/many kata available yet. If you have experience working with any of these, the community could use your help translating existing content — which happens to be a pretty good way to earn some honor in the process.
 

templates/macros.html

@@ -108,3 +108,29 @@ <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-tgray-300"><a h
     <svg class="w-6 h-6 hidden dark:block text-gray-500 dark:text-tgray-600 dark:hover:text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
 </button>
 {% endmacro %}
+
+{% macro img_srcset(context, src, alt, class) %}
+  {# `src` is relative to the page/section, find relative path from content/ for image functions #}
+  {% set_global path = "" %}
+  {% for asset in context.assets %}
+      {% if asset | split(pat='/') | last == src %}
+          {% set_global path = asset %}
+          {% break %}
+      {% endif %}
+  {% endfor %}
+  {# resize wide images for smaller screens #}
+  {% set_global srcset = [] %}
+  {% if path != "" %}
+      {% set meta = get_image_metadata(path=path) %}
+      {% for w in [480, 640, 768, 1024, 1280, 1536] %}
+          {% if w < meta.width %}
+              {% set resized = resize_image(path=path, op='fit_width', width=w) %}
+              {% set size = w | as_str %}
+              {% set_global srcset = srcset | concat(with=resized ~ ' ' ~ size ~ 'w') %}
+          {% endif %}
+      {% endfor %}
+  {% endif %}
+  {% set_global srcset = srcset | join(sep=', ') | json_encode() %}
+
+  <img src="{{ src }}" srcset={{ srcset | safe }}{% if class %} class="{{ class }}"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}>
+{% endmacro %}

templates/shortcodes/figure.html

@@ -1,6 +1,31 @@
+{% import "macros.html" as macros %}
+
 <figure class="w-full">
-  <img class="mx-auto" src="{{ src }}"{% if alt %} alt="{{ alt }}"{% endif %}>
-  {% if alt %}
-  <figcaption class="text-center">{{ alt }}</figcaption>
-  {% endif %}
+{% if themed %} {# use light/dark variant #}
+    {% set ext = src | split(pat='.') | last %}
+    {% set ext = '.' ~ ext %}
+    {% set base_src = src | trim_end_matches(pat=ext) %}
+    {% set light = '-light' ~ ext %}
+    {% set dark = '-dark' ~ ext %}
+    {% set light_src = base_src ~ light %}
+    {% set dark_src = base_src ~ dark %}
+
+    {% if page %}
+        {{ macros::img_srcset(src=light_src, context=page, class="mx-auto block dark:hidden", alt=alt | default(value="")) }}
+        {{ macros::img_srcset(src=dark_src, context=page, class="mx-auto hidden dark:block", alt=alt | default(value="")) }}
+    {% else %}
+        {{ macros::img_srcset(src=light_src, context=section, class="mx-auto block dark:hidden", alt=alt | default(value="")) }}
+        {{ macros::img_srcset(src=dark_src, context=section, class="mx-auto hidden dark:block", alt=alt | default(value="")) }}
+    {% endif %}
+{% else %}
+    {% if page %}
+        {{ macros::img_srcset(src=src, context=page, class="mx-auto", alt=alt | default(value="")) }}
+    {% else %}
+        {{ macros::img_srcset(src=src, context=section, class="mx-auto", alt=alt | default(value="")) }}
+    {% endif %}
+{% endif %}
+
+{% if alt %}
+    <figcaption class="text-center">{{ alt }}</figcaption>
+{% endif %}
 </figure>