add meta title

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

Hide file tree

Showing 18 changed files with 79 additions and 22 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 ?
 

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>