From bf316750b7a198fc9806de8051285306d05802de Mon Sep 17 00:00:00 2001 From: amelie Date: Fri, 9 Apr 2021 14:34:49 +0200 Subject: [PATCH 01/28] Page Technology --- .../{_article-list.css => _article-list.scss} | 4 + .../scss/components/_banner-technology.scss | 62 ++++++++ assets/scss/components/_miniature-inline.scss | 2 +- assets/scss/pages/_page-projects.scss | 2 +- assets/scss/pages/_page-technology.scss | 29 ++++ assets/scss/style.scss | 2 + content/technologies/symfony.md | 26 ++-- templates/technology/technology.html.twig | 137 ++++++++++++++++-- 8 files changed, 238 insertions(+), 26 deletions(-) rename assets/scss/components/{_article-list.css => _article-list.scss} (81%) create mode 100644 assets/scss/components/_banner-technology.scss create mode 100644 assets/scss/pages/_page-technology.scss diff --git a/assets/scss/components/_article-list.css b/assets/scss/components/_article-list.scss similarity index 81% rename from assets/scss/components/_article-list.css rename to assets/scss/components/_article-list.scss index e9a653f56f1..49e06558766 100644 --- a/assets/scss/components/_article-list.css +++ b/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) { diff --git a/assets/scss/components/_banner-technology.scss b/assets/scss/components/_banner-technology.scss new file mode 100644 index 00000000000..364d546856e --- /dev/null +++ b/assets/scss/components/_banner-technology.scss @@ -0,0 +1,62 @@ +.banner-technology { + margin: 0 0 90px; + padding: 0 110px; + display: flex; + align-items: flex-start; +} + +.banner-technology__title { + margin: 30px 0 0; + display: inline-block; +} + +.banner-technology__image { + margin-left: 40px; + min-width: 510px; + position: relative; + + img { + margin: 0; + } + + .logo { + padding: 25px; + width: 180px; + position: absolute; + right: -110px; + bottom: -40px; + background: $color-secondary; + } +} + +@media (max-width: $screen-md) { + .banner-technology { + padding: 0; + flex-direction: column; + align-items: center; + } + + .banner-technology__title { + margin: 0 40px 40px; + max-width: 510px; + } + + .banner-technology__image { + margin-left: 0; + } +} + +@media (max-width: $screen-xs) { + .banner-technology__image { + min-width: unset; + width: 100%; + + img { + width: 100%; + } + + .logo { + display: none; + } + } +} diff --git a/assets/scss/components/_miniature-inline.scss b/assets/scss/components/_miniature-inline.scss index ae9e7fe7c46..c84e66eb379 100644 --- a/assets/scss/components/_miniature-inline.scss +++ b/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; diff --git a/assets/scss/pages/_page-projects.scss b/assets/scss/pages/_page-projects.scss index 317461154a5..0764fe04dd6 100644 --- a/assets/scss/pages/_page-projects.scss +++ b/assets/scss/pages/_page-projects.scss @@ -10,7 +10,7 @@ .article-list { margin: 0 auto; - max-width: 1020px; + max-width: 1060px; } } diff --git a/assets/scss/pages/_page-technology.scss b/assets/scss/pages/_page-technology.scss new file mode 100644 index 00000000000..83a38155090 --- /dev/null +++ b/assets/scss/pages/_page-technology.scss @@ -0,0 +1,29 @@ +.page-technology { + padding: 0 110px; + + .article-list { + .miniature:first-of-type { + margin-left: 110px; + } + + .miniature-inline { + 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; + } + } + } +} diff --git a/assets/scss/style.scss b/assets/scss/style.scss index fd70065a713..f7d5c37ac5a 100644 --- a/assets/scss/style.scss +++ b/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"; diff --git a/content/technologies/symfony.md b/content/technologies/symfony.md index c290642fbc0..8463c96292b 100644 --- a/content/technologies/symfony.md +++ b/content/technologies/symfony.md @@ -8,32 +8,34 @@ Pour nos développements backend, nous nous appuyons sur Symfony, un framework P ## 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 @@ -44,5 +46,5 @@ L’architecture hexagonale avec 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 +Authentification par lien magique -> lien vers l’article https://blog.elao.com/fr/dev/authentification-par-lien-magique/ diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index c06e4f9e6eb..7b70e20811f 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -1,18 +1,131 @@ +{% import "macros.html.twig" as macros %} {% extends 'base.html.twig' %} {% block content %} - {{ technology.content|raw }} + -

Articles liés

-
- {% for article in articles %} -
- - {{ article.title }} - - Lire l'article_ + {# Todo : + - permettre de couper le titre en 2 parties (Exemple : Nous utilisons Symfony pour créer des applications robustes) + - trouver une image de bannière générique pour les technos + - câbler le logo de la techno (parfois on a pas de logo, ne pas afficher l'image) + #} + + +
+ {{ technology.content|raw }} + + {# + Todo : + - câbler les études de cas liées à la techno (actuellement dans le contenu de chaque techno) + - ne pas afficher ce bloc si aucune étude de cas n'est liée + #} +

Projets créés avec Symfony

+
+ + {# + Todo : + - câbler les articles liés à la techno (actuellement dans le contenu de chaque techno) + - ne pas afficher ce bloc si aucun article n'est lié + #} +

Articles liés

+
    + {% for article in articles %} +
  • + + -
- {% endfor %} -
+ + + {% endfor %} + +
{% endblock content %} From e9c64aa059b7b27e67ff8adb863b8c829a0fc13a Mon Sep 17 00:00:00 2001 From: amelie Date: Fri, 9 Apr 2021 14:36:58 +0200 Subject: [PATCH 02/28] Fix animated chevron icon on links --- assets/scss/components/_link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/scss/components/_link.scss b/assets/scss/components/_link.scss index 82c14fcca85..84cbf71e3fd 100644 --- a/assets/scss/components/_link.scss +++ b/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; From bce8c4a2941604c87976d83c604705dcd04ec6b4 Mon Sep 17 00:00:00 2001 From: amelie Date: Fri, 9 Apr 2021 14:42:29 +0200 Subject: [PATCH 03/28] Fix paddings --- assets/scss/pages/_page-technology.scss | 10 +++--- templates/technology/technology.html.twig | 44 ++--------------------- 2 files changed, 7 insertions(+), 47 deletions(-) diff --git a/assets/scss/pages/_page-technology.scss b/assets/scss/pages/_page-technology.scss index 83a38155090..f56e247b985 100644 --- a/assets/scss/pages/_page-technology.scss +++ b/assets/scss/pages/_page-technology.scss @@ -2,12 +2,12 @@ padding: 0 110px; .article-list { - .miniature:first-of-type { - margin-left: 110px; - } - .miniature-inline { - margin-left: 110px; + max-width: 930px; + + &:first-of-type { + margin-left: 110px; + } } } } diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index 7b70e20811f..132275fcd5d 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -39,6 +39,7 @@ {# Todo : - câbler les études de cas liées à la techno (actuellement dans le contenu de chaque techno) + - max 2 études de cas - ne pas afficher ce bloc si aucune étude de cas n'est liée #}

Projets créés avec Symfony

@@ -64,53 +65,12 @@
-
  • - - - -
    - Client - - Titre - -

    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.

    - - - Voir l'étude de cas - - - - - - -
    -
  • -
  • - - - -
    - Client - - Titre - -

    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.

    - - - Voir l'étude de cas - - - - - - -
    -
  • {# Todo : - câbler les articles liés à la techno (actuellement dans le contenu de chaque techno) + - max 4 articles - ne pas afficher ce bloc si aucun article n'est lié #}

    Articles liés

    From 3bf8d4fb16476debe9b094a81877f450768be11a Mon Sep 17 00:00:00 2001 From: amelie Date: Fri, 9 Apr 2021 16:19:22 +0200 Subject: [PATCH 04/28] Remove banner image --- .../scss/components/_banner-technology.scss | 35 ++++++------------- templates/technology/technology.html.twig | 1 - 2 files changed, 10 insertions(+), 26 deletions(-) diff --git a/assets/scss/components/_banner-technology.scss b/assets/scss/components/_banner-technology.scss index 364d546856e..ff757123bcb 100644 --- a/assets/scss/components/_banner-technology.scss +++ b/assets/scss/components/_banner-technology.scss @@ -1,27 +1,26 @@ .banner-technology { - margin: 0 0 90px; + margin: 0 0 100px; padding: 0 110px; display: flex; align-items: flex-start; } .banner-technology__title { - margin: 30px 0 0; + margin: 0; display: inline-block; } .banner-technology__image { - margin-left: 40px; - min-width: 510px; + margin: 45px 110px 0 70px; + min-width: 300px; + height: 150px; position: relative; - - img { - margin: 0; - } + background: $color-brand; .logo { + margin: 0; padding: 25px; - width: 180px; + width: 150px; position: absolute; right: -110px; bottom: -40px; @@ -31,6 +30,7 @@ @media (max-width: $screen-md) { .banner-technology { + margin: 0 0 50px; padding: 0; flex-direction: column; align-items: center; @@ -42,21 +42,6 @@ } .banner-technology__image { - margin-left: 0; - } -} - -@media (max-width: $screen-xs) { - .banner-technology__image { - min-width: unset; - width: 100%; - - img { - width: 100%; - } - - .logo { - display: none; - } + display: none; } } diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index 132275fcd5d..b6590ebea0e 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -28,7 +28,6 @@ fin du titre
    From 723fc3482bef68a62ae4e041cc46c53187a8f065 Mon Sep 17 00:00:00 2001 From: amelie Date: Fri, 9 Apr 2021 16:47:37 +0200 Subject: [PATCH 05/28] Uncomment link to technology --- templates/case_study/show.html.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/case_study/show.html.twig b/templates/case_study/show.html.twig index 6be98304e3a..f639a6165aa 100644 --- a/templates/case_study/show.html.twig +++ b/templates/case_study/show.html.twig @@ -103,7 +103,7 @@ {% for technologySlug in caseStudy.technologies %} {% set technology = content_get('App\\Model\\Technology', technologySlug) %}
  • -{# #} + {# TODO: wire back technos once ready and if technology.show == true #}
    {% if technology.logo|default(false) %} @@ -111,7 +111,7 @@ {% endif %} {{ technology.name }}
    -{#
    #} +
  • {% endfor %} From 033d3c4fd33de80dd0272ec0b046dd4bd55247cd Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Fri, 23 Apr 2021 15:32:33 +0200 Subject: [PATCH 06/28] add link --- content/technologies/bootstrap.md | 2 ++ content/technologies/graphql.md | 2 ++ content/technologies/javascript.md | 2 ++ content/technologies/nodejs.md | 2 ++ content/technologies/react-native.md | 1 + templates/site/home.html.twig | 2 +- 6 files changed, 10 insertions(+), 1 deletion(-) diff --git a/content/technologies/bootstrap.md b/content/technologies/bootstrap.md index 052f2866b4d..95c4c195242 100644 --- a/content/technologies/bootstrap.md +++ b/content/technologies/bootstrap.md @@ -1,4 +1,6 @@ --- name: "Bootstrap" logo: "build/images/technos/bootstrap.svg" +title: bootstrap +show: false --- diff --git a/content/technologies/graphql.md b/content/technologies/graphql.md index 92b7ba97bf1..36eefbe6c02 100644 --- a/content/technologies/graphql.md +++ b/content/technologies/graphql.md @@ -1,4 +1,6 @@ --- name: "GraphQL" logo: "build/images/technos/graphql.svg" +show: false +title: GraphQL --- diff --git a/content/technologies/javascript.md b/content/technologies/javascript.md index a3e0985c02c..58388fff8ba 100644 --- a/content/technologies/javascript.md +++ b/content/technologies/javascript.md @@ -1,4 +1,6 @@ --- name: "Javascript" logo: "build/images/technos/javascript.svg" +show: false +title: javascript --- diff --git a/content/technologies/nodejs.md b/content/technologies/nodejs.md index 804a5a435c1..a1a661113ad 100644 --- a/content/technologies/nodejs.md +++ b/content/technologies/nodejs.md @@ -1,4 +1,6 @@ --- name: "Node.js" logo: "build/images/technos/node.svg" +show: false +title: NodeJS --- diff --git a/content/technologies/react-native.md b/content/technologies/react-native.md index 35e7cea902c..87a1e0f69d0 100644 --- a/content/technologies/react-native.md +++ b/content/technologies/react-native.md @@ -1,4 +1,5 @@ --- name: "React Native" logo: "build/images/technos/react.svg" +title: React Native --- diff --git a/templates/site/home.html.twig b/templates/site/home.html.twig index 459747b188d..bf48efeadef 100644 --- a/templates/site/home.html.twig +++ b/templates/site/home.html.twig @@ -142,7 +142,7 @@ {% for item in technos %} {% set techno = content_get('App\\Model\\Technology', item.id) %}
  • - {##} + {# TODO: wire back technos links once ready #}
    {{ item.alt }} From 9839222e751070937325030dfa6b431f9e57963f Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Fri, 23 Apr 2021 16:43:14 +0200 Subject: [PATCH 07/28] add linked articles --- content/technologies/symfony.md | 12 +----------- src/Controller/TechnologyController.php | 18 +++++++++++++----- src/Model/Technology.php | 1 + 3 files changed, 15 insertions(+), 16 deletions(-) diff --git a/content/technologies/symfony.md b/content/technologies/symfony.md index 8463c96292b..520e6f5d7e9 100644 --- a/content/technologies/symfony.md +++ b/content/technologies/symfony.md @@ -2,6 +2,7 @@ name: "Symfony" logo: "build/images/technos/symfony.svg" 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] --- Pour nos développements backend, nous nous appuyons sur Symfony, un framework PHP largement plébiscité par la communauté. @@ -37,14 +38,3 @@ Pour les besoins d’une solution globale d’administration et de gestion de tr 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/ diff --git a/src/Controller/TechnologyController.php b/src/Controller/TechnologyController.php index d1960fe59e1..378f90a6c92 100644 --- a/src/Controller/TechnologyController.php +++ b/src/Controller/TechnologyController.php @@ -28,11 +28,19 @@ 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(count($technology->articles) > 0 ){ + $articles = $this->manager->getContents( + Article::class, + ['date' => false], + fn ($article) => in_array($article->slug, $technology->articles) + ); + } else { + $articles = $this->manager->getContents( + Article::class, + ['date' => false], + fn ($article) => $article->hasTag($technology->slug) + ); + } return $this->render('technology/technology.html.twig', [ 'technology' => $technology, diff --git a/src/Model/Technology.php b/src/Model/Technology.php index 97042ac110b..5bc7d85fc08 100644 --- a/src/Model/Technology.php +++ b/src/Model/Technology.php @@ -12,6 +12,7 @@ class Technology public string $slug; public string $content; public ?string $description; + public ?array $articles; public \DateTimeInterface $lastModified; /** Show a dedicated page or not */ From 1cdb38b3bae8eff881c59c314a4886cc0b7cd19e Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Fri, 23 Apr 2021 17:07:32 +0200 Subject: [PATCH 08/28] add case studies --- content/technologies/symfony.md | 1 + src/Controller/TechnologyController.php | 10 +++ src/Model/Technology.php | 1 + templates/technology/technology.html.twig | 90 ++++++++++++----------- 4 files changed, 59 insertions(+), 43 deletions(-) diff --git a/content/technologies/symfony.md b/content/technologies/symfony.md index 520e6f5d7e9..f0f1d892806 100644 --- a/content/technologies/symfony.md +++ b/content/technologies/symfony.md @@ -3,6 +3,7 @@ name: "Symfony" logo: "build/images/technos/symfony.svg" 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] --- Pour nos développements backend, nous nous appuyons sur Symfony, un framework PHP largement plébiscité par la communauté. diff --git a/src/Controller/TechnologyController.php b/src/Controller/TechnologyController.php index 378f90a6c92..18f5baf065c 100644 --- a/src/Controller/TechnologyController.php +++ b/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; @@ -42,9 +43,18 @@ public function show(Technology $technology): Response ); } + if(count($technology->caseStudies) > 0 ){ + $caseStudies = $this->manager->getContents( + CaseStudy::class, + ['date' => false], + fn ($article) => in_array($article->slug, $technology->caseStudies) + ); + } + return $this->render('technology/technology.html.twig', [ 'technology' => $technology, 'articles' => \array_slice($articles, 0, 3), + 'caseStudies' => $caseStudies ?? [], ])->setLastModified($technology->lastModified); } } diff --git a/src/Model/Technology.php b/src/Model/Technology.php index 5bc7d85fc08..40c378cd78d 100644 --- a/src/Model/Technology.php +++ b/src/Model/Technology.php @@ -13,6 +13,7 @@ class Technology public string $content; public ?string $description; public ?array $articles; + public ?array $caseStudies; public \DateTimeInterface $lastModified; /** Show a dedicated page or not */ diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index b6590ebea0e..e1e1d568493 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -41,50 +41,54 @@ - max 2 études de cas - ne pas afficher ce bloc si aucune étude de cas n'est liée #} -

    Projets créés avec Symfony

    -
    + {% if caseStudies is not empty %} +

    Projets créés avec {{ technology.name }}

    - {# - Todo : - - câbler les articles liés à la techno (actuellement dans le contenu de chaque techno) - - max 4 articles - - ne pas afficher ce bloc si aucun article n'est lié - #} -

    Articles liés

    - + {% endif %} + + {% if articles is not empty %} +

    Articles liés à {{ technology.name }}

    + + {% endif %}
    + {% endblock content %} From 093613e9a667ba5dc28faad98318254e9357faae Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Fri, 23 Apr 2021 17:36:14 +0200 Subject: [PATCH 09/28] add logo --- content/technologies/accessibilite.md | 2 ++ content/technologies/algolia.md | 2 ++ content/technologies/react-native.md | 2 ++ content/technologies/react.md | 2 ++ content/technologies/signature-securisee.md | 2 ++ content/technologies/vue-js.md | 2 ++ templates/technology/technology.html.twig | 8 +------- 7 files changed, 13 insertions(+), 7 deletions(-) diff --git a/content/technologies/accessibilite.md b/content/technologies/accessibilite.md index 5e063a602bb..d244a14e16a 100644 --- a/content/technologies/accessibilite.md +++ b/content/technologies/accessibilite.md @@ -1,6 +1,8 @@ --- name: "Accessibilité" 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. diff --git a/content/technologies/algolia.md b/content/technologies/algolia.md index 05446b08afe..8ea08025dee 100644 --- a/content/technologies/algolia.md +++ b/content/technologies/algolia.md @@ -2,6 +2,8 @@ name: "Algolia" logo: "build/images/technos/algolia.svg" 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. diff --git a/content/technologies/react-native.md b/content/technologies/react-native.md index 87a1e0f69d0..f24da4ce662 100644 --- a/content/technologies/react-native.md +++ b/content/technologies/react-native.md @@ -2,4 +2,6 @@ name: "React Native" logo: "build/images/technos/react.svg" title: React Native +articles: [] +caseStudies: [] --- diff --git a/content/technologies/react.md b/content/technologies/react.md index 2b446aa42e3..d4dd2928717 100644 --- a/content/technologies/react.md +++ b/content/technologies/react.md @@ -2,6 +2,8 @@ name: "React" logo: "build/images/technos/react.svg" 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. diff --git a/content/technologies/signature-securisee.md b/content/technologies/signature-securisee.md index 57ae96744fd..4a3f83504ca 100644 --- a/content/technologies/signature-securisee.md +++ b/content/technologies/signature-securisee.md @@ -1,6 +1,8 @@ --- name: "Signature électronique" title: "Souscription et signature électronique dans 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 diff --git a/content/technologies/vue-js.md b/content/technologies/vue-js.md index af2aff915b1..7024f52a098 100644 --- a/content/technologies/vue-js.md +++ b/content/technologies/vue-js.md @@ -4,6 +4,8 @@ logo: "build/images/technos/vue.svg" 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. diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index e1e1d568493..1b94a743121 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -28,19 +28,13 @@ fin du titre
    {{ technology.content|raw }} - {# - Todo : - - câbler les études de cas liées à la techno (actuellement dans le contenu de chaque techno) - - max 2 études de cas - - ne pas afficher ce bloc si aucune étude de cas n'est liée - #} {% if caseStudies is not empty %}

    Projets créés avec {{ technology.name }}

    From da0ff4d074d25d59f51743fb610081a8016c651f Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Fri, 23 Apr 2021 17:53:49 +0200 Subject: [PATCH 10/28] fix lint --- src/Controller/TechnologyController.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Controller/TechnologyController.php b/src/Controller/TechnologyController.php index 18f5baf065c..28bbbf097e0 100644 --- a/src/Controller/TechnologyController.php +++ b/src/Controller/TechnologyController.php @@ -29,11 +29,11 @@ public function __construct(ContentManager $manager) */ public function show(Technology $technology): Response { - if(count($technology->articles) > 0 ){ + if (!\is_null($technology->articles)) { $articles = $this->manager->getContents( Article::class, ['date' => false], - fn ($article) => in_array($article->slug, $technology->articles) + fn ($article) => \in_array($article->slug, $technology->articles, true) ); } else { $articles = $this->manager->getContents( @@ -43,11 +43,11 @@ public function show(Technology $technology): Response ); } - if(count($technology->caseStudies) > 0 ){ + if (!\is_null($technology->caseStudies)) { $caseStudies = $this->manager->getContents( CaseStudy::class, ['date' => false], - fn ($article) => in_array($article->slug, $technology->caseStudies) + fn ($article) => \in_array($article->slug, $technology->caseStudies, true) ); } From 6c19b1f653aa5581f7ec2bebc4dd59bca4de56ca Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Mon, 26 Apr 2021 09:51:54 +0200 Subject: [PATCH 11/28] fix --- src/Model/Technology.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Model/Technology.php b/src/Model/Technology.php index 40c378cd78d..690344c0bef 100644 --- a/src/Model/Technology.php +++ b/src/Model/Technology.php @@ -12,8 +12,8 @@ class Technology public string $slug; public string $content; public ?string $description; - public ?array $articles; - public ?array $caseStudies; + public ?array $articles = null; + public ?array $caseStudies = null; public \DateTimeInterface $lastModified; /** Show a dedicated page or not */ From d3b122966cc76074bda8b653815631b23fbc9b51 Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Mon, 26 Apr 2021 15:29:21 +0200 Subject: [PATCH 12/28] add meta title --- content/technologies/accessibilite.md | 4 +++- content/technologies/algolia.md | 4 +++- content/technologies/bootstrap.md | 3 ++- content/technologies/css.md | 3 ++- content/technologies/elasticsearch.md | 4 +++- content/technologies/graphql.md | 3 ++- content/technologies/html.md | 3 ++- content/technologies/javascript.md | 3 ++- content/technologies/nodejs.md | 3 ++- content/technologies/payment.md | 4 +++- content/technologies/react-native.md | 3 ++- content/technologies/react.md | 4 +++- content/technologies/signature-securisee.md | 4 +++- content/technologies/svg.md | 3 ++- content/technologies/symfony.md | 18 ++++++---------- content/technologies/vue-js.md | 4 +++- src/Model/Technology.php | 24 ++++++++++++++++++++- templates/technology/technology.html.twig | 17 +++++++++++---- 18 files changed, 80 insertions(+), 31 deletions(-) diff --git a/content/technologies/accessibilite.md b/content/technologies/accessibilite.md index d244a14e16a..97faf693b6c 100644 --- a/content/technologies/accessibilite.md +++ b/content/technologies/accessibilite.md @@ -1,6 +1,8 @@ --- name: "Accessibilité" -title: "Responsive design, accessibilité : des interfaces web exigeantes" +title: + - "Responsive design, accessibilité :" + - "des interfaces web exigeantes" articles: [] caseStudies: [] --- diff --git a/content/technologies/algolia.md b/content/technologies/algolia.md index 8ea08025dee..1218a297a07 100644 --- a/content/technologies/algolia.md +++ b/content/technologies/algolia.md @@ -1,7 +1,9 @@ --- 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: [] --- diff --git a/content/technologies/bootstrap.md b/content/technologies/bootstrap.md index 95c4c195242..02482fe2863 100644 --- a/content/technologies/bootstrap.md +++ b/content/technologies/bootstrap.md @@ -1,6 +1,7 @@ --- name: "Bootstrap" logo: "build/images/technos/bootstrap.svg" -title: bootstrap +title: + - bootstrap show: false --- diff --git a/content/technologies/css.md b/content/technologies/css.md index b3ab51b342a..61ad183aaa9 100644 --- a/content/technologies/css.md +++ b/content/technologies/css.md @@ -1,6 +1,7 @@ --- name: CSS logo: build/images/technos/css3.svg -title: CSS +title: + - CSS show: false --- diff --git a/content/technologies/elasticsearch.md b/content/technologies/elasticsearch.md index 506b2c46550..c144b7cedba 100644 --- a/content/technologies/elasticsearch.md +++ b/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. diff --git a/content/technologies/graphql.md b/content/technologies/graphql.md index 36eefbe6c02..0033be46162 100644 --- a/content/technologies/graphql.md +++ b/content/technologies/graphql.md @@ -2,5 +2,6 @@ name: "GraphQL" logo: "build/images/technos/graphql.svg" show: false -title: GraphQL +title: + - GraphQL --- diff --git a/content/technologies/html.md b/content/technologies/html.md index 7f98c5af266..fb8c482074c 100644 --- a/content/technologies/html.md +++ b/content/technologies/html.md @@ -1,6 +1,7 @@ --- name: HTML logo: build/images/technos/html5.svg -title: HTML +title: + - HTML show: false --- diff --git a/content/technologies/javascript.md b/content/technologies/javascript.md index 58388fff8ba..7d71f69217b 100644 --- a/content/technologies/javascript.md +++ b/content/technologies/javascript.md @@ -2,5 +2,6 @@ name: "Javascript" logo: "build/images/technos/javascript.svg" show: false -title: javascript +title: + - javascript --- diff --git a/content/technologies/nodejs.md b/content/technologies/nodejs.md index a1a661113ad..132eaadf4e6 100644 --- a/content/technologies/nodejs.md +++ b/content/technologies/nodejs.md @@ -2,5 +2,6 @@ name: "Node.js" logo: "build/images/technos/node.svg" show: false -title: NodeJS +title: + - NodeJS --- diff --git a/content/technologies/payment.md b/content/technologies/payment.md index 1df4998225f..05976775b40 100644 --- a/content/technologies/payment.md +++ b/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 ..." --- diff --git a/content/technologies/react-native.md b/content/technologies/react-native.md index f24da4ce662..e3d56e5e41e 100644 --- a/content/technologies/react-native.md +++ b/content/technologies/react-native.md @@ -1,7 +1,8 @@ --- name: "React Native" logo: "build/images/technos/react.svg" -title: React Native +title: + - React Native articles: [] caseStudies: [] --- diff --git a/content/technologies/react.md b/content/technologies/react.md index d4dd2928717..a7c65e74cad 100644 --- a/content/technologies/react.md +++ b/content/technologies/react.md @@ -1,7 +1,9 @@ --- 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: [] --- diff --git a/content/technologies/signature-securisee.md b/content/technologies/signature-securisee.md index 4a3f83504ca..1276c3182ee 100644 --- a/content/technologies/signature-securisee.md +++ b/content/technologies/signature-securisee.md @@ -1,6 +1,8 @@ --- name: "Signature électronique" -title: "Souscription et signature électronique dans votre application web" +title: + - "Souscription et signature électronique" + - "pour votre application web" articles: [] caseStudies: [] --- diff --git a/content/technologies/svg.md b/content/technologies/svg.md index c0a240eaaea..b408d8bc37d 100644 --- a/content/technologies/svg.md +++ b/content/technologies/svg.md @@ -1,6 +1,7 @@ --- name: SVG logo: build/images/technos/svg.svg -title: SVG +title: + - SVG show: false --- diff --git a/content/technologies/symfony.md b/content/technologies/symfony.md index f0f1d892806..3afd99cc5f4 100644 --- a/content/technologies/symfony.md +++ b/content/technologies/symfony.md @@ -1,12 +1,16 @@ --- 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 ? @@ -28,14 +32,6 @@ Forts de ces nombreuses années à utiliser Symfony, nous avons développé une 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 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. --> 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. --> lien vers l’étude de cas Musique & Music diff --git a/content/technologies/vue-js.md b/content/technologies/vue-js.md index 7024f52a098..12ad8722e54 100644 --- a/content/technologies/vue-js.md +++ b/content/technologies/vue-js.md @@ -1,7 +1,9 @@ --- 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: [] diff --git a/src/Model/Technology.php b/src/Model/Technology.php index 690344c0bef..dc9877ec1e6 100644 --- a/src/Model/Technology.php +++ b/src/Model/Technology.php @@ -8,14 +8,36 @@ class Technology { public string $name; public ?string $logo = null; - public string $title; + public array $title = []; public string $slug; public string $content; public ?string $description; + public ?string $metaDescription = null; + public ?string $titleSeo = null; public ?array $articles = null; public ?array $caseStudies = null; public \DateTimeInterface $lastModified; /** Show a dedicated page or not */ public bool $show = true; + + public function isTwoPartTitle(): bool + { + return \count($this->title) > 1 ?? false; + } + + public function getFullTitle(): string + { + return $this->isTwoPartTitle() ? sprintf('%s %s', $this->title[0], $this->title[1]) : $this->title[0]; + } + + public function getFirstPartTitle(): string + { + return $this->title[0]; + } + + public function getSecondPartTitle(): string + { + return $this->title[1]; + } } diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index 1b94a743121..0bb4f92ecbc 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -1,5 +1,7 @@ {% import "macros.html.twig" as macros %} {% extends 'base.html.twig' %} +{% block meta_title technology.titleSeo ?? technology.fullTitle %} +{% block meta_description technology.metaDescription ?? technology.fullTitle %} {% block content %} - {# Todo : - - permettre de couper le titre en 2 parties (Exemple : Nous utilisons Symfony pour créer des applications robustes) - - trouver une image de bannière générique pour les technos - - câbler le logo de la techno (parfois on a pas de logo, ne pas afficher l'image) - #}
  • - + {% if technology.show %} + + Logo {{ technology.logo }} + {{ technology.name }} + + {% else %}
    - {% if technology.logo|default(false) %} - logo {{ technology.name }} - {% endif %} + Logo {{ technology.logo }} {{ technology.name }}
    - + {% endif %}
  • {% endfor %} diff --git a/templates/site/home.html.twig b/templates/site/home.html.twig index 4865de5d720..bed13c06252 100644 --- a/templates/site/home.html.twig +++ b/templates/site/home.html.twig @@ -142,16 +142,17 @@ {% for item in technos %} {% set techno = content_get('App\\Model\\Technology', item.id) %}
  • - + {% if techno.show %} + + {{ item.alt }} + {{ techno.name }} + + {% else %}
    {{ item.alt }} {{ techno.name }}
    - + {% endif %}
  • {% endfor %} From fa60d96bd894b4338c067c43de95c0f92409a50c Mon Sep 17 00:00:00 2001 From: Anne-Laure de Boissieu Date: Mon, 3 May 2021 13:52:29 +0200 Subject: [PATCH 28/28] fix from review --- content/technologies/symfony.md | 2 +- templates/technology/technology.html.twig | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/technologies/symfony.md b/content/technologies/symfony.md index 57611e421c3..54f01420e61 100644 --- a/content/technologies/symfony.md +++ b/content/technologies/symfony.md @@ -5,7 +5,7 @@ title: - "Nous utilisons Symfony" - "pour créer des applications robustes" 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 😎" +metaDescription : "Pourquoi faire confiance à Elao et Symfony, en choisissant 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é**. diff --git a/templates/technology/technology.html.twig b/templates/technology/technology.html.twig index 4e640aedea9..92c3d055e3d 100644 --- a/templates/technology/technology.html.twig +++ b/templates/technology/technology.html.twig @@ -43,7 +43,7 @@

    Projets créés avec {{ technology.name }}

      {% for caseStudy in caseStudies %} -
    • +
    • @@ -61,7 +61,7 @@

      Articles liés à {{ technology.name }}

        {% for article in articles %} -
      • +