style: white theme, OVHcloud blue strip, tool logos, OVHcloud logo on slides 1–2

- Switch to white.css + github.css highlight (better for projection) - Add 6px OVHcloud blue (#00A9FF) border-top strip on every slide - Add tool logos (Terraform/Ansible/Puppet) injected via JS on tool sections - OVHcloud logo on title slide + speaker intro slide - Darken tool text colors for white-bg readability - Fix subtitle/meta/email/filename colors for light background Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-04-14 00:41:28 +02:00
parent 1558089d85
commit 16eb8cf05b
1 changed files with 65 additions and 28 deletions
--- a/index.html
+++ b/index.html
@@ -8,20 +8,22 @@
  <!-- 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/moon.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css">

  <!-- Highlight.js for code blocks -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/monokai.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/plugin/highlight/github.css">

  <style>
    :root {
-      --puppet-color: #FFAE1A;
-      --ansible-color: #EE0000;
+      --puppet-color: #A06010;
+      --ansible-color: #CC0000;
      --terraform-color: #7B42BC;
+      --strip-color: #00A9FF;
    }

    .reveal .slides section {
      text-align: left;
+      border-top: 6px solid var(--strip-color);
    }

    .reveal h1, .reveal h2 {
@@ -36,8 +38,9 @@

    .title-slide { text-align: center !important; }
    .title-slide h1 { text-align: center; font-size: 2em; margin-bottom: 0.2em; }
-    .title-slide .subtitle { font-size: 1em; color: #aaa; }
-    .title-slide .meta { font-size: 0.7em; color: #888; margin-top: 1em; }
+    .title-slide .subtitle { font-size: 1em; color: #444; }
+    .title-slide .meta { font-size: 0.7em; color: #555; margin-top: 1em; }
+    .title-slide .meta a { color: var(--strip-color); }

    .puppet-col  { color: var(--puppet-color); }
    .ansible-col { color: var(--ansible-color); }
@@ -46,9 +49,27 @@
    .filename {
      font-family: monospace;
      font-size: 0.65em;
-      color: #888;
+      color: #555;
      margin-bottom: 0.2em;
    }
+
+    .slide-logo {
+      position: absolute;
+      bottom: 0.6em;
+      right: 0.8em;
+      width: 40px;
+      height: 40px;
+      opacity: 0.8;
+    }
+
+    .ovh-logo {
+      height: 36px;
+      width: auto;
+      margin-top: 1.2em;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
  </style>
 </head>
 <body>
@@ -60,13 +81,15 @@
    <h1>⚙️ Configuration as Code</h1>
    <p class="subtitle">Puppet · Ansible · Terraform<br>— What's the difference and when to use what? —</p>
    <p class="meta">FinistDevs · 2026</p>
+    <img src="https://cdn.simpleicons.org/ovh/00A9FF" alt="OVHcloud" class="ovh-logo">
  </section>

  <!-- ─── SLIDE 2 : Speaker intro ────────────────────────────────── -->
  <section>
    <h2>Arnaud Prémel-Cabic</h2>
    <p>Tech Lead @ OVHCloud</p>
-    <p style="color:#888; font-size:0.75em;">arnaud.premel-cabic@ovhcloud.com</p>
+    <p style="color:#555; font-size:0.75em;">arnaud.premel-cabic@ovhcloud.com</p>
+    <img src="https://cdn.simpleicons.org/ovh/00A9FF" alt="OVHcloud" style="height:32px; width:auto; margin-top:1em;">
  </section>

  <!-- ─── SLIDE 3 ──────────────────────────────────────────────────── -->
@@ -118,7 +141,7 @@
  <section>
    <h2>Configuration as Code</h2>
    <p>Managing infrastructure through machine-readable files, stored in version control.</p>
-    <p style="margin-top:0.8em; color:#aaa;">Reproducible &nbsp;·&nbsp; Versionable &nbsp;·&nbsp; Auditable</p>
+    <p style="margin-top:0.8em; color:#666;">Reproducible &nbsp;·&nbsp; Versionable &nbsp;·&nbsp; Auditable</p>
  </section>

  <!-- ─── SLIDE 11 ──────────────────────────────────────────────────── -->
@@ -128,20 +151,20 @@
  </section>

  <!-- ─── SLIDE 12 : Terraform intro ──────────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <h2>🏗️ <span class="tf-col">Terraform</span></h2>
    <p>Start here. Before you configure a server, you need to have one.</p>
  </section>

  <!-- ─── SLIDE 13 : Terraform concepts ───────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <h2>HCL: HashiCorp Configuration Language.</h2>
    <p>Declarative, human-readable — and pure JSON works too.<br>
    <code>terraform plan</code> previews &nbsp;·&nbsp; <code>terraform apply</code> creates &nbsp;·&nbsp; <code>terraform destroy</code> removes.</p>
  </section>

  <!-- ─── SLIDE 14 : Terraform state ──────────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <h2>Terraform remembers what it built.</h2>
    <p>The <code>.tfstate</code> file maps code to real-world resources. Store it remotely.<br>
    Depending on what you manage, it can contain plaintext sensitive values — credentials, tokens, secrets.<br>
@@ -149,7 +172,7 @@
  </section>

  <!-- ─── SLIDE 15 : Terraform providers ──────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <h2>One tool. Every API.</h2>
    <p>1000+ providers: AWS, GCP, Azure, Cloudflare, GitHub, Kubernetes…<br>
    Not just cloud — manage GitHub teams, Datadog monitors, PagerDuty schedules, DNS records.<br>
@@ -157,7 +180,7 @@
  </section>

  <!-- ─── SLIDE 16 : Terraform code ───────────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <p class="filename"># main.tf</p>
    <pre><code class="language-hcl" data-trim>
 terraform {
@@ -181,7 +204,7 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 17 : OpenTofu ──────────────────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <h2>In 2023, HashiCorp changed Terraform's license.</h2>
    <p>BSL instead of MPL — no longer truly open-source.<br>
    The community responded: <strong>OpenTofu</strong>, by the OpenTF Foundation, is the open-source fork.<br>
@@ -189,7 +212,7 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 18 : Terraform platforms ──────────────────────────── -->
-  <section>
+  <section class="s-tf">
    <h2>Terraform at scale needs a platform.</h2>
    <p>
      <strong>Terraform Enterprise / HCP Terraform</strong> — HashiCorp's commercial offering: remote state, RBAC, audit logs<br>
@@ -200,13 +223,13 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 19 : Ansible intro ─────────────────────────────────── -->
-  <section>
+  <section class="s-ansible">
    <h2>⚡ <span class="ansible-col">Ansible</span></h2>
    <p>Your servers are provisioned. Now make them do something.</p>
  </section>

  <!-- ─── SLIDE 20 : Ansible concepts ──────────────────────────────── -->
-  <section>
+  <section class="s-ansible">
    <h2>Push, not pull. SSH, not agents.</h2>
    <p>YAML playbooks run tasks in order, across any number of hosts.<br>
    No daemon. No certificate authority. Just Python + SSH.<br>
@@ -217,7 +240,7 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 21 : Ansible code ──────────────────────────────────── -->
-  <section>
+  <section class="s-ansible">
    <p class="filename"># playbook/webserver.yml</p>
    <pre><code class="language-yaml" data-trim>
 - name: Configure web server
@@ -245,14 +268,14 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 22 : Ansible operations ───────────────────────────── -->
-  <section>
+  <section class="s-ansible">
    <h2>Not just configuration. Operations.</h2>
    <p>Patch 200 servers tonight. Roll out a kernel upgrade with a canary strategy. Run a compliance audit across your whole fleet.<br>
    <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 ────────────────────────────────── -->
-  <section>
+  <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>
    Don't write a playbook to install Docker from scratch. Someone already did.<br>
@@ -260,7 +283,7 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 23 : Ansible platforms ────────────────────────────── -->
-  <section>
+  <section class="s-ansible">
    <h2>Ansible at scale: open-source vs enterprise.</h2>
    <p>
      <strong>AWX</strong> — open-source web UI, API, and scheduler for Ansible<br>
@@ -271,20 +294,20 @@ output "public_ip" {
  </section>

  <!-- ─── SLIDE 25 : Puppet intro ──────────────────────────────────── -->
-  <section>
+  <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 ──────────────────────────────── -->
-  <section>
+  <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 ───────────────────────────────────── -->
-  <section>
+  <section class="s-puppet">
    <p class="filename"># manifests/webserver.pp</p>
    <pre><code class="language-puppet" data-trim>
 class webserver {
@@ -307,7 +330,7 @@ class webserver {
  </section>

  <!-- ─── SLIDE 28 : Puppet drift detection ───────────────────────── -->
-  <section>
+  <section class="s-puppet">
    <h2>Someone SSH'd in and changed something.</h2>
    <p>Puppet noticed. Puppet fixed it.<br>
    <em>Continuous compliance — not just at deploy time. Every. 30. Minutes.</em><br>
@@ -318,7 +341,7 @@ class webserver {
  </section>

  <!-- ─── SLIDE 29 : Puppet platforms ─────────────────────────────── -->
-  <section>
+  <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>
    Best suited for enterprises with hundreds or thousands of long-lived servers.<br>
@@ -327,7 +350,7 @@ class webserver {
  </section>

  <!-- ─── SLIDE 30 : Puppet community ─────────────────────────────── -->
-  <section>
+  <section class="s-puppet">
    <h2>The ecosystem outlives the company.</h2>
    <p><strong>Vox Pupuli</strong> — 100+ open-source Puppet modules, community-maintained.<br>
    <strong>OpenVox</strong> — an emerging open-source fork of the Puppet core.<br>
@@ -371,6 +394,20 @@ class webserver {
 <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>
+  const toolLogos = {
+    's-tf':      'https://cdn.simpleicons.org/terraform',
+    's-ansible': 'https://cdn.simpleicons.org/ansible',
+    's-puppet':  'https://cdn.simpleicons.org/puppet/C17F00'
+  };
+  Object.entries(toolLogos).forEach(([cls, src]) => {
+    document.querySelectorAll('section.' + cls).forEach(s => {
+      const img = document.createElement('img');
+      img.src = src;
+      img.className = 'slide-logo';
+      s.appendChild(img);
+    });
+  });
+
  Reveal.initialize({
    hash: true,
    slideNumber: 'c/t',