Add template caching for listing components

pyproject.toml

@@ -68,6 +68,8 @@ exclude = '''
   | referrallink_snippet_link\.html
   | onlineaccount_snippet_link\.html
   | 500\.html
+  | content-details\.html
+  | listing-item\.html
 )
 '''
 

website/common/templates/common/content-details.html

@@ -1,35 +1,36 @@
-{% load wagtailcore_tags humanize_tags %}
+{% load wagtailcore_tags humanize_tags cache util_tags %}
 
-<div class="content-details field is-grouped">
-
-  {% if page.date %}
-    <span class="icon-text">
-      <span class="icon">
-        <i class="far fa-lg fa-calendar-alt"></i>
+{% cache 600|jitter:60 "content-details" page.id request.is_preview %}
+  <div class="content-details field is-grouped">
+    {% if page.date %}
+      <span class="icon-text">
+        <span class="icon">
+          <i class="far fa-lg fa-calendar-alt"></i>
+        </span>
+        <span>{{ page.date|date:"Y-m-d" }}</span>
       </span>
-      <span>{{ page.date|date:"Y-m-d" }}</span>
-    </span>
-  {% endif %}
+    {% endif %}
 
-  {% if page.show_reading_time %}
-    <div class="icon-text" {% if page.word_count %}title="{{ page.word_count }} words"{% endif %}>
-      <span class="icon">
-        <i class="far fa-lg fa-clock"></i>
-      </span>
-      <span>{{ page.reading_time|naturaldelta }}</span>
-    </div>
-  {% endif %}
+    {% if page.show_reading_time %}
+      <div class="icon-text" {% if page.word_count %}title="{{ page.word_count }} words"{% endif %}>
+        <span class="icon">
+          <i class="far fa-lg fa-clock"></i>
+        </span>
+        <span>{{ page.reading_time|naturaldelta }}</span>
+      </div>
+    {% endif %}
 
-  {% if page.tags.all %}
-    <div class="icon-text is-family-code">
-      <span class="icon">
-        <a href="{{ page.tag_list_page_url }}" title="View all tags">
-          <i class="fas fa-lg fa-tags"></i>
-        </a>
-      </span>
-      {% for tag in page.tags.all %}
-        <span><a title="{{ tag.name }}" href="{% pageurl tag %}">#{{ tag.slug }}</a></span>
-      {% endfor %}
-    </div>
-  {% endif %}
-</div>
+    {% if page.tags.all %}
+      <div class="icon-text is-family-code">
+        <span class="icon">
+          <a href="{{ page.tag_list_page_url }}" title="View all tags">
+            <i class="fas fa-lg fa-tags"></i>
+          </a>
+        </span>
+        {% for tag in page.tags.all %}
+          <span><a title="{{ tag.name }}" href="{% pageurl tag %}">#{{ tag.slug }}</a></span>
+        {% endfor %}
+      </div>
+    {% endif %}
+  </div>
+{% endcache %}

website/common/templates/common/listing-item.html

@@ -1,4 +1,4 @@
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags cache util_tags %}
 
 <article class="media listing-item">
   <div class="columns">
@@ -13,7 +13,9 @@
       <div>
         <h2 class="title is-3"><a href="{% pageurl page %}">{{ page.title }}</a></h2>
         {% include "common/content-details.html" %}
-        <p>{{ page.summary }}</p>
+        {% cache 900|jitter:60 "summary" page.id request.is_preview %}
+          <p>{{ page.summary }}</p>
+        {% endcache %}
       </div>
     </div>
   </div>

website/common/templatetags/util_tags.py

@@ -1,3 +1,5 @@
+import random
+
 from django.template import Library
 from django.utils.encoding import force_str
 from wagtail.models import Page
@@ -18,6 +20,11 @@ def pagefullurl(context: dict, page: Page) -> str:
     return page.get_full_url(context["request"])
 
 
+@register.filter()
+def jitter(original: float, jitter: float) -> float:
+    return random.uniform(original + jitter, original - jitter)
+
+
 @register.filter()
 def extract_text(html: str | RichText) -> str:
     return utils.extract_text(force_str(html))