1
Fork 0

Tweak layouts slightly
All checks were successful
/ build (push) Successful in 1m21s

This commit is contained in:
Jake Howard 2024-06-09 15:01:51 +01:00
parent 0d9607b7c8
commit 9f929c8721
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 61 additions and 38 deletions

View file

@ -11,30 +11,51 @@ addons:
- "slidev-addon-qrcode" - "slidev-addon-qrcode"
--- ---
# Wagtail & Caching # <logos-wagtail class="fill-white" /> + Caching = ❤️
### Jake Howard{style="color: #e85537;" } ## Jake Howard{.mt-5}
<ul class="list-none! text-sm [&>li]:m-0! mt-1 uppercase"> ### Wagtail Space NL 2024{.mt-5}
<li><em>Senior Systems Engineer</em> @ Torchbox <mdi-fire class="fill-white"/></li>
<li><em>Core Team</em>, <em>Security Team</em> & <em>Performance Working Group</em> @ Wagtail <logos-wagtail class="fill-white"/></li> <!--
- Here to talk about Caching with Wagtail
- Dramatically improve the performance of your site
- Sometimes, for very little effort
-->
---
layout: full
---
# `$ whoami`
<ul class="list-none! [&>li]:m-0! text-2xl mt-10">
<li><mdi-fire class="fill-white"/> Senior Systems Engineer @ Torchbox</li>
<li><logos-wagtail class="fill-white"/> Core, Security & Performance teams @ Wagtail</li>
<li><mdi-server-plus class="fill-white" /> I'm an avid self-hoster</li>
<li><mdi-robot-excited class="fill-white" /> I help students build robots in my "spare" time <small>(https://srobo.org)</small></li>
</ul> </ul>
<ul class="list-none! text-xs [&>li]:m-0! mt-3 font-light"> <ul class="list-none! text-sm [&>li]:m-0! mt-10 text-xl">
<li><mdi-earth /> theorangeone.net</li> <li><mdi-earth /> theorangeone.net</li>
<li><mdi-github /> @RealOrangeOne</li> <li><mdi-github /> @RealOrangeOne</li>
<li><mdi-twitter /> @RealOrangeOne</li> <li><mdi-twitter /> @RealOrangeOne</li>
<li><mdi-mastodon /> @jake@theorangeone.net</li> <li><mdi-mastodon /> @jake@theorangeone.net</li>
</ul> </ul>
<div class="absolute right-1/2 bottom-4 translate-x-1/2"> <!--
<QRCode - Hi
:width="110" - I'm Jake
:height="110" - Senior Systems Engineer at Torchbox
data="https://0rng.one/ws2024" - I'm also on the security team, performance team, and as of 2 weeks ago the core team for Wagtail
:dotsOptions="{ color: 'white' }" - I exist in many places on the internet
/> -->
</div>
<style>
.slidev-layout {
background-color: #e85537;
}
</style>
--- ---
layout: fact layout: fact
@ -43,7 +64,7 @@ layout: fact
# Disclaimer{style="color: #fd5765;" } # Disclaimer{style="color: #fd5765;" }
--- ---
layout: cover layout: section
--- ---
# What _is_ caching? # What _is_ caching?
@ -52,7 +73,6 @@ layout: cover
layout: center layout: center
--- ---
# Scale # Scale
<style> <style>
@ -76,7 +96,7 @@ h1 {
</style> </style>
--- ---
layout: cover layout: section
--- ---
# <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em> # <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em>
@ -147,7 +167,8 @@ layout: cover
background: /website-homepage.png background: /website-homepage.png
--- ---
# An example ## Example:
# My website
--- ---
layout: image layout: image
@ -267,6 +288,8 @@ image: /website-search.png
</v-click> </v-click>
<br />
<v-click> <v-click>
```python ```python
@ -382,27 +405,19 @@ layout: image
image: https://www.cloudflare.com/network-maps/cloudflare-pops-2O04nulSdNrRpJR9fs9OKv.svg 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 layout: cover
background: /wagtail-homepage.png background: /wagtail-homepage.png
--- ---
# An example ## Example
# `wagtail.org`
<style>
code {
background-color: transparent !important;
}
</style>
--- ---
layout: image layout: image
@ -470,7 +485,7 @@ flowchart LR
``` ```
--- ---
layout: fact layout: section
--- ---
# Content is cached! # Content is cached!
@ -527,7 +542,7 @@ flowchart LR
U--->CDN U--->CDN
CDN-->C CDN-->C
C-->CDN C-->CDN
C-..->W C--->W
W-.->|Frontend Cache Invalidation|CDN W-.->|Frontend Cache Invalidation|CDN
``` ```

View file

@ -1,3 +1,11 @@
.slidev-layout { :root {
background: #2e1f5e --slidev-code-padding: 1rem;
/* 3px larger than defaults */
--slidev-code-font-size: 15px;
--slidev-code-line-height: 21px;
}
.slidev-layout {
background-color: #2e1f5e
} }