Merge c4c3487 into a6fc9a4

assets/scss/components/_article-list.css → assets/scss/components/_article-list.scss

@@ -6,6 +6,10 @@
   list-style: none;
   display: flex;
   flex-wrap: wrap;
+
+  .miniature-inline {
+    margin: 0 20px 80px;
+  }
 }
 
 @media (max-width: $screen-lg) {

assets/scss/components/_banner-technology.scss

@@ -0,0 +1,47 @@
+.banner-technology {
+  margin: 0 0 100px;
+  padding: 0 110px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.banner-technology__title {
+  margin: 0;
+  display: inline-block;
+}
+
+.banner-technology__image {
+  margin: 45px 110px 0 70px;
+  min-width: 300px;
+  height: 150px;
+  position: relative;
+  background: $color-brand;
+
+  .logo {
+    margin: 0;
+    padding: 25px;
+    width: 150px;
+    position: absolute;
+    right: -110px;
+    bottom: -40px;
+    background: $color-secondary;
+  }
+}
+
+@media (max-width: $screen-md) {
+  .banner-technology {
+    margin: 0 0 50px;
+    padding: 0;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .banner-technology__title {
+    margin: 0 40px 40px;
+    max-width: 510px;
+  }
+
+  .banner-technology__image {
+    display: none;
+  }
+}

assets/scss/components/_link.scss

@@ -24,6 +24,7 @@
     right: 10px;
     font-family: 'icomoon';
     font-size: 13px;
+    line-height: 1;
     content: '\e913';
     opacity: 0;
     transition: right ease-in .15s, opacity ease-out .2s;

assets/scss/components/_miniature-inline.scss

@@ -14,7 +14,7 @@
 
 .miniature-inline__image {
   min-width: 500px;
-  height: 370px;
+  height: 350px;
   background-repeat: no-repeat !important;
   background-size: cover !important;
   background-position: center !important;

assets/scss/pages/_page-projects.scss

@@ -10,7 +10,7 @@
 
   .article-list {
     margin: 0 auto;
-    max-width: 1020px;
+    max-width: 1060px;
   }
 }
 

assets/scss/pages/_page-technology.scss

@@ -0,0 +1,29 @@
+.page-technology {
+  padding: 0 110px;
+
+  .article-list {
+    .miniature-inline {
+      max-width: 930px;
+
+      &:first-of-type {
+        margin-left: 110px;
+      }
+    }
+  }
+}
+
+@media (max-width: $screen-md) {
+  .page-technology {
+    padding: 0;
+
+    .article-list {
+      .miniature:first-of-type {
+        margin-left: 0;
+      }
+
+      .miniature-inline {
+        margin-left: 0;
+      }
+    }
+  }
+}

assets/scss/style.scss

@@ -43,6 +43,7 @@ html.no-js [data-aos] {
 @import "components/_banner-team";
 @import "components/_banner-services";
 @import "components/_banner-team";
+@import "components/_banner-technology";
 @import "components/_banner-values";
 @import "components/_breadcrumb";
 @import "components/_brick";
@@ -102,5 +103,6 @@ html.no-js [data-aos] {
 @import "pages/_page-projects";
 @import "pages/_page-project";
 @import "pages/_page-services";
+@import "pages/_page-technology";
 @import "pages/_page-values";
 @import "pages/_page-signature";

content/technologies/accessibilite.md

@@ -1,6 +1,10 @@
 ---
 name: "Accessibilité"
-title: "Responsive design, accessibilité : des interfaces web exigeantes"
+title:
+    - "Responsive design, accessibilité :"
+    - "des interfaces web exigeantes"
+articles: []
+caseStudies: []
 ---
 
 La question du niveau d'exigence d'accessibilité doit être adressée dès le début de la conception graphique. Lors de la réalisation des interfaces, nous mettons l’accent sur le niveau d’exigence d’intégration, le respect des standards et des bonnes pratiques. Chez Elao, nous évaluons le niveau d’exigence d'accessibilité des projets selon les enjeux, le public visé et le budget. 

content/technologies/algolia.md

@@ -1,7 +1,11 @@
 ---
 name: "Algolia"
 logo: "build/images/technos/algolia.svg"
-title: "Algolia, un moteur de recherche interne pertinent et performant"
+title: 
+    - "Algolia, un moteur de recherche interne" 
+    - "pertinent et performant"
+articles: []
+caseStudies: []
 ---
 
 Algolia est un atout de taille pour bénéficier d’un moteur de recherche rapide, pertinent et efficace. Grâce à ce service, le résultat de recherche est pertinent, ce qui améliore considérablement l’expérience client. Nos équipes peuvent intégrer ou vous aider à intégrer Algolia à votre application et ainsi améliorer l’expérience utilisateur de vos clients. 

content/technologies/bootstrap.md

@@ -1,4 +1,7 @@
 ---
 name: "Bootstrap"
 logo: "build/images/technos/graphql.svg"
+title: 
+    - bootstrap
+show: false
 ---

content/technologies/css.md

@@ -1,6 +1,7 @@
 ---
 name: CSS
 logo: build/images/technos/css3.svg
-title: CSS
+title: 
+    - CSS
 show: false
 ---

content/technologies/elasticsearch.md

@@ -1,7 +1,9 @@
 ---
 name: "ElasticSearch"
 logo: "build/images/technos/elasticsearch.svg"
-title: "ElasticSearch : un moteur de recherche simple et efficace pour votre application web"
+title: 
+    - "ElasticSearch : un moteur de recherche simple et efficace" 
+    - "pour votre application web"
 ---
 
 ElasticSearch est un logiciel open source assurant **une recherche rapide et pertinente dans vos bases de données**. Chez Elao, nous l'utilisons en grande majorité pour des recherches de géolocalisations, par exemple pour trouver une offre d'emploi près de son domicile ou dans un rayon d'un certain nombre de kilomètre, ou bien pour de la recherche plus classique de texte.

content/technologies/graphql.md

@@ -1,4 +1,7 @@
 ---
 name: "GraphQL"
 logo: "build/images/technos/graphql.svg"
+show: false
+title: 
+    - GraphQL
 ---

content/technologies/html.md

@@ -1,6 +1,7 @@
 ---
 name: HTML
 logo: build/images/technos/html5.svg
-title: HTML
+title: 
+    - HTML
 show: false
 ---

content/technologies/javascript.md

@@ -1,4 +1,7 @@
 ---
 name: "Javascript"
 logo: "build/images/technos/graphql.svg"
+show: false
+title: 
+ - javascript
 ---

content/technologies/nodejs.md

@@ -1,4 +1,7 @@
 ---
 name: "Node.js"
 logo: "build/images/technos/graphql.svg"
+show: false
+title: 
+    - NodeJS
 ---

content/technologies/payment.md

@@ -1,6 +1,8 @@
 ---
 name: "Paiement"
-title: "Intégration d'une solution de paiement en ligne"
+title: 
+ - "Intégration d'une solution de paiement en ligne" 
+ - "pour votre application"
 title-seo: "Paiement en ligne pour votre application web ou mobile avec Elao 💴"
 meta-description: "Les transactions bancaires peuvent être nécessaires pour votre projet web ou mobile. Nous pouvons vous accompagner dans l'intégration d'une solution de paiement en ligne comme Stripe, PayPal, MangoPay ..."
 ---

content/technologies/react-native.md

@@ -1,4 +1,8 @@
 ---
 name: "React Native"
 logo: "build/images/technos/react.svg"
+title: 
+    - React Native
+articles: []
+caseStudies: []
 ---

content/technologies/react.md

@@ -1,7 +1,11 @@
 ---
 name: "React"
 logo: "build/images/technos/react.svg"
-title: "Des interfaces web interactives, fluides et dynamiques avec React"
+title: 
+    - "Des interfaces web interactives,"
+    - "fluides et dynamiques avec React"
+articles: []
+caseStudies: []
 ---
 
 Des interfaces simples et rapides à utiliser : c’est l’expérience que l’on souhaite tous sur le web ! Aujourd’hui, de nombreux frameworks JavaScript, dont React, permettent d’obtenir ces résultats, autant pour des applications mobiles que pour des fonctionnalités sur des pages web. Après avoir testé de nombreux frameworks comme BackboneJS, Ember ou encore Angular, l’équipe a adopté React pour la réalisation de la plupart des projets nécessitant une application mobile ou des interfaces web dynamiques. 

content/technologies/signature-securisee.md

@@ -1,6 +1,10 @@
 ---
 name: "Signature électronique"
-title: "Souscription et signature électronique dans votre application web"
+title: 
+    - "Souscription et signature électronique"
+    - "pour votre application web"
+articles: []
+caseStudies: []
 ---
 La signature électronique est un excellent moyen de gagner du temps dans un processus de vente en ligne, car il évite de nombreux allers-retours et d'éventuelles pertes de documents. De plus, ce système est parfaitement sécurisé et confidentiel : c'est une valeur ajoutée pour l'utilisateur mais également pour les collaborateurs. Chez Elao, nous accompagnons nos clients dans l'intégration de solutions de signatures électroniques 
 

content/technologies/svg.md

@@ -1,6 +1,7 @@
 ---
 name: SVG
 logo: build/images/technos/svg.svg
-title: SVG
+title: 
+    - SVG
 show: false
 ---

content/technologies/symfony.md

@@ -1,48 +1,45 @@
 ---
 name: "Symfony"
 logo: "build/images/technos/symfony.svg"
-title: "Nous utilisons Symfony pour créer des applications robustes"
+title: 
+    - "Nous utilisons Symfony" 
+    - "pour créer des applications robustes"
+articles: [dev/architecture-hexagonale-symfony, dev/comment-integrer-vue-js-application-symfony, dev/authentification-par-lien-magique]
+caseStudies: [tribu, cirano, climapp]
+titleSeo: "Développement Symfony : nous créons des applicatifs et projets web robustes et évolutifs 💪"
+metaDescription : "Pourquoi faire confiance à Elao et Symfony, en choisir ce framework pour le développement de son logiciel ou application ? On vous dit tout 😎"
 ---
 
-Pour nos développements backend, nous nous appuyons sur Symfony, un framework PHP largement plébiscité par la communauté.
+Pour nos développements backend, nous nous appuyons sur *Symfony, un framework PHP largement plébiscité par la communauté*.
 
 ## Pourquoi avons-nous fait le choix de Symfony ?
 
-- Symfony apporte un coeur et des composants solides, qui offrent aux équipes de développement la plupart des besoins génériques afin de se focaliser sur l’essentiel : le fonctionnel spécifique, qui répond aux besoins du projet. 
+- Symfony apporte un coeur et des composants solides, qui offrent aux équipes de développement la plupart des besoins génériques afin de se **focaliser sur l’essentiel : le fonctionnel spécifique, qui répond aux besoins du projet.**
 
-- La philosophie de Symfony prône la standardisation des bonnes pratiques et l’interopérabilité des applications, facilitant ainsi la maintenance et la transmission de projets. 
+- La philosophie de Symfony prône la standardisation des bonnes pratiques et l’interopérabilité des applications, **facilitant ainsi la maintenance et la transmission de projets.**
 
-- Symfony est un projet solide, qui existe depuis 2005. Nos collaborateurs sont formés et utilisent ce framework depuis la première heure. 
+- **Symfony est un projet solide, qui existe depuis 2005.** Nos collaborateurs sont formés et utilisent ce framework depuis la première heure.
 
 ## Notre premier site web avec Symfony : 2007 !
 
-Notre histoire avec Symfony a démarré en 2007, avec la version 1.0, pour la création de sites web. Le premier site développé sous Symfony chez Elao concernait un site communautaire de loisirs créatifs, avec énormément de fonctionnalités telles qu’un forum, des galeries photos, un catalogue produit, etc. Que de chemins et de versions parcourues depuis !
+**Notre histoire avec Symfony a démarré en 2007**, avec la version 1.0, pour la création de sites web. Le premier site développé sous Symfony chez Elao concernait un site communautaire de loisirs créatifs, avec énormément de fonctionnalités telles qu’un forum, des galeries photos, un catalogue produit, etc. Que de chemins et de versions parcourues depuis !
 
-Forts de ces nombreuses années à utiliser Symfony, nous avons développé une expertise qui nous permet de conduire des audits de sites Symfony, des montées de versions, des refontes, et bien entendu des créations de sites e-commerce ou d'applications métier. Bien entendu, nous ne sommes pas fermés à l’utilisation d’autres frameworks PHP comme par exemple Laravel.
+Forts de ces nombreuses années à utiliser Symfony, nous avons développé une expertise qui nous permet de **conduire des audits de sites Symfony, des montées de versions, des refontes, et bien entendu des créations de sites e-commerce ou d'applications métier.** Bien entendu, nous ne sommes pas fermés à l’utilisation d’autres frameworks PHP comme par exemple Laravel.
 
 ## Nous contribuons aussi à Symfony
 
-Une grande communauté s’est développée et échange autour de ce framework, et nous y contribuons activement. Ainsi, fin 2019, Symfony affichait 3000 contributeurs au projet, 600 000 développeurs Symfony et 48 000 000 de téléchargements par mois. 
+**Une grande communauté s’est développée et échange autour de ce framework**, et nous y contribuons activement. Ainsi, fin 2019, Symfony affichait 3000 contributeurs au projet, **600 000 développeurs Symfony** et 48 000 000 de téléchargements par mois.
 
-Nous contribuons directement au code de Symfony en proposant des améliorations ou des évolutions qui servent à la communauté, 
-Nous créons des bundles open source, c’est à dire des outils qui nous sont utiles dans nos projets, que nous réutilisons dès que nous en avons besoin et que nous rendons public, afin qu’ils profitent à la communauté,
-Nous participons régulièrement à des évènements et des meetups autour de Symfony, en tant que participants ainsi qu’en tant que speakers afin de nous enrichir et de partager nos connaissances. 
+Nous contribuons directement au code de Symfony en proposant des améliorations ou des évolutions qui servent à la communauté.
+
+Nous créons des bundles open source, c’est à dire des outils qui nous sont utiles dans nos projets, que nous réutilisons dès que nous en avons besoin et que nous rendons public, afin qu’ils profitent à la communauté.
+
+Nous participons régulièrement à des évènements et des meetups autour de Symfony, en tant que participants ainsi qu’en tant que speakers afin de nous enrichir et de partager nos connaissances.
 
 ## Projets créés avec Symfony
 
-Pour les besoins d’une solution globale d’administration et de gestion de transport de déchets, nous avons opté pour Symfony afin de gérer un back-office solide. 
+Pour les besoins d’une solution globale d’administration et de gestion de transport de déchets, nous avons opté pour Symfony afin de gérer un back-office solide.
 -> lien vers l’étude de cas Tribu
 
-La problématique de forte volumétrie de données et de traitement (imports et gestion de ces données) nous a poussé à opter pour Symfony, en complément de React pour obtenir une interface utilisateur rapide et moderne. 
+La problématique de forte volumétrie de données et de traitement (imports et gestion de ces données) nous a poussé à opter pour Symfony, en complément de React pour obtenir une interface utilisateur rapide et moderne.
 -> lien vers l’étude de cas Musique & Music
-
-## Article de blog liés à Symfony
-
-L’architecture hexagonale avec Symfony
--> lien vers l’article https://blog.elao.com/fr/dev/architecture-hexagonale-symfony/
-
-Comment intégrer Vue JS dans une application
--> lien vers l’article https://blog.elao.com/fr/dev/comment-integrer-vue-js-application-symfony/
-
-Authentification par lien magique 
--> lien vers l’article https://blog.elao.com/fr/dev/authentification-par-lien-magique/

content/technologies/vue-js.md

@@ -1,9 +1,13 @@
 ---
 name: "Vue.js"
 logo: "build/images/technos/vue.svg"
-title: "Vue.js : un peu de magie dans nos interfaces🧙‍♀️"
+title: 
+    - "Vue.js" 
+    - "un peu de magie dans nos interfaces🧙‍♀️"
 title-seo: "Développement Vue.js à Lyon - Elao met de la magie dans vos applis ! 🧙‍♀️"
 meta-description: "Nous vous aidons à réfléchir à des interfaces utilisateur rapides et efficaces que nous pouvons mettre en oeuvre grâce à Vue.js, un framework javascript reconnu et solide !"
+articles: []
+caseStudies: []
 ---
 
 Vue.js est un framework JavaScript, assez comparable à React. Tout comme ce dernier, il permet d'**obtenir des interfaces fluides et rapides**, sans avoir à rafraîchir la page après une action de l'utilisateur. **Chez Elao, nous l'utilisons pour améliorer l'expérience utilisateur (UX)** sur des pages comme par exemple des formulaires réactifs agrémentés d'animations d'aide à la saisie, un générateur de playlists, un outil pour recadrer un avatar, etc. Nous pouvons également l'utiliser pour constituer une application plus ambitieuse. 

src/Controller/TechnologyController.php

@@ -5,6 +5,7 @@
 namespace App\Controller;
 
 use App\Model\Article;
+use App\Model\CaseStudy;
 use App\Model\Technology;
 use Stenope\Bundle\ContentManager;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -28,15 +29,32 @@ public function __construct(ContentManager $manager)
      */
     public function show(Technology $technology): Response
     {
-        $articles = $this->manager->getContents(
-            Article::class,
-            ['date' => false],
-            fn ($article) => $article->hasTag($technology->slug)
-        );
+        if (!\is_null($technology->articles)) {
+            $articles = $this->manager->getContents(
+                Article::class,
+                ['date' => false],
+                fn ($article) => \in_array($article->slug, $technology->articles, true)
+            );
+        } else {
+            $articles = $this->manager->getContents(
+                Article::class,
+                ['date' => false],
+                fn ($article) => $article->hasTag($technology->slug)
+            );
+        }
+
+        if (!\is_null($technology->caseStudies)) {
+            $caseStudies = $this->manager->getContents(
+                CaseStudy::class,
+                ['date' => false],
+                fn ($article) => \in_array($article->slug, $technology->caseStudies, true)
+            );
+        }
 
         return $this->render('technology/technology.html.twig', [
             'technology' => $technology,
             'articles' => \array_slice($articles, 0, 3),
+            'caseStudies' => $caseStudies ?? [],
         ])->setLastModified($technology->lastModified);
     }
 }