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:
40
index.html
40
index.html
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user