ismaeljoseph/polenta

CMS app for french publication Polenta

Polenta

Instructions d’installation

1. cd polenta
2. Installer les dépendances back-end : composer install
3. Installer les dépendances front-end : npm install
4. Produire les éléments front-end: gulp (Ajouter l’option --production en prod)
5. 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

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 :

• Sans-serif
• Serif

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

• Sans-serif
• Serif

---

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));
});