Merge a04e651 into 2d9909a

README.md

@@ -64,47 +64,6 @@ To build assets for development purposes, with HMR (hot reloading) enabled, run:
 
 Please, follow the [guidelines](https://elao.github.io/elao_/blog/styleguide/example/).
 
-## Assets
+## Going further
 
-Reference images & other assets in Twig templates using `asset()`:
-
-```twig
-{{ asset(article.thumbnail) }}
-```
-
-### Resize images
-
-You can resize an image using a preset defined in `config/packages/glide.yaml`:
-
-```twig
-{{ asset(article.thumbnail|glide_image_preset('article_thumbnail')) }}
-```
-
-or with arbitrary options:
-
-```twig
-{{ asset(article.thumbnail|glide_image_resize({
-    w: 80,
-    h: 60,
-})) }}
-```
-
-See [Glide's documentation](https://glide.thephpleague.com/1.0/api/quick-reference/) for available options.
-
-In order to automatically generate images for retina screens (dpr x2), you can either:
-
-- use the `backgroundImageSrcset` macro in Twig for background images:
-
-    ```twig
-    {% import "macros.html.twig" as macros %}
-    
-    <div class="article-banner__cover" style="{{ macros.backgroundImageSrcset(article.thumbnail, 'article_banner') }}"></div>
-    ```
-
-- or the `imageSrcset` macro in Twig for `<img />` tags:
-
-    ```twig
-    {% import "macros.html.twig" as macros %}
-  
-    <img {{ macros.imageSrcset(article.thumbnail, 'article_banner') }} />
-    ```
+- [Images & other assets](./res/docs/assets.md)

config/packages/glide.yaml

@@ -1,10 +1,13 @@
 glide:
     base_url: /image/resize
-    source: '%kernel.project_dir%/public'
+    source: '%kernel.project_dir%'
     cache: '%kernel.project_dir%/public/resized'
     pre_generate: '%env(bool:GLIDE_PRE_GENERATE_CACHE)%'
     cache_with_file_extensions: true
     group_cache_in_folders: true
+    skipped_types:
+        - 'image/gif'
+        - 'image/svg+xml'
 
     # https://glide.thephpleague.com/1.0/api/quick-reference/
     presets:
@@ -49,6 +52,13 @@ glide:
             fit: max
             dpr: 1
 
+        # Base format for images inside a glossary article content.
+        # It's declined with dpr 2x automatically for retina screens.
+        glossary_content:
+            w: 1040
+            fit: max
+            dpr: 1
+
         tribe_banner:
             w: 1280
             h: 600

config/services.yaml

@@ -61,6 +61,12 @@ services:
             $type: App\Model\Article
             $preset: article_content
 
+    resize_images_content_processor.glossary.term:
+        class: App\Stenope\Processor\ResizeImagesContentProcessor
+        arguments:
+            $type: App\Model\Glossary\Term
+            $preset: glossary_content
+
     App\Stenope\Provider\SampleRemovalProvider.Article:
         class: App\Stenope\Provider\SampleRemovalProvider
         decorates: stenope.provider.files.App\Model\Article

content/blog/dev/a-nice-way-of-handing-form-label-translation.md

@@ -8,7 +8,7 @@ lang:               "en"
 
 description:        "A nice way of handling form label translation"
 
-thumbnail:          "images/posts/thumbnails/cool_cat.jpg"
+thumbnail:          "content/images/blog/thumbnails/cool_cat.jpg"
 tags:               ["Symfony", "Form", "Theming", "Translation"]
 categories:         ["Dev", "Form", "Symfony"]
 authors:            ["tjarrand"]

content/blog/dev/ameliorez-pertinence-resultat-elastic-search-score.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:    "Améliorez la pertinence de vos résultats ElasticSearch grâce au score."
 
-thumbnail:      "images/posts/thumbnails/elasticsearch.png"
-banner:     "images/posts/headers/elasticsearch.jpg"
+thumbnail:      "content/images/blog/thumbnails/elasticsearch.png"
+banner:     "content/images/blog/headers/elasticsearch.jpg"
 tags:           ["Moteur de recherche", "ElasticSearch", "Pertinence", "Elastica"]
 categories:     ["dev"]
 
@@ -466,7 +466,7 @@ Il existe 3 fonctions de décroissances, [linéaire](https://fr.wikipedia.org/wi
 
 La fonction linéaire est une droite, la décroissance est proportionelle à la distance. Avec la fonction exponentielle, la décroissance est très forte au début et diminue rapidement avec la distance jusqu'à tendre vers zero. Avec la fonction gaussienne, la décroissance est également très forte au début mais diminue moins rapidement.
 
-![Decay functions](images/posts/2017/es-decay-graph.png)
+![Decay functions](content/images/blog/2017/es-decay-graph.png)
 
 Les fonctions de décroissance peuvent être appliquées sur des valeurs numériques, des dates (`offset` et `scale` sont alors exprimés en durée : 5h ou 1d par exemple) ou des géopoints (`offset` et `scale` sont alors exprimés en distance : 100m ou 5km par exemple).
 

content/blog/dev/api-design-elao-team-interview.md

@@ -7,8 +7,8 @@ lastModified:       ~
 description:        "Interview croisée des développeurs d'Élao à propos de leurs diverses expériences en conception et développement d'API"
 tableOfContent:     2
 
-thumbnail:          "images/posts/thumbnails/api-interview-micro-phone.png"
-banner:             "images/posts/headers/api-interview-micro-phone.png"
+thumbnail:          "content/images/blog/thumbnails/api-interview-micro-phone.png"
+banner:             "content/images/blog/headers/api-interview-micro-phone.png"
 tags:               ["API", "Conception", "REST", "API Design"]
 categories:         ["Dev"]
 
@@ -46,9 +46,7 @@ __Yves__ : J'utilise souvent la méthode `PUT` dans le cadre d'une relation 0:1
 
 __Maxime S.__ : J'essaie au maximum de respecter la sémantique des méthodes HTTP telles qu'elles sont définies dans la spécification. Comme je l'ai dit tout à l'heure, je m'autorise à utiliser des verbes dans mes URI avec la méthode `PATCH` pour coller au mieux à la logique métier (Exemple d'URI pour activer/désactiver un utilisateur : `PATCH /users/{id}/lock|unlock`).
 
-<p class="text-center">
-    {{< figure class="text-center" src="images/posts/2017/api-interview/postman.png" title="Credits: https://www.getpostman.com/" alt="Postman">}}
-</p>
+![](content/images/blog/2017/api-interview/postman.png)
 
 ## Formats de sortie : privilégiez-vous le tout JSON ?
 
@@ -78,9 +76,7 @@ __Nicolas__ : Pour ma part, lors des développements d'API GraphQL, j'utilise [G
 
 __Maxime S.__ : Aujourd'hui j'utilise principalement le bundle [NelmioApiDocBundle](https://github.com/nelmio/NelmioApiDocBundle) pour générer la documentation de mes API. Il est parfois utile de générer la documentation à la main lorsque l'on souhaite fournir une documentation d'API plus complète. La documentation générée est généralement suffisante pour des API consommées par des développeurs, mais me semble trop sommaire pour des API publiques. Je profite également de cette question pour mentionner la librairie PHP [elao/api-resources-metadata](https://packagist.org/packages/elao/api-resources-metadata) que nous avons initiée. Elle est encore embryonnaire, mais pour l'heure, elle s'interface avec le bundle de Nelmio pour documenter des ressources PHP à partir d'un schéma YML ou des _doc blocks_. Elle sera sans doute enrichie, pour s'interfacer avec d'autres librairies et ajouter d'autres fonctionnalités, telles que la génération de _normalizers_ ou de contraintes de validation basiques (`NotNull`, `Type`, ...) par exemple.
 
-<p class="text-center">
-    {{< figure class="text-center" src="images/posts/2017/api-interview/swagger.png" title="Credits: https://swagger.io/" alt="Swagger">}}
-</p>
+![](content/images/blog/2017/api-interview/swagger.png)
 
 ## Comment tester son API ?
 
@@ -124,9 +120,7 @@ __Maxime S.__ : Hormis quelques articles de François Zaninotto sur le sujet, je
 
 __Nicolas__ : Définitivement testé et adopté!
 
-<p class="text-center">
-    {{< figure class="text-center" src="images/posts/2017/api-interview/graphql-logo.png" title="Credits: https://commons.wikimedia.org" alt="Logo GraphQL">}}
-</p>
+![](content/images/blog/2017/api-interview/graphql-logo.png)
 
 ## Un ouvrage ou un site de référence à conseiller ?
 

content/blog/dev/apollo-graphql-cache.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:        "Découverte du fonctionnement du cache du client GraphQL Apollo."
 
-thumbnail:          "images/posts/thumbnails/graphql-apollo.jpg"
-banner:             "images/posts/headers/graphql-apollo.jpg"
+thumbnail:          "content/images/blog/thumbnails/graphql-apollo.jpg"
+banner:             "content/images/blog/headers/graphql-apollo.jpg"
 tags:               ["GraphQL","Cache","Apollo","Javascript","API"]
 categories:         ["Dev", "Javascript"]
 

content/blog/dev/architecture-hexagonale-symfony.md

@@ -7,8 +7,8 @@ lastModified:       ~
 description:        "Présentation de l'architecture hexagonale et de son implémentation avec le framework Symfony."
 tableOfContent:     3
 
-thumbnail:          "images/posts/thumbnails/hexagons.jpg"
-banner:             "images/posts/headers/hexagons.jpg"
+thumbnail:          "content/images/blog/thumbnails/hexagons.jpg"
+banner:             "content/images/blog/headers/hexagons.jpg"
 tags:               ["Architecture", "Conception", "Symfony", "PHP"]
 categories:         ["Dev", "Symfony"]
 
@@ -21,7 +21,7 @@ L'architecture hexagonale, également appelée *Ports & Adapters*, présente deu
 
 Elle a été pensé par [Alistair Cockburn](http://alistair.cockburn.us/Hexagonal+architecture) dans les années 2000. Son but est de permettre à une application d'être pilotée sans distinction par des utilisateurs, des programmes, des tests automatisés ou des scripts ainsi que d'être développée et testée de façon isolée de son contexte d'exécution et de ses bases de données.
 
-![Architecture hexagonale](images/posts/2017/hexagonal-architecture.png)
+![Architecture hexagonale](content/images/blog/2017/hexagonal-architecture.png)
 
 ### Une architecture hexagonale
 
@@ -39,7 +39,7 @@ Le **code métier** c'est tout le code qui traduit le métier de votre client. I
 ### Une architecture en couches (ou en oignon)
 
 <figure>
-    <img src="images/posts/2017/onionman.jpg" alt="Onion man">
+    <img src="content/images/blog/2017/onionman.jpg" alt="Onion man">
     <figcaption>
       <span class="figure__legend">Onion man</span>
     </figcaption>
@@ -62,7 +62,7 @@ Pour ma part je suis partie sur les quatres couches suivantes qui représentent
 L'idée est que chaque couche peut utiliser une couche inférieure mais jamais une couche supérieure, ou en tout cas pas directement.
 
 <figure>
-    <img src="images/posts/2017/clean-architecture.png" alt="Clean architecture">
+    <img src="content/images/blog/2017/clean-architecture.png" alt="Clean architecture">
     <figcaption>
       <span class="figure__legend">Clean architecture</span>
     </figcaption>
@@ -121,7 +121,7 @@ Certes cette architecture est plus complexe, implique un peu plus de code et dem
 Au final, l'investissement de départ est un peu plus grand, quoiqu'avec l'habitude pas tant, mais est largement amorti sur la durée de vie du projet tant les évolutions et la testabilité sont simplifiées.
 
 <figure>
-    <img src="images/posts/2017/good-work-chuck-norris.jpg" alt="Good work">
+    <img src="content/images/blog/2017/good-work-chuck-norris.jpg" alt="Good work">
     <figcaption>
       <span class="figure__legend">Good work</span>
     </figcaption>

content/blog/dev/authentification-par-lien-magique.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:        "Retour d'expérience sur la mise en place d'authentification par lien de connexion."
 
-thumbnail:          "images/posts/thumbnails/magic-link.jpg"
-banner:             "images/posts/headers/magic-link.jpg"
+thumbnail:          "content/images/blog/thumbnails/magic-link.jpg"
+banner:             "content/images/blog/headers/magic-link.jpg"
 tags:               ["Authentification", "Email", "Sécurité", "MagicLink"]
 categories:         ["Dev"]
 
@@ -20,23 +20,23 @@ Nous avons récemment pris le parti pour l'un de nos dernier projet de proposer
 
 L'authentification par "lien magique" est notamment utilisée par Slack qui propose cette fonctionnalité dans son client et qui nous a grandement inspiré.
 
-![](images/posts/2018/magic-link-slack.png)
+![](content/images/blog/2018/magic-link-slack.png)
 
 Pour ce projet, avons utilisé cette méthode d'authentification sur deux app mobile ainsi que sur une app backend.
 
 ## Fonctionnement
 
 L'authentification par lien magique déporte toute la gestion des mots de passe sur la boîte mail de l'utilisateur. Celui-ci fournit son adresse email à l'application lorsqu'il souhaite s'y connecter, un lien d'authentification contenant un token lui est envoyé. L'utilisateur se connecte ensuite à sa boite mail puis clique sur le lien et est ensuite connecté sur l'application.
 
-![](images/posts/2018/magic-link.png)
+![](content/images/blog/2018/magic-link.png)
 
 ## Un constat
 
 Qu'est ce qui nous a poussé à mettre en place ce système ? C'est d'abord une idée qui a germé face à un constat.
 
 En tant que développeurs et utilisateurs d'internet, nous sommes plusieurs à avoir fait le constat que beaucoup d'utilisateurs oublient très fréquemment leur mot de passe. En effet, une fois connecté à une application, grâce à des mécanismes comme le "Remember Me" ou les sessions longues, il peut se passer plusieurs semaines voir mois avant de devoir resaisir son mot de passe. Un grand nombre de connexions passent alors par une procédure d'oubli de mot de passe et donc par la boite email de l'utilisateur.
 
-![You can't leak passwords if you don't store passwords.](images/posts/2018/you-cant-leak-passwords-meme.png)
+![You can't leak passwords if you don't store passwords.](content/images/blog/2018/you-cant-leak-passwords-meme.png)
 
 Ensuite nous y avons vu quelques avantages :
 

content/blog/dev/behat-3-test-fonctionnel-symfony.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:        "Installation et utilisation de Behat 3 pour vos tests fonctionnels Symfony2"
 
-thumbnail:          "images/posts/thumbnails/behat.png"
-banner:             "images/posts/headers/behat_cover.jpg"
+thumbnail:          "content/images/blog/thumbnails/behat.png"
+banner:             "content/images/blog/headers/behat_cover.jpg"
 tags:               ["Behat","Symfony","Mink","Alice"]
 categories:         ["Dev", Symfony", "PHP"]
 

content/blog/dev/bonnes-pratiques-symfony2-notre-condense.md

@@ -6,8 +6,8 @@ lastModified:       ~
 
 description:        "Bonnes pratiques Symfony2 : notre condensé !"
 
-thumbnail:          "images/posts/thumbnails/kafeine.png"
-banner:             "images/posts/headers/elephpant_elao_family.jpg"
+thumbnail:          "content/images/blog/thumbnails/kafeine.png"
+banner:             "content/images/blog/headers/elephpant_elao_family.jpg"
 tags:               ["Tips", "Symfony"]
 categories:         ["Tips", "Symfony"]