Add slides for frontend caching

slides.md

@@ -313,3 +313,295 @@ layout: section
 
 ## 2:
 # Frontend Caching
+
+---
+layout: fact
+---
+
+```mermaid
+flowchart LR
+  U[User]
+  CDN{Content<br>Delivery Network}
+  W[(Wagtail)]
+
+  U--->CDN
+  CDN-..->W
+```
+
+---
+layout: fact
+---
+
+```mermaid
+flowchart TD
+  U1[🧑‍💻]
+  U2[🧑‍💻]
+  U3[🧑‍💻]
+  U4[🧑‍💻]
+  U5[🧑‍💻]
+  U6[🧑‍💻]
+  U7[🧑‍💻]
+  U8[🧑‍💻]
+  U9[🧑‍💻]
+  U10[🧑‍💻]
+  U11[🧑‍💻]
+  U12[🧑‍💻]
+  U13[🧑‍💻]
+  CDN{Content<br>Delivery Network}
+  W[(Wagtail)]
+
+  U1--->CDN
+  U2--->CDN
+  U3--->CDN
+  U4--->CDN
+  U5--->CDN
+  U6--->CDN
+  U7--->CDN
+  U8--->CDN
+  U9--->CDN
+  U10--->CDN
+  U11--->CDN
+  U12--->CDN
+  U13--->CDN
+  CDN-...->W
+```
+
+---
+layout: image
+image: https://www.cloudflare.com/network-maps/cloudflare-pops-2O04nulSdNrRpJR9fs9OKv.svg
+---
+
+Source: Cloudflare
+
+<style>
+.slidev-layout {
+  background: white;
+}
+
+p {
+  color: black;
+  position: absolute;
+  bottom: 0;
+  font-size: 0.66rem;
+}
+</style>
+
+---
+layout: cover
+background: /wagtail-homepage.png
+---
+
+# An example
+
+---
+layout: image
+image: /map.jpg
+transition: fade
+---
+
+---
+layout: cover
+background: /map.jpg
+---
+
+# ~XXms
+
+<style>
+h1 {
+  font-size: 4rem;
+}
+</style>
+
+---
+layout: fact
+---
+
+```mermaid
+flowchart LR
+  U[User]
+
+  subgraph Content Delivery Network
+    CDN{Content<br>Delivery Network}
+    C[(Cache)]
+  end
+
+  W[(Wagtail)]
+
+  U---->CDN
+  CDN-.->C
+  C---->W
+  C-.->CDN
+```
+
+---
+layout: fact
+---
+
+```mermaid
+flowchart LR
+  U[User]
+  A[Admin]
+
+  subgraph Content Delivery Network
+    CDN{Content<br>Delivery Network}
+    C[(Cache)]
+  end
+
+  W[(Wagtail)]
+
+  U---->CDN
+  CDN-.->C
+  C---->W
+  C-.->CDN
+
+  A---->CDN
+  CDN---->W
+```
+
+---
+layout: fact
+---
+
+# Content is cached!
+
+```mermaid
+flowchart LR
+  U1[User]
+  U2[User]
+  U3[User]
+
+  subgraph Content Delivery Network
+    CDN{Content<br>Delivery Network}
+    C[(Cache)]
+  end
+
+  W[(Wagtail)]
+
+  U1===>CDN
+  U2===>CDN
+  U3===>CDN
+  CDN==>C
+  C==>CDN
+  C-.....->W
+```
+
+---
+layout: image
+image: /wagtail-homepage-typo.png
+---
+
+---
+layout: section
+---
+
+## Solution:
+# Frontend Cache Invalidation
+### Wagtail secret sauce <logos-wagtail class="fill-white"/>
+
+---
+layout: fact
+---
+
+```mermaid
+flowchart LR
+  U[User]
+
+  subgraph Content Delivery Network
+    CDN{Content<br>Delivery Network}
+    C[(Cache)]
+  end
+
+  W[(Wagtail)]
+
+  U--->CDN
+  CDN-->C
+  C-->CDN
+  C-..->W
+
+  W-.->|Frontend Cache Invalidation|CDN
+```
+
+---
+layout: center
+---
+
+# `settings.py`
+
+### 1.
+
+```python {3}
+INSTALLED_APPS = [
+    ...
+    "wagtail.contrib.frontend_cache"
+]
+```
+
+#### 2.
+
+```python
+WAGTAILFRONTENDCACHE = {
+  'cloudflare': {
+    'BACKEND': 'wagtail.contrib.frontend_cache.backends.CloudflareBackend',
+    'BEARER_TOKEN': os.environ["CF_BEARER_TOKEN"],
+    'ZONEID': os.environ["CF_ZONE_ID"],
+  },
+}
+```
+
+#### 3. ???
+
+#### 4. Profit!
+
+<style>
+code {
+  font-size: 0.9rem !important;
+}
+</style>
+
+---
+layout: fact
+---
+
+```mermaid
+flowchart LR
+  A[Admin]
+
+  subgraph Content Delivery Network
+    CDN{Content<br>Delivery Network}
+    C[(Cache)]
+  end
+
+  W[(Wagtail)]
+
+  A-->|Publish new content to<br><code>/blog/post-1</code>|W
+
+  W-.->|<code>PURGE /blog/post-1</code>|CDN
+
+  CDN-.->C
+```
+
+---
+layout: cover
+background: https://d1nvwtjgmbo5v5.cloudfront.net/media/images/Screen_Shot_2015-05-14_at_09.01.5.2e16d0ba.fill-1200x996.png
+---
+
+# Conclusion
+
+---
+layout: cover
+---
+
+<Transform :scale="1.3">
+
+# Performance means:
+
+
+- Users are happier <mdi-emoticon-happy />
+- Servers are happier <mdi-server-network />
+- The planet is happier <mdi-earth class="text-green" />
+
+</Transform>
+
+---
+layout: end
+---