Add a Jinja filter to get relative paths (#39)

Useful in templates to avoid using absolute paths (`/`) which then don't work if the website is in a subdirectory of the domain. Add the `relative_to` filter directly to our Jinja environments and use it in the documentation to test.
leouieda · Oct 14, 2022 · 93a8fea · 93a8fea
1 parent dab06e0
commit 93a8fea
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/doc/_templates/base.html b/doc/_templates/base.html
@@ -8,7 +8,7 @@
     {% set class = class + " active" %}
     {% set aria = 'aria-current="page"' %}
   {% endif %}
-  <a class="{{ class }}" {{ aria }} href="/{{ site[id].path|replace('index.html', '') }}">{{ name }}</a>
+  <a class="{{ class }}" {{ aria }} href="{{ site[id].path|relative_to(page.path) }}">{{ name }}</a>
 {%- endmacro %}
 
 <head>
@@ -49,11 +49,11 @@
   <meta property="og:site_name" content="{{ config.site_name }}" />
 
   <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="/css/bootstrap-5.1/bootstrap.min.css">
+  <link rel="stylesheet" href="{{ "css/bootstrap-5.1/bootstrap.min.css"|relative_to(page.path) }}">
   <!-- FontAwsome icons -->
-  <link rel="stylesheet" href="/css/fontawesome/css/all.css">
+  <link rel="stylesheet" href="{{ "css/fontawesome/css/all.css"|relative_to(page.path) }}">
   <!-- Main CSS stylesheet -->
-  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="{{ "css/style.css"|relative_to(page.path) }}">
 
   <!-- Plausible analytics for anonymous usage statistics -->
   <script defer data-domain="nene.leouieda.com" src="https://plausible.io/js/plausible.js"></script>
@@ -65,8 +65,8 @@
   <header class="shadow-sm">
     <nav class="navbar navbar-expand-lg navbar-light" aria-labelledby="primary-navigation">
       <div class="container align-middle">
-        <a class="navbar-brand" href="/">
-          <img aria-hidden="true" alt="Project logo" src="/{{ config.logo }}">
+        <a class="navbar-brand" href="{{ "index.html"|relative_to(page.path) }}">
+          <img aria-hidden="true" alt="Project logo" src="{{ config.logo|relative_to(page.path) }}">
           {{ config.site_name }}
         </a>
         <button class="navbar-toggler" type="button"
@@ -121,7 +121,7 @@ <h1>{{ page.title }}</h1>
   </footer>
 
   <!-- Bootstrap bundled Javascript (with their dependencies) -->
-  <script src="/js/bootstrap-5.1/bootstrap.bundle.min.js"
+  <script src="{{ "js/bootstrap-5.1/bootstrap.bundle.min.js"|relative_to(page.path) }}"
     integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
     crossorigin="anonymous"></script>
 

diff --git a/doc/_templates/utils.html b/doc/_templates/utils.html
@@ -1,7 +1,7 @@
 {# Define some macros to automate things #}
 
-{%- macro page_link(id, site) -%}
-{# Create a link to a page with the text being its title #}
-  {%- set page = site[id] -%}
-  <a href="/{{ page.path }}">{{ page.title }}</a>
+{%- macro page_link(id, site, page) -%}
+{# Create a relative link to a page with the text being its title #}
+  {%- set target = site[id] -%}
+  <a href="{{ target.path|relative_to(page.path) }}">{{ target.title }}</a>
 {%- endmacro -%}
diff --git a/doc/manual/index.md b/doc/manual/index.md
@@ -24,5 +24,5 @@ There are also these examples of websites built with Nēnē:
 
 ## Contents
 
-1. {{ page_link("manual/cli", site) }}
-1. {{ page_link("manual/notebooks", site) }}
+1. {{ page_link("manual/cli", site, page) }}
+1. {{ page_link("manual/notebooks", site, page) }}
diff --git a/nene/rendering.py b/nene/rendering.py
@@ -2,6 +2,7 @@
 # Distributed under the terms of the MIT License.
 # SPDX-License-Identifier: MIT
 """Render outputs with Jinja templates."""
+import os
 from pathlib import Path
 
 import jinja2
@@ -10,6 +11,27 @@
 from markdown_it import MarkdownIt
 
 
+def filter_relative_to(path, start):
+    """
+    Return the relative path from 'start' to 'path'.
+
+    Use as a custom Jinja filter.
+
+    Parameters
+    ----------
+    path : str
+        The path that should be converted to relative.
+    start : str
+        The path to which the output is relative.
+
+    Returns
+    -------
+    relative : str
+        Relative path from 'start' to 'path'.
+    """
+    return os.path.relpath(path, start=Path(start).parent)
+
+
 def make_jinja_envs(templates_dir):
     """
     Create the default Jinja environments given the template folder.
@@ -54,6 +76,8 @@ def make_jinja_envs(templates_dir):
             keep_trailing_newline=True,
         ),
     }
+    for kind in envs:
+        envs[kind].filters["relative_to"] = filter_relative_to
     return envs