Add slides for fragment caching

slides.md

@@ -3,6 +3,7 @@ title: Wagtail & Caching
 class: text-center
 highlighter: shiki
 transition: slide-left
+monaco: false
 mdc: true
 themeConfig:
   primary: '#2e1f5e'
@@ -40,17 +41,275 @@ layout: cover
 layout: center
 ---
 
-# Importance of caching
 
----
+# Scale
-layout: cover
-background: https://cdn.jsdelivr.net/gh/wagtail/wagtail@main/.github/wagtail-screenshot-with-browser.png
----
 
-# Wagtail is a Content Management System
+<style>
+@keyframes grow {
+  from {
+
+  }
+
+  to {
+    font-size: 30rem;
+  }
+}
+
+h1 {
+  animation-name: grow;
+  animation-duration: 30s;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+</style>
 
 ---
 layout: cover
 ---
 
 # <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em>
+
+---
+layout: section
+---
+
+## 1:
+# Template Fragment Caching
+
+---
+layout: image
+image: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png
+backgroundSize: cover
+---
+
+<style>
+.slidev-layout {
+  background-position: top center !important;
+}
+</style>
+
+---
+layout: none
+---
+
+```html
+<div class="one-half--medium one-third--large">
+  <div class="card card--link">
+    <a href="/developers/springload/made-wagtail/" class="project-image">
+      <img src="https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.52.2e16d0ba.fill-680x564.png" alt="" title="">
+  </a>
+  <div class="project__links">
+    <a class="project__info" href="/developers/springload/made-wagtail/">
+      <span class="u-sr-only">Project info</span>
+      <svg class="i i--grey i--hover">
+        <use xlink:href="#i-info"></use>
+      </svg>
+    </a>
+    <a class="project__visit" href="http://madewithwagtail.org/" title="Project link" data-analytics="Project|Link click">
+      <span class="u-sr-only">Project link</span>
+      <svg class="i i--grey i--hover">
+        <use xlink:href="#i-visit"></use>
+      </svg>
+    </a>
+  </div>
+</div>
+<h4 class="project-title">
+  Made with Wagtail
+</h4>
+<p class="project-author">
+  <a href="/developers/springload/" title="View the company page of Springload">
+    Springload
+  </a>
+</p>
+```
+
+<style>
+.slidev-page, .slidev-code-wrapper, .slidev-code {
+  height: 100%;
+}
+</style>
+
+
+---
+layout: cover
+background: /website-homepage.png
+---
+
+# An example
+
+---
+layout: image
+image: /website-posts.png
+---
+
+---
+layout: none
+---
+
+````md magic-move
+```html
+{% load wagtailcore_tags util_tags %}
+
+<article class="media listing-item">
+  <div class="columns">
+    <figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
+      {% if page.list_image_url %}
+        <a href="{% pageurl page %}" class="image" title="{{ page.title }}">
+          <img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
+        </a>
+      {% endif %}
+    </figure>
+    <div class="media-content column">
+      <div>
+        {% if breadcrumbs %}
+          {% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
+        {% endif %}
+        <h2 class="title is-3">
+          <a href="{% pageurl page %}">{{ page.title }}</a>
+        </h2>
+        {% include "common/content-details.html" %}
+        <p>{{ page.summary }}</p>
+      </div>
+    </div>
+  </div>
+</article>
+```
+
+```html {all|1|3,27|4-26|all}
+{% load wagtailcore_tags wagtail_cache util_tags %}
+
+{% wagtailpagecache FRAGMENT_CACHE_TTL "listing-item" breadcrumbs show_listing_images %}
+  <article class="media listing-item">
+    <div class="columns">
+      <figure class="media-left column is-{{ show_listing_images|yesno:'3,1' }} image-column">
+        {% if page.list_image_url %}
+          <a href="{% pageurl page %}" class="image" title="{{ page.title }}">
+            <img src="{{ page.list_image_url }}" alt="{{ page.hero_image_alt }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" />
+          </a>
+        {% endif %}
+      </figure>
+      <div class="media-content column">
+        <div>
+          {% if breadcrumbs %}
+            {% include "common/breadcrumbs.html" with parents=page.get_parent_pages %}
+          {% endif %}
+          <h2 class="title is-3">
+            <a href="{% pageurl page %}">{{ page.title }}</a>
+          </h2>
+          {% include "common/content-details.html" %}
+          <p>{{ page.summary }}</p>
+        </div>
+      </div>
+    </div>
+  </article>
+{% endwagtailpagecache %}
+```
+````
+
+<style>
+.slidev-page, .slidev-code-wrapper, .slidev-code {
+  height: 100%;
+}
+</style>
+
+
+---
+layout: cover
+background: /website-search.png
+---
+
+# Duplication
+
+---
+layout: center
+---
+
+```html {3}
+<section class="container">
+  {% for page in listing_pages %}
+    {% include "common/listing-item.html" %}
+  {% endfor %}
+</section>
+```
+
+<style>
+code {
+  font-size: 1.5rem !important;
+}
+</style>
+
+---
+layout: image
+image: /website-search.png
+---
+
+---
+
+# Cache invalidation
+
+<v-click>
+
+```python
+>>> BlogPostPage.objects.first().cache_key
+```
+
+</v-click>
+
+<v-click>
+
+```python
+@property
+def cache_key(self) -> str:
+    """
+    A generic cache key to identify a page in its current state.
+    Should the page change, so will the key.
+
+    Customizations to the cache key should be made in :attr:`get_cache_key_components`.
+    """
+    ...
+```
+
+</v-click>
+
+<style>
+code {
+  font-size: 1rem !important;
+}
+</style>
+
+---
+layout: center
+---
+
+# What about Django?
+
+```jinja
+{% load cache %}
+{% cache 500 sidebar request.user.username %}
+    .. sidebar for logged in user ..
+{% endcache %}
+```
+<Transform :scale="1.4">
+<v-clicks>
+
+- Current page
+- Current site
+- Preview
+- Cache invalidation
+
+</v-clicks>
+</Transform>
+
+<style>
+code {
+  font-size: 1.5rem !important;
+}
+</style>
+
+---
+layout: section
+---
+
+## 2:
+# Frontend Caching