Polenta

Instructions d’installation

cd polenta
Installer les dépendances back-end : composer install
Installer les dépendances front-end : npm install
Produire les éléments front-end: gulp (Ajouter l’option --production en prod)
Copier .env.example vers .env et remplir la configuration

Outils de projet

Versioning : Git
Cohérence du style de code : Editor config
Déploiement : Laravel Envoy
Base de données : MySQL

Dépendances

Back-end

Note : Composer est utilisé pour la gestion des dépendances PHP. La liste complète des dépendances doit donc se trouver dans le fichier /.composer.json à la racine du projet. La liste suivante devrait cependant être tenue à jour pour rappeler l’utilité de chacune d’entre elles et fournir un lien vers son éventuelle documentation.

Framework back-end : Laravel 5.3, Documentation
Doctrine/DBAL est nécessaire pour modifier les colonnes MySQL
Laravel Collective HTML & Forms pour la gestion des formulaires
Laravel Exceptions améliore la gestion des erreurs
Intervention Image gestion des images
Laravel Tagging gestion des tags
Mews Purifier pour le nettoyage du code HTML dans les champs de formulaires
Laravel Feed flux RSS
Color Thief PHP permet d’extraire une couleur dominante d’une image
PHP Colors petite librairie de manipulations des couleurs en PHP
Laravel Backup
Adam Wathan’s Blade SVG to easily include SVG with Blade

Dev-only

Laravel debugbar

Front-end

Note : NPM est utilisé pour la gestion des dépendances front-end. La liste complète des dépendances doit donc se trouver dans le fichier /.package.json à la racine du projet. La liste suivante devrait cependant être tenue à jour pour rappeler l’utilité de chacune d’entre elles et fournir un lien vers son éventuelle documentation.

Elixir qui est une surcouche de Gulp est utilisé pour traiter les assets CSS, JS et autres, notamment :
- Le code CSS est généré à l’aide de Sass et d’Autoprefixer, concaténé et minifié le cas échéant
- Le code JS est testé avec JSHint, concaténé et minifié le cas échéant
Bootstrap 3 Framework CSS, version Sass
Select2 améliore les <select>
wysihtml éditeur HTML
Font Awesome icônes d’interface (SVG version from Font-awesome-svg-png)
Clipboard.js pour copier vers le presse-papier
Slick carousel
Leaflet pour les cartes de géolocalisation

Fontes

La super-famille de fontes Alegreya est utilisée dans ses variantes open-source en cohérence avec les choix opérés pour la version papier du magazine, se reporter aux descriptions des familles concernant les versions commerciales pour plus d’informations sur l’approche générale de celles-ci :

Les dépôts des versions open-sources utilisés ici :

Authentication

On utilise l’authentification proposée de base par Laravel, en supprimant la possibilité de s’inscrire.

Utilisation de WYSIHTML

Les fonctions de base sont assez simples à mettre en œuvre : se référer à la documentation en ligne du plugin référencée plus haut. Elles sont ici implémentées à l’aide d’un partial de vue (_toolbar) qui contient les différents boutons de l’éditeur.

Un fichier editor.css avec les styles nécessaires est généré pour que les modifications soient visibles dans l’éditeur lui-même, il est à renseigner dans l’activation de chaque éditeur. Voir exemple plus bas.

Pour activer un éditeur il faut inclure le partial de vue _toolbar juste au dessus du champ textarea en lui passant l’id de celui-ci et activer l’éditeur à l’aide des fonctions prévues par le plugin.

L’upload d’image est géré différemment des autres éléments qui se contentent d’utiliser les fonctions natives du plugin : il faut préciser au partial de vue _toolbar que l’on souhaite utiliser une image en lui passant une variable image à true et inclure en fin de vue le partial de vue contenant la modal Boostrap permettant l’upload d’images pour chaque éditeur.

Exemple :

<!-- toolbar with suitable buttons and dialogues -->
@include('admin/partials/_toolbar', ['id' => 'content-toolbar', 'image' => true])
<textarea id="content" class="form-control" required>
    {!! $page->content or null !!}
</textarea>

...


@section('modals')
    @include('partials/_toolbar-image-modal', ['id' => 'content-toolbar'])
@stop

Attention : Le form-model binding de Laravel Collective ne fonctionne pas avec cet outil, d’où la nécessité de recourir à un tag HTML traditionnel pour utiliser le même formulaire dans la création et l’édition.

// activate wysihtml editors
var editor = new wysihtml5.Editor(content, {
    toolbar: 'content-toolbar',
    stylesheets: '{{ asset('css/editor.css') }}',
    parserRules:  wysihtml5ParserRules,
});
// Insert image
$('#form-image-picker-content-toolbar').on('submit', function(event) {
    uploadImage('/admin/pages/upload-image', event, editor, $(this));
});