Updating SEO component

.eslintrc

@@ -3,7 +3,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
-    "airbnb"
+    "airbnb",
+    "plugin:prettier/recommended"
   ],
   "globals": {
     "window": true,
@@ -15,10 +16,12 @@
     "semi": ["error", "never"],
     "comma-dangle": ["error", "never"],
     "quotes": ["error", "double", { "avoidEscape": true }],
+    "no-unused-expressions": [2, { allowShortCircuit: true }], // gatsby-node.js
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/no-danger": 0,
     "react/prop-types": 0,
     "react/state-in-constructor": 0,
-    "linebreak-style": 0
+    "linebreak-style": 0,
+    "react/jsx-one-expression-per-line": 0
   }
 }

.prettierrc

@@ -3,5 +3,8 @@
   "semi": false,
   "singleQuote": false,
   "tabWidth": 2,
-  "trailingComma": "es5"
+  "trailingComma": "none",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
 }

gatsby-config.js

@@ -1,8 +1,11 @@
+require("dotenv").config()
+
 module.exports = {
   siteMetadata: {
     title: "El Salvador Conectado",
-    description: "Sitio web hecho en Gatsby con GraphQL. Para el contenido se usa WordPress https://elsalvadorconectado.org",
-    author: "@elsalvadorconectado"
+    description:
+      "Grupo multidisciplinario de profesionales organizados en una comunidad. Buscamos apoyar y resolver por medio de tecnologías colaborativas y open source.",
+    author: "@SVconectado"
   },
   plugins: [
     "gatsby-plugin-react-helmet",
@@ -23,7 +26,8 @@ module.exports = {
         // This is field under which it's accessible
         fieldName: "wpgraphql",
         // Url to query from
-        url: "https://dev-gatsby-wpgraphql-starter.pantheonsite.io/graphql"
+        url: `${process.env.WP_API_URL ||
+          "https://svc-staging-wordpress.de.quenecesito.org/graphql"}`
       }
     },
     {

gatsby-node.js

@@ -30,18 +30,19 @@ exports.createPages = async ({ graphql, actions }) => {
     }
   `)
 
-  postResults.data.wpgraphql.posts.edges.forEach(({ node }) => {
-    createPage({
-      path: node.slug,
-      component: path.resolve("./src/templates/blog-page-template.js"),
-      context: {
-        // This is the $slug variable
-        // passed to blog-post.js
-        slug: node.slug,
-        databaseId: node.databaseId
-      }
+  Array.isArray(postResults.data.wpgraphql.posts.edges) &&
+    postResults.data.wpgraphql.posts.edges.forEach(({ node }) => {
+      createPage({
+        path: node.slug,
+        component: path.resolve("./src/templates/blog-template.js"),
+        context: {
+          // This is the $slug variable
+          // passed to blog-post.js
+          slug: node.slug,
+          databaseId: node.databaseId
+        }
+      })
     })
-  })
 
   /**
    * Create Pages
@@ -70,18 +71,19 @@ exports.createPages = async ({ graphql, actions }) => {
     }
   `)
 
-  pageResults.data.wpgraphql.pages.edges.forEach(({ node }) => {
-    createPage({
-      path: node.slug,
-      component: path.resolve("./src/templates/blog-page-template.js"),
-      context: {
-        // This is the $slug variable
-        // passed to blog-post.js
-        slug: node.slug,
-        databaseId: node.databaseId
-      }
+  Array.isArray(pageResults.data.wpgraphql.pages.edges) &&
+    pageResults.data.wpgraphql.pages.edges.forEach(({ node }) => {
+      createPage({
+        path: node.slug,
+        component: path.resolve("./src/templates/page-template.js"),
+        context: {
+          // This is the $slug variable
+          // passed to blog-post.js
+          slug: node.slug,
+          databaseId: node.databaseId
+        }
+      })
     })
-  })
 
   /**
    * Create Category Pages
@@ -102,20 +104,23 @@ exports.createPages = async ({ graphql, actions }) => {
     }
   `)
 
-  categoryPageResults.data.wpgraphql.categories.edges.forEach(({ node }) => {
-    createPage({
-      path: `/category/${node.slug}`,
-      component: path.resolve("./src/templates/category-posts-list-template.js"),
-      context: {
-        // This is the $slug variable
-        // passed to blog-post.js
-        slug: node.slug,
-        databaseId: node.databaseId,
-        name: node.name,
-        typeList: "category"
-      }
+  Array.isArray(categoryPageResults.data.wpgraphql.categories.edges) &&
+    categoryPageResults.data.wpgraphql.categories.edges.forEach(({ node }) => {
+      createPage({
+        path: `/category/${node.slug}`,
+        component: path.resolve(
+          "./src/templates/category-posts-list-template.js"
+        ),
+        context: {
+          // This is the $slug variable
+          // passed to blog-post.js
+          slug: node.slug,
+          databaseId: node.databaseId,
+          name: node.name,
+          typeList: "category"
+        }
+      })
     })
-  })
 
   /**
    * Create Tags Pages
@@ -136,18 +141,19 @@ exports.createPages = async ({ graphql, actions }) => {
     }
   `)
 
-  tagPageResults.data.wpgraphql.tags.edges.forEach(({ node }) => {
-    createPage({
-      path: `/tag/${node.slug}`,
-      component: path.resolve("./src/templates/tag-posts-list-template.js"),
-      context: {
-        // This is the $slug variable
-        // passed to blog-post.js
-        slug: node.slug,
-        databaseId: node.databaseId,
-        name: node.name,
-        typeList: "tag"
-      }
+  Array.isArray(tagPageResults.data.wpgraphql.tags.edges) &&
+    tagPageResults.data.wpgraphql.tags.edges.forEach(({ node }) => {
+      createPage({
+        path: `/tag/${node.slug}`,
+        component: path.resolve("./src/templates/tag-posts-list-template.js"),
+        context: {
+          // This is the $slug variable
+          // passed to blog-post.js
+          slug: node.slug,
+          databaseId: node.databaseId,
+          name: node.name,
+          typeList: "tag"
+        }
+      })
     })
-  })
 }

package.json

@@ -6,6 +6,8 @@
   "author": "Son muchos <frontend@elsalvadorconectado.org>",
   "dependencies": {
     "babel-plugin-styled-components": "^1.10.7",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-prettier": "^3.1.3",
     "font-awesome": "^4.7.0",
     "gatsby": "^2.19.7",
     "gatsby-background-image": "^1.0.1",
@@ -28,7 +30,8 @@
     "react-helmet": "^5.2.1",
     "styled-components": "^5.0.1",
     "tailwindcss": "^1.2.0",
-    "twin.macro": "^1.0.0-alpha.8"
+    "twin.macro": "^1.0.0-alpha.8",
+    "dotenv": "^8.2.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
@@ -49,7 +52,7 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop",
-    "format": "prettier --write \"**/*.{json,md}\"",
+    "format": "prettier --write \"**/*.{js, jsx, json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",

src/components/cardPostListComponent.js

@@ -9,9 +9,7 @@ import { theme as CustomTheme } from "../../tailwind.config"
 const PostCardList = ({ post }) => {
   const data = useStaticQuery(graphql`
     query {
-      desktop: file(
-        relativePath: { eq: "elsalvadorconectado-cover.png" }
-      ) {
+      desktop: file(relativePath: { eq: "elsalvadorconectado-cover.png" }) {
         childImageSharp {
           fluid(quality: 90, maxWidth: 1920) {
             ...GatsbyImageSharpFluid_withWebp
@@ -22,9 +20,15 @@ const PostCardList = ({ post }) => {
   `)
 
   const coverDefault = data.desktop.childImageSharp.fluid.src
-  const cover = post.featuredImage ? post.featuredImage.mediaItemUrl : coverDefault
+  const cover = post.featuredImage
+    ? post.featuredImage.mediaItemUrl
+    : coverDefault
   const date = moment(post.date).format("DD MMM YYYY")
-  const author = `${_.get(post, "author.name", "")} ${_.get(post, "author.lastname", "")}`
+  const author = `${_.get(post, "author.name", "")} ${_.get(
+    post,
+    "author.lastname",
+    ""
+  )}`
 
   return (
     <StyledPostCardList>
@@ -37,18 +41,14 @@ const PostCardList = ({ post }) => {
           />
           <div className="card__details">
             <Link to={`/${post.slug}`} className="card__details__title">
-              { post.title }
+              {post.title}
             </Link>
             <Link to={`/${post.slug}`} className="card__details__more">
-              <span className="card__details__author">
-                { author }
-              </span>
+              <span className="card__details__author">{author}</span>
               <span>
                 <span>&nbsp;&#183;&nbsp;</span>
               </span>
-              <span className="card__details__date">
-                { date }
-              </span>
+              <span className="card__details__date">{date}</span>
             </Link>
             {post.tags.edges && (
               <div className="card__details__tags">
@@ -58,10 +58,7 @@ const PostCardList = ({ post }) => {
                     className="card__details__tags__element"
                     key={tag.node.id}
                   >
-                    <span>
-                      #
-                      {tag.node.name}
-                    </span>
+                    <span>#{tag.node.name}</span>
                   </Link>
                 ))}
               </div>

src/components/footer.js

@@ -87,50 +87,54 @@ const StyledFooter = styled.div`
       &__menu {
         ${tw`flex flex-col justify-center items-center my-4`}
         ${tw`font-medium`}
+
+        &__element {
+          ${tw`my-2`}
+        }
       }
 
       &__social {
         ${tw`flex justify-center items-center`}
 
         &__element {
-          ${tw`text-center text-3xl`}
+          ${tw`text-center text-3xl mx-4`}
         }
       }
     }
   }
 
-@media (min-width: ${CustomTheme.extend.screens.laptop}) {
-  .footer__container {
-    ${tw`flex-row py-10`}
+  @media (min-width: ${CustomTheme.extend.screens.laptop}) {
+    .footer__container {
+      ${tw`flex-row py-10`}
 
-    &__logo {
-      ${tw`w-1/2`}
+      &__logo {
+        ${tw`w-1/2`}
 
-      &__img {
-        ${tw`mb-0`}
+        &__img {
+          ${tw`mb-0`}
+        }
       }
-    }
 
-    &__text {
-      ${tw`w-1/2`}
+      &__text {
+        ${tw`w-1/2`}
 
-      &__menu {
-        ${tw`flex-row justify-end`}
+        &__menu {
+          ${tw`flex-row justify-end`}
 
-        &__element {
-          ${tw`ml-4`}
+          &__element {
+            ${tw`ml-4 my-0`}
+          }
         }
-      }
 
-      &__social {
-        ${tw`flex-row justify-end`}
+        &__social {
+          ${tw`flex-row justify-end`}
 
-        &__element {
-          ${tw`text-right text-2xl`}
+          &__element {
+            ${tw`text-right text-2xl ml-8 mr-0`}
+          }
         }
       }
     }
   }
-}
 `
 export default Footer