Slidev est un logiciel de création de diapositive de présentation.

  • Il utilise le markdown pour générer les diapositives.
  • On peut changer de thème.
  • On peut partager sa caméra directement dans les diapositives.
  • On peut ajouter des extensions pour rendre les présentations plus vivantes.

Ressources

Génération de l’image Docker

  • Pour architecture amd64: docker build --network host --platform "linux/amd64" --build-arg ARCH="playwright" -f Dockerfile.slidev -t "slidev-builder:latest" .

  • Pour architecture arm64: docker build --network host --platform "linux/arm64" --build-arg ARCH="arm64v8" -f Dockerfile.slidev -t "slidev-builder:latest" .

Le Dockerfile:

ARG ARCH=playwright
# ── Images de base selon l'architecture ──
FROM mcr.microsoft.com/playwright:v1.49.1-noble AS playwright
FROM arm64v8/node:22-slim AS arm64v8
# ── Image finale ──
FROM ${ARCH} AS base
LABEL maintainer="Mathieu Limonier"
LABEL description="Slidev builder image with preinstalled themes"
USER root
# ── Installer les dépendances système nécessaires ──
RUN apt-get update && apt-get install -y \
    ca-certificates \
    fonts-liberation \
    git \
    && rm -rf /var/lib/apt/lists/*
# ── Pour ARM64 uniquement : installer Chromium système ──
RUN if [ "$(uname -m)" = "aarch64" ]; then \
      apt-get update && apt-get install -y chromium \
      && rm -rf /var/lib/apt/lists/*; \
    fi
# ── Configuration Playwright ──
ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=0
# ── Créer les dossiers et installer Slidev + thèmes ──
RUN mkdir -p /builder/project /ms-playwright \
    && cd /builder \
    && npm init -y \
    && npm install --save \
        @slidev/cli \
        @slidev/theme-default \
        @slidev/theme-seriph \
        @slidev/theme-bricks \
        playwright-chromium
# ── Installer les navigateurs Playwright (sauf sur ARM64 où on utilise Chromium système) ──
RUN if [ "$(uname -m)" != "aarch64" ]; then \
      cd /builder && npx playwright install chromium --with-deps; \
    fi
# ── Fixer les permissions ──
# Note: l'image playwright:noble utilise "pwuser", arm64v8/node utilise "node"
RUN RUNTIME_USER=$(getent passwd 1000 | cut -d: -f1 || echo "root") \
    && chmod -R 755 /ms-playwright /builder \
    && chown -R "${RUNTIME_USER}:${RUNTIME_USER}" /builder /ms-playwright \
    && npm cache clean --force
ENV PATH="/builder/node_modules/.bin:${PATH}"
# ── Sur ARM64, configurer pour utiliser Chromium système ──
ENV PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium
WORKDIR /builder/project
# Utiliser l'UID 1000 directement pour être compatible avec les deux images de base
USER 1000
ENTRYPOINT ["slidev"]

Shortcode Hugo

Pour bien intégrer Slidev sur mon site static Hugo, j’ai créé un shortcode qui me permettra plus facilement d’utiliser et d’intégrer Slidev.

Ce fichier est à copier dans le dossier monSite/layouts/shortcodes/

{{- /*
Renders an embedded Slidev presentation.

@param {string} name The name of the slides folder in /static/presentations/. Required.
@param {string} [title] Title displayed above the iframe. Optional.

@returns {template.HTML}

@example {{< slidev name="ma-presentation" >}}
@example {{< slidev name="ma-presentation" title="Introduction" >}}
@example {{< slidev name="ma-presentation" title="Introduction" preview="true" >}}
*/ -}}

{{- $name := .Get "name" -}}
{{- $title := .Get "title" | default "" -}}
{{- $preview := true -}}

{{- /* Get arguments. */}}
{{- if in (slice "true" true 1) ($.Get "preview") }}
  {{- $preview = true }}
{{- else if in (slice "false" false 0) ($.Get "preview") }}
  {{- $preview = false }}
{{- end }}

{{- /* Construction de l'URL avec paramètres */ -}}
{{- $url := printf "/presentations/%s/" $name -}}
{{- $params := slice -}}

{{- if gt (len $params) 0 -}}
  {{- $url = printf "%s?%s" $url (delimit $params "&") -}}
{{- end -}}

<div class="slidev-embed" style="margin: 2rem 0;">
  {{- if $title -}}
  <h3>{{ $title }}</h3>
  {{- end -}}
  {{- if $preview -}}
    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
      <iframe 
        src="{{ $url }}"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 8px;"
        allowfullscreen
        loading="lazy">
      </iframe>
    </div>
  {{- end -}}
  <p style="margin-top: 0.5rem; font-size: 0.9rem; text-align: left;">
    <a href="/presentations/{{ $name }}/" target="_blank">Ouvrir {{ $name }} dans une autre fenêtre.</a>
  </p>
</div>