mode d’emploi

Comment marche ce site

Site statique : pas de serveur, pas de base de données, rien à installer. Des fichiers dans des dossiers, et un catalogue qui garantit que tout porte le même nom partout.

Le vocabulaire — quatre mots, toujours les mêmes

Mot	Ce que c’est	Où il vit
Cours	le support du prof : PDF, poly, TD	matieres/<m>/cours/
Fiche	la synthèse à lire à l’écran : schémas, pièges, auto-test	matieres/<m>/*.html
Cartes	le jeu de questions à réciter	data/decks.js

Ces quatre mots servent de titres de section sur chaque page de matière, de noms d’onglets et d’étiquettes. Aucun synonyme ailleurs : jamais « exos », jamais « supports », jamais « flashcards ».

Comment on navigue

Endroit	Ce qu’on y trouve
La barre du haut	Les matières, directement. Où qu’on soit, on saute d’une matière à l’autre en un clic. Les matières encore vides sont grisées.
Accueil index.html	La grille des matières, avec pour chacune ce qu’elle contient et le pourcentage de réussite à l’entraînement.
Une matière matieres/<m>/index.html	Trois onglets, toujours les mêmes, toujours dans cet ordre : 1. Cours — les documents du prof, un dépliant par chapitre, groupés par nature. 2. TD — les TD et les évaluations, avec leurs corrigés. 3. Entraînement — les jeux de cartes, avec le record de chacun. L’onglet ouvert est retenu : on retrouve la matière là où on l’a laissée.
Guide guide.html	Cette page.

Il n’y a plus de pages « toutes les fiches » ou « tous les cours » : on passe toujours par une matière, c’est ce qui garde le site lisible quand une matière contient cent trente documents.

La règle qui tient tout

Ni l’accueil ni les pages de matière ne se modifient jamais à la main. Le build lit les dossiers matieres/<m>/ et en déduit tout : les chapitres, les fiches, les documents et leur nature. _tools/catalogue.py ne contient plus que ce qu’un nom de fichier ne peut pas dire : la liste des matières, le titre de chaque chapitre, et les jeux de cartes.

cd ~/Desktop/TRABAJO/PREPA/SITE
python3 _tools/build.py

Une ligne du catalogue, c’est : la matière, le type (cours / TD / cartes), le rang (S1, S2… comme le prof numérote, ou GEN pour ce qui ne dépend d’aucun chapitre), le titre, une phrase de description, et le fichier visé.

Ajouter un cours

Poser le PDF

Dans matieres/<matière>/cours/<CHAPITRE>/ — le dossier du chapitre, en majuscules : cours/S9/sii-s9-td-elevateur.pdf. Le fichier se nomme <mat>-<rang>-<sujet>.pdf, en minuscules, sans espace ni accent. Le mot td, dm, tp, cours, annexe ou cor dans le nom suffit : le site range le document dans la bonne catégorie tout seul.

Une ligne dans le catalogue, puis build

python3 _tools/build.py. C’est tout : le build lit les dossiers, il n’y a rien à écrire dans le catalogue pour un document. Le catalogue ne sert plus qu’à trois choses : la liste des matières, le titre de chaque chapitre, et les jeux de cartes.

Ajouter un chapitre complet

Le cours du prof

Comme ci-dessus.

Les cartes — PROMPT_FLASHCARDS.md

Le prompt sort un bloc de code : tu le colles à la fin de data/decks.js, juste avant le ];. L’identifiant du jeu suit le même schéma : phy-s1, ang-voc1.

La fiche — PROMPT 2

Seulement si le chapitre est dense ou visuel. Fichier <mat>-<rang>-<titre>.html dans matieres/<matière>/.

Le catalogue, puis build

Une ligne par élément produit, python3 _tools/build.py, et c’est branché partout. C’est la seule étape qu’on oublie : un fichier posé mais pas catalogué est invisible.

Les trois types de cartes

Type	Ce qu’il demande	Pour quoi
`qcm`	choisir la bonne parmi quatre	les formules : impossible à taper proprement
`ecrire`	taper la réponse exacte	vocabulaire, unités, symboles, définition en 1–3 mots
`flip`	réciter de tête, retourner, se noter	les énoncés longs à sortir en colle

Les scores restent dans le navigateur : le téléphone et le Mac ont chacun les leurs, ils ne se synchronisent pas. C’est voulu tant qu’il n’y a pas de serveur.

L’arborescence

SITE/
├── index.html            ← accueil : les matières (généré)
├── guide.html            ← cette page
├── _tools/
│   ├── catalogue.py      ← LA liste de tout le contenu
│   └── build.py          ← réécrit toutes les pages d'index
├── assets/theme.css      ← couleurs, typo, composants — seule source de style
├── data/decks.js         ← tous les jeux de cartes
├── outils/entrainement.html  ← l'entraîneur ; ?deck=phy-s1 n'ouvre QUE ce jeu
├── _archive/             ← versions abandonnées, plus reliées au site
├── PROMPT_FICHES.md  PROMPT_FLASHCARDS.md  README.md
└── matieres/<matière>/
    ├── index.html        ← généré : les 4 onglets de la matière
    ├── cours/S1/ S2/ …   ← les documents du prof, un dossier par chapitre
    └── *.html            ← fiches

Codes matière : mat maths · phy physique · chi chimie · sii sciences de l’ingénieur · inf info · ang anglais · fra français-philo. Chaque fichier de contenu commence par son code et son rang : fra-s2-zola-oeuvre.html.

Les règles de style

Aucune couleur écrite en dur : var(--accent), var(--ink), var(--surface)…
Une page de contenu pose son code sur la racine : <html lang="fr" data-matiere="phy"> et tout l’accent de la page suit.
Toute page de contenu porte la barre de retour en haut (.sitebar) : Prépa PCSI · Fiches · la matière.
Téléphone d’abord : vérifier à 390 px. Un tableau large va dans <div class="tablewrap">, jamais la page entière qui défile de côté.
Typo : Fraunces (titres), Newsreader (texte), Inter (étiquettes), IBM Plex Mono (formules).

Mettre en ligne

# une fois, sur le VPS
sudo apt install nginx && sudo mkdir -p /var/www/prepa

# à chaque mise à jour, depuis le Mac
python3 _tools/build.py
rsync -av --delete ~/Desktop/TRABAJO/PREPA/SITE/ user@IP:/var/www/prepa/

server {
    listen 80;
    server_name prepa.mondomaine.fr;
    root /var/www/prepa;
    index index.html;
    location / { try_files $uri $uri/ =404; }
}

Puis certbot --nginx pour le HTTPS, et auth_basic si le site ne doit pas être public. Sur le téléphone : Safari → Partager → Sur l’écran d’accueil, et il s’ouvre comme une app.

Prépa PCSI · 2026 – 2027 · site personnel