Créer le site des présentations d'Alpinux
Un dossier par présentation en Markdown, converti en diaporama HTML autonome par Marp CLI, et une page d'accueil générée qui les liste toutes. - scripts/build.mjs : build strict (fiche validée, images vérifiées, aucune ressource externe hormis le logo), page d'accueil filtrable, presentations.json et .htaccess pour l'en-tête CORS - theme/alpinux.css : thème commun pour la vidéoprojection, classes titre et demo - slides/_modele : modèle commenté, non publié - slides/pdf-signer : « Lire, remplir et signer ses PDF », avec notes d'orateur - scripts/deploy-presentations.sh et deploy/ : déploiement par webhook Gitea, sur le modèle du wiki et de www Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01M713yNBL8cssBA1Zri5QLT
This commit is contained in:
Cédrix
commit
02cf82447b
18 changed files with 4302 additions and 0 deletions
12
.gitignore
vendored
Normal file
12
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# Dépendances et sortie du build : tout se régénère
|
||||
node_modules/
|
||||
public/
|
||||
.build-*/
|
||||
|
||||
# Exports faits à la main
|
||||
*.pdf
|
||||
|
||||
# Jetons et secrets : jamais versionnés
|
||||
.gitea-token
|
||||
*.secret
|
||||
.env
|
||||
1
.nvmrc
Normal file
1
.nvmrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
24
|
||||
196
CONTRIBUER.md
Normal file
196
CONTRIBUER.md
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
# Proposer une présentation
|
||||
|
||||
Vous présentez un sujet à une réunion d'Alpinux ? Votre diaporama a sa place ici. Il
|
||||
s'écrit dans un simple fichier texte, en Markdown : pas de logiciel de présentation à
|
||||
maîtriser, et le résultat s'affiche dans n'importe quel navigateur.
|
||||
|
||||
Vous n'avez jamais utilisé Git ? Ce n'est pas un obstacle : la [méthode sans rien
|
||||
installer](#la-méthode-sans-rien-installer) se fait entièrement depuis le site de la
|
||||
forge. Et si vous bloquez, demandez de l'aide en réunion ou sur la liste de diffusion —
|
||||
quelqu'un mettra votre fichier en ligne avec vous.
|
||||
|
||||
---
|
||||
|
||||
## En bref
|
||||
|
||||
1. **Copier** le dossier `slides/_modele` sous un nouveau nom.
|
||||
2. **Écrire** vos diapos dans `slides.md`.
|
||||
3. **Prévisualiser** sur votre ordinateur.
|
||||
4. **Ouvrir une pull request** : un mainteneur relit, fusionne, et le site se met à
|
||||
jour tout seul.
|
||||
|
||||
---
|
||||
|
||||
## 1. Copier le modèle
|
||||
|
||||
Chaque présentation vit dans son dossier, sous `slides/`. Le nom du dossier devient
|
||||
l'adresse du diaporama : `slides/pdf-signer/` est publié sur
|
||||
`presentations.alpinux.org/pdf-signer/`.
|
||||
|
||||
Choisissez un nom court, en **minuscules, sans accent ni espace**, avec des tirets :
|
||||
`sauvegardes`, `nextcloud-quotidien`, `kicad-debuter`.
|
||||
|
||||
```bash
|
||||
cp -r slides/_modele slides/mon-sujet
|
||||
```
|
||||
|
||||
Vous obtenez :
|
||||
|
||||
```
|
||||
slides/mon-sujet/
|
||||
├── slides.md votre diaporama
|
||||
└── images/ vos images (supprimez exemple.svg)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Écrire
|
||||
|
||||
Ouvrez `slides/mon-sujet/slides.md` dans un éditeur de texte. Le modèle est commenté :
|
||||
il montre une diapo de titre, une liste, du code, un tableau, une image et une diapo de
|
||||
démonstration.
|
||||
|
||||
### La fiche, en haut du fichier
|
||||
|
||||
Le bloc entre les deux lignes `---` décrit votre présentation. C'est lui qui alimente
|
||||
la page d'accueil du site.
|
||||
|
||||
| Champ | Obligatoire | Ce qu'on y met |
|
||||
|---------------|:-----------:|-------------------------------------------------------------|
|
||||
| `title` | oui | Le titre |
|
||||
| `description` | oui | Une phrase : ce qu'on saura faire en sortant |
|
||||
| `auteur` | oui | Votre nom, ou un pseudonyme |
|
||||
| `date` | oui | La date de la séance, `AAAA-MM-JJ` — par exemple `2026-10-15` |
|
||||
| `niveau` | oui | `debutant`, `intermediaire` ou `confirme` |
|
||||
| `format` | oui | `eclair`, `court` ou `long` |
|
||||
| `tags` | oui | Des mots-clés : `[pdf, bureautique]` |
|
||||
| `wiki` | non | L'adresse de la fiche du wiki, s'il y en a une |
|
||||
| `brouillon` | non | `true` tant que le diaporama n'est pas prêt à être publié |
|
||||
|
||||
Laissez tels quels `marp`, `theme` et `paginate`. Et pensez à **retirer
|
||||
`brouillon: true`** quand vous avez fini : le modèle le contient, et une présentation
|
||||
en brouillon n'est pas publiée.
|
||||
|
||||
### Les diapos
|
||||
|
||||
- Trois tirets seuls sur une ligne (`---`) séparent deux diapos.
|
||||
- `## Un titre` donne le titre de la diapo.
|
||||
- Un commentaire `<!-- … -->` est une **note d'orateur** : invisible à l'écran,
|
||||
affichée dans la vue présentateur.
|
||||
- `<!-- _class: titre -->` en tête d'une diapo lui donne la mise en page de titre ;
|
||||
`<!-- _class: demo -->` annonce une démonstration.
|
||||
|
||||
### Quelques conseils pour la vidéoprojection
|
||||
|
||||
- **Peu de texte.** Trois à cinq lignes par diapo. Ce que vous direz va dans les notes.
|
||||
- **Pas plus de six ou sept lignes de code** par diapo.
|
||||
- **Des tableaux étroits** : deux ou trois colonnes.
|
||||
- **Des images à vous**, ou sous licence libre, rangées dans `images/`. Une image
|
||||
chargée depuis un autre site est refusée : le diaporama doit fonctionner sans réseau
|
||||
dans la salle.
|
||||
- **Pas de données personnelles** dans les captures d'écran : adresse, nom de
|
||||
machine, courriel.
|
||||
|
||||
---
|
||||
|
||||
## 3. Prévisualiser
|
||||
|
||||
Il faut [Node.js](https://nodejs.org/fr) (version 22 ou plus récente). Une seule fois,
|
||||
à la racine du dépôt :
|
||||
|
||||
```bash
|
||||
npm ci
|
||||
```
|
||||
|
||||
Puis, à chaque séance de travail :
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Ouvrez <http://localhost:8080>, cliquez sur votre dossier puis sur `slides.md`. La page
|
||||
se **recharge toute seule** à chaque enregistrement du fichier. <kbd>Ctrl</kbd> +
|
||||
<kbd>C</kbd> dans le terminal arrête l'aperçu.
|
||||
|
||||
Dans le diaporama : les flèches pour avancer, <kbd>F</kbd> pour le plein écran,
|
||||
<kbd>P</kbd> pour la vue présentateur avec vos notes.
|
||||
|
||||
Avant de proposer votre travail, lancez le build complet :
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Il vérifie votre fiche et vos images, et dit précisément ce qui ne va pas :
|
||||
|
||||
```
|
||||
ÉCHEC du build — 1 erreur(s) dans les sources :
|
||||
- slides/mon-sujet/slides.md : « niveau » invalide : « expert » — attendu debutant | intermediaire | confirme
|
||||
```
|
||||
|
||||
Le site complet est alors dans `public/` : ouvrez `public/index.html` pour voir votre
|
||||
présentation dans la liste. Si elle n'y est pas, c'est qu'il reste `brouillon: true`.
|
||||
|
||||
> Vous utilisez VS Code ou VSCodium ? L'extension *Marp for VS Code* affiche l'aperçu
|
||||
> à côté du texte. Indiquez-lui le thème dans les réglages
|
||||
> (`markdown.marp.themes` : `./theme/alpinux.css`).
|
||||
|
||||
---
|
||||
|
||||
## 4. Ouvrir une pull request
|
||||
|
||||
Une *pull request* est une proposition de modification : vous ne touchez pas
|
||||
directement au site, un mainteneur relit d'abord.
|
||||
|
||||
1. Créez un compte sur <https://gitea.alpinux.org> si vous n'en avez pas.
|
||||
2. Sur la page du dépôt `alpinux-presentations`, cliquez sur **Bifurcation** (*Fork*) :
|
||||
vous obtenez votre copie du dépôt.
|
||||
3. Récupérez-la, et créez une branche pour votre présentation :
|
||||
|
||||
```bash
|
||||
git clone https://gitea.alpinux.org/VOTRE-COMPTE/alpinux-presentations.git
|
||||
cd alpinux-presentations
|
||||
git switch -c mon-sujet
|
||||
```
|
||||
|
||||
4. Faites votre travail (étapes 1 à 3), puis enregistrez-le et envoyez-le :
|
||||
|
||||
```bash
|
||||
git add slides/mon-sujet
|
||||
git commit -m "Ajouter la présentation « Mon sujet »"
|
||||
git push origin mon-sujet
|
||||
```
|
||||
|
||||
5. Retournez sur la forge : un bandeau propose **Nouvelle demande d'ajout**. Validez,
|
||||
en visant la branche `main` du dépôt d'Alpinux.
|
||||
|
||||
Un mainteneur relit, vous répond dans la pull request si quelque chose est à
|
||||
reprendre, puis fusionne. Le site est à jour dans la minute qui suit.
|
||||
|
||||
Le guide [Git chez Alpinux](https://wiki.alpinux.org/guides/git-alpinux/) du wiki
|
||||
détaille chacune de ces étapes.
|
||||
|
||||
### La méthode sans rien installer
|
||||
|
||||
Tout peut se faire depuis le navigateur, sur <https://gitea.alpinux.org> :
|
||||
|
||||
1. Faites une **bifurcation** du dépôt.
|
||||
2. Dans votre copie, ouvrez `slides/_modele/slides.md`, copiez son contenu.
|
||||
3. **Ajouter un fichier → Nouveau fichier**, nommez-le `slides/mon-sujet/slides.md`
|
||||
(taper les `/` crée les dossiers), collez, adaptez.
|
||||
4. Pour les images : **Ajouter un fichier → Téléverser**, dans
|
||||
`slides/mon-sujet/images/`.
|
||||
5. En bas de la page, choisissez « Créer une nouvelle branche », puis ouvrez la
|
||||
**demande d'ajout**.
|
||||
|
||||
Vous n'aurez pas d'aperçu : dites-le dans la pull request, un mainteneur vérifiera le
|
||||
rendu pour vous.
|
||||
|
||||
---
|
||||
|
||||
## Corriger une présentation existante
|
||||
|
||||
Une faute, un lien mort, une commande qui a changé ? Même chemin : modifiez le
|
||||
`slides.md` concerné et ouvrez une pull request. Sur la forge, le crayon en haut du
|
||||
fichier suffit pour une petite correction.
|
||||
|
||||
226
README.md
Normal file
226
README.md
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
# Présentations d'Alpinux
|
||||
|
||||
Les diaporamas des réunions d'[Alpinux](https://alpinux.org), le groupe d'utilisateurs
|
||||
de logiciels libres de Savoie — publiés sur <https://presentations.alpinux.org> et
|
||||
projetés depuis ce site le soir de la réunion.
|
||||
|
||||
Chaque présentation est un fichier Markdown. [Marp](https://marp.app) en fait un
|
||||
diaporama HTML autonome, et le build génère la page d'accueil qui les liste toutes.
|
||||
|
||||
**Vous voulez proposer une présentation ?** Tout est dans
|
||||
[CONTRIBUER.md](CONTRIBUER.md).
|
||||
|
||||
---
|
||||
|
||||
## Je veux…
|
||||
|
||||
| Ce que vous voulez faire | Ce que vous faites |
|
||||
|-------------------------------------------|-----------------------------------------------------------------|
|
||||
| Proposer une présentation | Suivre [CONTRIBUER.md](CONTRIBUER.md) |
|
||||
| Voir mes diapos pendant que j'écris | `npm run dev`, puis <http://localhost:8080> |
|
||||
| Vérifier que tout est bon avant de pousser | `npm run build` |
|
||||
| Obtenir un PDF d'un diaporama | `npm run pdf -- pdf-signer` |
|
||||
| Mettre en ligne | Fusionner sur `main` — le déploiement suit, en une minute |
|
||||
| Comprendre pourquoi ce n'est pas en ligne | `tail -30 /var/log/presentations-deploy.log` sur le serveur |
|
||||
| Installer ou réparer le déploiement | Lire [deploy/webhook.md](deploy/webhook.md) |
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Il faut **Node.js 24 LTS** — c'est la version du serveur, indiquée dans `.nvmrc`. La
|
||||
22 LTS convient aussi. Rien d'autre : ni Python, ni navigateur pour le build.
|
||||
|
||||
```bash
|
||||
git clone git@gitea.alpinux.org:alpinux.cedrica5l/alpinux-presentations.git
|
||||
cd alpinux-presentations
|
||||
npm ci
|
||||
```
|
||||
|
||||
Deux dépendances, aux versions figées dans `package.json` et `package-lock.json` :
|
||||
|
||||
- [`@marp-team/marp-cli`](https://github.com/marp-team/marp-cli) — convertit le
|
||||
Markdown en diaporama ;
|
||||
- [`js-yaml`](https://github.com/nodeca/js-yaml) — lit la fiche de chaque
|
||||
présentation. Marp l'embarque déjà : elle n'ajoute rien à l'installation.
|
||||
|
||||
---
|
||||
|
||||
## Commandes
|
||||
|
||||
### `npm run dev` — aperçu local
|
||||
|
||||
Sert `slides/` sur <http://localhost:8080> avec le thème commun, et recharge la page à
|
||||
chaque enregistrement. Les brouillons et le modèle y sont visibles.
|
||||
|
||||
### `npm run build` — build complet
|
||||
|
||||
```bash
|
||||
npm run build # vers public/
|
||||
npm run build -- /un/chemin # vers un autre répertoire
|
||||
```
|
||||
|
||||
1. Parcourt `slides/*/slides.md`, en ignorant les dossiers qui commencent par `_` et
|
||||
les présentations marquées `brouillon: true`.
|
||||
2. Valide la fiche de chacune.
|
||||
3. Génère `<sortie>/<identifiant>/index.html` et copie son dossier `images/`.
|
||||
4. Génère `<sortie>/index.html`, la page d'accueil.
|
||||
5. Génère `<sortie>/presentations.json` et `<sortie>/.htaccess`.
|
||||
|
||||
Le build est **strict**, comme `mkdocs build --strict` pour le wiki. Il échoue, avec un
|
||||
message qui nomme le fichier et le défaut, sur :
|
||||
|
||||
- un champ obligatoire manquant, une valeur invalide, un champ inconnu (une faute de
|
||||
frappe sur `brouillon` publierait sinon un diaporama inachevé) ;
|
||||
- une image introuvable, ou rangée ailleurs que dans `images/` ;
|
||||
- une ressource chargée depuis un autre site — image, police, script, feuille de style.
|
||||
|
||||
En cas d'échec, le répertoire de sortie n'est pas touché : tout est construit à part,
|
||||
puis mis en place d'un seul coup.
|
||||
|
||||
### `npm run pdf -- <identifiant>` — export PDF
|
||||
|
||||
```bash
|
||||
npm run pdf -- pdf-signer # écrit public/pdf-signer/pdf-signer.pdf
|
||||
```
|
||||
|
||||
À lancer sur un **poste de travail** : Marp pilote un navigateur installé (Chromium,
|
||||
Chrome ou Firefox) pour imprimer le diaporama, et le serveur n'en a pas. Le PDF n'est
|
||||
ni versionné ni publié par le déploiement.
|
||||
|
||||
---
|
||||
|
||||
## Organisation du dépôt
|
||||
|
||||
```
|
||||
alpinux-presentations/
|
||||
├── README.md
|
||||
├── CONTRIBUER.md le guide du contributeur
|
||||
├── package.json dépendances, versions figées
|
||||
├── theme/alpinux.css le thème Marp commun
|
||||
├── slides/
|
||||
│ ├── _modele/ le modèle à copier — jamais publié
|
||||
│ └── pdf-signer/
|
||||
│ ├── slides.md le diaporama
|
||||
│ └── images/ ses images
|
||||
├── scripts/
|
||||
│ ├── build.mjs le build
|
||||
│ └── deploy-presentations.sh ce que le serveur exécute après un push
|
||||
├── deploy/ la chaîne de déploiement, versionnée avec le site
|
||||
│ ├── webhook.md mise en place côté serveur
|
||||
│ ├── installer.sh pose tout sur le serveur (root)
|
||||
│ ├── webhook.py service d'écoute, 127.0.0.1:9878
|
||||
│ ├── presentations-webhook.service
|
||||
│ └── apache-vhost.exemple.conf
|
||||
└── public/ sortie locale du build, ignorée par git
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## La fiche d'une présentation
|
||||
|
||||
Chaque `slides.md` commence par un front matter : les réglages de Marp, puis la fiche.
|
||||
|
||||
```yaml
|
||||
---
|
||||
marp: true
|
||||
theme: alpinux
|
||||
paginate: true
|
||||
|
||||
title: Lire, remplir et signer ses PDF
|
||||
description: Remplir, signer, assembler et alléger un dossier PDF sous Linux Mint.
|
||||
auteur: Alpinux
|
||||
date: 2026-10-15 # date de la séance
|
||||
niveau: debutant # debutant | intermediaire | confirme
|
||||
format: court # eclair | court | long
|
||||
tags: [pdf, bureautique]
|
||||
wiki: https://wiki.alpinux.org/… # facultatif
|
||||
brouillon: true # facultatif : exclut de la publication
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Le thème
|
||||
|
||||
`theme/alpinux.css` est pensé pour la vidéoprojection : gros corps de texte, fort
|
||||
contraste, logo et numéro de page en pied de diapo. Les polices sont celles du
|
||||
système ; rien n'est téléchargé.
|
||||
|
||||
Deux classes, à poser sur une diapo avec `<!-- _class: nom -->` :
|
||||
|
||||
| Classe | Usage |
|
||||
|---------|--------------------------------------------------------------|
|
||||
| `titre` | La diapo d'ouverture, les intercalaires, la diapo de fin |
|
||||
| `demo` | L'annonce d'une démonstration en direct |
|
||||
|
||||
Les citations (`> …`) servent d'encadrés « à retenir » ou « piège », et `<kbd>` dessine
|
||||
une touche de clavier.
|
||||
|
||||
---
|
||||
|
||||
## Ce que le build publie pour alpinux.org
|
||||
|
||||
`presentations.json`, à la racine du site, liste toutes les présentations publiées, de
|
||||
la plus récente à la plus ancienne :
|
||||
|
||||
```json
|
||||
{
|
||||
"genere": "2026-10-10T19:39:31.061Z",
|
||||
"site": "https://presentations.alpinux.org/",
|
||||
"presentations": [
|
||||
{
|
||||
"id": "pdf-signer",
|
||||
"titre": "Lire, remplir et signer ses PDF",
|
||||
"description": "…",
|
||||
"auteur": "Alpinux",
|
||||
"date": "2026-10-15",
|
||||
"niveau": "debutant",
|
||||
"format": "court",
|
||||
"tags": ["pdf", "bureautique"],
|
||||
"url": "https://presentations.alpinux.org/pdf-signer/",
|
||||
"wiki": null
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Le `.htaccess` généré pose `Access-Control-Allow-Origin` sur **ce seul fichier**, pour
|
||||
qu'alpinux.org puisse le lire depuis le navigateur du visiteur — comme le wiki le fait
|
||||
avec `derniers-articles.json`.
|
||||
|
||||
---
|
||||
|
||||
## Vie privée et autonomie
|
||||
|
||||
Aucun traceur, aucune police ni aucun script chargés depuis un service tiers. Une fois
|
||||
la page chargée, un diaporama fonctionne **sans réseau** : son style et son code sont
|
||||
dans le fichier HTML, ses images à côté.
|
||||
|
||||
La seule ressource prise ailleurs est le logo, servi par `static.alpinux.org` — un
|
||||
serveur de l'association. Le build refuse toute autre adresse externe.
|
||||
|
||||
---
|
||||
|
||||
## Déploiement
|
||||
|
||||
```
|
||||
git push (sur main)
|
||||
│
|
||||
Gitea ── webhook ──▶ https://presentations.alpinux.org/deploy
|
||||
│ service d'écoute, signature HMAC vérifiée
|
||||
▼
|
||||
deploy-presentations.sh : git pull → npm ci → build dans un staging → rsync
|
||||
▼
|
||||
https://presentations.alpinux.org
|
||||
```
|
||||
|
||||
Les contributions arrivent par pull request sur `main`. À la fusion, le serveur
|
||||
construit le site dans un répertoire de staging et ne le copie vers le DocumentRoot
|
||||
que si le build a réussi : une fiche invalide ne casse pas le site en ligne.
|
||||
|
||||
Le journal est dans `/var/log/presentations-deploy.log` ; une exécution réussie y est
|
||||
encadrée par `Deploy started` et `Deploy done`.
|
||||
|
||||
L'installation côté serveur, la déclaration du webhook et les pièges à connaître sont
|
||||
décrits dans [deploy/webhook.md](deploy/webhook.md).
|
||||
23
deploy/apache-vhost.exemple.conf
Normal file
23
deploy/apache-vhost.exemple.conf
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# Relais Apache du webhook de presentations.alpinux.org.
|
||||
#
|
||||
# Deux lignes, à placer dans le VirtualHost *:443 du site. Elles transmettent
|
||||
# https://presentations.alpinux.org/deploy au service d'écoute, qui ne répond que sur
|
||||
# la boucle locale (voir webhook.py et presentations-webhook.service).
|
||||
#
|
||||
# Où les écrire : dans ISPConfig, Sites → presentations.alpinux.org → Options →
|
||||
# « Directives Apache ». ISPConfig régénère le fichier
|
||||
# /etc/apache2/sites-available/presentations.alpinux.org.vhost à chaque modification
|
||||
# du site : une ligne ajoutée à la main dans ce fichier disparaît ce jour-là, alors
|
||||
# qu'une directive saisie dans ISPConfig est réécrite avec le reste.
|
||||
#
|
||||
# installer.sh les pose directement dans le vhost pour que le webhook marche tout de
|
||||
# suite ; les recopier dans ISPConfig les rend durables.
|
||||
#
|
||||
# Modules requis : proxy et proxy_http (déjà actifs sur owni, le wiki s'en sert).
|
||||
|
||||
ProxyPass /deploy http://127.0.0.1:9878/deploy
|
||||
ProxyPassReverse /deploy http://127.0.0.1:9878/deploy
|
||||
|
||||
# Le reste du site n'a besoin de rien ici : le .htaccess généré par le build pose
|
||||
# l'en-tête Access-Control-Allow-Origin sur presentations.json, ce qui suppose
|
||||
# « AllowOverride All » (réglage par défaut d'ISPConfig) et le module headers.
|
||||
161
deploy/installer.sh
Executable file
161
deploy/installer.sh
Executable file
|
|
@ -0,0 +1,161 @@
|
|||
#!/bin/bash
|
||||
# Installe la chaîne de déploiement de presentations.alpinux.org sur owni. À lancer en
|
||||
# root — relancer ne casse rien, chaque étape vérifie d'abord ce qui existe.
|
||||
#
|
||||
# sudo bash deploy/installer.sh
|
||||
#
|
||||
# Ce que ça met en place : Node.js dans /opt/presentations-alpinux/node, une clé de
|
||||
# déploiement en lecture seule, un clone du dépôt, le service d'écoute du webhook sur
|
||||
# 127.0.0.1:9878, le relais Apache /deploy, et le droit d'écriture de l'utilisateur du
|
||||
# service sur le DocumentRoot.
|
||||
#
|
||||
# Le script s'arrête à l'étape 3 tant que la clé de déploiement n'est pas déclarée
|
||||
# dans Gitea : la déclarer, puis relancer.
|
||||
set -euo pipefail
|
||||
|
||||
BASE="/opt/presentations-alpinux"
|
||||
REPO_DIR="$BASE/repo"
|
||||
UTILISATEUR="abonnelc"
|
||||
CIBLE="/var/www/clients/client1/web22/web"
|
||||
VHOST="/etc/apache2/sites-available/presentations.alpinux.org.vhost"
|
||||
SECRET_FICHIER="/etc/default/presentations-webhook"
|
||||
JOURNAL="/var/log/presentations-deploy.log"
|
||||
UNITE="/etc/systemd/system/presentations-webhook.service"
|
||||
PORT="9878"
|
||||
|
||||
# Node.js : la version LTS, figée. Pour en changer, modifier ce numéro et relancer.
|
||||
NODE_VERSION="v24.21.0"
|
||||
NODE_ARCHIVE="node-$NODE_VERSION-linux-x64.tar.xz"
|
||||
NODE_URL="https://nodejs.org/dist/$NODE_VERSION"
|
||||
|
||||
# Le dépôt est tiré par SSH, avec une clé qui ne sert qu'à lui.
|
||||
CLE="/home/$UTILISATEUR/.ssh/id_ed25519_presentations_deploy"
|
||||
ALIAS_SSH="gitea-presentations"
|
||||
DEPOT_URL="$ALIAS_SSH:alpinux.cedrica5l/alpinux-presentations.git"
|
||||
|
||||
SOURCE="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||
|
||||
[ "$(id -u)" -eq 0 ] || { echo "À lancer en root : sudo bash $0" >&2; exit 1; }
|
||||
|
||||
echo "==> 1/7 Node.js $NODE_VERSION dans $BASE/node"
|
||||
install -d -o "$UTILISATEUR" -g "$UTILISATEUR" "$BASE"
|
||||
if [ -x "$BASE/node/bin/node" ] && [ "$("$BASE/node/bin/node" --version)" = "$NODE_VERSION" ]; then
|
||||
echo " (déjà là)"
|
||||
else
|
||||
tmp="$(mktemp -d)"
|
||||
curl -fsSL -o "$tmp/$NODE_ARCHIVE" "$NODE_URL/$NODE_ARCHIVE"
|
||||
curl -fsSL -o "$tmp/SHASUMS256.txt" "$NODE_URL/SHASUMS256.txt"
|
||||
(cd "$tmp" && grep " $NODE_ARCHIVE\$" SHASUMS256.txt | sha256sum -c -)
|
||||
rm -rf "$BASE/node"
|
||||
install -d "$BASE/node"
|
||||
tar -xJf "$tmp/$NODE_ARCHIVE" -C "$BASE/node" --strip-components=1 --no-same-owner
|
||||
rm -rf "$tmp"
|
||||
echo " $("$BASE/node/bin/node" --version) installé"
|
||||
fi
|
||||
|
||||
echo "==> 2/7 Clé de déploiement"
|
||||
if [ ! -f "$CLE" ]; then
|
||||
sudo -u "$UTILISATEUR" ssh-keygen -q -t ed25519 -N "" -C "deploy@presentations.alpinux.org" -f "$CLE"
|
||||
echo " clé créée"
|
||||
fi
|
||||
CONFIG_SSH="/home/$UTILISATEUR/.ssh/config"
|
||||
if ! grep -q "^Host $ALIAS_SSH\$" "$CONFIG_SSH" 2>/dev/null; then
|
||||
sudo -u "$UTILISATEUR" tee -a "$CONFIG_SSH" > /dev/null <<EOF
|
||||
|
||||
Host $ALIAS_SSH
|
||||
HostName alpinux.org
|
||||
Port 3022
|
||||
User git
|
||||
IdentityFile $CLE
|
||||
IdentitiesOnly yes
|
||||
EOF
|
||||
chmod 600 "$CONFIG_SSH"
|
||||
echo " alias SSH « $ALIAS_SSH » ajouté"
|
||||
fi
|
||||
|
||||
echo "==> 3/7 Dépôt dans $REPO_DIR"
|
||||
if [ -d "$REPO_DIR/.git" ]; then
|
||||
sudo -u "$UTILISATEUR" git -C "$REPO_DIR" pull --ff-only origin main
|
||||
elif ! sudo -u "$UTILISATEUR" git clone "$DEPOT_URL" "$REPO_DIR"; then
|
||||
echo
|
||||
echo "Le serveur n'a pas pu cloner le dépôt. Déclarer cette clé publique dans Gitea :" >&2
|
||||
echo " dépôt alpinux-presentations → Paramètres → Clés de déploiement → Ajouter" >&2
|
||||
echo " (sans cocher l'accès en écriture)" >&2
|
||||
echo
|
||||
cat "$CLE.pub"
|
||||
echo
|
||||
echo "Puis relancer : sudo bash $0" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "==> 4/7 Scripts et journal"
|
||||
# Le serveur exécute ces copies, pas les fichiers du dépôt : une modification de
|
||||
# deploy/ ou de scripts/deploy-presentations.sh ne prend effet qu'en relançant
|
||||
# installer.sh. Un push ne peut donc pas changer ce que le service exécute.
|
||||
install -o "$UTILISATEUR" -g "$UTILISATEUR" -m 755 "$SOURCE/scripts/deploy-presentations.sh" "$BASE/deploy-presentations.sh"
|
||||
install -o "$UTILISATEUR" -g "$UTILISATEUR" -m 755 "$SOURCE/deploy/webhook.py" "$BASE/webhook.py"
|
||||
touch "$JOURNAL" && chown "$UTILISATEUR":"$UTILISATEUR" "$JOURNAL"
|
||||
|
||||
echo "==> 5/7 Droit d'écriture sur $CIBLE"
|
||||
# Le DocumentRoot appartient à web22 ; une ACL suffit à y laisser écrire le service,
|
||||
# sans toucher au propriétaire ni aux droits qu'attend ISPConfig.
|
||||
setfacl -m "u:$UTILISATEUR:rwx" "$CIBLE"
|
||||
|
||||
echo "==> 6/7 Secret du webhook et service systemd"
|
||||
if [ -f "$SECRET_FICHIER" ]; then
|
||||
echo " (secret déjà là, inchangé)"
|
||||
else
|
||||
(umask 077; printf 'PRESENTATIONS_WEBHOOK_SECRET=%s\n' "$(openssl rand -hex 24)" > "$SECRET_FICHIER")
|
||||
fi
|
||||
chmod 600 "$SECRET_FICHIER"
|
||||
install -m 644 "$SOURCE/deploy/presentations-webhook.service" "$UNITE"
|
||||
systemctl daemon-reload
|
||||
systemctl enable --now presentations-webhook
|
||||
systemctl restart presentations-webhook
|
||||
systemctl is-active --quiet presentations-webhook && echo " service actif"
|
||||
|
||||
echo "==> 7/7 Relais Apache /deploy"
|
||||
if grep -q "127.0.0.1:$PORT" "$VHOST"; then
|
||||
echo " déjà relayé"
|
||||
else
|
||||
cp -a "$VHOST" "$VHOST.bak-$(date +%Y%m%d%H%M)"
|
||||
awk -v port="$PORT" '
|
||||
{ print }
|
||||
!fait && /^[[:space:]]*<VirtualHost[^>]*:443>/ {
|
||||
print "\t\tProxyPass /deploy http://127.0.0.1:" port "/deploy"
|
||||
print "\t\tProxyPassReverse /deploy http://127.0.0.1:" port "/deploy"
|
||||
fait = 1
|
||||
}
|
||||
' "$VHOST" > "$VHOST.tmp"
|
||||
# Recopié dans le fichier plutôt que déplacé par-dessus : un « mv » remplacerait
|
||||
# l'original par un fichier neuf, avec d'autres droits.
|
||||
cat "$VHOST.tmp" > "$VHOST" && rm -f "$VHOST.tmp"
|
||||
grep -q "127.0.0.1:$PORT" "$VHOST" || { echo " ÉCHEC : relais non posé dans $VHOST" >&2; exit 1; }
|
||||
echo " relais ajouté"
|
||||
fi
|
||||
if apache2ctl configtest; then
|
||||
systemctl reload apache2
|
||||
else
|
||||
echo "Configuration Apache invalide : rien n'a été rechargé." >&2
|
||||
echo "La sauvegarde .bak-* est à côté du vhost." >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo
|
||||
echo "────────────────────────────────────────────────────────────"
|
||||
echo "Reste à faire à la main :"
|
||||
echo
|
||||
echo "1. Déclarer le webhook dans Gitea"
|
||||
echo " dépôt alpinux-presentations → Paramètres → Webhooks → Ajouter → Gitea"
|
||||
echo " URL : https://presentations.alpinux.org/deploy"
|
||||
echo " Méthode : POST, type de contenu : application/json"
|
||||
echo " Secret : sudo cat $SECRET_FICHIER"
|
||||
echo " Événement : Push seulement, filtre de branche : main"
|
||||
echo
|
||||
echo "2. Recopier le relais dans ISPConfig pour qu'il survive à une régénération"
|
||||
echo " du vhost : Sites → presentations.alpinux.org → Options → Directives Apache"
|
||||
echo " (les deux lignes de deploy/apache-vhost.exemple.conf)"
|
||||
echo
|
||||
echo "Première mise en ligne, sans attendre un push :"
|
||||
echo " sudo -u $UTILISATEUR $BASE/deploy-presentations.sh; tail -5 $JOURNAL"
|
||||
echo "────────────────────────────────────────────────────────────"
|
||||
17
deploy/presentations-webhook.service
Normal file
17
deploy/presentations-webhook.service
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
[Unit]
|
||||
Description=presentations.alpinux.org webhook deploy server
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=abonnelc
|
||||
Group=abonnelc
|
||||
WorkingDirectory=/opt/presentations-alpinux
|
||||
ExecStart=/usr/bin/python3 /opt/presentations-alpinux/webhook.py
|
||||
# Le secret vit hors du dépôt : ce fichier est écrit par installer.sh, en 0600.
|
||||
EnvironmentFile=/etc/default/presentations-webhook
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
181
deploy/webhook.md
Normal file
181
deploy/webhook.md
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
# Déploiement automatique : mise en place côté serveur
|
||||
|
||||
Cette page s'adresse aux mainteneurs qui ont un accès SSH à `alpinux.org`. Les
|
||||
contributeurs n'ont rien à faire ici : leur travail s'arrête à la pull request.
|
||||
|
||||
La chaîne est la même que celle du wiki et de www.alpinux.org :
|
||||
|
||||
```
|
||||
push sur main → webhook Gitea → https://presentations.alpinux.org/deploy
|
||||
│ Apache relaie vers 127.0.0.1:9878
|
||||
▼
|
||||
service d'écoute (signature HMAC vérifiée)
|
||||
▼
|
||||
deploy-presentations.sh : git pull → npm ci → build dans le staging → rsync
|
||||
▼
|
||||
https://presentations.alpinux.org
|
||||
```
|
||||
|
||||
Si le build échoue — front matter invalide, image manquante — rien n'est copié : le
|
||||
site en ligne reste celui du dernier build réussi.
|
||||
|
||||
---
|
||||
|
||||
## Un second service plutôt qu'une nouvelle route
|
||||
|
||||
Le service d'écoute du wiki (`/opt/wiki-mkdocs/webhook.py`) ne connaît qu'un secret et
|
||||
qu'un script. Y ajouter une route aurait demandé de le réécrire, de faire cohabiter
|
||||
deux secrets dans la même unité systemd, et de redémarrer le déploiement du wiki à
|
||||
chaque retouche de celui des présentations.
|
||||
|
||||
Ce dépôt apporte donc **son propre service**, comme www.alpinux.org l'a fait avant
|
||||
lui. Les trois sont des copies du même petit programme :
|
||||
|
||||
| Site | Service systemd | Port | Secret |
|
||||
|----------------|--------------------------|-------|-----------------------------------------|
|
||||
| wiki | `wiki-webhook` | 9876 | dans l'unité systemd |
|
||||
| www | `www-webhook` | 9877 | `/etc/default/www-webhook` |
|
||||
| présentations | `presentations-webhook` | 9878 | `/etc/default/presentations-webhook` |
|
||||
|
||||
Chaque dépôt a **son** secret : celui des présentations n'ouvre pas le déploiement du
|
||||
wiki, et inversement.
|
||||
|
||||
---
|
||||
|
||||
## Ce qui est installé, et où
|
||||
|
||||
| Quoi | Où |
|
||||
|-----------------------------------|----------------------------------------------------------|
|
||||
| Clone du dépôt | `/opt/presentations-alpinux/repo` |
|
||||
| Répertoire de staging | `/opt/presentations-alpinux/staging` |
|
||||
| Node.js (LTS, version figée) | `/opt/presentations-alpinux/node` |
|
||||
| Script de déploiement (copie) | `/opt/presentations-alpinux/deploy-presentations.sh` |
|
||||
| Service d'écoute (copie) | `/opt/presentations-alpinux/webhook.py` |
|
||||
| Unité systemd | `/etc/systemd/system/presentations-webhook.service` |
|
||||
| Secret HMAC (`0600`, root) | `/etc/default/presentations-webhook` |
|
||||
| Clé de déploiement, lecture seule | `~abonnelc/.ssh/id_ed25519_presentations_deploy` |
|
||||
| DocumentRoot | `/var/www/clients/client1/web22/web` |
|
||||
| Journal | `/var/log/presentations-deploy.log` |
|
||||
|
||||
Fichiers fournis par ce dossier : [`installer.sh`](installer.sh),
|
||||
[`webhook.py`](webhook.py), [`presentations-webhook.service`](presentations-webhook.service),
|
||||
[`apache-vhost.exemple.conf`](apache-vhost.exemple.conf), et
|
||||
[`../scripts/deploy-presentations.sh`](../scripts/deploy-presentations.sh).
|
||||
|
||||
**Aucun secret n'est dans le dépôt.** Le secret du webhook est tiré au hasard sur le
|
||||
serveur par `installer.sh` ; la clé privée de déploiement y est créée et n'en sort pas.
|
||||
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
Tout tient dans `installer.sh`, à lancer en root. Il est sans danger de le relancer :
|
||||
chaque étape vérifie d'abord ce qui existe.
|
||||
|
||||
```bash
|
||||
sudo bash deploy/installer.sh
|
||||
```
|
||||
|
||||
1. **Node.js** — téléchargé depuis nodejs.org, somme SHA-256 vérifiée, déposé dans
|
||||
`/opt/presentations-alpinux/node`. Rien n'est ajouté aux dépôts apt du serveur, et
|
||||
pas de Chromium : le build HTML de Marp n'en a pas besoin.
|
||||
2. **Clé de déploiement** — une clé SSH propre à ce dépôt, et un alias
|
||||
`gitea-presentations` dans `~abonnelc/.ssh/config`.
|
||||
3. **Clone du dépôt.** La première fois, le script s'arrête ici et affiche la clé
|
||||
publique : la déclarer dans Gitea, *Paramètres → Clés de déploiement* du dépôt,
|
||||
**sans** l'accès en écriture, puis relancer.
|
||||
4. **Scripts** — copie de `deploy-presentations.sh` et de `webhook.py` dans
|
||||
`/opt/presentations-alpinux`, création du journal.
|
||||
5. **Droit d'écriture** sur le DocumentRoot, par une ACL pour `abonnelc`.
|
||||
6. **Secret et service** — secret tiré au hasard s'il n'existe pas, unité systemd
|
||||
installée et démarrée.
|
||||
7. **Relais Apache** — les deux lignes `ProxyPass` dans le vhost, puis rechargement
|
||||
d'Apache si la configuration est valide.
|
||||
|
||||
### Déclarer le webhook dans Gitea
|
||||
|
||||
Dans le dépôt `alpinux-presentations` : *Paramètres → Webhooks → Ajouter un webhook →
|
||||
Gitea*.
|
||||
|
||||
| Champ | Valeur |
|
||||
|---------------------|-----------------------------------------------------|
|
||||
| URL cible | `https://presentations.alpinux.org/deploy` |
|
||||
| Méthode HTTP | `POST` |
|
||||
| Type de contenu | `application/json` |
|
||||
| Secret | la valeur lue par `sudo cat /etc/default/presentations-webhook` |
|
||||
| Déclencheur | *Push* seulement |
|
||||
| Filtre de branche | `main` |
|
||||
|
||||
Le filtre de branche évite des appels inutiles ; le service ignore de toute façon tout
|
||||
ce qui ne vise pas `refs/heads/main`.
|
||||
|
||||
### Rendre le relais Apache durable
|
||||
|
||||
Le vhost est écrit par ISPConfig, qui le **régénère** à chaque modification du site
|
||||
(certificat, alias, version de PHP…). Les deux lignes posées par `installer.sh`
|
||||
disparaissent ce jour-là.
|
||||
|
||||
Pour qu'elles tiennent : dans ISPConfig, *Sites → presentations.alpinux.org → Options →
|
||||
Directives Apache*, coller les deux lignes de
|
||||
[`apache-vhost.exemple.conf`](apache-vhost.exemple.conf). ISPConfig les réécrira alors
|
||||
avec le reste du vhost.
|
||||
|
||||
---
|
||||
|
||||
## Vérifier
|
||||
|
||||
```bash
|
||||
# Le service tourne et n'écoute que sur la boucle locale
|
||||
systemctl status presentations-webhook
|
||||
ss -ltn | grep 9878
|
||||
|
||||
# Sans signature valable, le relais répond 403 — c'est la bonne réponse
|
||||
curl -s -o /dev/null -w '%{http_code}\n' -X POST -d '{}' https://presentations.alpinux.org/deploy
|
||||
|
||||
# Le dernier déploiement
|
||||
tail -20 /var/log/presentations-deploy.log
|
||||
```
|
||||
|
||||
Une exécution réussie encadre le build par une ligne `Deploy started` et une ligne
|
||||
`Deploy done`. Une ligne `ABANDON` signale un échec : la cause est juste au-dessus, et
|
||||
le site en ligne n'a pas bougé.
|
||||
|
||||
Dans Gitea, la page du webhook liste les envois récents avec la réponse reçue, et son
|
||||
bouton *Tester l'envoi* rejoue un push.
|
||||
|
||||
---
|
||||
|
||||
## Au quotidien
|
||||
|
||||
| Je veux… | Je fais… |
|
||||
|--------------------------------------------|--------------------------------------------------------------------------|
|
||||
| Savoir pourquoi ce n'est pas en ligne | `tail -30 /var/log/presentations-deploy.log` |
|
||||
| Republier sans nouveau commit | `sudo -u abonnelc /opt/presentations-alpinux/deploy-presentations.sh` |
|
||||
| Appliquer une modification de `deploy/` | `sudo bash /opt/presentations-alpinux/repo/deploy/installer.sh` |
|
||||
| Changer de version de Node.js | modifier `NODE_VERSION` dans `installer.sh`, pousser, relancer `installer.sh` |
|
||||
| Changer le secret | supprimer `/etc/default/presentations-webhook`, relancer `installer.sh`, mettre à jour le webhook dans Gitea |
|
||||
|
||||
---
|
||||
|
||||
## Les pièges à connaître
|
||||
|
||||
**Le serveur exécute des copies.** `deploy-presentations.sh` et `webhook.py` sont
|
||||
copiés dans `/opt/presentations-alpinux` par `installer.sh`. Les modifier dans le dépôt
|
||||
ne change rien tant que `installer.sh` n'a pas été relancé. C'est voulu : une pull
|
||||
request fusionnée ne peut pas, à elle seule, changer ce que le service exécute.
|
||||
|
||||
**Mais le build, lui, exécute le dépôt.** `scripts/build.mjs` et les dépendances de
|
||||
`package-lock.json` tournent sur le serveur à chaque push, sous le compte du service.
|
||||
Une pull request qui touche à `scripts/`, à `package.json` ou à `package-lock.json` se
|
||||
relit donc comme du code qui s'exécutera sur le serveur — pas comme une diapo.
|
||||
|
||||
**`rsync --delete` épargne deux dossiers.** `error/` et `stats/` appartiennent à
|
||||
ISPConfig et sont exclus de la synchronisation. Tout autre fichier déposé à la main
|
||||
dans le DocumentRoot est supprimé au déploiement suivant.
|
||||
|
||||
**Le droit d'écriture tient à une ACL.** Si ISPConfig réinitialise les droits du site,
|
||||
le déploiement échoue sur une erreur de permission : relancer `installer.sh` la repose.
|
||||
|
||||
**Node.js ne se met pas à jour tout seul.** Il est installé hors d'apt. Suivre les
|
||||
versions LTS sur <https://nodejs.org/fr/about/previous-releases> et changer
|
||||
`NODE_VERSION` de temps en temps.
|
||||
68
deploy/webhook.py
Normal file
68
deploy/webhook.py
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
#!/usr/bin/env python3
|
||||
"""Service d'écoute du webhook Gitea pour presentations.alpinux.org.
|
||||
|
||||
N'écoute que sur la boucle locale : c'est Apache qui lui transmet les requêtes reçues
|
||||
sur https://presentations.alpinux.org/deploy. La signature HMAC envoyée par Gitea est
|
||||
vérifiée avant de lancer quoi que ce soit, et seuls les push sur main déclenchent un
|
||||
déploiement.
|
||||
|
||||
Calqué sur les services du wiki et de www (/opt/wiki-mkdocs/webhook.py,
|
||||
/opt/www-alpinux/webhook.py), à trois différences près : le port, le script appelé,
|
||||
et un secret qui lui est propre, lu dans un fichier d'environnement — ce dépôt est
|
||||
public.
|
||||
"""
|
||||
import hashlib
|
||||
import hmac
|
||||
import http.server
|
||||
import json
|
||||
import os
|
||||
import subprocess
|
||||
import threading
|
||||
|
||||
SECRET = os.environ.get("PRESENTATIONS_WEBHOOK_SECRET", "")
|
||||
DEPLOY_SCRIPT = "/opt/presentations-alpinux/deploy-presentations.sh"
|
||||
LOG = "/var/log/presentations-deploy.log"
|
||||
PORT = 9878
|
||||
|
||||
|
||||
class Handler(http.server.BaseHTTPRequestHandler):
|
||||
def do_POST(self):
|
||||
if self.path != "/deploy":
|
||||
self.send_response(404); self.end_headers(); return
|
||||
|
||||
length = int(self.headers.get("Content-Length", 0))
|
||||
body = self.rfile.read(length)
|
||||
signature = self.headers.get("X-Gitea-Signature", "")
|
||||
|
||||
attendue = hmac.new(SECRET.encode(), body, hashlib.sha256).hexdigest()
|
||||
if not SECRET or not hmac.compare_digest(attendue, signature):
|
||||
self.send_response(403); self.end_headers()
|
||||
self.wfile.write(b"Forbidden"); return
|
||||
|
||||
try:
|
||||
ref = json.loads(body).get("ref", "")
|
||||
except (ValueError, AttributeError):
|
||||
self.send_response(400); self.end_headers()
|
||||
self.wfile.write(b"Bad request"); return
|
||||
if ref != "refs/heads/main":
|
||||
self.send_response(200); self.end_headers()
|
||||
self.wfile.write(b"Skipped: not main"); return
|
||||
|
||||
# Déploiement en tâche de fond : Gitea a sa réponse tout de suite.
|
||||
threading.Thread(
|
||||
target=subprocess.run,
|
||||
args=([DEPLOY_SCRIPT],),
|
||||
kwargs={"capture_output": True},
|
||||
daemon=True,
|
||||
).start()
|
||||
|
||||
self.send_response(200); self.end_headers()
|
||||
self.wfile.write(b"Deploy triggered")
|
||||
|
||||
def log_message(self, fmt, *args):
|
||||
with open(LOG, "a") as journal:
|
||||
journal.write(self.log_date_time_string() + " " + fmt % args + "\n")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
http.server.HTTPServer(("127.0.0.1", PORT), Handler).serve_forever()
|
||||
1818
package-lock.json
generated
Normal file
1818
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "alpinux-presentations",
|
||||
"version": "1.0.0",
|
||||
"description": "Diaporamas des réunions d'Alpinux, écrits en Markdown et publiés sur presentations.alpinux.org",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node scripts/build.mjs",
|
||||
"dev": "marp --server --theme-set theme/alpinux.css -- slides",
|
||||
"pdf": "node scripts/build.mjs --pdf"
|
||||
},
|
||||
"dependencies": {
|
||||
"@marp-team/marp-cli": "4.5.1",
|
||||
"js-yaml": "5.4.3"
|
||||
}
|
||||
}
|
||||
599
scripts/build.mjs
Normal file
599
scripts/build.mjs
Normal file
|
|
@ -0,0 +1,599 @@
|
|||
#!/usr/bin/env node
|
||||
// Construit le site des présentations d'Alpinux.
|
||||
//
|
||||
// node scripts/build.mjs [sortie] build complet (sortie : public/ par défaut)
|
||||
// node scripts/build.mjs --pdf <identifiant> [sortie]
|
||||
// un PDF, sur un poste qui a un navigateur
|
||||
//
|
||||
// Le build est strict, comme « mkdocs build --strict » pour le wiki : un front matter
|
||||
// incomplet, une image introuvable ou une ressource chargée depuis un autre site le
|
||||
// font échouer avant d'avoir écrit quoi que ce soit dans le répertoire de sortie.
|
||||
|
||||
import { chmodSync, cpSync, existsSync, mkdirSync, mkdtempSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
|
||||
import { dirname, join, relative, resolve, sep } from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { marpCli } from '@marp-team/marp-cli'
|
||||
import { CORE_SCHEMA, load } from 'js-yaml'
|
||||
|
||||
const RACINE = resolve(dirname(fileURLToPath(import.meta.url)), '..')
|
||||
const SOURCES = join(RACINE, 'slides')
|
||||
const THEME = join(RACINE, 'theme', 'alpinux.css')
|
||||
const NOM_DU_THEME = 'alpinux'
|
||||
|
||||
// Adresse publique du site : elle ne sert qu'aux URL absolues de presentations.json.
|
||||
const URL_SITE = (process.env.URL_SITE ?? 'https://presentations.alpinux.org').replace(/\/+$/, '')
|
||||
const URL_LOGO = 'https://static.alpinux.org/logo/alpinux-logo-512.png'
|
||||
|
||||
// Seules adresses qu'une page générée a le droit de charger depuis un autre site.
|
||||
const RESSOURCES_EXTERNES_ADMISES = new Set([URL_LOGO])
|
||||
|
||||
const NIVEAUX = { debutant: 'Débutant', intermediaire: 'Intermédiaire', confirme: 'Confirmé' }
|
||||
const FORMATS = { eclair: 'Éclair', court: 'Court', long: 'Long' }
|
||||
|
||||
const CHAMPS_OBLIGATOIRES = ['title', 'description', 'auteur', 'date', 'niveau', 'format', 'tags']
|
||||
const CHAMPS_FACULTATIFS = ['wiki', 'brouillon']
|
||||
// Directives de Marp admises dans le front matter. Toute autre clé est refusée : une
|
||||
// faute de frappe sur « brouillon » publierait sinon une présentation inachevée.
|
||||
const DIRECTIVES_MARP = [
|
||||
'marp', 'theme', 'paginate', 'header', 'footer', 'class', 'size', 'style', 'lang', 'math',
|
||||
'headingDivider', 'transition', 'color', 'backgroundColor', 'backgroundImage',
|
||||
'backgroundPosition', 'backgroundRepeat', 'backgroundSize',
|
||||
]
|
||||
const CLES_CONNUES = new Set([...CHAMPS_OBLIGATOIRES, ...CHAMPS_FACULTATIFS, ...DIRECTIVES_MARP])
|
||||
|
||||
const FORME_IDENTIFIANT = /^[a-z0-9]+(-[a-z0-9]+)*$/
|
||||
|
||||
class ErreurDeBuild extends Error {}
|
||||
|
||||
// ── Lecture et validation des sources ──────────────────────────────────────
|
||||
|
||||
function lireFrontMatter(texte) {
|
||||
const trouve = /^?---[ \t]*\r?\n([\s\S]*?)\r?\n---[ \t]*(\r?\n|$)/.exec(texte)
|
||||
if (!trouve) {
|
||||
throw new ErreurDeBuild('pas de front matter : le fichier doit commencer par un bloc encadré de « --- »')
|
||||
}
|
||||
let donnees
|
||||
try {
|
||||
// CORE_SCHEMA : les dates restent des chaînes, telles qu'elles sont écrites.
|
||||
donnees = load(trouve[1], { schema: CORE_SCHEMA })
|
||||
} catch (erreur) {
|
||||
throw new ErreurDeBuild(`front matter illisible (YAML) : ${erreur.reason ?? erreur.message}` +
|
||||
(erreur.mark ? `, ligne ${erreur.mark.line + 2}` : ''))
|
||||
}
|
||||
if (donnees === null || typeof donnees !== 'object' || Array.isArray(donnees)) {
|
||||
throw new ErreurDeBuild('front matter vide ou mal formé : une liste de « clé: valeur » est attendue')
|
||||
}
|
||||
return donnees
|
||||
}
|
||||
|
||||
const estTexte = (valeur) => typeof valeur === 'string' && valeur.trim() !== ''
|
||||
|
||||
function estUneDate(valeur) {
|
||||
if (typeof valeur !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(valeur)) return false
|
||||
const date = new Date(`${valeur}T00:00:00Z`)
|
||||
return !Number.isNaN(date.getTime()) && date.toISOString().slice(0, 10) === valeur
|
||||
}
|
||||
|
||||
function estUneAdresseWeb(valeur) {
|
||||
if (typeof valeur !== 'string') return false
|
||||
try {
|
||||
return ['http:', 'https:'].includes(new URL(valeur).protocol)
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/** Renvoie la liste des erreurs du front matter — vide s'il est bon. */
|
||||
function validerFrontMatter(fm) {
|
||||
const erreurs = []
|
||||
const choix = (valeurs) => Object.keys(valeurs).join(' | ')
|
||||
|
||||
for (const champ of CHAMPS_OBLIGATOIRES) {
|
||||
if (fm[champ] === undefined || fm[champ] === null || fm[champ] === '') {
|
||||
erreurs.push(`champ obligatoire manquant : « ${champ} »`)
|
||||
}
|
||||
}
|
||||
for (const cle of Object.keys(fm)) {
|
||||
if (!CLES_CONNUES.has(cle)) {
|
||||
erreurs.push(`champ inconnu : « ${cle} » (faute de frappe ? champs admis : ${[...CHAMPS_OBLIGATOIRES, ...CHAMPS_FACULTATIFS].join(', ')})`)
|
||||
}
|
||||
}
|
||||
|
||||
const present = (champ) => fm[champ] !== undefined && fm[champ] !== null && fm[champ] !== ''
|
||||
for (const champ of ['title', 'description', 'auteur']) {
|
||||
if (present(champ) && !estTexte(fm[champ])) erreurs.push(`« ${champ} » doit être un texte`)
|
||||
}
|
||||
if (present('date') && !estUneDate(fm.date)) {
|
||||
erreurs.push(`« date » invalide : « ${fm.date} » — attendu AAAA-MM-JJ, la date de la séance (exemple : 2026-10-15)`)
|
||||
}
|
||||
if (present('niveau') && !Object.hasOwn(NIVEAUX, fm.niveau)) {
|
||||
erreurs.push(`« niveau » invalide : « ${fm.niveau} » — attendu ${choix(NIVEAUX)}`)
|
||||
}
|
||||
if (present('format') && !Object.hasOwn(FORMATS, fm.format)) {
|
||||
erreurs.push(`« format » invalide : « ${fm.format} » — attendu ${choix(FORMATS)}`)
|
||||
}
|
||||
if (present('tags')) {
|
||||
if (!Array.isArray(fm.tags) || fm.tags.length === 0 || !fm.tags.every(estTexte)) {
|
||||
erreurs.push('« tags » doit être une liste d\'au moins un mot-clé (exemple : tags: [pdf, bureautique])')
|
||||
}
|
||||
}
|
||||
if (present('wiki') && !estUneAdresseWeb(fm.wiki)) {
|
||||
erreurs.push(`« wiki » invalide : « ${fm.wiki} » — attendu une adresse complète, en https://`)
|
||||
}
|
||||
if (fm.theme !== undefined && fm.theme !== NOM_DU_THEME) {
|
||||
erreurs.push(`« theme » invalide : « ${fm.theme} » — seul le thème commun « ${NOM_DU_THEME} » est publié`)
|
||||
}
|
||||
return erreurs
|
||||
}
|
||||
|
||||
/**
|
||||
* Parcourt slides/ et renvoie les présentations à publier, de la plus récente à la
|
||||
* plus ancienne. Lève une ErreurDeBuild qui détaille tous les défauts trouvés.
|
||||
*/
|
||||
function collecterLesPresentations() {
|
||||
if (!existsSync(SOURCES)) throw new ErreurDeBuild(`répertoire introuvable : ${SOURCES}`)
|
||||
|
||||
const presentations = []
|
||||
const brouillons = []
|
||||
const defauts = []
|
||||
|
||||
const dossiers = readdirSync(SOURCES, { withFileTypes: true })
|
||||
.filter((entree) => entree.isDirectory() && !entree.name.startsWith('_') && !entree.name.startsWith('.'))
|
||||
.map((entree) => entree.name)
|
||||
.sort()
|
||||
|
||||
for (const id of dossiers) {
|
||||
const source = join(SOURCES, id, 'slides.md')
|
||||
const chemin = relative(RACINE, source)
|
||||
const signaler = (...messages) => defauts.push(...messages.map((message) => `${chemin} : ${message}`))
|
||||
|
||||
if (!FORME_IDENTIFIANT.test(id)) {
|
||||
signaler(`nom de dossier « ${id} » invalide — minuscules sans accent, chiffres et tirets seulement (exemple : pdf-signer)`)
|
||||
continue
|
||||
}
|
||||
if (!existsSync(source)) {
|
||||
signaler('fichier absent — chaque dossier de slides/ doit contenir un slides.md')
|
||||
continue
|
||||
}
|
||||
|
||||
let fm
|
||||
try {
|
||||
fm = lireFrontMatter(readFileSync(source, 'utf8'))
|
||||
} catch (erreur) {
|
||||
if (!(erreur instanceof ErreurDeBuild)) throw erreur
|
||||
signaler(erreur.message)
|
||||
continue
|
||||
}
|
||||
|
||||
if (fm.brouillon !== undefined && typeof fm.brouillon !== 'boolean') {
|
||||
signaler(`« brouillon » invalide : « ${fm.brouillon} » — attendu true ou false`)
|
||||
continue
|
||||
}
|
||||
if (fm.brouillon === true) {
|
||||
brouillons.push(id)
|
||||
continue
|
||||
}
|
||||
|
||||
const erreurs = validerFrontMatter(fm)
|
||||
if (erreurs.length > 0) {
|
||||
signaler(...erreurs)
|
||||
continue
|
||||
}
|
||||
|
||||
presentations.push({
|
||||
id,
|
||||
source,
|
||||
titre: fm.title.trim(),
|
||||
description: fm.description.trim(),
|
||||
auteur: fm.auteur.trim(),
|
||||
date: fm.date,
|
||||
niveau: fm.niveau,
|
||||
format: fm.format,
|
||||
tags: fm.tags.map((tag) => tag.trim()),
|
||||
wiki: fm.wiki ?? null,
|
||||
langue: typeof fm.lang === 'string' ? fm.lang : 'fr',
|
||||
})
|
||||
}
|
||||
|
||||
if (defauts.length > 0) {
|
||||
throw new ErreurDeBuild(`${defauts.length} erreur(s) dans les sources :\n` + defauts.map((defaut) => ` - ${defaut}`).join('\n'))
|
||||
}
|
||||
|
||||
presentations.sort((a, b) => b.date.localeCompare(a.date) || a.titre.localeCompare(b.titre, 'fr'))
|
||||
return { presentations, brouillons }
|
||||
}
|
||||
|
||||
// ── Diaporamas ─────────────────────────────────────────────────────────────
|
||||
|
||||
/** Lance Marp CLI en gardant sa sortie pour nous : elle n'est montrée qu'en cas d'échec. */
|
||||
async function lancerMarp(arguments_) {
|
||||
const journal = []
|
||||
const originaux = { log: console.log, info: console.info, warn: console.warn, error: console.error }
|
||||
for (const methode of Object.keys(originaux)) {
|
||||
console[methode] = (...morceaux) => journal.push(morceaux.join(' '))
|
||||
}
|
||||
let code
|
||||
try {
|
||||
code = await marpCli(['--no-stdin', '--no-config-file', ...arguments_])
|
||||
} catch (erreur) {
|
||||
journal.push(String(erreur?.message ?? erreur))
|
||||
code = 1
|
||||
} finally {
|
||||
Object.assign(console, originaux)
|
||||
}
|
||||
return { code, journal: journal.join('\n').trim() }
|
||||
}
|
||||
|
||||
const adresses = (html, motif) => [...html.matchAll(motif)].map((trouve) => trouve[1].replaceAll('&', '&'))
|
||||
|
||||
/**
|
||||
* Vérifie ce que le diaporama généré charge : rien d'un autre site hormis le logo, et
|
||||
* des images locales qui existent bien dans le dossier images/ de la présentation.
|
||||
*/
|
||||
function controlerLesRessources(html, presentation) {
|
||||
const erreurs = []
|
||||
const chargees = new Set([
|
||||
...adresses(html, /<(?:img|script|source|video|audio|iframe|embed|track)\b[^>]*?\ssrc=["']([^"']+)["']/gi),
|
||||
...adresses(html, /<link\b[^>]*?\shref=["']([^"']+)["']/gi),
|
||||
...adresses(html, /url\(\s*(?:"|["'])?([^"')&]+)/gi),
|
||||
...adresses(html, /@import\s+(?:url\()?\s*(?:"|["'])([^"')&]+)/gi),
|
||||
])
|
||||
|
||||
for (const adresse of chargees) {
|
||||
if (adresse.startsWith('data:') || adresse.startsWith('#')) continue
|
||||
if (/^([a-z][a-z0-9+.-]*:)?\/\//i.test(adresse)) {
|
||||
if (!RESSOURCES_EXTERNES_ADMISES.has(adresse)) {
|
||||
erreurs.push(`ressource externe interdite : ${adresse} — copiez le fichier dans images/ et citez-le par son chemin relatif`)
|
||||
}
|
||||
continue
|
||||
}
|
||||
const chemin = decodeURI(adresse.split(/[?#]/)[0])
|
||||
if (!chemin.startsWith('images/') || chemin.split('/').includes('..')) {
|
||||
erreurs.push(`fichier hors du dossier images/ : ${adresse} — seul images/ est publié avec le diaporama`)
|
||||
} else if (!existsSync(join(dirname(presentation.source), chemin))) {
|
||||
erreurs.push(`image introuvable : ${adresse}`)
|
||||
}
|
||||
}
|
||||
return erreurs
|
||||
}
|
||||
|
||||
async function genererLeDiaporama(presentation, sortie) {
|
||||
const chemin = relative(RACINE, presentation.source)
|
||||
const dossier = join(sortie, presentation.id)
|
||||
const page = join(dossier, 'index.html')
|
||||
mkdirSync(dossier, { recursive: true })
|
||||
|
||||
const { code, journal } = await lancerMarp([
|
||||
presentation.source, '-o', page, '--theme-set', THEME, '--theme', NOM_DU_THEME,
|
||||
])
|
||||
if (code !== 0 || !existsSync(page)) {
|
||||
throw new ErreurDeBuild(`${chemin} : Marp n'a pas pu générer le diaporama.\n${journal}`)
|
||||
}
|
||||
|
||||
let html = readFileSync(page, 'utf8')
|
||||
const erreurs = controlerLesRessources(html, presentation)
|
||||
if (erreurs.length > 0) {
|
||||
throw new ErreurDeBuild(erreurs.map((erreur) => `${chemin} : ${erreur}`).join('\n'))
|
||||
}
|
||||
|
||||
// Marp écrit lang="en" faute de directive : le contenu est en français.
|
||||
html = html.replace(/<html\b[^>]*>/i, (balise) => /\slang=/.test(balise)
|
||||
? balise.replace(/\slang=["'][^"']*["']/, ` lang="${presentation.langue}"`)
|
||||
: balise.replace(/<html/i, `<html lang="${presentation.langue}"`))
|
||||
writeFileSync(page, html)
|
||||
|
||||
const images = join(dirname(presentation.source), 'images')
|
||||
if (existsSync(images)) cpSync(images, join(dossier, 'images'), { recursive: true })
|
||||
}
|
||||
|
||||
// ── Page d'accueil, JSON et .htaccess ──────────────────────────────────────
|
||||
|
||||
const echapper = (texte) => String(texte)
|
||||
.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>')
|
||||
.replaceAll('"', '"').replaceAll("'", ''')
|
||||
|
||||
/** Minuscules sans accents : « Débutant » et « debutant » se retrouvent. */
|
||||
const normaliser = (texte) => texte.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase()
|
||||
|
||||
const dateLisible = (date) => new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeZone: 'UTC' })
|
||||
.format(new Date(`${date}T00:00:00Z`))
|
||||
|
||||
function carte(presentation) {
|
||||
const p = presentation
|
||||
const recherche = normaliser([p.titre, ...p.tags].join(' '))
|
||||
const tags = p.tags.map((tag) => `<li>${echapper(tag)}</li>`).join('')
|
||||
const lienWiki = p.wiki
|
||||
? `\n <a class="lien" href="${echapper(p.wiki)}">Fiche sur le wiki<span class="lu-seulement"> : ${echapper(p.titre)}</span></a>`
|
||||
: ''
|
||||
return ` <li class="carte" data-niveau="${p.niveau}" data-format="${p.format}" data-recherche="${echapper(recherche)}">
|
||||
<article>
|
||||
<h2><a href="${p.id}/">${echapper(p.titre)}</a></h2>
|
||||
<p class="meta"><time datetime="${p.date}">${dateLisible(p.date)}</time> · ${echapper(p.auteur)}</p>
|
||||
<p class="description">${echapper(p.description)}</p>
|
||||
<ul class="etiquettes" aria-label="Niveau, format et mots-clés">
|
||||
<li class="niveau">${NIVEAUX[p.niveau]}</li><li class="format">${FORMATS[p.format]}</li>${tags}
|
||||
</ul>
|
||||
<a class="lien principal" href="${p.id}/">Ouvrir le diaporama<span class="lu-seulement"> : ${echapper(p.titre)}</span></a>${lienWiki}
|
||||
</article>
|
||||
</li>`
|
||||
}
|
||||
|
||||
const options = (valeurs) => Object.entries(valeurs)
|
||||
.map(([valeur, libelle]) => `<option value="${valeur}">${libelle}</option>`).join('')
|
||||
|
||||
function pageAccueil(presentations) {
|
||||
const total = presentations.length
|
||||
const compte = total === 0 ? 'Aucune présentation' : total === 1 ? '1 présentation' : `${total} présentations`
|
||||
return `<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Présentations d'Alpinux</title>
|
||||
<meta name="description" content="Les diaporamas des réunions d'Alpinux, le groupe d'utilisateurs de logiciels libres de Savoie.">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<link rel="icon" href="${URL_LOGO}">
|
||||
<link rel="alternate" type="application/json" href="presentations.json" title="Liste des présentations">
|
||||
<style>
|
||||
:root {
|
||||
--fond: #f3f6fb; --surface: #ffffff; --texte: #1a1a2e; --texte-doux: #4a5568;
|
||||
--bleu: #1a6bbf; --bleu-fonce: #0f4e8f; --trait: #c9d6e8; --lien: #0f4e8f;
|
||||
--pastille: #e4ecf7; --pastille-texte: #0b2e55; --focus: #b45309;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--fond: #0e1726; --surface: #172338; --texte: #eef3fa; --texte-doux: #b4c2d6;
|
||||
--trait: #2c3e5a; --lien: #9fd0ff; --pastille: #24456e; --pastille-texte: #eef3fa;
|
||||
--focus: #ffc857;
|
||||
}
|
||||
}
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
margin: 0; min-height: 100vh; display: flex; flex-direction: column;
|
||||
font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", "DejaVu Sans", sans-serif;
|
||||
font-size: 1.05rem; line-height: 1.55; background: var(--fond); color: var(--texte);
|
||||
}
|
||||
a { color: var(--lien); }
|
||||
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
|
||||
.lu-seulement {
|
||||
position: absolute; width: 1px; height: 1px; overflow: hidden;
|
||||
clip-path: inset(50%); white-space: nowrap;
|
||||
}
|
||||
.evitement {
|
||||
position: absolute; left: .5rem; top: -4rem; padding: .5rem .9rem; border-radius: 6px;
|
||||
background: #fff; color: #0f4e8f; font-weight: 600; z-index: 1;
|
||||
}
|
||||
.evitement:focus { top: .5rem; }
|
||||
header.bandeau { background: var(--bleu); color: #fff; padding: 1.6rem 1.2rem; }
|
||||
.bandeau .cadre { display: flex; align-items: center; gap: 1rem; }
|
||||
.bandeau img { width: 64px; height: 64px; border-radius: 10px; background: #fff; flex: none; }
|
||||
.bandeau h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.1; letter-spacing: -.01em; }
|
||||
.bandeau p { margin: .25rem 0 0; color: #e6f0fb; }
|
||||
.cadre { width: 100%; max-width: 62rem; margin: 0 auto; }
|
||||
main { flex: 1; padding: 1.4rem 1.2rem 2.5rem; }
|
||||
form.filtres {
|
||||
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .9rem; margin-bottom: 1rem;
|
||||
padding: 1rem; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px;
|
||||
}
|
||||
.filtres label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
|
||||
.filtres input, .filtres select {
|
||||
width: 100%; min-height: 2.75rem; padding: .45rem .7rem; font: inherit;
|
||||
color: var(--texte); background: var(--fond); border: 2px solid var(--trait); border-radius: 8px;
|
||||
}
|
||||
.compte { margin: 0 0 1rem; color: var(--texte-doux); }
|
||||
ul.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
|
||||
.carte article {
|
||||
height: 100%; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.2rem 1.2rem;
|
||||
background: var(--surface); border: 1px solid var(--trait); border-top: 5px solid var(--bleu); border-radius: 12px;
|
||||
}
|
||||
.carte h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
|
||||
.carte h2 a { text-decoration: none; }
|
||||
.carte h2 a:hover { text-decoration: underline; }
|
||||
.carte p { margin: 0; }
|
||||
.meta { color: var(--texte-doux); font-size: .92rem; }
|
||||
.description { flex: 1; }
|
||||
.etiquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; }
|
||||
.etiquettes li { padding: .1rem .6rem; border-radius: 999px; background: var(--pastille); color: var(--pastille-texte); }
|
||||
.etiquettes .niveau, .etiquettes .format { background: var(--bleu-fonce); color: #fff; font-weight: 600; }
|
||||
.lien { font-weight: 600; }
|
||||
.lien.principal {
|
||||
align-self: flex-start; margin-top: .3rem; padding: .5rem 1rem; border-radius: 8px;
|
||||
background: var(--bleu-fonce); color: #fff; text-decoration: none;
|
||||
}
|
||||
.lien.principal:hover { background: var(--bleu); }
|
||||
.vide { padding: 2rem 1rem; text-align: center; background: var(--surface); border: 1px dashed var(--trait); border-radius: 12px; }
|
||||
footer.pied { padding: 1.2rem; border-top: 1px solid var(--trait); color: var(--texte-doux); font-size: .92rem; text-align: center; }
|
||||
[hidden] { display: none !important; }
|
||||
@media (max-width: 40rem) { form.filtres { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a class="evitement" href="#liste">Aller à la liste des présentations</a>
|
||||
<header class="bandeau">
|
||||
<div class="cadre">
|
||||
<img src="${URL_LOGO}" alt="" width="64" height="64">
|
||||
<div>
|
||||
<h1>Présentations d'Alpinux</h1>
|
||||
<p>Les diaporamas des réunions du groupe d'utilisateurs de logiciels libres de Savoie.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="cadre">
|
||||
<form class="filtres" id="filtres" role="search" aria-label="Filtrer les présentations" hidden>
|
||||
<div>
|
||||
<label for="recherche">Rechercher dans les titres et les mots-clés</label>
|
||||
<input type="search" id="recherche" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div>
|
||||
<label for="niveau">Niveau</label>
|
||||
<select id="niveau"><option value="">Tous les niveaux</option>${options(NIVEAUX)}</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="format">Format</label>
|
||||
<select id="format"><option value="">Tous les formats</option>${options(FORMATS)}</select>
|
||||
</div>
|
||||
</form>
|
||||
<p class="compte" id="compte" role="status">${compte}, de la plus récente à la plus ancienne.</p>
|
||||
<ul class="cartes" id="liste" tabindex="-1">
|
||||
${presentations.map(carte).join('\n')}
|
||||
</ul>
|
||||
<p class="vide" id="vide"${total === 0 ? '' : ' hidden'}>${total === 0 ? 'Aucune présentation n\'est encore publiée.' : 'Aucune présentation ne correspond à ces critères.'}</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="pied">
|
||||
<a href="https://alpinux.org">alpinux.org</a> ·
|
||||
<a href="https://wiki.alpinux.org">Le wiki</a> ·
|
||||
<a href="https://gitea.alpinux.org/alpinux.cedrica5l/alpinux-presentations">Proposer une présentation</a>
|
||||
</footer>
|
||||
<script>
|
||||
// Filtres de la liste. Sans JavaScript, la page reste complète : le formulaire est
|
||||
// simplement masqué.
|
||||
(function () {
|
||||
var formulaire = document.getElementById('filtres');
|
||||
var cartes = Array.prototype.slice.call(document.querySelectorAll('.carte'));
|
||||
if (!formulaire || cartes.length === 0) return;
|
||||
var recherche = document.getElementById('recherche');
|
||||
var niveau = document.getElementById('niveau');
|
||||
var format = document.getElementById('format');
|
||||
var compte = document.getElementById('compte');
|
||||
var vide = document.getElementById('vide');
|
||||
|
||||
function normaliser(texte) {
|
||||
return texte.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').toLowerCase();
|
||||
}
|
||||
|
||||
function filtrer() {
|
||||
var mots = normaliser(recherche.value).split(/\\s+/).filter(Boolean);
|
||||
var visibles = 0;
|
||||
cartes.forEach(function (carte) {
|
||||
var garde = (!niveau.value || carte.dataset.niveau === niveau.value)
|
||||
&& (!format.value || carte.dataset.format === format.value)
|
||||
&& mots.every(function (mot) { return carte.dataset.recherche.indexOf(mot) !== -1; });
|
||||
carte.hidden = !garde;
|
||||
if (garde) visibles += 1;
|
||||
});
|
||||
vide.hidden = visibles !== 0;
|
||||
compte.textContent = visibles === cartes.length
|
||||
? (visibles === 1 ? '1 présentation' : visibles + ' présentations') + ', de la plus récente à la plus ancienne.'
|
||||
: visibles + ' sur ' + cartes.length + (visibles > 1 ? ' affichées.' : ' affichée.');
|
||||
}
|
||||
|
||||
formulaire.hidden = false;
|
||||
formulaire.addEventListener('submit', function (evenement) { evenement.preventDefault(); });
|
||||
formulaire.addEventListener('input', filtrer);
|
||||
formulaire.addEventListener('change', filtrer);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
|
||||
function fichierJson(presentations) {
|
||||
return JSON.stringify({
|
||||
genere: new Date().toISOString(),
|
||||
site: `${URL_SITE}/`,
|
||||
presentations: presentations.map((p) => ({
|
||||
id: p.id,
|
||||
titre: p.titre,
|
||||
description: p.description,
|
||||
auteur: p.auteur,
|
||||
date: p.date,
|
||||
niveau: p.niveau,
|
||||
format: p.format,
|
||||
tags: p.tags,
|
||||
url: `${URL_SITE}/${p.id}/`,
|
||||
wiki: p.wiki,
|
||||
})),
|
||||
}, null, 2) + '\n'
|
||||
}
|
||||
|
||||
const HTACCESS = `# Généré par scripts/build.mjs — ne pas modifier sur le serveur, le prochain
|
||||
# déploiement l'écraserait.
|
||||
|
||||
AddDefaultCharset utf-8
|
||||
|
||||
# presentations.json est lu par alpinux.org depuis le navigateur du visiteur : sans cet
|
||||
# en-tête, un autre domaine n'a pas le droit de le lire. Rien d'autre n'est ouvert.
|
||||
<IfModule mod_headers.c>
|
||||
<Files "presentations.json">
|
||||
Header set Access-Control-Allow-Origin "*"
|
||||
</Files>
|
||||
</IfModule>
|
||||
`
|
||||
|
||||
// ── Enchaînement ───────────────────────────────────────────────────────────
|
||||
|
||||
/** Refuse un répertoire de sortie dont le nettoyage emporterait les sources. */
|
||||
function verifierLaSortie(sortie) {
|
||||
const contient = (parent, enfant) => enfant === parent || enfant.startsWith(parent + sep)
|
||||
if (contient(sortie, RACINE) || ['slides', 'theme', 'scripts', 'deploy', 'node_modules', '.git']
|
||||
.some((dossier) => contient(join(RACINE, dossier), sortie))) {
|
||||
throw new ErreurDeBuild(`répertoire de sortie refusé : ${sortie} — il serait vidé alors qu'il contient des sources`)
|
||||
}
|
||||
}
|
||||
|
||||
async function construire(sortie) {
|
||||
verifierLaSortie(sortie)
|
||||
const { presentations, brouillons } = collecterLesPresentations()
|
||||
for (const id of brouillons) console.log(` (brouillon, non publié) ${id}`)
|
||||
|
||||
// Tout est généré à part, puis mis en place d'un coup : un échec en cours de route
|
||||
// laisse le répertoire de sortie tel qu'il était.
|
||||
mkdirSync(dirname(sortie), { recursive: true })
|
||||
const chantier = mkdtempSync(join(dirname(sortie), '.build-'))
|
||||
chmodSync(chantier, 0o755)
|
||||
try {
|
||||
for (const presentation of presentations) {
|
||||
await genererLeDiaporama(presentation, chantier)
|
||||
console.log(` diaporama ${presentation.id}/index.html`)
|
||||
}
|
||||
writeFileSync(join(chantier, 'index.html'), pageAccueil(presentations))
|
||||
writeFileSync(join(chantier, 'presentations.json'), fichierJson(presentations))
|
||||
writeFileSync(join(chantier, '.htaccess'), HTACCESS)
|
||||
console.log(' accueil index.html\n données presentations.json\n serveur .htaccess')
|
||||
|
||||
rmSync(sortie, { recursive: true, force: true })
|
||||
renameSync(chantier, sortie)
|
||||
} finally {
|
||||
rmSync(chantier, { recursive: true, force: true })
|
||||
}
|
||||
console.log(`Build réussi : ${presentations.length} présentation(s) dans ${relative(process.cwd(), sortie) || '.'}/`)
|
||||
}
|
||||
|
||||
async function exporterEnPdf(id, sortie) {
|
||||
if (!id) throw new ErreurDeBuild('identifiant manquant — usage : npm run pdf -- <identifiant>')
|
||||
const source = join(SOURCES, id, 'slides.md')
|
||||
if (!FORME_IDENTIFIANT.test(id) && id !== '_modele' || !existsSync(source)) {
|
||||
throw new ErreurDeBuild(`présentation introuvable : slides/${id}/slides.md`)
|
||||
}
|
||||
const pdf = join(sortie, id, `${id}.pdf`)
|
||||
mkdirSync(dirname(pdf), { recursive: true })
|
||||
// Marp pilote un navigateur déjà installé (Chromium, Chrome, Edge ou Firefox) pour
|
||||
// imprimer le diaporama : c'est pourquoi cet export ne se fait pas sur le serveur.
|
||||
const { code, journal } = await lancerMarp([
|
||||
source, '-o', pdf, '--pdf', '--allow-local-files', '--theme-set', THEME, '--theme', NOM_DU_THEME,
|
||||
])
|
||||
if (code !== 0 || !existsSync(pdf)) {
|
||||
throw new ErreurDeBuild(`l'export PDF de « ${id} » a échoué. Un navigateur (Chromium ou Firefox) ` +
|
||||
`doit être installé sur ce poste.\n${journal}`)
|
||||
}
|
||||
console.log(`PDF généré : ${relative(process.cwd(), pdf)}`)
|
||||
}
|
||||
|
||||
const args = process.argv.slice(2)
|
||||
try {
|
||||
if (args[0] === '--pdf') {
|
||||
await exporterEnPdf(args[1], resolve(args[2] ?? join(RACINE, 'public')))
|
||||
} else if (args[0]?.startsWith('-')) {
|
||||
throw new ErreurDeBuild(`option inconnue : ${args[0]} — usage : node scripts/build.mjs [sortie] | --pdf <identifiant> [sortie]`)
|
||||
} else {
|
||||
await construire(resolve(args[0] ?? join(RACINE, 'public')))
|
||||
}
|
||||
} catch (erreur) {
|
||||
if (!(erreur instanceof ErreurDeBuild)) throw erreur
|
||||
console.error(`\nÉCHEC du build — ${erreur.message}\n`)
|
||||
process.exit(1)
|
||||
}
|
||||
40
scripts/deploy-presentations.sh
Executable file
40
scripts/deploy-presentations.sh
Executable file
|
|
@ -0,0 +1,40 @@
|
|||
#!/bin/bash
|
||||
# Met en ligne presentations.alpinux.org depuis le dépôt alpinux-presentations.
|
||||
# Appelé par le service webhook après chaque push sur main, ou à la main en secours.
|
||||
# Calqué sur deploy-wiki.sh : le serveur exécute sa copie, posée par deploy/installer.sh.
|
||||
set -e
|
||||
|
||||
REPO_DIR="/opt/presentations-alpinux/repo"
|
||||
STAGING="/opt/presentations-alpinux/staging"
|
||||
TARGET="/var/www/clients/client1/web22/web"
|
||||
NODE_BIN="/opt/presentations-alpinux/node/bin"
|
||||
LOG="/var/log/presentations-deploy.log"
|
||||
|
||||
export PATH="$NODE_BIN:$PATH"
|
||||
|
||||
# Deux push rapprochés : le second déploiement attend la fin du premier au lieu de
|
||||
# construire dans le même staging.
|
||||
exec 9> "/tmp/presentations-deploy.lock"
|
||||
flock 9
|
||||
|
||||
echo "[$(date '+%Y-%m-%d %H:%M:%S')] Deploy started" >> "$LOG"
|
||||
trap 'echo "[$(date "+%Y-%m-%d %H:%M:%S")] ABANDON : le site en ligne est inchangé" >> "$LOG"' ERR
|
||||
|
||||
cd "$REPO_DIR"
|
||||
git pull origin main >> "$LOG" 2>&1
|
||||
|
||||
# --ignore-scripts : aucune dépendance n'a besoin d'exécuter du code à l'installation,
|
||||
# et aucune n'en a donc le droit.
|
||||
npm ci --ignore-scripts --no-audit --no-fund >> "$LOG" 2>&1
|
||||
|
||||
# Build dans un répertoire de staging : le site en ligne reste intact si le build
|
||||
# échoue (front matter invalide, image manquante, ressource externe).
|
||||
node scripts/build.mjs "$STAGING" >> "$LOG" 2>&1
|
||||
|
||||
# Bascule vers le DocumentRoot une fois le build valide. Les deux dossiers exclus
|
||||
# appartiennent à ISPConfig (pages d'erreur, statistiques) : --delete les épargne.
|
||||
rsync -rltD --no-perms --omit-dir-times --delete \
|
||||
--exclude=/error/ --exclude=/stats/ \
|
||||
"$STAGING/" "$TARGET/" >> "$LOG" 2>&1
|
||||
|
||||
echo "[$(date '+%Y-%m-%d %H:%M:%S')] Deploy done" >> "$LOG"
|
||||
4
slides/_modele/images/exemple.svg
Normal file
4
slides/_modele/images/exemple.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 200" width="640" height="200" role="img" aria-label="Image d'exemple">
|
||||
<rect width="640" height="200" rx="16" fill="#f3f6fb" stroke="#1a6bbf" stroke-width="4"/>
|
||||
<text x="320" y="112" text-anchor="middle" font-family="sans-serif" font-size="34" fill="#0f4e8f">images/exemple.svg</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 353 B |
126
slides/_modele/slides.md
Normal file
126
slides/_modele/slides.md
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
---
|
||||
# ── Réglages de Marp : à laisser tels quels ────────────────────────────────
|
||||
marp: true
|
||||
theme: alpinux
|
||||
paginate: true
|
||||
|
||||
# ── Fiche de la présentation : à remplir ───────────────────────────────────
|
||||
# Tous ces champs sont obligatoires, sauf « wiki » et « brouillon ».
|
||||
# Le build refuse un champ manquant, mal orthographié ou une valeur inattendue.
|
||||
|
||||
title: Le titre de votre présentation
|
||||
description: Une phrase qui dit ce qu'on saura faire en sortant de la séance.
|
||||
auteur: Prénom Nom
|
||||
date: 2026-01-15 # date de la séance, au format AAAA-MM-JJ
|
||||
niveau: debutant # debutant | intermediaire | confirme
|
||||
format: court # eclair | court | long
|
||||
tags: [exemple, modele] # mots-clés, en minuscules ; ils servent à la recherche
|
||||
|
||||
# Adresse de la fiche correspondante sur le wiki — supprimez la ligne s'il n'y en a pas.
|
||||
wiki: https://wiki.alpinux.org/
|
||||
|
||||
# Tant que cette ligne vaut « true », la présentation n'est pas publiée.
|
||||
# Supprimez-la (ou passez-la à « false ») quand le diaporama est prêt.
|
||||
brouillon: true
|
||||
---
|
||||
|
||||
<!-- _class: titre -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
# Le titre de votre présentation
|
||||
|
||||
## Un sous-titre, si besoin
|
||||
|
||||
Prénom Nom — Alpinux, jeudi 15 janvier 2026
|
||||
|
||||
<!--
|
||||
Ceci est une note d'orateur : un commentaire HTML placé dans une diapo.
|
||||
Elle n'apparaît pas à l'écran, seulement dans la vue présentateur (touche P).
|
||||
|
||||
Les deux commentaires du haut, eux, sont des réglages : « _class: titre » applique
|
||||
la mise en page de titre à cette diapo, « _paginate: false » en retire le numéro.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Une diapo ordinaire
|
||||
|
||||
Trois tirets seuls sur une ligne séparent deux diapos.
|
||||
|
||||
- Une idée par ligne, pas une phrase entière
|
||||
- **Du gras** pour le mot qui compte
|
||||
- Trois à cinq lignes : au-delà, on ne lit plus depuis le fond de la salle
|
||||
|
||||
> Une citation fait un encadré : pratique pour « à retenir » ou « piège ».
|
||||
|
||||
<!--
|
||||
Écrivez ici ce que vous direz à voix haute. La diapo, elle, ne porte que les repères.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Du code et des raccourcis
|
||||
|
||||
Une commande courte se lit bien dans un bloc :
|
||||
|
||||
```bash
|
||||
sudo apt install xournalpp
|
||||
```
|
||||
|
||||
Dans une phrase : `du -h fichier.pdf`, ou une touche <kbd>Ctrl</kbd> + <kbd>S</kbd>.
|
||||
|
||||
<!--
|
||||
Pas plus de six ou sept lignes de code par diapo.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Un tableau
|
||||
|
||||
| Je veux… | J'utilise… |
|
||||
|---------------------|-------------|
|
||||
| Lire un document | Xreader |
|
||||
| Signer un document | Xournal++ |
|
||||
|
||||
<!--
|
||||
Deux ou trois colonnes au plus : un tableau large devient illisible une fois projeté.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Une image
|
||||
|
||||
Rangez vos images dans le dossier `images/`, à côté de ce fichier :
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
Seul le dossier images/ est publié avec le diaporama. Une image prise ailleurs sur
|
||||
Internet est refusée par le build : téléchargez-la et rangez-la ici, en vérifiant que
|
||||
sa licence le permet.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: demo -->
|
||||
|
||||
## Ce que je vais montrer
|
||||
|
||||
1. Première manipulation
|
||||
2. Deuxième manipulation
|
||||
3. Ce qu'il faut regarder à l'écran
|
||||
|
||||
<!--
|
||||
« _class: demo » annonce qu'on quitte le diaporama pour une démonstration en direct.
|
||||
Notez ici le déroulé exact, et le plan B si la démonstration échoue.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: titre -->
|
||||
|
||||
# Merci !
|
||||
|
||||
## Des questions ?
|
||||
|
||||
Diaporama : presentations.alpinux.org
|
||||
37
slides/pdf-signer/images/parcours.svg
Normal file
37
slides/pdf-signer/images/parcours.svg
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1120 170" width="1120" height="170" role="img" aria-labelledby="titre">
|
||||
<title id="titre">Le parcours du dossier : remplir, signer, assembler, alléger, envoyer</title>
|
||||
<defs>
|
||||
<marker id="fleche" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
|
||||
<path d="M0 0 L10 5 L0 10 z" fill="#0f4e8f"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g font-family="Inter, 'Noto Sans', Ubuntu, 'DejaVu Sans', sans-serif" text-anchor="middle">
|
||||
<g fill="#f3f6fb" stroke="#1a6bbf" stroke-width="4">
|
||||
<rect x="4" y="20" width="184" height="130" rx="16"/>
|
||||
<rect x="236" y="20" width="184" height="130" rx="16"/>
|
||||
<rect x="468" y="20" width="184" height="130" rx="16"/>
|
||||
<rect x="700" y="20" width="184" height="130" rx="16"/>
|
||||
</g>
|
||||
<rect x="932" y="20" width="184" height="130" rx="16" fill="#1a6bbf" stroke="#0f4e8f" stroke-width="4"/>
|
||||
<g stroke="#0f4e8f" stroke-width="5" marker-end="url(#fleche)">
|
||||
<path d="M192 85 H230"/>
|
||||
<path d="M424 85 H462"/>
|
||||
<path d="M656 85 H694"/>
|
||||
<path d="M888 85 H926"/>
|
||||
</g>
|
||||
<g font-size="30" font-weight="700" fill="#0f4e8f">
|
||||
<text x="96" y="78">Remplir</text>
|
||||
<text x="328" y="78">Signer</text>
|
||||
<text x="560" y="78">Assembler</text>
|
||||
<text x="792" y="78">Alléger</text>
|
||||
</g>
|
||||
<text x="1024" y="78" font-size="30" font-weight="700" fill="#ffffff">Envoyer</text>
|
||||
<g font-size="22" fill="#1a1a2e">
|
||||
<text x="96" y="116">Okular</text>
|
||||
<text x="328" y="116">Xournal++</text>
|
||||
<text x="560" y="116">PDF Arranger</text>
|
||||
<text x="792" y="116">Ghostscript</text>
|
||||
</g>
|
||||
<text x="1024" y="116" font-size="22" fill="#ffffff">un seul PDF</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
477
slides/pdf-signer/slides.md
Normal file
477
slides/pdf-signer/slides.md
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
---
|
||||
marp: true
|
||||
theme: alpinux
|
||||
paginate: true
|
||||
|
||||
title: Lire, remplir et signer ses PDF
|
||||
description: Remplir, signer, assembler et alléger un dossier PDF sous Linux Mint, sans imprimante, sans scanner et sans service en ligne.
|
||||
auteur: Alpinux
|
||||
date: 2026-10-15
|
||||
niveau: debutant
|
||||
format: court
|
||||
tags: [pdf, bureautique, linux-mint, xreader, okular, xournalpp, pdfarranger, libreoffice]
|
||||
---
|
||||
|
||||
<!-- _class: titre -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||
# Lire, remplir et signer ses PDF
|
||||
|
||||
## Sans imprimante, sans scanner, sans service en ligne
|
||||
|
||||
Alpinux — sous Linux Mint, 20 minutes
|
||||
|
||||
<!--
|
||||
Accroche : « Qui a déjà imprimé un formulaire, l'a signé au stylo, puis l'a scanné
|
||||
pour le renvoyer par mail ? » Laisser les mains se lever.
|
||||
|
||||
Objectif de la séance : ne plus jamais faire ça.
|
||||
|
||||
Avant de commencer, vérifier : les quatre fichiers de démonstration sont sur le bureau
|
||||
(formulaire à champs, formulaire scanné, photo du justificatif, signature en PNG) et
|
||||
Okular, Xournal++ et PDF Arranger sont installés. Couper les notifications.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Le fil rouge : un dossier d'inscription
|
||||
|
||||
|
||||
|
||||
- Un **formulaire** à remplir et à signer
|
||||
- Une **pièce justificative** à joindre
|
||||
- Le tout en **un seul PDF léger**, envoyé par mail
|
||||
|
||||
<!--
|
||||
Poser le décor : une association, une école ou une mairie nous envoie un formulaire
|
||||
d'inscription. Elle veut le recevoir rempli, signé, avec un justificatif, par mail.
|
||||
|
||||
Chaque outil de ce soir résout une étape du parcours, dans l'ordre.
|
||||
|
||||
Piège à signaler tout de suite : beaucoup de messageries refusent les pièces jointes
|
||||
trop lourdes. Un scan de quelques pages peut peser plus de 20 Mo : d'où la dernière
|
||||
étape, alléger.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Cinq outils, tous libres
|
||||
|
||||
| Étape | Outil | Dans Linux Mint ? |
|
||||
|----------------------|------------------|--------------------|
|
||||
| Lire, surligner | **Xreader** | Déjà installé |
|
||||
| Remplir, annoter | **Okular** | À installer |
|
||||
| Signer | **Xournal++** | À installer |
|
||||
| Assembler | **PDF Arranger** | À installer |
|
||||
| Créer, alléger | **LibreOffice** | Déjà installé |
|
||||
|
||||
```bash
|
||||
sudo apt install okular xournalpp pdfarranger
|
||||
```
|
||||
|
||||
<!--
|
||||
Les trois logiciels à installer sont aussi dans la Logithèque : chercher « Okular »,
|
||||
« Xournal++ » et « PDF Arranger ». À recommander à ceux que le terminal intimide.
|
||||
|
||||
Piège : dans la Logithèque, un même logiciel apparaît parfois deux fois, en paquet
|
||||
système et en Flatpak. Les deux fonctionnent ; prendre le paquet système pour rester
|
||||
simple.
|
||||
|
||||
Okular vient de l'environnement KDE : il installe pas mal de bibliothèques avec lui.
|
||||
C'est normal, et sans conséquence sur le reste du système.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## 1. Xreader : lire, chercher, surligner
|
||||
|
||||
Le lecteur de Linux Mint : un double-clic sur le PDF suffit.
|
||||
|
||||
- **Panneau latéral** : vignettes des pages, sommaire
|
||||
- **Chercher** un mot : <kbd>Ctrl</kbd> + <kbd>F</kbd>
|
||||
- **Surligner** et ajouter une note : panneau *Annotations*
|
||||
- **Remplir** un champ de formulaire simple, directement
|
||||
|
||||
> Pour lire, et pour un formulaire simple : **rien à installer**.
|
||||
|
||||
<!--
|
||||
Le panneau latéral s'affiche avec F9. Son menu déroulant permet de passer des
|
||||
vignettes au sommaire puis aux annotations.
|
||||
|
||||
Pour surligner : panneau latéral → Annotations → onglet « Ajouter » → choisir le
|
||||
surligneur, puis sélectionner le texte.
|
||||
|
||||
Piège : la recherche ne trouve rien dans un document scanné. Un scan est une
|
||||
photographie du texte, pas du texte. Si Ctrl+F ne trouve pas un mot pourtant visible à
|
||||
l'écran, c'est le signe qu'on a affaire à un scan — et qu'il n'aura pas de champs à
|
||||
remplir non plus. (La reconnaissance de caractères est un autre sujet : voir la fiche
|
||||
Tesseract du wiki.)
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Xreader : le piège de la fermeture
|
||||
|
||||
Xreader **n'enregistre pas** dans le fichier ouvert.
|
||||
|
||||
- *Fichier → Enregistrer une copie…*
|
||||
- Donner un **nouveau nom** : `inscription-remplie.pdf`
|
||||
- Rouvrir la copie pour **vérifier**
|
||||
|
||||
> **Piège** — fermer la fenêtre sans « Enregistrer une copie », c'est perdre les
|
||||
> annotations et tout ce qu'on a saisi.
|
||||
|
||||
<!--
|
||||
C'est LE piège de Xreader : pas de bouton « Enregistrer », pas de Ctrl+S qui écrase le
|
||||
fichier. On croit avoir fini, on ferme, et tout est perdu.
|
||||
|
||||
Bonne habitude à installer dès maintenant, valable toute la soirée : on ne travaille
|
||||
jamais sur l'original. À chaque étape, un nouveau nom — inscription.pdf, puis
|
||||
inscription-remplie.pdf, puis inscription-signee.pdf. Si une étape rate, on repart de
|
||||
la précédente.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: demo -->
|
||||
|
||||
## Xreader
|
||||
|
||||
1. Ouvrir `inscription.pdf` par double-clic
|
||||
2. <kbd>Ctrl</kbd> + <kbd>F</kbd> : chercher « justificatif »
|
||||
3. Surligner la liste des pièces demandées
|
||||
4. *Enregistrer une copie…*, puis rouvrir la copie
|
||||
|
||||
<!--
|
||||
Deux minutes, pas plus.
|
||||
|
||||
Montrer d'abord le piège : surligner, fermer sans enregistrer, rouvrir — le surlignage
|
||||
a disparu. Puis refaire correctement avec « Enregistrer une copie ».
|
||||
|
||||
Plan B si le panneau d'annotations est introuvable sur la machine de démonstration :
|
||||
passer directement à Okular, qui fait la même chose avec une barre d'outils visible.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## 2. Okular : remplir un formulaire
|
||||
|
||||
- Bandeau **« Afficher les formulaires »** en haut du document
|
||||
- Saisie des **champs**, des **cases à cocher**, des listes
|
||||
- **Annotations** : <kbd>F6</kbd> — surligneur, note, trait à main levée
|
||||
- Enregistrer : <kbd>Ctrl</kbd> + <kbd>S</kbd> — le texte est **dans** le PDF
|
||||
|
||||
> S'il ne fallait installer qu'un seul outil, ce serait celui-ci.
|
||||
|
||||
<!--
|
||||
Okular détecte les champs et propose de les afficher. Si le bandeau a été fermé :
|
||||
menu Affichage → Afficher les formulaires.
|
||||
|
||||
Pour prouver que la saisie est bien dans le fichier : enregistrer, puis rouvrir le PDF
|
||||
dans Xreader. Le texte y est. C'est ce que verra le destinataire.
|
||||
|
||||
Piège : enregistrer sous un nouveau nom (Fichier → Enregistrer sous) pour garder le
|
||||
formulaire vierge. On en aura besoin l'an prochain.
|
||||
|
||||
Piège : certains formulaires officiels sont prévus pour Adobe Reader (format « XFA »)
|
||||
et n'affichent qu'un message « veuillez patienter » ou une page vide. Ce n'est pas une
|
||||
panne de Linux : aucun lecteur libre ne les lit correctement. Chercher une autre
|
||||
version du formulaire sur le site de l'organisme, ou faire la démarche en ligne.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Okular : écrire là où il n'y a pas de champ
|
||||
|
||||
Un formulaire **scanné** n'a pas de champs : c'est une image.
|
||||
|
||||
- Barre d'annotations (<kbd>F6</kbd>) → **Machine à écrire**
|
||||
- Cliquer à l'endroit voulu, taper le texte
|
||||
- Déplacer et ajuster le texte ensuite, si besoin
|
||||
- Cocher une case : taper un **X** au bon endroit
|
||||
|
||||
> **Piège** — un PDF protégé peut refuser la saisie.
|
||||
> Dans ce cas : passer à Xournal++.
|
||||
|
||||
<!--
|
||||
C'est le cas le plus fréquent en pratique : le formulaire a été scanné, ou exporté
|
||||
sans champs. La « machine à écrire » pose du texte sans cadre ni fond, comme si on
|
||||
tapait sur la feuille.
|
||||
|
||||
À ne pas confondre avec l'outil « Note intégrée », qui dessine un cadre jaune autour
|
||||
du texte : sur un formulaire, ça fait brouillon.
|
||||
|
||||
Piège : la taille du texte par défaut est souvent trop grande pour les cases. Clic
|
||||
droit sur l'outil dans la barre → Configurer, pour choisir une police plus petite
|
||||
avant de commencer plutôt que de corriger chaque zone après coup.
|
||||
|
||||
Les intitulés exacts des outils changent un peu d'une version d'Okular à l'autre : les
|
||||
repérer sur la machine de démonstration avant la séance.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: demo -->
|
||||
|
||||
## Okular
|
||||
|
||||
1. Ouvrir le formulaire **à champs** : afficher les formulaires, remplir
|
||||
2. Ouvrir le formulaire **scanné** : machine à écrire
|
||||
3. *Enregistrer sous* `inscription-remplie.pdf`
|
||||
4. Rouvrir dans Xreader : le texte est bien là
|
||||
|
||||
<!--
|
||||
Quatre minutes. C'est la démonstration centrale : prendre le temps de taper
|
||||
réellement un nom, une adresse, une date.
|
||||
|
||||
Ne remplir que trois ou quatre champs : le public a compris le principe au deuxième.
|
||||
|
||||
Plan B si le formulaire à champs ne s'affiche pas correctement : ne garder que la
|
||||
version scannée et la machine à écrire. Elle marche sur n'importe quel PDF.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## 3. Xournal++ : signer
|
||||
|
||||
- *Fichier → Annoter un PDF* : ouvrir le formulaire rempli
|
||||
- Outil **Image** : insérer sa signature en **PNG**
|
||||
- La **redimensionner**, la placer sur la ligne
|
||||
- Ajouter la **date** avec l'outil Texte
|
||||
|
||||
> Une signature en image convient à beaucoup de démarches courantes.
|
||||
> Ce n'est **pas** une signature électronique qualifiée.
|
||||
|
||||
<!--
|
||||
Préparer sa signature une fois pour toutes : signer au feutre noir sur une feuille
|
||||
blanche, la photographier bien à plat et en pleine lumière, recadrer, enregistrer en
|
||||
PNG. Idéalement, rendre le fond transparent (dans GIMP : Couleurs → Couleur vers
|
||||
alpha), sinon un rectangle blanc masquera la ligne du formulaire.
|
||||
|
||||
On peut aussi signer à la souris avec l'outil stylo : le montrer avec humour, le
|
||||
résultat est rarement présentable. Avec une tablette graphique ou un écran tactile,
|
||||
en revanche, c'est très bien.
|
||||
|
||||
Piège : pour un acte important (banque, notaire, marché public), l'organisme impose
|
||||
son propre service de signature. L'image collée n'a pas cette valeur.
|
||||
|
||||
Conseil de sécurité : le PNG de sa signature se range dans un dossier discret, pas sur
|
||||
le bureau ni sur une clé USB qui traîne. Quiconque récupère ce fichier peut signer à
|
||||
notre place — et l'image reste récupérable dans le PDF qu'on envoie.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Xournal++ : l'erreur numéro un
|
||||
|
||||
| Commande | Produit | Le destinataire… |
|
||||
|------------------------------|-----------------|-------------------------|
|
||||
| *Fichier → Enregistrer* | un `.xopp` | **ne peut pas l'ouvrir** |
|
||||
| *Fichier → Exporter en PDF* | un `.pdf` | le lit normalement |
|
||||
|
||||
> **Piège** — « Enregistrer » ne modifie pas le PDF. Pour l'envoyer, il faut
|
||||
> **exporter en PDF**.
|
||||
|
||||
<!--
|
||||
C'est l'erreur que tout le monde fait la première fois : Ctrl+S, on joint le fichier
|
||||
au mail… et le destinataire reçoit un .xopp qu'aucun de ses logiciels ne sait ouvrir.
|
||||
|
||||
Le .xopp est le fichier de travail de Xournal++ : il contient nos ajouts et un simple
|
||||
renvoi vers le PDF d'origine. Il sert à reprendre le travail plus tard, pas à être
|
||||
envoyé.
|
||||
|
||||
Piège associé : en quittant, Xournal++ propose d'enregistrer. Si on a déjà exporté le
|
||||
PDF et qu'on ne compte pas y revenir, on peut répondre non — l'export est fait.
|
||||
|
||||
Vérification systématique : avant de joindre, regarder l'extension du fichier. Elle
|
||||
doit être .pdf.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## 4. PDF Arranger : assembler
|
||||
|
||||
- **Glisser** le formulaire signé et le justificatif dans la fenêtre
|
||||
- **Réordonner** les pages à la souris
|
||||
- **Pivoter** une page scannée de travers
|
||||
- **Supprimer** une page blanche
|
||||
- **Extraire** : sélectionner des pages → *Exporter la sélection*
|
||||
|
||||
> Il accepte aussi les **images** : une photo devient une page du PDF.
|
||||
|
||||
<!--
|
||||
PDF Arranger montre chaque page comme une vignette qu'on déplace. C'est très visuel :
|
||||
c'est l'outil que le public adopte le plus vite.
|
||||
|
||||
Piège : utiliser « Enregistrer sous » avec un nouveau nom — dossier-inscription.pdf —
|
||||
pour ne pas écraser le formulaire signé.
|
||||
|
||||
Piège : les champs de formulaire encore modifiables et les annotations peuvent mal
|
||||
survivre à l'assemblage. C'est une raison de plus pour assembler en dernier, une fois
|
||||
le formulaire rempli, signé et exporté par Xournal++.
|
||||
|
||||
Extraire sert aussi dans l'autre sens : n'envoyer que la page 3 d'un relevé de douze
|
||||
pages, plutôt que le relevé entier.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: demo -->
|
||||
|
||||
## Signer, puis assembler
|
||||
|
||||
1. **Xournal++** : *Annoter un PDF* → `inscription-remplie.pdf`
|
||||
2. Insérer la signature, ajouter la date
|
||||
3. *Exporter en PDF* → `inscription-signee.pdf`
|
||||
4. **PDF Arranger** : glisser le PDF signé et la photo du justificatif
|
||||
5. Pivoter la photo, *Enregistrer sous* `dossier-inscription.pdf`
|
||||
|
||||
<!--
|
||||
Cinq minutes pour les deux outils.
|
||||
|
||||
Dans Xournal++, montrer volontairement le piège : faire Ctrl+S, montrer le .xopp dans
|
||||
le gestionnaire de fichiers, puis faire l'export en PDF.
|
||||
|
||||
Dans PDF Arranger, prendre une photo de justificatif volontairement couchée : la
|
||||
rotation devient évidente.
|
||||
|
||||
Plan B si l'insertion de l'image pose problème : signer à la souris avec l'outil
|
||||
stylo. C'est laid, mais la suite du parcours reste démontrable.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## 5. LibreOffice : créer un PDF léger
|
||||
|
||||
*Fichier → Exporter vers → Exporter au format PDF…*
|
||||
|
||||
- **Compression JPEG** : une qualité de 80 % suffit pour l'écran
|
||||
- **Réduire la résolution des images** : 150 DPI
|
||||
- Comparer le poids **avant et après** dans le gestionnaire de fichiers
|
||||
|
||||
> Option **PDF hybride** : le PDF embarque le document d'origine et reste
|
||||
> modifiable dans LibreOffice.
|
||||
|
||||
<!--
|
||||
Cas d'usage : la lettre d'accompagnement, ou un document qu'on a rédigé soi-même avec
|
||||
des photos dedans.
|
||||
|
||||
Piège : le bouton « Exporter directement au format PDF » de la barre d'outils ne
|
||||
montre pas les options et reprend les derniers réglages utilisés. Pour choisir la
|
||||
compression, passer par le menu.
|
||||
|
||||
Piège : 150 DPI convient à la lecture à l'écran et à une impression ordinaire. Pour un
|
||||
document destiné à un imprimeur, garder 300 DPI.
|
||||
|
||||
Le PDF hybride est plus lourd, puisqu'il contient deux fois le document : à réserver
|
||||
aux fichiers qu'on veut pouvoir reprendre, pas à ceux qu'on envoie.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Alléger un scan : Ghostscript
|
||||
|
||||
Le PDF existe déjà et il est trop lourd pour le mail :
|
||||
|
||||
```bash
|
||||
gs -sDEVICE=pdfwrite -dPDFSETTINGS=/ebook \
|
||||
-dNOPAUSE -dBATCH \
|
||||
-sOutputFile=leger.pdf lourd.pdf
|
||||
```
|
||||
|
||||
- `/ebook` : images à 150 DPI — le bon compromis
|
||||
- `/screen` : encore plus léger, souvent **illisible**
|
||||
|
||||
<!--
|
||||
Ghostscript est déjà installé sous Linux Mint : c'est lui qui sert à l'impression.
|
||||
|
||||
Montrer le résultat en chiffres : ls -lh lourd.pdf leger.pdf, ou les propriétés des
|
||||
deux fichiers dans le gestionnaire. Un scan passe couramment de 20 Mo à 2 Mo.
|
||||
|
||||
Piège : le fichier de sortie doit porter un AUTRE nom que le fichier d'entrée. Avec le
|
||||
même nom, on détruit l'original.
|
||||
|
||||
Piège : toujours rouvrir le fichier allégé et zoomer sur les petits caractères avant
|
||||
de l'envoyer. Un justificatif illisible sera refusé, et il faudra tout recommencer.
|
||||
|
||||
Piège : ne pas attendre de miracle sur un PDF qui ne contient que du texte. Il est
|
||||
déjà léger ; le gain vient des images.
|
||||
|
||||
Pour ceux que la ligne de commande rebute : rouvrir le scan dans PDF Arranger ne
|
||||
réduit pas le poids. C'est bien Ghostscript qu'il faut — la commande se copie depuis
|
||||
le diaporama en ligne.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Et les sites de compression en ligne ?
|
||||
|
||||
Ils fonctionnent. Mais on y envoie, à un inconnu :
|
||||
|
||||
- sa **pièce d'identité**
|
||||
- son **avis d'imposition**
|
||||
- son **RIB**, sa **signature**
|
||||
|
||||
> Tout ce qui a été montré ce soir **reste sur l'ordinateur**.
|
||||
|
||||
<!--
|
||||
C'est l'argument de fond de la séance, au-delà du confort.
|
||||
|
||||
Un site « gratuit » qui compresse, fusionne ou signe des PDF reçoit une copie du
|
||||
document. On ne sait ni où elle est stockée, ni combien de temps, ni qui y accède.
|
||||
|
||||
Ne pas culpabiliser ceux qui l'ont déjà fait : le but est de montrer qu'il existe une
|
||||
solution aussi simple, et qu'elle est déjà sur leur ordinateur.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
## Mémo : je veux… j'utilise…
|
||||
|
||||
| Je veux… | J'utilise… |
|
||||
|---------------------------------------------|------------------|
|
||||
| Lire, chercher, surligner | **Xreader** |
|
||||
| Remplir un formulaire, écrire sur un PDF | **Okular** |
|
||||
| Signer | **Xournal++** |
|
||||
| Fusionner, pivoter, extraire des pages | **PDF Arranger** |
|
||||
| Créer un PDF léger | **LibreOffice** |
|
||||
| Alléger un scan | **Ghostscript** |
|
||||
|
||||
<!--
|
||||
Laisser cette diapo affichée pendant les questions : c'est celle qu'on photographie.
|
||||
|
||||
Rappeler le parcours du fil rouge, dans l'ordre : remplir (Okular), signer
|
||||
(Xournal++), assembler (PDF Arranger), alléger (Ghostscript), envoyer.
|
||||
|
||||
Les trois pièges à répéter une dernière fois :
|
||||
1. Xreader : « Enregistrer une copie », sinon tout est perdu.
|
||||
2. Xournal++ : « Exporter en PDF », pas « Enregistrer ».
|
||||
3. Toujours un nouveau nom de fichier, et toujours rouvrir le PDF final avant d'envoyer.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: titre -->
|
||||
|
||||
# Merci !
|
||||
|
||||
## Des questions ?
|
||||
|
||||
Diaporama et mémo : **presentations.alpinux.org**
|
||||
|
||||
<!--
|
||||
Questions fréquentes à anticiper :
|
||||
|
||||
« Et sur téléphone ? » — Hors sujet ce soir, mais le PDF produit se lit partout.
|
||||
|
||||
« Peut-on modifier le texte existant d'un PDF ? » — Pas vraiment : un PDF est un
|
||||
format d'arrivée, pas de travail. LibreOffice Draw ouvre les PDF simples, avec un
|
||||
résultat inégal. Le mieux reste de demander le document d'origine.
|
||||
|
||||
« Et la vraie signature électronique ? » — Okular sait apposer une signature par
|
||||
certificat, mais il faut d'abord posséder un certificat reconnu : c'est un sujet à
|
||||
part entière, pour une autre séance.
|
||||
|
||||
Proposer à ceux qui le souhaitent de refaire le parcours sur leur propre machine après
|
||||
la présentation.
|
||||
-->
|
||||
297
theme/alpinux.css
Normal file
297
theme/alpinux.css
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
/* @theme alpinux */
|
||||
/* @auto-scaling true */
|
||||
/* @size 16:9 1280px 720px */
|
||||
/* @size 4:3 960px 720px */
|
||||
|
||||
/*
|
||||
* Thème Marp des présentations d'Alpinux.
|
||||
*
|
||||
* Pensé pour la vidéoprojection : gros corps de texte, fort contraste, aucune
|
||||
* ressource externe hormis le logo, servi par static.alpinux.org. Les polices sont
|
||||
* celles du système — rien n'est téléchargé.
|
||||
*
|
||||
* Deux classes à poser sur une diapo avec <!-- _class: nom --> :
|
||||
* titre la diapo d'ouverture (et les intercalaires de partie) ;
|
||||
* demo une diapo qui annonce une démonstration en direct.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--bleu: #1a6bbf;
|
||||
--bleu-fonce: #0f4e8f;
|
||||
--nuit: #12263f;
|
||||
--encre: #1a1a2e;
|
||||
--encre-douce: #4a5568;
|
||||
--papier: #ffffff;
|
||||
--papier-teinte: #f3f6fb;
|
||||
--trait: #c9d6e8;
|
||||
--alerte: #b45309;
|
||||
--logo: url("https://static.alpinux.org/logo/alpinux-logo-512.png");
|
||||
}
|
||||
|
||||
/* ── La diapo ─────────────────────────────────────────────────────────── */
|
||||
section {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
box-sizing: border-box;
|
||||
padding: 48px 72px 92px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background: var(--papier);
|
||||
color: var(--encre);
|
||||
font-family: "Inter", "Noto Sans", "Ubuntu", "DejaVu Sans", "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
|
||||
section > *:first-child { margin-top: 0; }
|
||||
section > *:last-child { margin-bottom: 0; }
|
||||
|
||||
/* ── Titres ───────────────────────────────────────────────────────────── */
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0 0 0.55em;
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
color: var(--bleu-fonce);
|
||||
}
|
||||
|
||||
h1 { font-size: 1.75em; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 4px solid var(--bleu);
|
||||
}
|
||||
|
||||
h3 { font-size: 1.1em; color: var(--encre); }
|
||||
h4 { font-size: 1em; color: var(--encre-douce); }
|
||||
|
||||
/* ── Texte ────────────────────────────────────────────────────────────── */
|
||||
p, ul, ol, blockquote, pre, table { margin: 0 0 0.6em; }
|
||||
|
||||
ul, ol { padding-left: 1.2em; }
|
||||
li { margin-bottom: 0.25em; }
|
||||
li > ul, li > ol { margin: 0.2em 0 0; font-size: 0.9em; }
|
||||
ul > li::marker { color: var(--bleu); }
|
||||
ol > li::marker { color: var(--bleu); font-weight: 700; }
|
||||
|
||||
strong { color: var(--bleu-fonce); font-weight: 700; }
|
||||
em { font-style: italic; }
|
||||
|
||||
a { color: var(--bleu); text-decoration: underline; text-underline-offset: 0.15em; }
|
||||
|
||||
mark { background: #ffe066; color: var(--encre); padding: 0 0.15em; border-radius: 4px; }
|
||||
|
||||
/* Une citation sert d'encadré « à retenir » ou « piège ». */
|
||||
blockquote {
|
||||
padding: 0.5em 0.9em;
|
||||
border-left: 10px solid var(--bleu);
|
||||
background: var(--papier-teinte);
|
||||
border-radius: 0 10px 10px 0;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
blockquote > *:last-child { margin-bottom: 0; }
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0.05em 0.4em;
|
||||
border: 2px solid var(--encre-douce);
|
||||
border-bottom-width: 4px;
|
||||
border-radius: 8px;
|
||||
background: var(--papier);
|
||||
font-family: inherit;
|
||||
font-size: 0.82em;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
img { max-width: 100%; max-height: 100%; }
|
||||
|
||||
/* ── Code ─────────────────────────────────────────────────────────────── */
|
||||
code {
|
||||
font-family: "JetBrains Mono", "DejaVu Sans Mono", "Ubuntu Mono", "Liberation Mono", monospace;
|
||||
font-size: 0.86em;
|
||||
padding: 0.08em 0.3em;
|
||||
border-radius: 6px;
|
||||
background: #e4ecf7;
|
||||
color: #0b2e55;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0.7em 0.9em;
|
||||
border-radius: 12px;
|
||||
border-left: 10px solid var(--bleu);
|
||||
background: var(--nuit);
|
||||
color: #f1f5fb;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.45;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Coloration syntaxique (highlight.js) — teintes claires sur fond nuit, toutes
|
||||
au-dessus de 7:1 de contraste. */
|
||||
.hljs-comment, .hljs-quote { color: #a8b8cc; font-style: italic; }
|
||||
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag { color: #8cc4ff; }
|
||||
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition { color: #a5e3a0; }
|
||||
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable { color: #ffc98a; }
|
||||
.hljs-title, .hljs-section, .hljs-type, .hljs-meta { color: #f7e08a; }
|
||||
.hljs-deletion { color: #ffb0a8; }
|
||||
.hljs-emphasis { font-style: italic; }
|
||||
.hljs-strong { font-weight: 700; }
|
||||
|
||||
/* ── Tableaux ─────────────────────────────────────────────────────────── */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.32em 0.7em;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-bottom: 2px solid var(--trait);
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: var(--bleu-fonce);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
thead th:first-child { border-radius: 10px 0 0 0; }
|
||||
thead th:last-child { border-radius: 0 10px 0 0; }
|
||||
tbody tr:nth-child(even) { background: var(--papier-teinte); }
|
||||
tbody td:first-child { font-weight: 600; }
|
||||
|
||||
/* ── Pied de diapo : logo, texte libre, numéro de page ────────────────── */
|
||||
section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
bottom: 22px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
background: var(--logo) center / contain no-repeat;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
position: absolute;
|
||||
left: 108px;
|
||||
right: 160px;
|
||||
font-size: 0.55em;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
|
||||
header { top: 22px; left: 72px; }
|
||||
footer { bottom: 36px; }
|
||||
|
||||
section::after {
|
||||
content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
|
||||
position: absolute;
|
||||
right: 44px;
|
||||
bottom: 34px;
|
||||
/* Marpit donne à ce pseudo-élément le remplissage de la diapo : on l'annule. */
|
||||
padding: 0;
|
||||
font-size: 0.6em;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
|
||||
/* ── Classe « titre » : ouverture et intercalaires ────────────────────── */
|
||||
section.titre {
|
||||
justify-content: center;
|
||||
padding: 72px 96px 120px;
|
||||
background: var(--bleu);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
section.titre h1,
|
||||
section.titre h2,
|
||||
section.titre h3,
|
||||
section.titre strong { color: #fff; }
|
||||
|
||||
section.titre h1 { font-size: 2.3em; margin-bottom: 0.3em; }
|
||||
|
||||
section.titre h2 {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
section.titre p { font-size: 0.82em; color: #e6f0fb; }
|
||||
section.titre a { color: #fff; }
|
||||
section.titre code { background: var(--bleu-fonce); color: #fff; }
|
||||
section.titre footer,
|
||||
section.titre header,
|
||||
section.titre::after { color: #e6f0fb; }
|
||||
|
||||
/* Le logo est bleu : sur fond bleu, on le pose sur une pastille blanche. */
|
||||
section.titre::before {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
left: 96px;
|
||||
bottom: 40px;
|
||||
background-color: #fff;
|
||||
background-size: 84%;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
section.titre footer { left: 190px; bottom: 62px; }
|
||||
|
||||
/* ── Classe « demo » : on quitte le diaporama pour montrer ────────────── */
|
||||
section.demo {
|
||||
justify-content: center;
|
||||
background: var(--nuit);
|
||||
color: #f1f5fb;
|
||||
}
|
||||
|
||||
section.demo h1,
|
||||
section.demo h2,
|
||||
section.demo h3 { color: #fff; }
|
||||
|
||||
section.demo h2 { border-bottom-color: #ffc857; }
|
||||
section.demo strong { color: #ffc857; }
|
||||
section.demo a { color: #9fd0ff; }
|
||||
section.demo ul > li::marker,
|
||||
section.demo ol > li::marker { color: #ffc857; }
|
||||
section.demo code { background: #24456e; color: #fff; }
|
||||
section.demo pre { background: #0a1728; border-left-color: #ffc857; }
|
||||
section.demo blockquote { background: #1c3a5e; border-left-color: #ffc857; color: #f1f5fb; }
|
||||
section.demo kbd { background: #1c3a5e; border-color: #9fb3cc; color: #fff; }
|
||||
section.demo footer,
|
||||
section.demo header,
|
||||
section.demo::after { color: #c5d3e6; }
|
||||
|
||||
section.demo h2::before {
|
||||
content: "Démonstration";
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.15em 0.7em;
|
||||
border-radius: 999px;
|
||||
background: #ffc857;
|
||||
color: var(--nuit);
|
||||
font-size: 0.5em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
section.demo::before {
|
||||
background-color: #fff;
|
||||
background-size: 84%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
Loading…
Reference in a new issue