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"
---
# 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">
<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>
### Wagtail Space NL 2024{.mt-5}
<!--
- 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 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-github /> @RealOrangeOne</li>
<li><mdi-twitter /> @RealOrangeOne</li>
<li><mdi-mastodon /> @jake@theorangeone.net</li>
</ul>
<div class="absolute right-1/2 bottom-4 translate-x-1/2">
<QRCode
:width="110"
:height="110"
data="https://0rng.one/ws2024"
:dotsOptions="{ color: 'white' }"
/>
</div>
<!--
- Hi
- I'm Jake
- Senior Systems Engineer at Torchbox
- I'm also on the security team, performance team, and as of 2 weeks ago the core team for Wagtail
- I exist in many places on the internet
-->
<style>
.slidev-layout {
background-color: #e85537;
}
</style>
---
layout: fact
@ -43,7 +64,7 @@ layout: fact
# Disclaimer{style="color: #fd5765;" }
---
layout: cover
layout: section
---
# What _is_ caching?
@ -52,7 +73,6 @@ layout: cover
layout: center
---
# Scale
<style>
@ -76,7 +96,7 @@ h1 {
</style>
---
layout: cover
layout: section
---
# <logos-wagtail class="fill-white"/> Caching <em>in Wagtail</em>
@ -147,7 +167,8 @@ layout: cover
background: /website-homepage.png
---
# An example
## Example:
# My website
---
layout: image
@ -267,6 +288,8 @@ image: /website-search.png
</v-click>
<br />
<v-click>
```python
@ -382,27 +405,19 @@ 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
## Example
# `wagtail.org`
<style>
code {
background-color: transparent !important;
}
</style>
---
layout: image
@ -470,7 +485,7 @@ flowchart LR
```
---
layout: fact
layout: section
---
# Content is cached!
@ -527,7 +542,7 @@ flowchart LR
U--->CDN
CDN-->C
C-->CDN
C-..->W
C--->W
W-.->|Frontend Cache Invalidation|CDN
```

View file

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