fix: vendor Reveal.js, fix slide numbering, alt text, and README

- Vendor Reveal.js 5.1.0 locally to avoid CDN dependency during talk
- Fix duplicate SLIDE 22 comment — renumber Ansible Galaxy to 23, cascade through 33
- Add alt text to dynamically injected tool logos for accessibility
- Fix README: deployment triggers on master branch, not pages

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-04-14 00:48:07 +02:00
parent 16eb8cf05b
commit 66234803fc
9 changed files with 444 additions and 20 deletions

View File

@@ -5,13 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Configuration as Code — Puppet vs Ansible vs Terraform</title>
<!-- Reveal.js CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css">
<!-- Reveal.js (vendored) -->
<link rel="stylesheet" href="vendor/reveal.js/dist/reset.css">
<link rel="stylesheet" href="vendor/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="vendor/reveal.js/dist/white.css">
<!-- Highlight.js for code blocks -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/github.css">
<link rel="stylesheet" href="vendor/reveal.js/plugin/highlight/github.css">
<style>
:root {
@@ -274,7 +274,7 @@ output "public_ip" {
<em>Ansible is the tool you reach for when you need to do something — once, or every week.</em></p>
</section>
<!-- ─── SLIDE 22 : Ansible Galaxy ────────────────────────────────── -->
<!-- ─── SLIDE 23 : Ansible Galaxy ────────────────────────────────── -->
<section class="s-ansible">
<h2>The community does the heavy lifting.</h2>
<p><strong>Ansible Galaxy</strong> — 10,000+ ready-made roles and collections.<br>
@@ -282,7 +282,7 @@ output "public_ip" {
<em>Just <code>ansible-galaxy install geerlingguy.docker</code>.</em></p>
</section>
<!-- ─── SLIDE 23 : Ansible platforms ────────────────────────────── -->
<!-- ─── SLIDE 24 : Ansible platforms ────────────────────────────── -->
<section class="s-ansible">
<h2>Ansible at scale: open-source vs enterprise.</h2>
<p>
@@ -293,20 +293,20 @@ output "public_ip" {
</p>
</section>
<!-- ─── SLIDE 25 : Puppet intro ─────────────────────────────────── -->
<!-- ─── SLIDE 25 : Puppet intro ─────────────────────────────────── -->
<section class="s-puppet">
<h2>🐾 <span class="puppet-col">Puppet</span></h2>
<p>Your servers are configured. Now keep them that way.</p>
</section>
<!-- ─── SLIDE 26 : Puppet concepts ─────────────────────────────── -->
<!-- ─── SLIDE 26 : Puppet concepts ─────────────────────────────── -->
<section class="s-puppet">
<h2>Pull, not push. Agents, not SSH.</h2>
<p>Every 30 minutes, each puppet-agent polls the Puppet Server, compiles a catalog, and enforces it.<br>
<em>Drift is corrected automatically — without anyone lifting a finger.</em></p>
</section>
<!-- ─── SLIDE 27 : Puppet code ──────────────────────────────────── -->
<!-- ─── SLIDE 27 : Puppet code ──────────────────────────────────── -->
<section class="s-puppet">
<p class="filename"># manifests/webserver.pp</p>
<pre><code class="language-puppet" data-trim>
@@ -329,7 +329,7 @@ class webserver {
</code></pre>
</section>
<!-- ─── SLIDE 28 : Puppet drift detection ──────────────────────── -->
<!-- ─── SLIDE 28 : Puppet drift detection ──────────────────────── -->
<section class="s-puppet">
<h2>Someone SSH'd in and changed something.</h2>
<p>Puppet noticed. Puppet fixed it.<br>
@@ -340,7 +340,7 @@ class webserver {
style="height:180px; margin-top:0.5em; border-radius:6px;">
</section>
<!-- ─── SLIDE 29 : Puppet platforms ────────────────────────────── -->
<!-- ─── SLIDE 29 : Puppet platforms ────────────────────────────── -->
<section class="s-puppet">
<h2>Puppet is for large fleets that can't afford drift.</h2>
<p>Continuous compliance, auditability, and guaranteed state — at scale.<br>
@@ -349,7 +349,7 @@ class webserver {
Puppet Enterprise and Foreman are self-hosted. No managed cloud offering.</em></p>
</section>
<!-- ─── SLIDE 30 : Puppet community ────────────────────────────── -->
<!-- ─── SLIDE 30 : Puppet community ────────────────────────────── -->
<section class="s-puppet">
<h2>The ecosystem outlives the company.</h2>
<p><strong>Vox Pupuli</strong> — 100+ open-source Puppet modules, community-maintained.<br>
@@ -357,7 +357,7 @@ class webserver {
<em>The community is strong, with or without Puppet Inc.</em></p>
</section>
<!-- ─── SLIDE 31 : They're complementary ───────────────────────── -->
<!-- ─── SLIDE 31 : They're complementary ───────────────────────── -->
<section>
<h2>They're not competing. They're complementary.</h2>
<p>Each one solves a different layer of the same problem.</p>
@@ -366,7 +366,7 @@ class webserver {
style="height:200px; margin-top:0.5em; border-radius:6px;">
</section>
<!-- ─── SLIDE 32 : Real-world stack ─────────────────────────────── -->
<!-- ─── SLIDE 32 : Real-world stack ─────────────────────────────── -->
<section>
<h2>A common production setup:</h2>
<ol>
@@ -376,7 +376,7 @@ class webserver {
</ol>
</section>
<!-- ─── SLIDE 33 : Closing ──────────────────────────────────────── -->
<!-- ─── SLIDE 33 : Closing ──────────────────────────────────────── -->
<section class="title-slide">
<h1>Questions?</h1>
<p class="subtitle">Thank you!</p>
@@ -390,19 +390,21 @@ class webserver {
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/notes/notes.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/highlight.js"></script>
<script src="vendor/reveal.js/dist/reveal.js"></script>
<script src="vendor/reveal.js/plugin/notes/notes.js"></script>
<script src="vendor/reveal.js/plugin/highlight/highlight.js"></script>
<script>
const toolLogos = {
's-tf': 'https://cdn.simpleicons.org/terraform',
's-ansible': 'https://cdn.simpleicons.org/ansible',
's-puppet': 'https://cdn.simpleicons.org/puppet/C17F00'
};
const altNames = {'s-tf': 'Terraform', 's-ansible': 'Ansible', 's-puppet': 'Puppet'};
Object.entries(toolLogos).forEach(([cls, src]) => {
document.querySelectorAll('section.' + cls).forEach(s => {
const img = document.createElement('img');
img.src = src;
img.alt = altNames[cls];
img.className = 'slide-logo';
s.appendChild(img);
});