add meta title

Elao · Apr 26, 2021 · 668f8f1 · 668f8f1
1 parent 720beee
commit 668f8f1
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 31 deletions.
diff --git 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
@@ -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
@@ -1,6 +1,7 @@
 ---
 name: "Bootstrap"
 logo: "build/images/technos/graphql.svg"
-title: bootstrap
+title: 
+    - bootstrap
 show: false
 ---
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,5 +2,6 @@
 name: "Javascript"
 logo: "build/images/technos/graphql.svg"
 show: false
-title: javascript
+title: 
+ - javascript
 ---
diff --git a/content/technologies/nodejs.md b/content/technologies/nodejs.md
@@ -2,5 +2,6 @@
 name: "Node.js"
 logo: "build/images/technos/graphql.svg"
 show: false
-title: NodeJS
+title: 
+    - NodeJS
 ---
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}
     <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
@@ -23,10 +25,17 @@
         - câbler le logo de la techno (parfois on a pas de logo, ne pas afficher l'image)
     #}
     <div class="banner-technology">
-        <h1 class="banner-technology__title">
-            {{ technology.title }}
-            <span>fin du titre</span>
-        </h1>
+        {% if technology.isTwoPartTitle %}
+            <h1 class="banner-technology__title">
+                {{ technology.firstPartTitle }}
+                <span>{{ technology.secondPartTitle }}</span>
+            </h1>
+        {% else %}
+            <h1 class="banner-technology__title">
+                {{ technology.fullTitle }}
+            </h1>
+        {% endif %}
+
         <div class="banner-technology__image">
             <img src="{{ asset(technology.logo) }}" alt="logo de {{ technology.name }}" class="logo">
         </div>