Feature issue #44

gatsby-browser.js

@@ -1,2 +1,3 @@
-require("typeface-rubik");
 import "./src/css/style.css";
+import "typeface-roboto";
+import "typeface-open-sans";

gatsby-config.js

@@ -7,9 +7,9 @@ module.exports = {
   siteMetadata: {
     title: `JavaScript Ecuador`,
     description: `Web de la Comunidad JavaScript Ecuador`,
-    author: `@taylorbryant`,
+    author: ``,
     generator: `Gatsby`,
-    keywords: `html, css, javascript, jamstack`,
+    keywords: `gatsby, react, graphql, javascript, ecuador`,
   },
   plugins: [
     `gatsby-plugin-eslint`,
@@ -47,7 +47,6 @@ module.exports = {
       options: {
         extensions: [`.mdx`, `.md`],
         defaultLayouts: {
-          // articles: require.resolve('./src/templates/articles-layout.js'),
           default: require.resolve("./src/templates/blog-entry.js"),
         },
       },

gatsby-node.js

@@ -1,5 +1,15 @@
-exports.onCreateNode = ({ node }) => {
-//     // if (node.internal.type === `MarkdownRemark`) {
-//       console.log(node.internal.type)
-//     // }
-  }
+exports.onCreateNode = ({ node }) => {};
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions;
+  const typeDefs = `
+    type Mdx implements Node {
+      frontmatter: Frontmatter
+    }
+
+    type Frontmatter {
+      author: AuthorsJson @link(by: "github")
+    }
+  `;
+  createTypes(typeDefs);
+};

package.json

@@ -27,7 +27,8 @@
     "react-helmet": "6.1.0",
     "react-slick": "^0.27.11",
     "styled-components": "^5.2.0",
-    "typeface-rubik": "^1.1.13"
+    "typeface-open-sans": "^1.1.13",
+    "typeface-roboto": "^1.1.13"
   },
   "keywords": [
     "ecuador",

src/components/author/author.js

@@ -0,0 +1,50 @@
+import React from "react";
+import styles from "./author.module.css";
+import githubImg from "../../images/icons/github-small.svg";
+import emailImg from "../../images/icons/email.svg";
+import PropTypes from "prop-types";
+
+const Author = ({ name, photo, date, github, email }) => {
+  let githubIcon = null;
+  if (github) {
+    githubIcon = (
+      <a className={styles.author__icon} href={github}>
+        <img src={githubImg} />
+      </a>
+    );
+  }
+
+  let emailIcon = null;
+  if (email) {
+    emailIcon = (
+      <a className={styles.author__icon} href={email}>
+        <img src={emailImg} />
+      </a>
+    );
+  }
+  return (
+    <div className={styles.author}>
+      <div className={styles.author__image}>
+        <img src={photo} alt={name} />
+      </div>
+      <div className={styles.author__info}>
+        <p className={styles.author__name}>{name}</p>
+        <p className={styles.author__date}>{date}</p>
+        <div>
+          {githubIcon}
+          {emailIcon}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Author.propTypes = {
+  name: PropTypes.string,
+  photo: PropTypes.string,
+  date: PropTypes.string,
+  github: PropTypes.string,
+  email: PropTypes.string,
+};
+
+export default Author;

src/components/author/author.module.css

@@ -0,0 +1,41 @@
+.author {
+  display: flex;
+  margin: 3em 0;
+}
+
+.author__image {
+  width: 4.5em;
+  height: 4.5em;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 0 1em;
+}
+
+.author__image img {
+  display: block;
+  width: 100%;
+}
+
+.author__info {
+  width: 50%;
+}
+
+.author__name {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.author__date {
+  font-size: .8rem;
+  color: #737373;
+}
+
+.author__icon {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+}
+
+.author__icon:first-child {
+  margin-right: 5px;
+}

src/components/community-hero-section/community-hero-section.js

@@ -3,37 +3,47 @@ import './community-hero-section.css';
 import CardSection from './card-section/card-section';
 
 const communityHeroSection = () => {
-    const cards = [
-        {
-            title: 'Organizar un Meetup',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.',
-            txtButton: 'Llenar formulario para organizar un Meetup',
-            descriptionExample: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.'
-        },
-        {
-            title: 'Impartir una charla',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.',
-            txtButton: 'Llenar formulario para impartir charla',
-            descriptionExample: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.'            
-        },
-        {
-            title: 'Escribir / Traducir un Artículo',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.',
-            txtButton: 'Llenar formulario para escribir un artículo',
-            descriptionExample: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.'
-        },
-      ];
-    return (
-        <div className='community-hero-section'>
-             <div className="ec-container">
-                <h3 className='section__title'>¿Cómo ayudar?</h3>
-                {
-                    cards.map( card => (
-                        <CardSection title={card.title} description={card.description} txtButton={card.txtButton} descriptionExample={card.descriptionExample} />
-                    ))
-                }                    
-             </div>
-        </div>
+  const cards = [
+    {
+      title: 'Organizar un Meetup',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.',
+      txtButton: 'Llenar formulario para organizar un Meetup',
+      descriptionExample:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.',
+    },
+    {
+      title: 'Impartir una charla',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.',
+      txtButton: 'Llenar formulario para impartir charla',
+      descriptionExample:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.',
+    },
+    {
+      title: 'Escribir / Traducir un Artículo',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium, eros eros hendrerit arcu, ut efficitur quam dolor id diam. Nam sed massa scelerisque, dictum quam vel, egestas metus.',
+      txtButton: 'Llenar formulario para escribir un artículo',
+      descriptionExample:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus accumsan sapien a elementum. Vestibulum nibh nisi, semper sit amet egestas non, blandit id turpis. Nam accumsan lectus et ultrices lacinia. In vehicula, odio eu molestie pretium.',
+    },
+  ];
+  return (
+    <div className="community-hero-section">
+      <div className="ec-container">
+        <h3 className="section__title">¿Cómo ayudar?</h3>
+        {cards.map((card, idx) => (
+          <CardSection
+            title={card.title}
+            description={card.description}
+            txtButton={card.txtButton}
+            descriptionExample={card.descriptionExample}
+            key={idx}
+          />
+        ))}
+      </div>
+    </div>
     )
 }
 

src/data/authors.json

@@ -0,0 +1,42 @@
+[
+  {
+    "rol": "Co-Organizador",
+    "name": "Richard Palacios G",
+    "photo": "https://avatars0.githubusercontent.com/u/11642622?v=4",
+    "github": "https://richardpalaciosg.dev/",
+    "website": "https://richardpalaciosg.dev/",
+    "email": "https://richardpalaciosg.dev/",
+    "twitter": "https://richardpalaciosg.dev/",
+    "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
+  },
+  {
+    "rol": "Co-Organizador",
+    "name": "Israel Teneda",
+    "photo": "https://avatars2.githubusercontent.com/u/20668624?v=4",
+    "github": "https://github.com/israteneda",
+    "website": "https://github.com/israteneda",
+    "email": "https://github.com/israteneda",
+    "twitter": "https://github.com/israteneda",
+    "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
+  },
+  {
+    "rol": "Co-Organizador",
+    "name": "Edisson Reinozo",
+    "photo": "https://avatars3.githubusercontent.com/u/14936466?v=4",
+    "github": "https://github.com/edzzn",
+    "website": "http://edzzn.com/",
+    "email": "http://edzzn.com/",
+    "twitter": "http://edzzn.com/",
+    "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
+  },
+  {
+    "rol": "Co-Organizador",
+    "name": "Jordan Jaramillo",
+    "photo": "https://avatars2.githubusercontent.com/u/62086742?v=4",
+    "github": "https://github.com/jordanrjcode",
+    "website": "https://github.com/jordanrjcode",
+    "email": "https://github.com/jordanrjcode",
+    "twitter": "https://github.com/jordanrjcode",
+    "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
+  }
+]

src/pages/blog.js

@@ -4,7 +4,6 @@ import Layout from "../components/layout/layout";
 import SEO from "../components/seo";
 
 import { StaticQuery, graphql, Link } from "gatsby";
-import { render } from "react-dom";
 
 function BlogPage(articulos) {
   return (
@@ -15,7 +14,7 @@ function BlogPage(articulos) {
 
         <ul>
           {articulos.map((articulo) => (
-            <li>
+            <li key={articulo.id}>
               <Link to={`/blog/${articulo.slug}`}>{articulo.title}</Link>
             </li>
           ))}
@@ -33,6 +32,7 @@ function renderBlogPage() {
           articulos: allMdx {
             edges {
               node {
+                id
                 slug
                 frontmatter {
                   title
@@ -48,6 +48,7 @@ function renderBlogPage() {
           return {
             ...articulo.node.frontmatter,
             slug: articulo.node.slug,
+            id: articulo.node.id,
           };
         });
         return BlogPage(articulosFormateados);

src/pages/blog/gatsby-deploy.mdx

@@ -3,6 +3,7 @@ title: Deploy de un sitio de Gatsby en Netlify
 date: "2020-10-05"
 updated: "2020-10-05"
 description: Como realizar el deploy de un sitio construido con Gatsby a Netlify
+author: "https://github.com/edzzn"
 ---
 
 Esta es la guía base para realizar el deploy de una página construida con el framework Gatsby,