Relative paths for Cordova

I’ve been using Jekyll + Cordova to make simple android apps for personal use (for stuff like accessing my recipes offline). Spent a lot of time looking at alternatives because trying to smash a recipe site into the blog format is… bleh. Anyway, I picked Zola because it was the only static generator that clearly allowed for the use of taxonomies for arbitrary content (and the documentation is great!).

Cordova requires all URL paths to be relative, but in the sense that the URL is relative to the current page—you need to prepend URLs with ../ (unless you’re at the root). Each link to any other item needs to be of that type (including things like links to CSS).

For Jekyll, I found a snippet for liquid templates (can’t remember where I got the snippet from), that accomplished this… I just can’t figure out how to do the same in Zola + Tera.

Here’s the snippet:

{% capture my_lvl %}
  {{ page.url | split:'/' | size }}
{% endcapture %}
{% capture site_root %}
  {% for i in (3..my_lvl) %}../{% endfor %}
{% endcapture %}

I’m not much of a coder, but I managed to get this far with a macro:

{% macro relative() %}
  {% if page %}
    {% set lvl = page.permalink | split(pat="/") | length %}
  {% endif %}
  {% if section %}
    {% set lvl = section.permalink | split(pat="/") | length %}
 {% endif %}
{% endmacro relative %}

Which gets me to the first part, but I’m fairly certain that the next bit should be a function and not a macro, which are done with rust… which, is a bit too advanced for me (as is making a real android app).

Any help or guidance would be super welcome.

You probably just want to have that in your base template:

  {% if page %}
    {% set lvl = page.permalink | split(pat="/") | length %}
  {% endif %}
  {% if section %}
    {% set lvl = section.permalink | split(pat="/") | length %}
 {% endif %}

Macros are isolated (think pure functions)

Ah, okay. This is helpful.

Now to figure out how to make every page’s links relative to the page. With Jekyll, you end up needing to put that snippet on every page, which may end up the case here.

If you put it on the base template and extends from it for the rest of the templates, you only need to put it in one spot