Merge pull request #42 from coderbunker/eslint

SEO Meta Tags & Clean up

Author: Carms Ng

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'react/jsx-filename-extension': [
+      1,
+      {
+        extensions: [
+          '.js',
+          '.jsx',
+        ],
+      },
+    ],
+    'no-param-reassign': 0,
+    'react/prop-types': 0,
+  },
+};

gatsby-browser.js

@@ -1,6 +1 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.com/docs/browser-apis/
- */
 import './src/styles/global.css';

gatsby-config.js

@@ -1,55 +1,56 @@
 module.exports = {
-  pathPrefix: "/coderbunker.ca",
+  pathPrefix: '/coderbunker.ca',
   siteMetadata: {
-    title: `Coderbunker Canada`,
-    author: `@Carms-dev`,
-    description: `Coderbunker est une communauté internationale de passionnés de développement logiciel. Nous fonctionnons sur une base de budget d'ingénierie mensuels prépayés sur lesquels nous recrutons des équipes formées de talents flexibles qui participent activement dans la construction d'une communauté qui les rends heureux.`,
+    title: 'Coderbunker Canada',
+    author: '@Carms-dev',
+    description: 'Coderbunker est une communauté internationale de passionnés de développement logiciel. Nous fonctionnons sur une base de budget d\'ingénierie mensuels prépayés sur lesquels nous recrutons des équipes formées de talents flexibles qui participent activement dans la construction d\'une communauté qui les rends heureux.',
+    siteUrl: 'https://www.coderbunker.ca/',
   },
   plugins: [
-    `gatsby-transformer-json`,
+    'gatsby-transformer-json',
 
-    `gatsby-plugin-postcss`,
-    `gatsby-plugin-styled-components`,
-    `gatsby-plugin-react-helmet`,
-    `gatsby-plugin-image`,
+    'gatsby-plugin-postcss',
+    'gatsby-plugin-styled-components',
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-image',
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `images`,
+        name: 'images',
         path: `${__dirname}/src/assets/images`,
       },
     },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `assets`,
+        name: 'assets',
         path: `${__dirname}/src/assets`,
       },
     },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `content`,
+        name: 'content',
         path: `${__dirname}/src/assets/content`,
       },
     },
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `locale`,
+        name: 'locale',
         path: `${__dirname}/locales`,
-      }
+      },
     },
-    `gatsby-transformer-sharp`,
+    'gatsby-transformer-sharp',
     {
-      resolve: `gatsby-plugin-sharp`,
+      resolve: 'gatsby-plugin-sharp',
       options: {
         defaults: {
-          formats: [`auto`, `webp`],
-          placeholder: `dominantColor`,
+          formats: ['auto', 'webp'],
+          placeholder: 'dominantColor',
           quality: 50,
           breakpoints: [750, 1080, 1366, 1920],
-          backgroundColor: `transparent`,
+          backgroundColor: 'transparent',
           tracedSVGOptions: {},
           blurredOptions: {},
           jpgOptions: {},
@@ -60,39 +61,39 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: 'gatsby-plugin-manifest',
       options: {
         icon: `${__dirname}/src/assets/images/coderbunker-icon.png`, // This path is relative to the root of the site.
       },
     },
     {
-      resolve: `gatsby-plugin-react-i18next`,
+      resolve: 'gatsby-plugin-react-i18next',
       options: {
-        localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
-        languages: [`en`, `fr`],
-        defaultLanguage: `en`,
+        localeJsonSourceName: 'locale', // name given to `gatsby-source-filesystem` plugin.
+        languages: ['en', 'fr'],
+        defaultLanguage: 'en',
         // if you are using Helmet, you must include siteUrl, and make sure you add http:https
-        siteUrl: `https://coderbunker.ca/`,
+        siteUrl: 'https://coderbunker.ca/',
         // you can pass any i18next options
         i18nextOptions: {
           interpolation: {
-            escapeValue: false // not needed for react as it escapes by default
+            escapeValue: false, // not needed for react as it escapes by default
           },
           keySeparator: false,
-          nsSeparator: false
+          nsSeparator: false,
         },
         pages: [
           {
             matchPath: '/:language?/members/:name',
             getLanguageFromPath: true,
-            excludeLanguages: []
+            excludeLanguages: [],
           },
           {
             matchPath: '/preview',
-            languages: ['en']
-          }
-        ]
-      }
-    }
+            languages: ['en'],
+          },
+        ],
+      },
+    },
   ],
-}
+};

gatsby-node.js

@@ -1,9 +1,9 @@
-const { graphql } = require("gatsby")
-const path = require(`path`)
+const { graphql } = require('gatsby');
+const path = require('path');
 
 // create member pages
 exports.createPages = async ({ graphql, actions }) => {
-  const { createPage } = actions
+  const { createPage } = actions;
 
   const result = await graphql(`
     query {
@@ -29,24 +29,24 @@ exports.createPages = async ({ graphql, actions }) => {
         }
       }
     }
-  `)
+  `);
 
-  result.data.allMembersJson.nodes.forEach(node => {
-    const member = node.en.name
-    const id = node.parent.id
-    const slug = result.data.allFile.nodes.find(node => node.id === id).name.substring(3, )
+  result.data.allMembersJson.nodes.forEach((node) => {
+    const member = node.en.name;
+    const { id } = node.parent;
+    const slug = result.data.allFile.nodes.find((node) => node.id === id).name.substring(3);
 
-    Object.keys(node).forEach(key => {
-      if (key !== "parent") {
-        const language = key
-        const template = "MemberPage.js"
+    Object.keys(node).forEach((key) => {
+      if (key !== 'parent') {
+        const language = key;
+        const template = 'MemberPage.js';
 
         createPage({
-          path: `${language === "en" ? "" : "/fr"}/members/${slug}`,
+          path: `${language === 'en' ? '' : '/fr'}/members/${slug}`,
           component: path.resolve(`./src/templates/${template}`),
-          context: { slug: slug, language: language, member: member }
-        })
+          context: { slug, language, member },
+        });
       }
-    })
-  })
-}
+    });
+  });
+};