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

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>