C'est la rentrée pour la beta2

Picture

Nous voila Ă  la rentrĂ©e et aprĂšs 5 mois de dĂ©veloppement et quelques vacances 😉 Soosyze CMS beta2 vient de sortir !

Nous avons anticipé la sortie de Soosyze beta2 en repoussant une partie du développement à la prochaine version. Vous pourrez ainsi nous dire si la tournure que prend le projet vous convient.

Ne perdons pas plus de temps, commençons par l'une des plus grosses nouveautĂ©s, la refonte du thĂšme d'administration et public đŸ˜›

Utilisateur

Nouveau thĂšme d'administration et public

Le thÚme d'administration et le thÚme public ont montré leurs limites, notamment dans la navigations.

Nous avons concentré nos efforts sur la refonte des thÚmes et l'uniformisation du style pour l'administration afin de se séparer définitivement de Bootstrap qui a bien fait son taff jusqu'à présent.

Maintenir un thĂšme pour l'administration est particuliĂšrement chronophage. Maintenant seul les thĂšmes qui ont l'option admin activĂ© dans leur fichier composer.json peuvent ĂȘtre utilisĂ©s comme thĂšme d'administration.

De plus, il prendra en charge un thĂšme dark (si disponible).

Concernant le thÚme standard il a été lui aussi mise en valeur avec un nouveau style.

Pour ceux qui souhaiteront conserver les anciens thĂšmes, il sont disponibles dans le store.

Voir la DĂ©mo

Node

Nous avons amélioré l'expérience utilisateur du module Node, ajouté un nouveau paramÚtre de publication et un nouveau type de contenu de base.

Nouvelle interface de création et d'édition

L'interface est simplifiée avec de nouveaux menus dynamiques

Node edit

Épingler

Le nouveau paramĂštre de publication « Épingler le contenu » permet de s'Ă©manciper du trie par date de crĂ©ation et faire remonter en haut de vos listes les contenus Ă©pinglĂ©s.

Par exemple un article épinglé sera affiché en premier sur votre blog.

Node Ă©pingle

News Ă©pingle

Épingler un contenu permet aussi de le retrouver plus facilement sur la page d'administration.

Node admin Ă©pingle

Filtres

Des filtres dynamiques ont été ajoutés sur la page d'administration des contenus.

Node filtre

Nouvelle présentation des types de contenu

Une icÎne et une couleur ont été ajoutés pour les types de contenu afin d'offrir un repÚre visuel dans la page d'ajout des contenus et d'administration.

Node add

Page privée

Le nouveau type de contenu « Page privĂ©e »  a Ă©tĂ© ajoutĂ©, il est visible uniquement par les membres de votre site.

Node private page

Image de présentation pour les entités

Nous avons amélioré l'affichage pour les entitys. Il est possible d'afficher des données non textuelles comme des images. Par exemple pour le module gallery.

Entity one to many

Gestionnaire de fichiers

Ce qui a commencé comme une simple refonte de la navigation dans le module Filemanager c'est vite transformé en une grosse mise à jour de l'interface et de peaufinage dans ses fonctionnalités.

Les sous menus du module Filemanager ont été normalisés dans les modales et la liste d'affichage, les titres des liens d'actions ont été traduits et un bug dans la copie des liens a été corrigé.

Filemanager admin

L'affichage des images ont Ă©tĂ© amĂ©liorĂ©es dans la liste des fichiers et dans les fenĂȘtres modales.

Filemanager_image

Ajout du quota de données avec la taille totale des données par répertoire.

File Quota

Le tĂ©lĂ©versement a Ă©tĂ© revu, il est dĂ©sormais dans une fenĂȘtre modal accessible depuis un bouton sur l'interface et la taille limite de tĂ©lĂ©versement est affichĂ© en fonction des contraintes du serveur et des permissions sur le rĂ©pertoire.

File upload

Une barre de progression a été ajouté pour rassurer l'utilisateur du bon téléversement de ses fichiers.

Le calcule des permissions ont été simplifiées et vous pouvez créer des permissions de fichier pour les utilisateurs non connectés (pour créer un espace de téléchargement).

Bloc

RĂ©seaux sociaux

Les utilisateurs ayant du mal à intégrer leurs réseaux sociaux via le bloc dédié, nous avons décidé de le rendre dynamique avec une interface dans les configurations.

Config social

Les nouveaux blocs configurables

Vous allez pouvoir utiliser les nouveaux blocs dédiés au blog, vous pourrez ainsi afficher vos articles directement sur n'importe quelle page.

bloc news

Et GROSSE Ă©volution, les blocs dynamiques sont maintenant configurables.

C'est-à-dire que quand vous ajouterez un bloc de news vous aurez la possibilité de configurer le nombre de news à afficher, son décalage et si vous souhaitez afficher un lien « plus » en bas de l'affichage. Vous pourrez ainsi créer un affichage un peu plus personnalisé comme suis :

Bloc news config

Autre exemple de bloc configurable : les blocs de menu.

Sur la beta1 lorsque vous ajoutez un bloc de menu et que vous vous ĂȘtes trompĂ©, vous ĂȘtes obligĂ© de supprimer le bloc puis d'en rajouter un autre. Avec les configurations en beta2 vous pouvez juste choisir quel menu afficher.

Meilleure visibilité des liens d'actions

L'utilisateur @Fabrice sur notre Discord nous a fait remonter une difficulté à voir les icÎnes d'édition des bloc, nous l'avons corrigé avec un fond sombre.

Bloc action

Signaler un bug

Un nouveau bloc a été ajouté par défaut à l'installation. Placé en bas des pages d'administration, un lien mÚne aux issues de notre projet github.

Bloc bug

News

Refonte du flux RSS

DerniÚrement j'ai découvert un tout nouveau outil pour agréger des flux RSS : Fluent Reader

Le flux RSS a Ă©tĂ© revu pour pouvoir ĂȘtre lu comme ceci :

RSS Fluent

Nouvelle configuration

Une nouvelle configuration pour les new permet d'ajouter une image par défaut à vos articles de blog, ou une icÎne FontAwesome.

Blog config

Nouvelle page de blog

L'interface de la page de blog a été revue pour le nouveau thÚme public.

Page blog

Utilisateur

Filtres

Des filtres dynamiques ont été ajoutés sur la page d'administration des utilisateurs.

User administration

Couleur par défaut des rÎles

Ajout d'une couleur par défaut aux rÎles utilisateurs.

Roles color

Refonte de la page des permissions

Une nouvelle navigation et barre de recherche ont été ajoutés à la page des permissions.

Permissions admin

Simplification dans l'Ă©dition des rĂŽle

Les rĂŽles peuvent ĂȘtre dĂ©placĂ©s manuellement en drag&drop ou en spĂ©cifiant son poids dans le champ numĂ©rique.

Roles admin

Nouveau droit utilisateur pour les contenus non publiés

Une nouvelle permission a été ajoutée pour déterminer quels rÎles utilisateurs ont le droit de voir quels types de contenus non publiés.

Délai de réinitialisation de mot de passe

L'administrateur peut choisir un délai de réinitialisation du mot de passe avec pour valeur par défaut un jour.

Le dĂ©lai doit ĂȘtre strictement positif (1 minute, 1 jour, 1 mois...)

Les formats de relatifs des dates de PHP doivent ĂȘtre utilisĂ©es pour ajouter un dĂ©lai.

Le délai est obligatoire si le formulaire de réinitialisation du mot de passe est activé.

Cette nouvelle option offre un peu plus de sécurité pour vos utilisateurs.

Config user

Nouveau module dashborad

Ce nouveau module apporte une page comportent l'ensemble des informations sur votre application.

Dans cette premiĂšre version, le dashboard affiche :

  • Les liens pour le forum, la documentation, les plugins et le repo de Soosyze,
  • Un ensemble d'informations sur le CMS,
  • Un rĂ©sumĂ© des informations sur le serveur,
  • Et une page dĂ©diĂ©e aux informations sur le serveur.
  • De plus, vous pouvez exĂ©cuter la tĂąche dashboard.

Module Dashboard

Intégration de Trumbowyg dans le core du CMS

Quand j'ai commencĂ© l'Ă©criture de Soosyze, j'ai eu le rĂ©flexe de reprendre certains standards un peu dĂ©passĂ©s comme de ne pas inclure d'Ă©diteur de texte dans le cƓur du CMS.

L'intégration du contenu se faisant avec un éditeur de texte, ajouter un tel module signifie une certaine prise de risque :

L'utilisateur lambda ne prendra pas ou peu le risque d'utiliser un autre Ă©diteur de texte, peut-ĂȘtre mĂȘme meilleur que celui de base,

Si l'éditeur ne propose pas assez de fonctionnalités, l'utilisateur risque de mettre en doute tout le CMS sur sa capacité à gérer des contenus en ligne,

Les mises à jour ne dépendent pas de l'équipe du Cms mais d'un tiers,

L'alourdissement conséquent du CMS, par exemple si nous intégrions TinyMCE qui est l'un des wysiwygs les plus complet du marché, le CMS doublerait de volume.

Bref, il y a 5-10 ans il n'Ă©tait pas rare de voir un CMS sans Ă©diteur de texte dans son cƓur. Le but Ă©tait de laisser le choix Ă  l'utilisateur de choisir son Ă©diteur.

Aujourd'hui la tendance s'inverse, la plupart des utilisateurs (en tout cas avec ceux que j'ai pu échanger) me disent préférer avoir un éditeur de texte de base. Et que s'il ne semble pas suffisant, voir s'il y a un module alternatif.

J'ai donc choisi de fournir le module Trumbowyg de notre Store comme éditeur de texte enrichie par défaut. Il est léger, simple d'utilisation et facilement modulaire.

Menu

Refonte de la navigation

Les actions de manipulation des menus ont été normalisés.

Menu admin

Menu requis par le systĂšme

Les menus d'administration, principal et utilisateur deviennent requis par le systĂšme, vous ne pouvez donc plus les supprimer.

Lorsque vous vous dirigez vers la page de gestion des menu vous serez redirigé directement sur le menu principal.

Simplification des targets pour les liens de menu

À la crĂ©ation d'un lien, l'utilisateur a le choix entre les cibles suivantes :

<a target="_blank|_self|_parent|_top|framename">

Cependant, leurs utilisations sont rarement pertinentes, seul l'ouverture dans une fenĂȘtre sĂ©parĂ©e Ă  du sens pour l'utilisateur finale.

C'est pourquoi nous rĂ©duirons le choix Ă  ouvrir un lien de menu dans la fenĂȘtre courante ou dans une fenĂȘtre sĂ©parĂ©e.

Link edit

Backup manager

J'ai ajouté une fréquence de sauvegarde au module BackupManager.

Pour éviter qu'une sauvegarde soit effectuée à chaque exécution de la tùche CRON, un champ de configuration gérant la fréquence de sauvegardes a été ajouté.

Par exemple, si la fréquence est d'une journée et que la tùche CRON est exécutée 10 fois par jour, alors une seule sauvegarde aura lieu chaque jour et non 10.

Config Backup

DĂ©veloppeur

Nouvelle bibliothĂšque anti KSES

Filtrer les balises permettent d'Ă©viter l'utilisation de balises dangereuses pour votre site et Ă©viter les attaques XSS (injection de JavaScript dans vos contenus).

AprÚs avoir comparé les différentes solutions disponibles, nous avions guÚre le choix. La solution la plus complÚte est HTML purifier, mais celle-ci est une véritable usine à gaz. Bien que trÚs fonctionnelle, elle pÚse autant que le CMS + le framework + queryflatfile.

Il est donc inenvisageable de l'utiliser sachant de notre politique est de rester simple et léger.

Je me suis donc penché sur la bibliothÚque Kses utilisée dans wordpress et Drupal.

Malheureusement, cette librairie date de 2003, son code utilise des éléments dépréciés par PHP et son intégration à wordpress et Drupal est assez brut.

J'ai donc redéveloppé un composant à partir de ses fonctions et surtout réalisé des tests unitaires pour garantir son bon fonctionnement.

J’ai suivie les exemples de code malveillants disponible sur le site de l’OWASPÂź Foundation pour Ă©crire les tests. D’ailleurs ce sont les mĂȘmes utilisĂ©s pour vĂ©rifier le bon fonctionnement de HTML purifier.

Le gros manque de Kese est l'absence d'une liste de tags autorisées, je me suis donc inspiré de celle fournie par wordpress et Drupal en les complétant avec les nouveaux standard du W3C.

Vous pouvez retrouver les sources de ce nouveau composant Ă  cette adresse, la licence reste la mĂȘme (GPLv2), la couverture du code et de 92 %, autant dire qu'elle est largement testĂ©e. Et elle fonctionne sous PHP 5.4 Ă  7.4.

Nouvelle bibliothùque d’affichage : Soosyze CSS

Nous nous sommes inspiré de Semantic UI et de Bootstrap avec pour axe de réflexion :

  • Qu'est-ce que nous utilisons pratiquement Ă  tous les coups ?
  • Qu'est ce qui est indispensable ?
  • Comment rendre le tout customizable et modulable ?

Et voilà comment est née Soosyze CSS (nom pas encore définitif).

Coté CSS elle gÚre :

  • La grille de placement de Bootstrap, mais uniquement les sur les points de ruptures sm et md (mobile et desktop),
  • La gestion complĂšte des formulaires,
  • Les checkbox simples,
  • Les toogles,
  • Les boutons radios et des boutons radios groupĂ©s,
  • Une gestion des tables : simple, hover, striped et responsive,
  • Des alertes et des boutons : simple, info, success, warning, danger,
  • Des navigations verticales et horizontals,
  • Une barre de navigation flexible pour l'affichage des Ă©lĂ©ments Ă  droite et Ă  gauche,
  • Les tooltips en CSS,
  • Les images responsives.

Et coté JS :

  • Les fenĂȘtres modales,
  • Les navigations tabulĂ©es,
  • Les drawer (top, bottom, right et left),
  • Des toogles d'affichages.

Et grosse nouveauté, elle prend en charge le Dark mode.

Un bon nombre des composants qui composeront cette nouvelle bibliothÚque provient de composants déjà présent dans le thÚme d'administration, donc c'est plus une mise en forme du travail déjà présent que nous avons complété avec les prochains besoins de Soosyze CMS.

Nouvelle option pour les champs numériques

Le champ numérique généré par le FormBuilder permet d'ajouter des boutons pour incrémenter et décrémenter plus simplement leur valeur.

Input number

Standardisation des noms de template

Une convention de nommage pour les modules du cƓur a Ă©tĂ© crĂ©Ă©e afin de rendre la crĂ©ation d'un thĂšme plus intuitif. Le but est d'Ă©viter les collisions de templates.

C'est-Ă -dire que si 2 modules utilisent des templates portant le mĂȘme nom, il y a un risque de collision. C'est l'un des points essentiels pour stabiliser Soosyse CMS.

Traductions séparées

Les traductions sont désormais portées dans les modules et build à l'installation du CMS ou d'un nouveau modue.

Il suffit de préciser ou se situe les fichiers de traductions dans la fonction boot() de l'installateur.

class Installer extends \SoosyzeCore\System\Migration
{
    public function boot()
    {
        $this->loadTranslation('fr', __DIR__ . '/Lang/fr/config.json');
        $this->loadTranslation('fr', __DIR__ . '/Lang/fr/humans_time.json');
        $this->loadTranslation('fr', __DIR__ . '/Lang/fr/main.json');
        $this->loadTranslation('fr', __DIR__ . '/Lang/fr/permission.json');
        $this->loadTranslation('fr', __DIR__ . '/Lang/fr/standard.json');
    }

}

Simplification de la création d'une configuration

À la place de dĂ©clarer l'ensemble des hooks pour crĂ©er une configuration, le dĂ©veloppeur aura juste Ă  dĂ©clarer son Ă©lĂ©ment de menu et d'utiliser l'interface dĂ©diĂ©e.

Revu du développement

Pour avoir une sortie en septembre certains points annoncés sont reportés à la prochaine version :

  • L'utilisation de PHPMailer,
  • Mettre en place un systĂšme de chargement pour les bibliothĂšques externes pour permettre d'avoir une version de JQuery commune plutĂŽt que chaque thĂšme ait Ă  l'importer. Cela rĂ©duira considĂ©rablement le poids des modules et thĂšme, mais augmentera celle du CMS. De plus, ce changement est cohĂ©rent dans notre choix de supprimer les CDN (voir le premier poste du journal de dĂ©veloppement de la beta2),
  • Revoie le workflow de l'inscription utilisateur.

Bref, en 5 mois avec beaucoup de nouveauté, de découverte et d'apprentissage. Je me suis bien amusé, mais le temps à semblé long sur la fin.

Si vous utilisez la version beta1 en production, n'hésitez pas à lire le guide pour que votre mise à jour se passe bien. Si vous rencontrez des problÚmes, je répondrai uniquement sur le forum, vous pouvez le faire sur le post suivant, ou en créer un nouveau.

J'ai pas mal rĂ©flĂ©chis Ă  la suite que prendra le CMS, je vous en parlerais trĂšs prochainement dans un billet de blog la semaine prochaine đŸ˜›

En attendant, vous pouvez nous retrouver sur le Forum, Discord ou Mastodon ; bonne rentrĂ©e Ă  tous !

Scroll to top