Skip to content

Commit 69fa968

Browse files
isratenedaisrateneda
authored
Merge pull request #71 from cesardlinx/feat-issue-44
Feature issue #44
2 parents a141600 + 7c8e50d commit 69fa968

13 files changed

Lines changed: 249 additions & 70 deletions

File tree

‎gatsby-browser.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
require("typeface-rubik");
21
import "./src/css/style.css";
2+
import "typeface-roboto";
3+
import "typeface-open-sans";

‎gatsby-config.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ module.exports = {
77
siteMetadata: {
88
title: `JavaScript Ecuador`,
99
description: `Web de la Comunidad JavaScript Ecuador`,
10-
author: `@taylorbryant`,
10+
author: ``,
1111
generator: `Gatsby`,
12-
keywords: `html, css, javascript, jamstack`,
12+
keywords: `gatsby, react, graphql, javascript, ecuador`,
1313
},
1414
plugins: [
1515
`gatsby-plugin-eslint`,
@@ -47,7 +47,6 @@ module.exports = {
4747
options: {
4848
extensions: [`.mdx`, `.md`],
4949
defaultLayouts: {
50-
// articles: require.resolve('./src/templates/articles-layout.js'),
5150
default: require.resolve("./src/templates/blog-entry.js"),
5251
},
5352
},

‎gatsby-node.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1-
exports.onCreateNode = ({ node }) => {
2-
// // if (node.internal.type === `MarkdownRemark`) {
3-
// console.log(node.internal.type)
4-
// // }
5-
}
1+
exports.onCreateNode = ({ node }) => {};
2+
3+
exports.createSchemaCustomization = ({ actions }) => {
4+
const { createTypes } = actions;
5+
const typeDefs = `
6+
type Mdx implements Node {
7+
frontmatter: Frontmatter
8+
}
9+
10+
type Frontmatter {
11+
author: AuthorsJson @link(by: "github")
12+
}
13+
`;
14+
createTypes(typeDefs);
15+
};

‎package-lock.json‎

Lines changed: 8 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"react-helmet": "6.1.0",
2828
"react-slick": "^0.27.11",
2929
"styled-components": "^5.2.0",
30-
"typeface-rubik": "^1.1.13"
30+
"typeface-open-sans": "^1.1.13",
31+
"typeface-roboto": "^1.1.13"
3132
},
3233
"keywords": [
3334
"ecuador",

‎src/components/author/author.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import styles from "./author.module.css";
3+
import githubImg from "../../images/icons/github-small.svg";
4+
import emailImg from "../../images/icons/email.svg";
5+
import PropTypes from "prop-types";
6+
7+
const Author = ({ name, photo, date, github, email }) => {
8+
let githubIcon = null;
9+
if (github) {
10+
githubIcon = (
11+
<a className={styles.author__icon} href={github}>
12+
<img src={githubImg} />
13+
</a>
14+
);
15+
}
16+
17+
let emailIcon = null;
18+
if (email) {
19+
emailIcon = (
20+
<a className={styles.author__icon} href={email}>
21+
<img src={emailImg} />
22+
</a>
23+
);
24+
}
25+
return (
26+
<div className={styles.author}>
27+
<div className={styles.author__image}>
28+
<img src={photo} alt={name} />
29+
</div>
30+
<div className={styles.author__info}>
31+
<p className={styles.author__name}>{name}</p>
32+
<p className={styles.author__date}>{date}</p>
33+
<div>
34+
{githubIcon}
35+
{emailIcon}
36+
</div>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
Author.propTypes = {
43+
name: PropTypes.string,
44+
photo: PropTypes.string,
45+
date: PropTypes.string,
46+
github: PropTypes.string,
47+
email: PropTypes.string,
48+
};
49+
50+
export default Author;

‎src/components/author/author.module.css‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.author {
2+
display: flex;
3+
margin: 3em 0;
4+
}
5+
6+
.author__image {
7+
width: 4.5em;
8+
height: 4.5em;
9+
border-radius: 50%;
10+
overflow: hidden;
11+
margin: 0 1em;
12+
}
13+
14+
.author__image img {
15+
display: block;
16+
width: 100%;
17+
}
18+
19+
.author__info {
20+
width: 50%;
21+
}
22+
23+
.author__name {
24+
font-size: 1rem;
25+
font-weight: bold;
26+
}
27+
28+
.author__date {
29+
font-size: .8rem;
30+
color: #737373;
31+
}
32+
33+
.author__icon {
34+
width: 24px;
35+
height: 24px;
36+
display: inline-block;
37+
}
38+
39+
.author__icon:first-child {
40+
margin-right: 5px;
41+
}

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

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,47 @@ import './community-hero-section.css';
33
import CardSection from './card-section/card-section';
44

55
const communityHeroSection = () => {
6-
const cards = [
7-
{
8-
title: 'Organizar un Meetup',
9-
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.',
10-
txtButton: 'Llenar formulario para organizar un Meetup',
11-
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.'
12-
},
13-
{
14-
title: 'Impartir una charla',
15-
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.',
16-
txtButton: 'Llenar formulario para impartir charla',
17-
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.'
18-
},
19-
{
20-
title: 'Escribir / Traducir un Artículo',
21-
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.',
22-
txtButton: 'Llenar formulario para escribir un artículo',
23-
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.'
24-
},
25-
];
26-
return (
27-
<div className='community-hero-section'>
28-
<div className="ec-container">
29-
<h3 className='section__title'>¿Cómo ayudar?</h3>
30-
{
31-
cards.map( card => (
32-
<CardSection title={card.title} description={card.description} txtButton={card.txtButton} descriptionExample={card.descriptionExample} />
33-
))
34-
}
35-
</div>
36-
</div>
6+
const cards = [
7+
{
8+
title: 'Organizar un Meetup',
9+
description:
10+
'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.',
11+
txtButton: 'Llenar formulario para organizar un Meetup',
12+
descriptionExample:
13+
'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.',
14+
},
15+
{
16+
title: 'Impartir una charla',
17+
description:
18+
'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.',
19+
txtButton: 'Llenar formulario para impartir charla',
20+
descriptionExample:
21+
'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.',
22+
},
23+
{
24+
title: 'Escribir / Traducir un Artículo',
25+
description:
26+
'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.',
27+
txtButton: 'Llenar formulario para escribir un artículo',
28+
descriptionExample:
29+
'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.',
30+
},
31+
];
32+
return (
33+
<div className="community-hero-section">
34+
<div className="ec-container">
35+
<h3 className="section__title">¿Cómo ayudar?</h3>
36+
{cards.map((card, idx) => (
37+
<CardSection
38+
title={card.title}
39+
description={card.description}
40+
txtButton={card.txtButton}
41+
descriptionExample={card.descriptionExample}
42+
key={idx}
43+
/>
44+
))}
45+
</div>
46+
</div>
3747
)
3848
}
3949

‎src/data/authors.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
[
2+
{
3+
"rol": "Co-Organizador",
4+
"name": "Richard Palacios G",
5+
"photo": "https://avatars0.githubusercontent.com/u/11642622?v=4",
6+
"github": "https://richardpalaciosg.dev/",
7+
"website": "https://richardpalaciosg.dev/",
8+
"email": "https://richardpalaciosg.dev/",
9+
"twitter": "https://richardpalaciosg.dev/",
10+
"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. "
11+
},
12+
{
13+
"rol": "Co-Organizador",
14+
"name": "Israel Teneda",
15+
"photo": "https://avatars2.githubusercontent.com/u/20668624?v=4",
16+
"github": "https://github.com/israteneda",
17+
"website": "https://github.com/israteneda",
18+
"email": "https://github.com/israteneda",
19+
"twitter": "https://github.com/israteneda",
20+
"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. "
21+
},
22+
{
23+
"rol": "Co-Organizador",
24+
"name": "Edisson Reinozo",
25+
"photo": "https://avatars3.githubusercontent.com/u/14936466?v=4",
26+
"github": "https://github.com/edzzn",
27+
"website": "http://edzzn.com/",
28+
"email": "http://edzzn.com/",
29+
"twitter": "http://edzzn.com/",
30+
"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. "
31+
},
32+
{
33+
"rol": "Co-Organizador",
34+
"name": "Jordan Jaramillo",
35+
"photo": "https://avatars2.githubusercontent.com/u/62086742?v=4",
36+
"github": "https://github.com/jordanrjcode",
37+
"website": "https://github.com/jordanrjcode",
38+
"email": "https://github.com/jordanrjcode",
39+
"twitter": "https://github.com/jordanrjcode",
40+
"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. "
41+
}
42+
]

‎src/pages/blog.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Layout from "../components/layout/layout";
44
import SEO from "../components/seo";
55

66
import { StaticQuery, graphql, Link } from "gatsby";
7-
import { render } from "react-dom";
87

98
function BlogPage(articulos) {
109
return (
@@ -15,7 +14,7 @@ function BlogPage(articulos) {
1514

1615
<ul>
1716
{articulos.map((articulo) => (
18-
<li>
17+
<li key={articulo.id}>
1918
<Link to={`/blog/${articulo.slug}`}>{articulo.title}</Link>
2019
</li>
2120
))}
@@ -33,6 +32,7 @@ function renderBlogPage() {
3332
articulos: allMdx {
3433
edges {
3534
node {
35+
id
3636
slug
3737
frontmatter {
3838
title
@@ -48,6 +48,7 @@ function renderBlogPage() {
4848
return {
4949
...articulo.node.frontmatter,
5050
slug: articulo.node.slug,
51+
id: articulo.node.id,
5152
};
5253
});
5354
return BlogPage(articulosFormateados);

0 commit comments

Comments
 (0)