netig/f3-simple-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplification

Browse Source
This commit is contained in:
julien
2026-03-30 15:05:13 +02:00
parent b4a80013d5
commit b4593840a8
30 changed files with 526 additions and 781 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -3,7 +3,8 @@
/logs/*
!/logs/.gitkeep
/vendor/
/tmp/
/tmp/*
!/tmp/.gitkeep
/public/uploads/media/*
!/public/uploads/media/.gitkeep
/config.local.ini

8
Caddyfile.example
View File

@@ -1,9 +1,9 @@
# Exemple de configuration Caddy en reverse proxy vers l'application.
# Copier ce fichier vers Caddyfile et adapter le domaine / la cible.
# TLS, compression et en-têtes de sécurité restent gérés ici, pas dans l'app PHP.
# Exemple de reverse proxy Caddy.
# Copier vers Caddyfile et adapter le domaine et la cible.
# TLS et en-têtes HTTP se gèrent ici.
blog.example.com {
# ── En-têtes de sécurité (toutes les réponses) ───────────────────
# En-têtes de sécurité
header {
Content-Security-Policy "default-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; object-src 'none'; img-src 'self' data:; style-src 'self'; script-src 'self'"

10
Dockerfile
View File

@@ -8,9 +8,12 @@ RUN apt-get update \
libonig-dev \
libicu-dev \
libxml2-dev \
libjpeg62-turbo-dev \
libpng-dev \
unzip \
git \
&& docker-php-ext-install -j"$(nproc)" pdo_sqlite mbstring opcache intl dom \
&& docker-php-ext-configure gd --with-jpeg \
&& docker-php-ext-install -j"$(nproc)" pdo_sqlite mbstring opcache intl dom gd \
&& rm -rf /var/lib/apt/lists/*
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
@@ -29,7 +32,10 @@ RUN apt-get update \
libonig-dev \
libicu-dev \
libxml2-dev \
&& docker-php-ext-install -j"$(nproc)" pdo_sqlite mbstring opcache intl dom \
libjpeg62-turbo-dev \
libpng-dev \
&& docker-php-ext-configure gd --with-jpeg \
&& docker-php-ext-install -j"$(nproc)" pdo_sqlite mbstring opcache intl dom gd \
&& printf 'ServerName localhost\n' > /etc/apache2/conf-available/servername.conf \
&& a2enconf servername \
&& rm -rf /var/lib/apt/lists/*

206
README.md
View File

@@ -1,190 +1,74 @@
# F3 Simple Blog
Blog simple construit avec Fat-Free Framework et SQLite.
Blog minimal en **Fat-Free Framework** avec **SQLite**.
Le projet vise un blog léger, lisible et facile à déployer, avec un petit back-office d’administration, une médiathèque locale et un rendu Markdown sécurisé.
- rendu côté serveur
- routes dans `config.ini`
- modèles `DB\SQL\Mapper`
- édition en Markdown
- médiathèque paginée séparée de l’éditeur
- nettoyage des fichiers orphelins via script CLI
## Fonctionnalités
## Prérequis
- listing public des articles avec pagination ;
- page article ;
- authentification admin ;
- création, modification et suppression d’articles ;
- médiathèque locale avec upload, texte alternatif, copie de la syntaxe Markdown et suppression ;
- vignette de carte dérivée de la première image du contenu ;
- rendu Markdown avec images locales `media:...` ;
- stockage des images en **JPG/PNG bruts** sans transformation.
- PHP 8.3+
- extensions PHP : `pdo_sqlite`, `mbstring`, `intl`, `dom`, `gd`
- Composer
## Installation
```bash
composer install
php scripts/install.php
php scripts/create-admin.php admin
```
Lancer ensuite un serveur local :
```bash
php -S 127.0.0.1:8000 -t public
```
## Structure
```text
project/
├── app/
│ ├── bootstrap.php
│ ├── config.ini
│ ├── helpers.php
│ ├── Controllers/
│ ├── Models/
│ ├── Services/
│ └── Views/
├── db/
├── logs/
├── public/
│ ├── assets/
│ └── uploads/media/
├── docker/
├── scripts/
│ ├── bootstrap.php
│ ├── install.php
│ └── create-admin.php
└── tmp/uploads/
app/ contrôleurs, modèles, vues et service Markdown
public/ assets et fichiers médias
scripts/ installation, création d’admin, nettoyage des orphelins
```
## Architecture
## Flux éditorial
Le backend s’appuie sur un petit noyau :
- Les articles sont rédigés en Markdown.
- Les images sont gérées dans la médiathèque.
- La médiathèque fournit un bouton **Copier le Markdown**.
- L’éditeur reste simple : textarea, petite toolbar Markdown et lien vers la médiathèque.
- `SiteController` : pages publiques ;
- `AuthController` : connexion / déconnexion ;
- `AdminController` : back-office articles et médiathèque ;
- `Controller` : rendu, session courante, flash, CSRF ;
- `Post`, `Media`, `User` : modèles `DB\SQL\Mapper` ;
- `MarkdownService` : compilation et sanitation du contenu Markdown.
## Médias
## Intégration F3
La table `media` est la référence côté application.
Le projet utilise directement les briques natives du framework :
- Supprimer un média retire la ligne SQL.
- Les fichiers orphelins éventuels sont nettoyés via un script CLI.
- routes et aliases dans `app/config.ini` ;
- `DB\SQL\Mapper` pour les tables principales ;
- `Auth` pour la connexion ;
- `Session` pour la session ;
- `Template` pour le rendu ;
- `Web::receive()` pour la réception des uploads ;
- `Markdown` pour le parsing Markdown ;
- `Web::slug()` pour les slugs.
## Contenu et médiathèque
Les articles contiennent leur texte en Markdown. Les images sont insérées dans le corps du contenu, et la première image rendue dans `body_html` sert de vignette dans les cartes d’article.
Les images du contenu utilisent la syntaxe :
```md
![Texte alternatif](media:nom-de-fichier.jpg)
```
La médiathèque :
- accepte uniquement **JPG** et **PNG** ;
- vérifie que le fichier reçu est bien une image ;
- conserve le fichier tel quel, sans réencodage ;
- stocke en base le nom du fichier, le texte alternatif, la largeur, la hauteur et la date de création.
## Contrat Markdown
Le rendu Markdown suit les règles suivantes :
- le HTML brut saisi par l’auteur n’est pas rendu ;
- les liens sont filtrés avant rendu ;
- seules les images locales en `media:...` sont rendues ;
- les images externes ne sont pas affichées ;
- avec le parseur Markdown de F3, il faut laisser une ligne vide entre deux blocs (titre, liste, citation, image, code) pour un rendu fiable.
## Sécurité
Le projet inclut :
- session d’administration ;
- jeton CSRF sur les formulaires ;
- rotation du jeton CSRF après connexion et déconnexion ;
- sanitation du HTML produit à partir du Markdown ;
- validation des uploads image ;
- cookies `httponly` et `samesite=Lax`.
## Pré-requis
### Développement local
- PHP 8.3+
- Composer
- extensions PHP : `pdo_sqlite`, `mbstring`, `intl`, `dom`
### Déploiement Docker
- Docker
- Docker Compose
## Démarrage local
Lister les orphelins :
```bash
composer install
cp config.local.ini.example config.local.ini
php scripts/install.php
php -S 127.0.0.1:8080 -t public
php scripts/clean-orphan-media.php list
```
Puis ouvrir `http://127.0.0.1:8080`.
Créer un compte admin :
Supprimer les orphelins :
```bash
php scripts/create-admin.php admin
php scripts/clean-orphan-media.php delete
```
## Configuration
## Déploiement Docker
Le fichier `app/config.ini` contient les valeurs par défaut. Tu peux les surcharger dans `config.local.ini`.
Exemple minimal en production :
```ini
[globals]
app.env=prod
app.timezone=Europe/Paris
```
Le paramètre `app.env` doit être défini à `prod` sur un déploiement réel.
## Déploiement Docker derrière Caddy
Déploiement Docker recommandé :
- Apache sert `public/` dans le conteneur ;
- `compose.yaml` expose l’application sur `127.0.0.1:8888` par défaut ;
- Caddy termine TLS et reverse-proxy vers cette cible ;
- SQLite, les logs et les uploads sont montés sur des volumes persistants.
Exemple :
Une configuration Docker est fournie :
```bash
cp config.local.ini.example config.local.ini
# édite config.local.ini : app.env=prod
docker compose up -d --build
docker compose up --build
```
Créer un compte admin dans le conteneur :
```bash
docker compose exec app php scripts/create-admin.php admin
```
La commande demande ensuite le mot de passe du compte.
Le `Caddyfile.example` fournit une base de reverse proxy. En production, il faut exposer publiquement **Caddy uniquement**. L’application Apache/PHP ne doit pas être accessible directement depuis Internet.
## Sauvegarde
Pour sauvegarder le blog, il faut au minimum conserver :
- `db/app.sqlite`
- `public/uploads/media/`
Les logs peuvent aussi être conservés si tu veux garder l’historique d’erreurs.
## Limites assumées
- base SQLite ;
- instance applicative unique ;
- pas de système de migrations automatique ;
- en cas de changement de schéma, une migration manuelle ou une base recréée sera nécessaire.
L’application écoute sur `127.0.0.1:8888` par défaut.

62
app/Controllers/AdminController.php
View File

@@ -4,7 +4,6 @@ declare(strict_types=1);
class AdminController extends Controller
{
private const MEDIA_PICKER_LIMIT = 60;
private const UPLOAD_MAX_BYTES = 10 * 1024 * 1024;
public function beforeRoute(): void
@@ -28,52 +27,52 @@ class AdminController extends Controller
public function create(): void
{
$this->postForm('Nouvel article', $this->f3->alias('post_store'), Post::blank());
$this->renderPostForm('Nouvel article', $this->f3->alias('post_store'), Post::blank());
}
public function store(): void
{
$this->checkCsrf();
$input = $this->postInput();
$this->verifyCsrf();
$input = $this->readPostInput();
try {
(new Post())->savePost($input);
$this->flash('success', 'Article créé.');
$this->f3->reroute('@dashboard');
} catch (RuntimeException $e) {
$this->postForm('Nouvel article', $this->f3->alias('post_store'), $input, $e->getMessage());
$this->renderPostForm('Nouvel article', $this->f3->alias('post_store'), $input, $e->getMessage());
}
}
public function edit(): void
{
$post = (new Post())->findForForm((int) $this->f3->get('PARAMS.id'));
if (!$post) {
if ($post === null) {
$this->f3->error(404);
return;
}
$this->postForm('Modifier l\'article', $this->f3->alias('post_update', ['id' => $post['id']]), $post);
$this->renderPostForm('Modifier l\'article', $this->f3->alias('post_update', ['id' => $post['id']]), $post);
}
public function update(): void
{
$this->checkCsrf();
$this->verifyCsrf();
$id = (int) $this->f3->get('PARAMS.id');
$input = $this->postInput() + ['id' => $id];
$input = $this->readPostInput() + ['id' => $id];
try {
(new Post())->savePost($input, $id);
$this->flash('success', 'Article mis à jour.');
$this->f3->reroute('@dashboard');
} catch (RuntimeException $e) {
$this->postForm('Modifier l\'article', $this->f3->alias('post_update', ['id' => $id]), $input, $e->getMessage());
$this->renderPostForm('Modifier l\'article', $this->f3->alias('post_update', ['id' => $id]), $input, $e->getMessage());
}
}
public function delete(): void
{
$this->checkCsrf();
$this->verifyCsrf();
try {
(new Post())->deleteById((int) $this->f3->get('PARAMS.id'));
@@ -95,25 +94,27 @@ class AdminController extends Controller
'items' => $result['items'],
'pagination' => $result['pagination'],
'paginationAlias' => 'media_index',
'adminMode' => true,
]);
}
public function mediaUpload(): void
{
$this->checkCsrf();
$this->verifyCsrf();
try {
$original = (string) ($this->f3->get('FILES.image.name') ?: '');
$originalName = (string) ($this->f3->get('FILES.image.name') ?: '');
$received = Web::instance()->receive(
fn(array $file): bool => (int) ($file['size'] ?? 0) > 0 && (int) ($file['size'] ?? 0) <= self::UPLOAD_MAX_BYTES,
overwrite: false
);
$path = array_key_first(array_filter($received));
if (!$path) {
throw new RuntimeException('Choisis une image valide à envoyer.');
throw new RuntimeException('Choisis une image JPG ou PNG valide.');
}
(new Media())->upload($path, $original);
(new Media())->upload($path, $originalName);
$this->flash('success', 'Image ajoutée.');
} catch (RuntimeException $e) {
$this->flash('error', $e->getMessage());
@@ -124,11 +125,14 @@ class AdminController extends Controller
public function mediaAlt(): void
{
$this->checkCsrf();
$this->verifyCsrf();
try {
(new Media())->updateAlt((int) $this->f3->get('PARAMS.id'), $this->f3->clean((string) ($this->f3->get('POST.alt') ?: '')));
$this->flash('success', 'Texte alternatif mis à jour.');
(new Media())->updateAlt(
(int) $this->f3->get('PARAMS.id'),
$this->f3->clean((string) ($this->f3->get('POST.alt') ?: ''))
);
$this->flash('success', 'Texte alternatif enregistré.');
} catch (RuntimeException $e) {
$this->flash('error', $e->getMessage());
}
@@ -138,17 +142,18 @@ class AdminController extends Controller
public function mediaDelete(): void
{
$this->checkCsrf();
$this->verifyCsrf();
try {
$media = new Media();
$item = $media->findById((int) $this->f3->get('PARAMS.id'));
if (!$item) {
if ($item === null) {
throw new RuntimeException('Image introuvable.');
}
if ((new Post())->usesMedia($item['file_name'])) {
throw new RuntimeException('Cette image est encore utilisée par un article.');
throw new RuntimeException('Cette image est utilisée dans un article.');
}
$media->deleteById($item['id']);
$this->flash('success', 'Image supprimée.');
} catch (RuntimeException $e) {
@@ -158,27 +163,22 @@ class AdminController extends Controller
$this->f3->reroute('@media_index');
}
private function postForm(string $title, string $action, array $post, ?string $error = null): void
private function renderPostForm(string $title, string $action, array $post, ?string $error = null): void
{
$media = new Media();
$items = $media->recent(self::MEDIA_PICKER_LIMIT);
$count = $media->count();
$flash = $error ? [['type' => 'error', 'message' => $error]] : [];
$this->render('admin/post_form.html', [
'pageTitle' => $title,
'formAction' => $action,
'post' => $post,
'mediaItems' => $items,
'mediaCount' => $count,
'mediaPickerLimit' => self::MEDIA_PICKER_LIMIT,
'mediaPickerTruncated' => $count > count($items),
'titleMax' => Post::TITLE_MAX_LENGTH,
'excerptMax' => Post::EXCERPT_MAX_LENGTH,
'flash' => $error ? [['type' => 'error', 'message' => $error]] : [],
'flash' => $flash,
'adminMode' => true,
]);
}
private function postInput(): array
private function readPostInput(): array
{
return [
'title' => $this->f3->clean((string) ($this->f3->get('POST.title') ?: '')),

11
app/Controllers/AuthController.php
View File

@@ -6,7 +6,7 @@ class AuthController extends Controller
{
public function show(): void
{
if ($this->user()) {
if ($this->currentUser()) {
$this->f3->reroute('@dashboard');
return;
}
@@ -16,10 +16,11 @@ class AuthController extends Controller
public function login(): void
{
$this->checkCsrf();
$this->verifyCsrf();
$user = new User();
$auth = new Auth($user, ['id' => 'username', 'pw' => 'password_hash'], 'password_verify');
$ok = $auth->login(
$this->f3->clean((string) ($this->f3->get('POST.username') ?: '')),
(string) ($this->f3->get('POST.password') ?: '')
@@ -27,7 +28,7 @@ class AuthController extends Controller
if (!$ok) {
usleep(1000000);
$this->flash('error', 'Identifiants invalides.');
$this->flash('error', 'Identifiants incorrects.');
$this->f3->reroute('@login');
return;
}
@@ -41,11 +42,11 @@ class AuthController extends Controller
public function logout(): void
{
$this->checkCsrf();
$this->verifyCsrf();
$this->f3->clear('SESSION.user_id');
session_regenerate_id(true);
$this->rotateCsrf();
$this->flash('success', 'Déconnexion effectuée.');
$this->flash('success', 'Déconnexion réussie.');
$this->f3->reroute('@login');
}
}

62
app/Controllers/Controller.php
View File

@@ -13,77 +13,69 @@ abstract class Controller
protected function render(string $view, array $data = [], int $ttl = 0): void
{
$this->ensureCsrf();
$user = $this->user();
$user = $this->currentUser();
$flash = array_key_exists('flash', $data) ? $data['flash'] : $this->pullFlash();
$this->f3->expire($user ? 0 : $ttl);
$this->f3->mset($data + [
'view' => $view,
'flash' => is_array($flash) ? $flash : [],
'CSRF' => $this->csrfToken(),
'currentUser' => $user,
'flash' => is_array($flash) ? $flash : [],
'view' => $view,
'adminMode' => false,
'metaDescription' => null,
'CSRF_TOKEN' => (string) $this->f3->get('SESSION.csrf_token'),
]);
echo Template::instance()->render('layout.html');
}
protected function user(): ?array
protected function currentUser(): ?array
{
if (!$this->f3->exists('ctx.user_loaded')) {
$id = (int) ($this->f3->get('SESSION.user_id') ?: 0);
$this->f3->set('currentUser', $id > 0 ? (new User())->findPublic($id) : null);
$this->f3->set('ctx.user_loaded', true);
}
return $this->f3->get('currentUser');
$id = (int) ($this->f3->get('SESSION.user_id') ?: 0);
return $id > 0 ? (new User())->findPublic($id) : null;
}
protected function requireAuth(): void
{
if ($this->user()) {
if ($this->currentUser()) {
return;
}
$this->flash('error', 'Connecte-toi pour continuer.');
$this->flash('error', 'Connecte-toi pour accéder à cette page.');
$this->f3->reroute('@login');
}
protected function checkCsrf(): void
protected function csrfToken(): string
{
$sent = trim((string) ($this->f3->get('POST.csrf_token') ?: ''));
$expected = trim((string) ($this->f3->get('SESSION.csrf_token') ?: ''));
$token = trim((string) ($this->f3->get('SESSION.csrf') ?: ''));
if ($token === '') {
$token = bin2hex(random_bytes(32));
$this->f3->set('SESSION.csrf', $token);
}
if ($sent !== '' && $expected !== '' && hash_equals($expected, $sent)) {
return $token;
}
protected function verifyCsrf(): void
{
$sent = trim((string) ($this->f3->get('POST.csrf') ?: ''));
if ($sent !== '' && hash_equals($this->csrfToken(), $sent)) {
return;
}
$this->f3->error(400);
}
protected function rotateCsrf(): void
{
$this->f3->set('SESSION.csrf', bin2hex(random_bytes(32)));
}
protected function flash(string $type, string $message): void
{
$this->f3->push('SESSION.flash', ['type' => $type, 'message' => $message]);
}
protected function rotateCsrf(): void
{
$this->f3->clear('SESSION.csrf_token');
$this->ensureCsrf();
}
private function ensureCsrf(): void
{
if ($this->f3->exists('SESSION.csrf_token')) {
return;
}
$seed = trim((string) ($this->f3->get('CSRF') ?: ''));
$this->f3->set('SESSION.csrf_token', $seed !== '' ? $seed : bin2hex(random_bytes(16)));
}
private function pullFlash(): array
{
return $this->f3->pull('SESSION.flash') ?: [];

2
app/Controllers/SiteController.php
View File

@@ -20,7 +20,7 @@ class SiteController extends Controller
public function show(): void
{
$post = (new Post())->findBySlug((string) $this->f3->get('PARAMS.slug'));
if (!$post) {
if ($post === null) {
$this->f3->error(404);
return;
}

99
app/Models/Media.php
View File

@@ -29,9 +29,10 @@ class Media extends DB\SQL\Mapper
public function page(int $page, int $perPage): array
{
$result = $this->paginate(max(0, $page - 1), $perPage, null, ['order' => 'created_at DESC, id DESC']);
$items = array_map(fn(self $row): array => $this->decorate($row->cast()), $result['subset'] ?: []);
return [
'items' => array_map(fn(self $row): array => $this->decorate($row->cast()), $result['subset'] ?: []),
'items' => $items,
'pagination' => [
'page' => max(1, min($page, $result['count'] ?: 1)),
'pages' => max(1, (int) ($result['count'] ?: 1)),
@@ -39,14 +40,6 @@ class Media extends DB\SQL\Mapper
];
}
public function recent(int $limit): array
{
return array_map(
fn(self $row): array => $this->decorate($row->cast()),
$this->find(null, ['order' => 'created_at DESC, id DESC', 'limit' => $limit]) ?: []
);
}
public function findById(int $id): ?array
{
if ($id <= 0) {
@@ -63,18 +56,22 @@ class Media extends DB\SQL\Mapper
return $this->dry() ? null : $this->decorate($this->cast());
}
public function upload(string $path, string $originalName = ''): int
public function upload(string $temporaryPath, string $originalName = ''): int
{
if (!is_file($path)) {
$f3 = Base::instance();
if (!is_file($temporaryPath)) {
throw new RuntimeException('Fichier image introuvable.');
}
$info = @getimagesize($path);
if (!is_array($info)) {
@unlink($path);
$binary = $f3->read($temporaryPath);
$image = new Image();
if ($binary === '' || $image->load($binary) === false) {
@unlink($temporaryPath);
throw new RuntimeException('Fichier image invalide.');
}
$info = @getimagesizefromstring($binary);
$mime = strtolower((string) ($info['mime'] ?? ''));
$extension = match ($mime) {
'image/jpeg' => 'jpg',
@@ -83,28 +80,39 @@ class Media extends DB\SQL\Mapper
};
if ($extension === null) {
@unlink($path);
@unlink($temporaryPath);
throw new RuntimeException('Format non supporté. Utilise JPG ou PNG.');
}
$fileName = bin2hex(random_bytes(16)) . '.' . $extension;
$target = rtrim((string) Base::instance()->get('paths.media_dir'), '/\\') . DIRECTORY_SEPARATOR . $fileName;
$encoded = match ($extension) {
'jpg' => $image->dump('jpeg', 90),
'png' => $image->dump('png'),
};
if (!@rename($path, $target)) {
if (!@copy($path, $target)) {
@unlink($path);
throw new RuntimeException('Impossible d’enregistrer cette image.');
}
@unlink($path);
$fileName = bin2hex(random_bytes(16)) . '.' . $extension;
$target = $this->storagePath($fileName);
try {
$f3->write($target, $encoded);
} catch (Throwable $e) {
@unlink($temporaryPath);
throw new RuntimeException('Impossible d’enregistrer cette image.', 0, $e);
}
$this->reset();
$this->file_name = $fileName;
$this->alt = $this->altFromName($originalName);
$this->width = (int) $info[0];
$this->height = (int) $info[1];
$this->created_at = app_now();
$this->save();
@unlink($temporaryPath);
try {
$this->reset();
$this->file_name = $fileName;
$this->alt = $this->guessAlt($originalName);
$this->width = $image->width();
$this->height = $image->height();
$this->created_at = app_now();
$this->save();
} catch (Throwable $e) {
@unlink($target);
throw new RuntimeException('Impossible de finaliser cette image.', 0, $e);
}
return (int) $this->id;
}
@@ -127,34 +135,41 @@ class Media extends DB\SQL\Mapper
throw new RuntimeException('Image introuvable.');
}
$path = rtrim((string) Base::instance()->get('paths.media_dir'), '/\\') . DIRECTORY_SEPARATOR . $this->file_name;
$this->erase();
if (is_file($path)) {
@unlink($path);
try {
$this->erase();
} catch (Throwable $e) {
throw new RuntimeException('Impossible de supprimer cette image.', 0, $e);
}
}
private function decorate(array $row): array
{
$file = (string) $row['file_name'];
$fileName = (string) $row['file_name'];
$alt = (string) $row['alt'];
$base = rtrim((string) Base::instance()->get('BASE'), '/');
$mediaBase = rtrim((string) Base::instance()->get('paths.media_base'), '/');
return [
'id' => (int) $row['id'],
'file_name' => $file,
'file_name' => $fileName,
'alt' => $alt,
'width' => (int) $row['width'],
'height' => (int) $row['height'],
'created_at' => (string) $row['created_at'],
'url' => rtrim((string) Base::instance()->get('BASE'), '/') . rtrim((string) Base::instance()->get('paths.media_base'), '/') . '/' . rawurlencode($file),
'markdown' => '![' . $alt . '](media:' . $file . ')',
'url' => $base . $mediaBase . '/' . rawurlencode($fileName),
'markdown' => '![' . $alt . '](media:' . $fileName . ')',
];
}
private function altFromName(string $name): string
private function storagePath(string $fileName): string
{
$name = trim(pathinfo($name, PATHINFO_FILENAME));
$name = preg_replace('/[-_]+/', ' ', $name) ?: '';
return trim($name);
return rtrim((string) Base::instance()->get('paths.media_dir'), '/\\') . DIRECTORY_SEPARATOR . $fileName;
}
private function guessAlt(string $originalName): string
{
$label = trim(pathinfo($originalName, PATHINFO_FILENAME));
$label = preg_replace('/[-_]+/', ' ', $label) ?: '';
return trim($label);
}
}

41
app/Models/Post.php
View File

@@ -62,13 +62,16 @@ class Post extends DB\SQL\Mapper
}
$row = $this->cast();
$post = $this->summary($row) + ['body_html' => (string) $row['body_html']];
return $post;
return $this->summary($row) + ['body_html' => (string) $row['body_html']];
}
public function findForForm(int $id): ?array
{
if ($id <= 0) {
return null;
}
$this->load(['id = ?', $id]);
if ($this->dry()) {
return null;
@@ -84,12 +87,12 @@ class Post extends DB\SQL\Mapper
public function savePost(array $input, ?int $id = null): int
{
$payload = $this->payload($input);
$payload = $this->normalizePayload($input);
$now = app_now();
if ($id === null) {
$this->reset();
$payload['slug'] = $this->uniqueSlug($payload['title']);
$payload['slug'] = $this->nextSlug($payload['title']);
$payload['created_at'] = $now;
} else {
$this->load(['id = ?', $id]);
@@ -120,11 +123,11 @@ class Post extends DB\SQL\Mapper
return $this->count(['body_markdown LIKE ?', '%media:' . $fileName . '%']) > 0;
}
private function payload(array $input): array
private function normalizePayload(array $input): array
{
$title = trim((string) ($input['title'] ?? ''));
$excerpt = trim((string) ($input['excerpt'] ?? ''));
$body = trim((string) ($input['body_markdown'] ?? ''));
$bodyMarkdown = trim((string) ($input['body_markdown'] ?? ''));
if ($title === '') {
throw new RuntimeException('Ajoute un titre.');
@@ -142,20 +145,20 @@ class Post extends DB\SQL\Mapper
return [
'title' => $title,
'excerpt' => $excerpt,
'body_markdown' => $body,
'body_html' => MarkdownService::instance()->compile($body, new Media()),
'body_markdown' => $bodyMarkdown,
'body_html' => MarkdownService::instance()->compile($bodyMarkdown, new Media()),
];
}
private function uniqueSlug(string $title): string
private function nextSlug(string $title): string
{
$base = app_slug($title);
$slug = $base;
$n = 2;
$suffix = 2;
while ($this->count(['slug = ?', $slug]) > 0) {
$slug = $base . '-' . $n;
$n++;
$slug = $base . '-' . $suffix;
$suffix++;
}
return $slug;
@@ -163,7 +166,7 @@ class Post extends DB\SQL\Mapper
private function summary(array $row): array
{
$thumbnail = $this->firstImage((string) ($row['body_html'] ?? ''));
$thumbnail = $this->extractThumbnail((string) ($row['body_html'] ?? ''));
return [
'id' => (int) $row['id'],
@@ -177,20 +180,14 @@ class Post extends DB\SQL\Mapper
];
}
private function firstImage(string $html): array
private function extractThumbnail(string $html): array
{
if ($html === '') {
if ($html === '' || !preg_match('~(<img\s[^>]*src="([^"]+)"[^>]*>)~i', $html, $match)) {
return ['url' => '', 'alt' => ''];
}
if (!preg_match('~(<img\s[^>]*src="([^"]+)"[^>]*>)~i', $html, $match)) {
return ['url' => '', 'alt' => ''];
}
$tag = $match[1];
$alt = '';
if (preg_match('~alt="([^"]*)"~i', $tag, $altMatch)) {
if (preg_match('~alt="([^"]*)"~i', $match[1], $altMatch)) {
$alt = html_entity_decode($altMatch[1], ENT_QUOTES | ENT_HTML5, 'UTF-8');
}

4
app/Models/User.php
View File

@@ -25,6 +25,10 @@ class User extends DB\SQL\Mapper
public function findPublic(int $id): ?array
{
if ($id <= 0) {
return null;
}
$this->load(['id = ?', $id]);
if ($this->dry()) {
return null;

115
app/Services/MarkdownService.php
View File

@@ -4,8 +4,8 @@ declare(strict_types=1);
class MarkdownService extends Prefab
{
private const TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'strong', 'em', 'a', 'img', 'hr', 'br'];
private const ATTRS = [
private const ALLOWED_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'strong', 'em', 'a', 'img', 'hr', 'br'];
private const ALLOWED_ATTRIBUTES = [
'a' => ['href', 'title', 'rel', 'target'],
'img' => ['src', 'alt', 'width', 'height', 'loading', 'decoding'],
];
@@ -17,31 +17,30 @@ class MarkdownService extends Prefab
throw new RuntimeException('Ajoute du contenu avant de publier.');
}
$markdown = $this->neutralizeRawHtml($markdown);
$doc = new DOMDocument('1.0', 'UTF-8');
$html = '<div id="content">' . Markdown::instance()->convert($markdown) . '</div>';
$html = '<div id="content">' . Markdown::instance()->convert($this->escapeRawHtml($markdown)) . '</div>';
$previous = libxml_use_internal_errors(true);
$doc->loadHTML('<?xml encoding="utf-8" ?>' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
libxml_clear_errors();
libxml_use_internal_errors($previous);
$root = $doc->getElementById('content');
if (!$root) {
return '';
if (!$root instanceof DOMElement) {
throw new RuntimeException('Impossible de générer le contenu HTML.');
}
$this->sanitizeChildren($root, $media);
$this->sanitizeNode($root, $media);
$out = '';
$output = '';
foreach (iterator_to_array($root->childNodes) as $child) {
$out .= $doc->saveHTML($child);
$output .= $doc->saveHTML($child);
}
return trim($out);
return trim($output);
}
private function neutralizeRawHtml(string $markdown): string
private function escapeRawHtml(string $markdown): string
{
return preg_replace_callback(
'~<!--.*?-->|</?[A-Za-z][A-Za-z0-9:-]*(?:\s[^<>]*)?/?>~s',
@@ -50,7 +49,7 @@ class MarkdownService extends Prefab
) ?? $markdown;
}
private function sanitizeChildren(DOMNode $parent, Media $media): void
private function sanitizeNode(DOMNode $parent, Media $media): void
{
foreach (iterator_to_array($parent->childNodes) as $child) {
if (!$child instanceof DOMElement) {
@@ -58,60 +57,72 @@ class MarkdownService extends Prefab
}
$tag = strtolower($child->tagName);
if (!in_array($tag, self::TAGS, true)) {
if (!in_array($tag, self::ALLOWED_TAGS, true)) {
$this->unwrap($child);
$this->sanitizeChildren($parent, $media);
$this->sanitizeNode($parent, $media);
continue;
}
foreach (iterator_to_array($child->attributes) as $attr) {
if (!in_array(strtolower($attr->name), self::ATTRS[$tag] ?? [], true)) {
$child->removeAttributeNode($attr);
foreach (iterator_to_array($child->attributes) as $attribute) {
if (!in_array(strtolower($attribute->name), self::ALLOWED_ATTRIBUTES[$tag] ?? [], true)) {
$child->removeAttributeNode($attribute);
}
}
if ($tag === 'a') {
$href = trim((string) $child->getAttribute('href'));
if (!$this->allowedHref($href)) {
$this->unwrap($child);
$this->sanitizeChildren($parent, $media);
continue;
}
$child->setAttribute('href', $href);
$child->setAttribute('rel', 'noopener noreferrer');
if (preg_match('~^https?://~i', $href)) {
$child->setAttribute('target', '_blank');
} else {
$child->removeAttribute('target');
}
$this->sanitizeLink($child);
}
if ($tag === 'img') {
$src = trim((string) $child->getAttribute('src'));
if (!str_starts_with($src, 'media:')) {
$child->parentNode?->removeChild($child);
$this->sanitizeImage($child, $media);
if (!$child->parentNode) {
continue;
}
$item = $media->findByFileName(substr($src, 6));
if (!$item) {
throw new RuntimeException('Une image utilisée dans le Markdown est introuvable.');
}
$child->setAttribute('src', $item['url']);
$child->setAttribute('alt', trim((string) $child->getAttribute('alt')) ?: (string) $item['alt']);
$child->setAttribute('width', (string) $item['width']);
$child->setAttribute('height', (string) $item['height']);
$child->setAttribute('loading', 'lazy');
$child->setAttribute('decoding', 'async');
}
$this->sanitizeChildren($child, $media);
$this->sanitizeNode($child, $media);
}
}
private function sanitizeLink(DOMElement $node): void
{
$href = trim((string) $node->getAttribute('href'));
if (!$this->isAllowedHref($href)) {
$this->unwrap($node);
return;
}
$node->setAttribute('href', $href);
$node->setAttribute('rel', 'noopener noreferrer');
if (preg_match('~^https?://~i', $href)) {
$node->setAttribute('target', '_blank');
return;
}
$node->removeAttribute('target');
}
private function sanitizeImage(DOMElement $node, Media $media): void
{
$src = trim((string) $node->getAttribute('src'));
if (!str_starts_with($src, 'media:')) {
$node->parentNode?->removeChild($node);
return;
}
$item = $media->findByFileName(substr($src, 6));
if ($item === null) {
throw new RuntimeException('Une image utilisée dans le Markdown est introuvable.');
}
$node->setAttribute('src', $item['url']);
$node->setAttribute('alt', trim((string) $node->getAttribute('alt')) ?: (string) $item['alt']);
$node->setAttribute('width', (string) $item['width']);
$node->setAttribute('height', (string) $item['height']);
$node->setAttribute('loading', 'lazy');
$node->setAttribute('decoding', 'async');
}
private function unwrap(DOMElement $node): void
{
$parent = $node->parentNode;
@@ -131,16 +142,14 @@ class MarkdownService extends Prefab
$parent->removeChild($node);
}
private function allowedHref(string $href): bool
private function isAllowedHref(string $href): bool
{
if ($href === '') {
if ($href === '' || str_starts_with($href, '//')) {
return false;
}
if (str_starts_with($href, '#') || str_starts_with($href, '/')) {
return true;
}
if (preg_match('~^(?:https?://|mailto:)~i', $href)) {
return true;
}

4
app/Views/admin/dashboard.html
View File

@@ -19,8 +19,8 @@
</true>
<false>
<section class="empty-state" aria-labelledby="dashboard-empty-title">
<h2 class="card-title" id="dashboard-empty-title">Aucun article</h2>
<p>Commence par créer un premier article.</p>
<h2 class="card-title" id="dashboard-empty-title">Aucun article.</h2>
<p>Crée un article pour commencer.</p>
</section>
</false>
</check>

10
app/Views/admin/media.html
View File

@@ -2,7 +2,7 @@
<header class="page-header">
<div>
<h1 class="page-title" id="media-title">Médiathèque</h1>
<p class="field-help">Parcourir les images par page évite de charger toute la bibliothèque d'un coup.</p>
<p class="field-help">Ajoute une image ou copie son Markdown pour l’insérer dans un article.</p>
</div>
<div class="page-actions">
@@ -13,11 +13,11 @@
<form class="panel stack" method="post" action="{{ 'media_upload' | alias }}" enctype="multipart/form-data">
<include href="partials/csrf_field.html" />
<label class="field">
<span class="field-label">Nouvelle image</span>
<span class="field-label">Image</span>
<input class="control" type="file" name="image" accept="image/jpeg,image/png" required>
<span class="field-help">Formats : JPG, PNG. Taille maximale : 10 Mo.</span>
</label>
<button class="button" type="submit">Envoyer</button>
<button class="button" type="submit">Ajouter</button>
</form>
<check if="{{ @items }}">
@@ -31,8 +31,8 @@
</true>
<false>
<section class="empty-state" aria-labelledby="media-empty-title">
<h2 class="card-title" id="media-empty-title">Aucune image</h2>
<p>Ajoute ta première image.</p>
<h2 class="card-title" id="media-empty-title">Aucune image.</h2>
<p>Ajoute une image pour commencer.</p>
</section>
</false>
</check>

101
app/Views/admin/post_form.html
View File

@@ -7,79 +7,44 @@
</div>
</header>
<div class="editor-layout" data-editor-layout>
<form class="panel stack editor-form" method="post" action="{{ @formAction }}">
<include href="partials/csrf_field.html" />
<form class="panel stack editor-form" method="post" action="{{ @formAction }}">
<include href="partials/csrf_field.html" />
<label class="field">
<span class="field-label">Titre</span>
<input class="control" type="text" name="title" value="{{ @post.title }}" maxlength="{{ @titleMax }}" required data-char-count>
<span class="char-counter"><span data-char-count-value>0</span> / {{ @titleMax }}</span>
</label>
<label class="field">
<span class="field-label">Titre</span>
<input class="control" type="text" name="title" value="{{ @post.title }}" maxlength="{{ @titleMax }}" required data-char-count>
<span class="char-counter"><span data-char-count-value>0</span> / {{ @titleMax }}</span>
</label>
<label class="field">
<span class="field-label">Extrait</span>
<textarea class="control" name="excerpt" rows="3" maxlength="{{ @excerptMax }}" required data-char-count>{{ @post.excerpt }}</textarea>
<span class="char-counter"><span data-char-count-value>0</span> / {{ @excerptMax }}</span>
</label>
<label class="field">
<span class="field-label">Extrait</span>
<textarea class="control" name="excerpt" rows="3" maxlength="{{ @excerptMax }}" required data-char-count>{{ @post.excerpt }}</textarea>
<span class="char-counter"><span data-char-count-value>0</span> / {{ @excerptMax }}</span>
</label>
<section class="field">
<div class="field-head">
<div>
<h2 class="field-label">Contenu</h2>
<p class="field-help">Markdown avec insertion d’image au curseur. La première image du contenu est utilisée dans les cartes d’article.</p>
</div>
</div>
<div class="toolbar" role="toolbar" aria-label="Outils Markdown">
<button class="tool-button" type="button" data-md-action="bold"><strong>Gras</strong></button>
<button class="tool-button" type="button" data-md-action="italic"><em>Italique</em></button>
<button class="tool-button" type="button" data-md-action="heading">Titre</button>
<button class="tool-button" type="button" data-md-action="list">Liste</button>
<button class="tool-button" type="button" data-md-action="quote">Citation</button>
<button class="tool-button" type="button" data-md-action="link">Lien</button>
<button class="tool-button" type="button" data-md-action="code">Code</button>
<button class="tool-button" type="button" data-media-picker-open>Image</button>
</div>
<textarea class="control editor-textarea" name="body_markdown" rows="18" required data-markdown-editor>{{ @post.body_markdown }}</textarea>
<p class="field-help">Laisse une ligne vide entre deux blocs Markdown (titre, liste, citation, image, code).</p>
</section>
<button class="button" type="submit">Enregistrer</button>
</form>
<aside class="media-picker is-hidden" data-media-picker>
<div class="media-picker__head">
<section class="field">
<div class="field-head">
<div>
<strong data-media-picker-title>Insérer une image</strong>
<p class="field-help" data-media-picker-help>Clique sur une image pour l’insérer dans l’article.</p>
<h2 class="field-label">Contenu</h2>
<p class="field-help">Rédige en Markdown. La première image du contenu sert de visuel dans les listes d’articles.</p>
</div>
<button class="button button--ghost button--small" type="button" data-media-picker-close>Fermer</button>
</div>
<check if="{{ @mediaItems }}">
<true>
<div class="media-picker__grid">
<repeat group="{{ @mediaItems }}" value="{{ @item }}">
<button class="media-picker__item" type="button" data-media-picker-select data-media-markdown="{{ @item.markdown }}">
<img class="media-frame media-frame--square" src="{{ @item.url }}" alt="">
</button>
</repeat>
</div>
<check if="{{ @mediaPickerTruncated }}">
<true>
<p class="field-help">Affichage limité aux {{ @mediaPickerLimit }} images les plus récentes sur {{ @mediaCount }}. Utilise la <a href="{{ 'media_index' | alias }}">médiathèque</a> pour parcourir toute la bibliothèque.</p>
</true>
</check>
</true>
<false>
<section class="empty-state" aria-labelledby="media-picker-empty-title">
<h2 class="card-title" id="media-picker-empty-title">Aucune image disponible</h2>
<p>Ajoute une image depuis la médiathèque.</p>
</section>
</false>
</check>
</aside>
</div>
<div class="toolbar" role="toolbar" aria-label="Outils Markdown">
<button class="button button--ghost button--small" type="button" data-md-action="bold"><strong>Gras</strong></button>
<button class="button button--ghost button--small" type="button" data-md-action="italic"><em>Italique</em></button>
<button class="button button--ghost button--small" type="button" data-md-action="heading">Titre</button>
<button class="button button--ghost button--small" type="button" data-md-action="list">Liste</button>
<button class="button button--ghost button--small" type="button" data-md-action="quote">Citation</button>
<button class="button button--ghost button--small" type="button" data-md-action="link">Lien</button>
<button class="button button--ghost button--small" type="button" data-md-action="code">Code</button>
<a class="button button--ghost button--small" href="{{ 'media_index' | alias }}" target="_blank" rel="noopener">Ouvrir la médiathèque</a>
</div>
<textarea class="control editor-textarea" name="body_markdown" rows="18" required data-markdown-editor>{{ @post.body_markdown }}</textarea>
<p class="field-help">Laisse une ligne vide entre deux blocs. Pour ajouter une image, ouvre la médiathèque, copie le Markdown, puis colle-le ici.</p>
</section>
<button class="button" type="submit">Enregistrer</button>
</form>
</section>

15
app/Views/errors/error.html
View File

@@ -3,19 +3,18 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ @errorTitle ?: 'Erreur' }}</title>
<title>{{ @errorTitle }} · {{ @app.name }}</title>
<link rel="icon" href="{{ @BASE }}/assets/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="{{ @BASE }}/assets/app.css">
</head>
<body>
<main class="page error-page">
<main class="page">
<div class="container">
<section class="error-card">
<p class="error-page__code">Erreur {{ @errorCode ?: 500 }}</p>
<h1 class="error-page__title">{{ @errorTitle ?: 'Erreur' }}</h1>
<p class="error-page__message">{{ @errorMessage ?: 'Une erreur est survenue.' }}</p>
<p class="error-page__hint">Vérifie l’adresse ou reviens à l’accueil.</p>
<p class="error-page__actions"><a class="button" href="{{ 'home' | alias }}">Retour à l’accueil</a></p>
<section class="empty-state stack" aria-labelledby="error-title">
<p class="meta-text">Erreur {{ @errorCode }}</p>
<h1 class="page-title" id="error-title">{{ @errorTitle }}</h1>
<p>{{ @errorMessage }}</p>
<a class="button button--ghost" href="{{ 'home' | alias }}">Retour à l’accueil</a>
</section>
</div>
</main>

2
app/Views/layout.html
View File

@@ -12,7 +12,7 @@
<body>
<include href="partials/site_navigation.html" />
<main class="page" id="main-content">
<main class="page">
<div class="container">
<check if="{{ @flash }}">
<repeat group="{{ @flash }}" value="{{ @msg }}">

2
app/Views/partials/csrf_field.html
View File

@@ -1 +1 @@
<input type="hidden" name="csrf_token" value="{{ @CSRF_TOKEN }}">
<input type="hidden" name="csrf" value="{{ @CSRF }}">

2
app/Views/partials/media_card.html
View File

@@ -7,7 +7,7 @@
<include href="partials/csrf_field.html" />
<label class="field">
<span class="field-label">Texte alternatif</span>
<input class="control" type="text" name="alt" value="{{ @item.alt }}" placeholder="Description de l'image" data-alt-input>
<input class="control" type="text" name="alt" value="{{ @item.alt }}" placeholder="Décris l’image" data-alt-input>
</label>
<button class="button button--ghost button--small" type="submit">Enregistrer</button>
</form>

25
app/Views/partials/site_navigation.html
View File

@@ -1,13 +1,18 @@
<input class="nav-toggle" type="checkbox" id="nav-toggle" aria-hidden="true">
<header class="site-header">
<div class="container site-header__inner">
<label class="nav-toggle-button" for="nav-toggle">
<button
class="icon-button nav-toggle-button"
type="button"
data-mobile-menu-open
aria-controls="mobile-menu"
aria-expanded="false"
aria-label="Ouvrir le menu"
>
<span class="sr-only">Ouvrir le menu</span>
<span class="nav-toggle-button__line"></span>
<span class="nav-toggle-button__line"></span>
<span class="nav-toggle-button__line"></span>
</label>
</button>
<div class="site-brand site-brand--header">
<include href="partials/site_brand.html" />
@@ -16,25 +21,23 @@
<nav class="nav nav--desktop" aria-label="Navigation principale">
<include href="partials/nav_items.html" />
</nav>
<span class="site-header__spacer" aria-hidden="true"></span>
</div>
</header>
<div class="mobile-menu">
<label class="mobile-menu__backdrop" for="nav-toggle" aria-hidden="true"></label>
<div class="mobile-menu" id="mobile-menu" data-mobile-menu>
<button class="mobile-menu__backdrop" type="button" data-mobile-menu-close aria-label="Fermer le menu"></button>
<div class="mobile-menu__panel">
<div class="mobile-menu__panel" role="dialog" aria-modal="true" aria-label="Navigation principale mobile">
<header class="mobile-menu__header">
<div class="site-brand site-brand--menu">
<include href="partials/site_brand.html" />
</div>
<label class="mobile-menu__close" for="nav-toggle">
<button class="icon-button mobile-menu__close" type="button" data-mobile-menu-close aria-label="Fermer le menu">
<span class="sr-only">Fermer le menu</span>
<span class="mobile-menu__close-line"></span>
<span class="mobile-menu__close-line"></span>
</label>
</button>
</header>
<nav class="mobile-menu__nav" aria-label="Navigation principale mobile">

4
app/Views/site/home.html
View File

@@ -14,8 +14,8 @@
</true>
<false>
<section class="empty-state" aria-labelledby="home-empty-title">
<h2 class="card-title" id="home-empty-title">Aucun article</h2>
<p>Le premier article arrivera bientôt.</p>
<h2 class="card-title" id="home-empty-title">Aucun article.</h2>
<p>Reviens bientôt.</p>
</section>
</false>
</check>

23
app/bootstrap.php
View File

@@ -24,20 +24,14 @@ if (is_file($root . '/config.local.ini')) {
$f3->config($root . '/config.local.ini');
}
date_default_timezone_set(app_timezone((string) $f3->get('app.timezone')));
$f3->set('TZ', date_default_timezone_get());
$f3->set('TZ', app_timezone((string) $f3->get('app.timezone')));
$f3->set('DEBUG', $f3->get('app.env') === 'prod' ? 0 : 3);
foreach ([(string) $f3->get('TEMP'), (string) $f3->get('LOGS'), dirname((string) $f3->get('paths.db')), (string) $f3->get('paths.media_dir')] as $dir) {
if (!is_dir($dir)) {
mkdir($dir, 0775, true);
}
}
$uploadsDir = $root . '/' . trim((string) $f3->get('UPLOADS'), '/');
$f3->set('UPLOADS', $uploadsDir . '/');
$uploads = $root . '/' . trim((string) $f3->get('UPLOADS'), '/');
$f3->set('UPLOADS', $uploads . '/');
if (!is_dir($uploads)) {
mkdir($uploads, 0775, true);
foreach ([(string) $f3->get('TEMP'), (string) $f3->get('LOGS'), dirname((string) $f3->get('paths.db')), (string) $f3->get('paths.media_dir'), $uploadsDir] as $dir) {
app_ensure_dir($dir);
}
ini_set('log_errors', '1');
@@ -49,16 +43,15 @@ $db = new DB\SQL('sqlite:' . $f3->get('paths.db'));
$db->exec('PRAGMA foreign_keys = ON');
$f3->set('DB', $db);
$secure = app_request_is_secure();
session_name((string) $f3->get('app.session_name'));
$f3->set('JAR', [
'expire' => 0,
'path' => '/',
'secure' => $secure,
'secure' => app_request_is_secure(),
'httponly' => true,
'samesite' => 'Lax',
]);
new Session(null, 'CSRF');
new Session();
Template::instance()->filter('date_fr', 'app_date_fr');
@@ -66,6 +59,7 @@ if ($f3->get('app.env') === 'prod') {
$f3->set('ONERROR', function (Base $f3): void {
$code = max(1, (int) ($f3->get('ERROR.code') ?: 500));
$meta = app_error_meta($code);
$f3->status($code);
$f3->expire(0);
$f3->mset([
@@ -73,6 +67,7 @@ if ($f3->get('app.env') === 'prod') {
'errorTitle' => $meta['title'],
'errorMessage' => $meta['message'],
]);
echo Template::instance()->render('errors/error.html');
});
}

18
app/helpers.php
View File

@@ -4,8 +4,8 @@ declare(strict_types=1);
function app_timezone(string $value): string
{
$value = trim($value);
return in_array($value, DateTimeZone::listIdentifiers(), true) ? $value : 'UTC';
$timezone = trim($value);
return in_array($timezone, DateTimeZone::listIdentifiers(), true) ? $timezone : 'UTC';
}
function app_now(): string
@@ -52,14 +52,13 @@ function app_date_fr(string $value): string
function app_error_meta(int $code): array
{
return match ($code) {
400 => ['title' => 'Requête invalide', 'message' => 'La requête envoyée est invalide.'],
403 => ['title' => 'Accès refusé', 'message' => 'Tu n’as pas accès à cette ressource.'],
404 => ['title' => 'Page introuvable', 'message' => 'La page demandée est introuvable.'],
400 => ['title' => 'Requête invalide', 'message' => 'La requête est invalide.'],
403 => ['title' => 'Accès refusé', 'message' => 'Tu n’as pas accès à cette page.'],
404 => ['title' => 'Page introuvable', 'message' => 'La page est introuvable.'],
default => ['title' => 'Erreur serveur', 'message' => 'Une erreur est survenue.'],
};
}
function app_request_is_secure(): bool
{
if (!empty($_SERVER['HTTPS']) && strtolower((string) $_SERVER['HTTPS']) !== 'off') {
@@ -77,3 +76,10 @@ function app_request_is_secure(): bool
return false;
}
function app_ensure_dir(string $path): void
{
if (!is_dir($path)) {
mkdir($path, Base::MODE, true);
}
}

3
compose.yaml
View File

@@ -5,8 +5,7 @@ services:
init: true
restart: unless-stopped
# Mapping local pratique pour un reverse proxy Caddy sur l'hôte.
# Si Caddy tourne aussi dans Docker sur le même réseau, ce port peut être
# supprimé et le proxy peut cibler directement app:80.
# Si Caddy tourne aussi dans Docker, le proxy peut cibler directement app:80.
ports:
- "127.0.0.1:8888:80"
volumes:

1
composer.json
View File

@@ -5,6 +5,7 @@
"require": {
"php": "^8.3",
"ext-dom": "*",
"ext-gd": "*",
"ext-intl": "*",
"ext-mbstring": "*",
"ext-pdo_sqlite": "*",

10
composer.lock generated
View File

@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "044d603783cee3e8e1846aab9a07be1f",
"content-hash": "0b85b0833c8e05013fbd10fcc6a9ce9d",
"packages": [
{
"name": "bcosca/fatfree-core",
@@ -59,8 +59,12 @@
"prefer-stable": false,
"prefer-lowest": false,
"platform": {
"php": "^8.3",
"ext-intl": "*"
"ext-dom": "*",
"ext-gd": "*",
"ext-intl": "*",
"ext-mbstring": "*",
"ext-pdo_sqlite": "*",
"php": "^8.3"
},
"platform-dev": {},
"plugin-api-version": "2.6.0"

8
docker/entrypoint.sh
View File

@@ -4,8 +4,8 @@ set -eu
APP_ROOT="/var/www/html"
CONFIG="$APP_ROOT/config.local.ini"
# Docker crée un répertoire si le fichier hôte n'existe pas lors du bind mount.
# Le supprimer pour que bootstrap.php retombe sur les valeurs par défaut.
# Si le bind mount cible un fichier absent, Docker crée un répertoire.
# Le supprimer pour laisser bootstrap.php utiliser les valeurs par défaut.
if [ -d "$CONFIG" ]; then
rmdir "$CONFIG" 2>/dev/null || true
echo "Warning: config.local.ini monté comme répertoire (fichier absent sur l'hôte). Valeurs par défaut utilisées."
@@ -19,7 +19,7 @@ install -d -m 0775 -o www-data -g www-data \
"$APP_ROOT/tmp/uploads"
# Les bind mounts peuvent conserver les permissions de l'hôte.
# Normaliser les dossiers persistants et le runtime éphémère avant le démarrage.
# Normaliser les dossiers persistants et le runtime avant le démarrage.
chown -R www-data:www-data \
"$APP_ROOT/db" \
"$APP_ROOT/logs" \
@@ -31,7 +31,7 @@ chmod -R u+rwX,g+rwX \
"$APP_ROOT/public/uploads/media" \
"$APP_ROOT/tmp"
# Exécuter l'installation en tant que www-data pour conserver des permissions cohérentes.
# Exécuter l'installation en tant que www-data pour garder des permissions cohérentes.
su -s /bin/sh www-data -c "php $APP_ROOT/scripts/install.php"
exec "$@"

276
public/assets/app.css
View File

@@ -1,6 +1,4 @@
/* =========================================================
Design tokens
========================================================= */
/* Design tokens */
:root {
--color-bg: #f6f8fb;
@@ -46,9 +44,7 @@
--focus-ring: 0 0 0 4px rgba(18, 32, 51, 0.1);
}
/* =========================================================
Base
========================================================= */
/* Base */
* {
box-sizing: border-box;
@@ -87,9 +83,7 @@ a {
color: inherit;
}
/* =========================================================
Layout helpers and utilities
========================================================= */
/* Layout helpers and utilities */
.container {
width: min(100% - 2rem, var(--container));
@@ -116,13 +110,7 @@ a {
font-size: 0.95rem;
}
.is-hidden {
display: none !important;
}
/* =========================================================
layout.html
========================================================= */
/* layout.html */
.site-header {
position: sticky;
@@ -141,41 +129,19 @@ a {
padding: var(--space-4) 0;
}
.site-header__spacer {
display: none;
width: 3rem;
min-width: 3rem;
height: 3rem;
}
.site-brand {
min-width: 0;
}
.site-brand__title {
display: inline-block;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
}
.site-brand--header {
text-align: left;
}
.site-brand--menu {
padding-right: var(--space-4);
}
.nav-toggle {
position: fixed;
inline-size: 1px;
block-size: 1px;
inset: 0 auto auto 0;
opacity: 0;
pointer-events: none;
}
.nav,
.page-actions,
.card-actions {
@@ -209,7 +175,6 @@ a {
}
.nav-items__link {
text-decoration: none;
color: var(--color-text-soft);
}
@@ -218,7 +183,7 @@ a {
color: var(--color-text);
}
/* Desktop: rendre Déconnexion visuellement identique à Connexion */
/* Alignement visuel du bouton de déconnexion sur les liens desktop */
.nav--desktop .nav-items__button {
display: inline-flex;
align-items: center;
@@ -230,7 +195,6 @@ a {
background: transparent;
box-shadow: none;
color: var(--color-text-soft);
text-decoration: none;
font-weight: 400;
line-height: inherit;
}
@@ -243,8 +207,9 @@ a {
box-shadow: none;
}
.nav-toggle-button,
.mobile-menu__close {
.icon-button {
appearance: none;
-webkit-appearance: none;
position: relative;
display: none;
align-items: center;
@@ -258,20 +223,16 @@ a {
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.nav-toggle-button:hover,
.nav-toggle-button:focus-visible,
.mobile-menu__close:hover,
.mobile-menu__close:focus-visible {
.icon-button:hover,
.icon-button:focus-visible {
border-color: var(--color-border-strong);
background: var(--color-surface);
}
.nav-toggle-button:active,
.mobile-menu__close:active {
.icon-button:active {
transform: scale(0.98);
}
@@ -315,8 +276,11 @@ a {
.mobile-menu__backdrop {
position: absolute;
inset: 0;
padding: 0;
border: 0;
background: rgba(18, 32, 51, 0.46);
opacity: 0;
cursor: pointer;
transition: opacity 220ms ease;
}
@@ -344,15 +308,6 @@ a {
gap: var(--space-4);
}
.mobile-menu__title {
font-size: 1.25rem;
font-weight: 700;
}
.mobile-menu__nav {
align-content: start;
}
.mobile-menu__nav .nav-items {
display: grid;
gap: var(--space-4);
@@ -377,7 +332,6 @@ a {
box-shadow: var(--shadow-sm);
color: var(--color-text);
text-align: center;
text-decoration: none;
font-weight: 600;
}
@@ -389,20 +343,20 @@ a {
background: var(--color-surface);
}
#nav-toggle:checked ~ .mobile-menu {
.mobile-menu.is-open {
pointer-events: auto;
}
#nav-toggle:checked ~ .mobile-menu .mobile-menu__backdrop,
#nav-toggle:checked ~ .mobile-menu .mobile-menu__panel {
.mobile-menu.is-open .mobile-menu__backdrop,
.mobile-menu.is-open .mobile-menu__panel {
opacity: 1;
}
#nav-toggle:checked ~ .mobile-menu .mobile-menu__panel {
.mobile-menu.is-open .mobile-menu__panel {
transform: translateY(0);
}
#nav-toggle:checked ~ .site-header .nav-toggle-button {
.site-header.is-mobile-menu-open .nav-toggle-button {
opacity: 0;
pointer-events: none;
}
@@ -438,9 +392,7 @@ a {
border-color: var(--color-danger-border);
}
/* =========================================================
Shared sections and components
========================================================= */
/* Shared sections and components */
.page-header {
display: flex;
@@ -465,29 +417,20 @@ a {
.card,
.panel,
.prose,
.empty-state,
.media-picker,
.auth-shell,
.error-card {
.empty-state {
background: var(--color-surface);
border-radius: var(--radius-lg);
}
.card,
.panel,
.prose,
.media-picker,
.auth-shell,
.error-card {
.prose {
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
.panel,
.prose,
.media-picker,
.auth-shell,
.error-card {
.prose {
padding: var(--space-5);
}
@@ -497,8 +440,7 @@ a {
}
.card-grid,
.field,
.media-picker__grid {
.field {
display: grid;
gap: var(--space-4);
}
@@ -547,28 +489,18 @@ textarea.control {
resize: vertical;
}
.button,
.tool-button,
.media-picker__item {
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-decoration: none;
transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.button,
.tool-button {
border-radius: var(--radius-pill);
}
.button {
min-height: var(--control-height);
padding: 0.7rem 1rem;
border: 1px solid var(--color-text);
border-radius: var(--radius-pill);
background: var(--color-text);
color: var(--color-surface);
transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.button:hover,
@@ -576,9 +508,7 @@ textarea.control {
transform: translateY(-1px);
}
.button--ghost,
.tool-button,
.media-picker__item {
.button--ghost {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
@@ -595,16 +525,7 @@ textarea.control {
padding: 0.45rem 0.8rem;
}
.tool-button {
min-height: 2.5rem;
padding: 0.5rem 0.9rem;
}
.button--ghost:focus-visible,
.tool-button:hover,
.tool-button:focus-visible,
.media-picker__item:hover,
.media-picker__item:focus-visible {
.button--ghost:focus-visible {
outline: none;
border-color: var(--color-border-strong);
box-shadow: var(--focus-ring);
@@ -618,10 +539,6 @@ textarea.control {
object-fit: cover;
}
.media-frame--square {
aspect-ratio: 1;
}
.media-frame--placeholder {
display: grid;
place-items: center;
@@ -673,9 +590,7 @@ textarea.control {
width: 100%;
}
/* =========================================================
Public pages
========================================================= */
/* Public pages */
.article {
max-width: 56rem;
@@ -751,24 +666,7 @@ textarea.control {
border-radius: var(--radius-md);
}
/* =========================================================
Admin pages
========================================================= */
.editor-layout {
display: grid;
gap: var(--space-4);
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.editor-layout.is-picker-open {
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
}
.editor-form {
min-width: 0;
}
/* Admin pages */
.editor-textarea {
min-height: 22rem;
@@ -784,85 +682,14 @@ textarea.control {
background: var(--color-surface-muted);
}
.media-picker {
display: grid;
gap: var(--space-4);
background: var(--color-surface-muted);
}
.editor-layout.is-picker-open .media-picker {
position: sticky;
top: var(--space-6);
}
.media-picker__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
}
.media-picker__grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.media-picker__item {
display: grid;
gap: var(--space-3);
width: 100%;
padding: var(--space-3);
border-radius: var(--radius-lg);
text-align: left;
align-content: start;
}
/* =========================================================
Auth and error pages
========================================================= */
/* Auth pages */
.auth-shell {
width: min(100%, var(--container-narrow));
margin-inline: auto;
}
.error-page {
padding: var(--space-8) 0 var(--space-12);
}
.error-card {
max-width: 42rem;
margin: 0 auto;
}
.error-page__code {
margin: 0 0 var(--space-3);
color: var(--color-text-soft);
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.error-page__title {
margin: 0 0 var(--space-4);
font-size: clamp(2rem, 2vw + 1rem, 3rem);
line-height: 1.1;
}
.error-page__message,
.error-page__hint {
margin: 0 0 var(--space-4);
color: var(--color-text-soft);
}
.error-page__actions {
margin-top: var(--space-5);
}
/* =========================================================
Pagination
========================================================= */
/* Pagination */
.pagination {
display: flex;
@@ -882,16 +709,7 @@ textarea.control {
pointer-events: none;
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1080px) {
.editor-layout,
.editor-layout.is-picker-open {
grid-template-columns: 1fr;
}
}
/* Responsive */
@media (max-width: 960px) {
.card-grid {
@@ -927,10 +745,7 @@ textarea.control {
.panel,
.prose,
.media-picker,
.empty-state,
.auth-shell,
.error-card {
.empty-state {
padding: var(--space-4);
}
@@ -942,7 +757,6 @@ textarea.control {
width: 100%;
}
.tool-button,
.button--small {
width: auto;
}
@@ -954,9 +768,7 @@ textarea.control {
}
}
/* =========================================================
Responsive navigation
========================================================= */
/* Responsive navigation */
@media (max-width: 720px) {
.site-header {
@@ -972,6 +784,13 @@ textarea.control {
min-height: 5.25rem;
}
.site-header__inner::after {
content: "";
grid-column: 3;
width: 3rem;
height: 3rem;
}
.site-brand--header {
grid-column: 2;
justify-self: center;
@@ -987,9 +806,7 @@ textarea.control {
display: none;
}
.nav-toggle-button,
.mobile-menu__close,
.site-header__spacer {
.icon-button {
display: inline-flex;
}
@@ -998,11 +815,6 @@ textarea.control {
justify-self: start;
}
.site-header__spacer {
grid-column: 3;
justify-self: end;
}
.page {
padding-top: var(--space-6);
}

124
public/assets/app.js
View File

@@ -1,7 +1,50 @@
(() => {
const on = (selector, handler) => document.querySelectorAll(selector).forEach(handler);
const each = (selector, handler) => document.querySelectorAll(selector).forEach(handler);
on('[data-copy-text]', (button) => {
const siteHeader = document.querySelector('.site-header');
const mobileMenu = document.querySelector('[data-mobile-menu]');
const mobileMenuOpen = document.querySelector('[data-mobile-menu-open]');
if (siteHeader && mobileMenu && mobileMenuOpen) {
const setMobileMenuState = (isOpen) => {
mobileMenu.classList.toggle('is-open', isOpen);
siteHeader.classList.toggle('is-mobile-menu-open', isOpen);
mobileMenuOpen.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
};
mobileMenuOpen.addEventListener('click', () => {
setMobileMenuState(true);
});
each('[data-mobile-menu-close]', (button) => {
button.addEventListener('click', () => {
setMobileMenuState(false);
});
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && mobileMenu.classList.contains('is-open')) {
setMobileMenuState(false);
mobileMenuOpen.focus();
}
});
const mediaQuery = window.matchMedia('(min-width: 721px)');
const handleViewportChange = (event) => {
if (event.matches) {
setMobileMenuState(false);
}
};
if (typeof mediaQuery.addEventListener === 'function') {
mediaQuery.addEventListener('change', handleViewportChange);
} else if (typeof mediaQuery.addListener === 'function') {
mediaQuery.addListener(handleViewportChange);
}
}
each('[data-copy-text]', (button) => {
button.addEventListener('click', async () => {
const text = button.getAttribute('data-copy-text') || '';
if (!text) {
@@ -21,7 +64,7 @@
});
});
on('[data-confirm]', (form) => {
each('[data-confirm]', (form) => {
form.addEventListener('submit', (event) => {
const message = form.getAttribute('data-confirm') || 'Confirmer cette action ?';
if (!window.confirm(message)) {
@@ -30,7 +73,7 @@
});
});
on('[data-char-count]', (field) => {
each('[data-char-count]', (field) => {
const counter = field.parentElement?.querySelector('[data-char-count-value]');
if (!counter) {
return;
@@ -45,23 +88,19 @@
});
const editor = document.querySelector('[data-markdown-editor]');
const picker = document.querySelector('[data-media-picker]');
const editorLayout = document.querySelector('[data-editor-layout]');
const pickerClose = document.querySelector('[data-media-picker-close]');
const focusEditor = () => editor?.focus();
if (editor) {
const focusEditor = () => editor.focus();
const replaceSelection = (before, after = '', placeholder = '') => {
const start = editor.selectionStart;
const end = editor.selectionEnd;
const selected = editor.value.slice(start, end);
const content = selected || placeholder;
const selection = editor.value.slice(start, end);
const content = selection || placeholder;
const insertion = before + content + after;
editor.setRangeText(insertion, start, end, 'end');
if (!selected && placeholder) {
if (!selection && placeholder) {
const cursorStart = start + before.length;
editor.setSelectionRange(cursorStart, cursorStart + placeholder.length);
}
@@ -72,17 +111,17 @@
const prefixLines = (prefix, placeholder) => {
const start = editor.selectionStart;
const end = editor.selectionEnd;
const selected = editor.value.slice(start, end) || placeholder;
const prefixed = selected
const selection = editor.value.slice(start, end) || placeholder;
const value = selection
.split('\n')
.map((line) => (line ? prefix + line : prefix.trimEnd()))
.join('\n');
editor.setRangeText(prefixed, start, end, 'end');
editor.setRangeText(value, start, end, 'end');
focusEditor();
};
on('[data-md-action]', (button) => {
each('[data-md-action]', (button) => {
button.addEventListener('click', () => {
switch (button.getAttribute('data-md-action')) {
case 'bold':
@@ -104,12 +143,8 @@
replaceSelection('[', '](https://)', 'texte');
break;
case 'code': {
const selected = editor.value.slice(editor.selectionStart, editor.selectionEnd);
replaceSelection(
selected.includes('\n') ? '```\n' : '`',
selected.includes('\n') ? '\n```' : '`',
'code'
);
const selection = editor.value.slice(editor.selectionStart, editor.selectionEnd);
replaceSelection(selection.includes('\n') ? '```\n' : '`', selection.includes('\n') ? '\n```' : '`', 'code');
break;
}
}
@@ -117,45 +152,7 @@
});
}
const togglePicker = (open) => {
if (!picker) {
return;
}
picker.classList.toggle('is-hidden', !open);
editorLayout?.classList.toggle('is-picker-open', open);
if (!open) {
focusEditor();
return;
}
picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
};
on('[data-media-picker-open]', (button) => {
button.addEventListener('click', () => togglePicker(true));
});
pickerClose?.addEventListener('click', () => togglePicker(false));
on('[data-media-picker-select]', (button) => {
button.addEventListener('click', () => {
const markdown = button.getAttribute('data-media-markdown') || '';
if (!editor || !markdown) {
return;
}
const start = editor.selectionStart;
const end = editor.selectionEnd;
const prefix = start > 0 && !editor.value.slice(0, start).endsWith('\n\n') ? '\n\n' : '';
const suffix = end < editor.value.length && !editor.value.slice(end).startsWith('\n\n') ? '\n\n' : '';
editor.setRangeText(prefix + markdown + suffix, start, end, 'end');
togglePicker(false);
});
});
on('[data-alt-input]', (input) => {
each('[data-alt-input]', (input) => {
const card = input.closest('.card');
const button = card?.querySelector('[data-markdown-template]');
if (!button) {
@@ -164,8 +161,7 @@
const update = () => {
const template = button.getAttribute('data-markdown-template') || '';
const alt = input.value;
button.setAttribute('data-copy-text', template.replace('![](', '![' + alt + ']('));
button.setAttribute('data-copy-text', template.replace('![](', '![' + input.value + ']('));
};
input.addEventListener('input', update);

56
scripts/clean-orphan-media.php Normal file
View File

@@ -0,0 +1,56 @@
<?php
declare(strict_types=1);
$f3 = require __DIR__ . '/bootstrap.php';
Media::bootstrap($f3->get('DB'));
$mode = strtolower(trim((string) ($argv[1] ?? 'list')));
if (!in_array($mode, ['list', 'delete'], true)) {
fwrite(STDERR, "Usage: php scripts/clean-orphan-media.php [list|delete]\n");
exit(1);
}
$directory = rtrim((string) $f3->get('paths.media_dir'), '/\\');
$knownFiles = [];
foreach ((new Media())->find(null) ?: [] as $row) {
$knownFiles[(string) $row->file_name] = true;
}
$orphans = [];
if (is_dir($directory)) {
foreach (glob($directory . DIRECTORY_SEPARATOR . '*') ?: [] as $path) {
if (!is_file($path)) {
continue;
}
$name = basename($path);
if (!isset($knownFiles[$name])) {
$orphans[] = $path;
}
}
}
sort($orphans, SORT_NATURAL);
if ($mode === 'list') {
if ($orphans === []) {
fwrite(STDOUT, "Aucun fichier orphelin.\n");
exit(0);
}
fwrite(STDOUT, "Fichiers orphelins:\n");
foreach ($orphans as $path) {
fwrite(STDOUT, '- ' . basename($path) . PHP_EOL);
}
exit(0);
}
$deleted = 0;
foreach ($orphans as $path) {
if (@unlink($path)) {
$deleted++;
}
}
fwrite(STDOUT, "Fichiers orphelins supprimés : {$deleted}\n");