Feature/seo (#39)

* chore: install helmet types

* feat: implement pages description and title

gatsby-config.js

@@ -7,7 +7,9 @@
 module.exports = {
   siteMetadata: {
     title: `We Are Lion`,
-    siteUrl: "https://we-are-lion.fr"
+    siteUrl: "https://we-are-lion.fr",
+    description:
+      "Agence Lion votre partenaire pour la création de votre business en ligne."
   },
   plugins: [
     {

gatsby-node.js

@@ -5,6 +5,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   const result = await graphql(
     `
       {
+        site {
+          siteMetadata {
+            title
+          }
+        }
         allMarkdownRemark(
           sort: { fields: [frontmatter___date], order: DESC }
           limit: 1000
@@ -19,6 +24,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
                 date(formatString: "DD-MM-YYYY")
                 par
                 categories
+                htmlTitle
+                description
               }
               excerpt(pruneLength: 300, format: HTML)
               html
@@ -44,6 +51,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       context: {
         // Data passed to context is available
         // in page queries as GraphQL variables.
+        defaultDescription: result.data.site.siteMetadata.description,
+        siteName: result.data.site.siteMetadata.title,
         slug: node.fields.slug,
         title,
         date,

package.json

@@ -41,6 +41,7 @@
     "@types/js-cookie": "^2.2.6",
     "@types/react": "^16.9.21",
     "@types/react-dom": "^16.9.5",
+    "@types/react-helmet": "^6.0.0",
     "@types/styled-components": "^5.0.0",
     "prettier": "^1.19.1"
   },

posts/about-page.md

@@ -0,0 +1,9 @@
+---
+title: "Qui sommes-nous ?"
+date: "2020-05-26"
+par: "Franck"
+categories: ["page"]
+htmlTitle: "Rencontrez ceux qui font Lion."
+description: "Une (très) petite équipe passionnée du web"
+slug: "about"
+---

posts/bien-demarrer-dans-l-ecommerce.md

@@ -3,6 +3,9 @@ title: "Les clés pour bien démarrer votre projet e-commerce"
 date: "2020-06-05"
 par: "Franck"
 categories: ["post", "draft"]
+htmlTitle: "Lancez votre boutique en ligne dès aujourd'hui"
+description: "Tous les conseils pour démarrer son site e-commerce et augmenter son chiffre d'affaire."
+slug: "bien-demarrer-dans-l-ecommerce"
 ---
 
 ![Achat en ligne](/img/posts/online-shopping.jpg)

posts/bonjour.md

@@ -3,6 +3,9 @@ title: "Bienvenue chez Lion !"
 date: "2020-05-26"
 par: "Franck"
 categories: ["post"]
+htmlTitle: "Agence Lion ; Nouvelle agence web à Marseille"
+description: "Spécialisés dans la création de boutique e-commerce en ligne et sites vitrine"
+slug: "bonjour"
 ---
 
 ![Feux d'artifice](/img/posts/fireworks.jpg)

posts/contact-page.md

@@ -0,0 +1,9 @@
+---
+title: "Contact"
+date: "2020-06-12"
+par: "Franck"
+categories: ["page"]
+htmlTitle: "Contact"
+description: "Envie de développer votre activité sur internet, contactez-nous via formulaire de contact ou par téléphone."
+slug: "contact"
+---

posts/home-page.md

@@ -0,0 +1,9 @@
+---
+title: "Accueil"
+date: "2020-06-12"
+par: "Franck"
+categories: ["page"]
+htmlTitle: "Accueil"
+description: "Agence conseil en developpement web et e-commerce"
+slug: "home"
+---

posts/legal-page.md

@@ -0,0 +1,9 @@
+---
+title: "Qui sommes-nous ?"
+date: "2020-05-26"
+par: "Franck"
+categories: ["page"]
+htmlTitle: "Mentions légales"
+description: ""
+slug: "legal"
+---

posts/services-page.md

@@ -0,0 +1,9 @@
+---
+title: "Services"
+date: "2020-06-12"
+par: "Franck"
+categories: ["page"]
+htmlTitle: "Prestations web sur meusure"
+description: "Boutique en ligne, site vitrine, email marketing, l'agence Lion vous accompagne à chaque étape de votre projet."
+slug: "services"
+---

src/components/ui/Layout.tsx

@@ -6,10 +6,11 @@ import styled from "styled-components";
 import { Footer } from "../Footer";
 import Grid from "@material-ui/core/Grid";
 import { Wrapper } from "./Section";
-import { Link } from "gatsby";
+import { Link, graphql } from "gatsby";
 import { CookieBanner } from "../Cookie/CookieBanner";
 import { Text } from "./Text";
 import { StyledLink } from "./StyledLink";
+import { Helmet } from "react-helmet";
 
 export const Container = styled.div<{ fluid?: boolean }>`
   width: 100%;

src/pages/about.tsx

@@ -1,9 +1,56 @@
 import React from "react";
 import { Layout } from "../components/ui/Layout";
 import { H1 } from "../components/ui/Headings";
+import { Helmet } from "react-helmet";
+import { graphql } from "gatsby";
 
-export default () => (
-  <Layout isClear={false}>
-    <H1>A propos</H1>
-  </Layout>
-);
+export default ({ data }) => {
+  const {
+    htmlTitle,
+    description
+  } = data.allMarkdownRemark.edges[0].node.frontmatter;
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {data.site.siteMetadata.title} - {htmlTitle}
+        </title>
+        <meta name="description" content={description}></meta>
+      </Helmet>
+      <Layout isClear={false}>
+        <H1>A propos</H1>
+      </Layout>
+    </>
+  );
+};
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        title
+        description
+      }
+    }
+    allMarkdownRemark(
+      filter: {
+        frontmatter: { categories: { eq: "page" }, slug: { eq: "about" } }
+      }
+    ) {
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+            htmlTitle
+            description
+          }
+          excerpt(pruneLength: 300, format: HTML)
+        }
+      }
+    }
+  }
+`;

src/pages/contact.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import styled from "styled-components";
+import { Helmet } from "react-helmet";
+import { graphql } from "gatsby";
 import { Layout } from "../components/ui/Layout";
 import { ContactForm } from "../components/ContactForm";
 import { Slide, Left, Right } from "../components/Slide";
-import styled from "styled-components";
 import { H1, H3Light } from "../components/ui/Headings";
 import { Text } from "../components/ui/Text";
 
@@ -12,26 +14,71 @@ const Phone = styled.a`
   font-weight: bold;
 `;
 
-export default () => (
-  <Layout isClear={false}>
-    <Slide>
-      <Left align="center">
-        <H1>Contact</H1>
-        <H3Light>
-          Le plus court chemin vers la réalisation de vos objectifs passe par
-          ici&nbsp;!
-        </H3Light>
-        <Text>
-          Vous avez un projet, nous avons les moyens de le réaliser. Utilisez le
-          formulaire ci-après, ou bien téléphonez-nous pour en parler
-          directement.
-          <br />
-          <Phone href="tel:0695681604">06 95 68 16 04</Phone>
-        </Text>
-      </Left>
-      <Right>
-        <ContactForm />
-      </Right>
-    </Slide>
-  </Layout>
-);
+export default ({ data }) => {
+  const {
+    htmlTitle,
+    description
+  } = data.allMarkdownRemark.edges[0].node.frontmatter;
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {data.site.siteMetadata.title} - {htmlTitle}
+        </title>
+        <meta name="description" content={description}></meta>
+      </Helmet>
+      <Layout isClear={false}>
+        <Slide>
+          <Left align="center">
+            <H1>Contact</H1>
+            <H3Light>
+              Le plus court chemin vers la réalisation de vos objectifs passe
+              par ici&nbsp;!
+            </H3Light>
+            <Text>
+              Vous avez un projet, nous avons les moyens de le réaliser.
+              Utilisez le formulaire ci-après, ou bien téléphonez-nous pour en
+              parler directement.
+              <br />
+              <Phone href="tel:0695681604">06 95 68 16 04</Phone>
+            </Text>
+          </Left>
+          <Right>
+            <ContactForm />
+          </Right>
+        </Slide>
+      </Layout>
+    </>
+  );
+};
+
+export const query = graphql`
+  {
+    site {
+      siteMetadata {
+        title
+        description
+      }
+    }
+    allMarkdownRemark(
+      filter: {
+        frontmatter: { categories: { eq: "page" }, slug: { eq: "contact" } }
+      }
+    ) {
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+            htmlTitle
+            description
+          }
+          excerpt(pruneLength: 300, format: HTML)
+        }
+      }
+    }
+  }
+`;