diff --git a/gatsby-browser.js b/gatsby-browser.js index 473bd59..0d54764 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,2 +1,3 @@ -require("typeface-rubik"); import "./src/css/style.css"; +import "typeface-roboto"; +import "typeface-open-sans"; \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index cc54ba1..3b6bdc5 100644 --- a/gatsby-config.js +++ b/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"), }, }, diff --git a/gatsby-node.js b/gatsby-node.js index e53014f..e421f18 100644 --- a/gatsby-node.js +++ b/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); +}; diff --git a/package-lock.json b/package-lock.json index 09f2865..366dbe0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25454,10 +25454,15 @@ "is-typedarray": "^1.0.0" } }, - "typeface-rubik": { + "typeface-open-sans": { "version": "1.1.13", - "resolved": "https://registry.npmjs.org/typeface-rubik/-/typeface-rubik-1.1.13.tgz", - "integrity": "sha512-mMWgn3bYfT6V4WWA3yvdEM3AkTA7iK1XwhlOX3+vWfqHc6O9I2RUsi9krEXzNdQ1UE/eoEFBRigMtu30PsdEDg==" + "resolved": "https://registry.npmjs.org/typeface-open-sans/-/typeface-open-sans-1.1.13.tgz", + "integrity": "sha512-lVGVHvYl7UJDFB9vN8r7NHw3sVm7Rjeow6b9AeABc/J+2mDaCkmcdVtw3QZnsJW39P+xm5zeggIj9gLHYGn9Iw==" + }, + "typeface-roboto": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-1.1.13.tgz", + "integrity": "sha512-YXvbd3a1QTREoD+FJoEkl0VQNJoEjewR2H11IjVv4bp6ahuIcw0yyw/3udC4vJkHw3T3cUh85FTg8eWef3pSaw==" }, "unbzip2-stream": { "version": "1.4.3", diff --git a/package.json b/package.json index a830aa6..d3a292e 100644 --- a/package.json +++ b/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", diff --git a/src/components/author/author.js b/src/components/author/author.js new file mode 100644 index 0000000..0d03931 --- /dev/null +++ b/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 = ( + + + + ); + } + + let emailIcon = null; + if (email) { + emailIcon = ( + + + + ); + } + return ( +
+
+ {name} +
+
+

{name}

+

{date}

+
+ {githubIcon} + {emailIcon} +
+
+
+ ); +}; + +Author.propTypes = { + name: PropTypes.string, + photo: PropTypes.string, + date: PropTypes.string, + github: PropTypes.string, + email: PropTypes.string, +}; + +export default Author; diff --git a/src/components/author/author.module.css b/src/components/author/author.module.css new file mode 100644 index 0000000..fd6b56c --- /dev/null +++ b/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; +} diff --git a/src/components/community-hero-section/community-hero-section.js b/src/components/community-hero-section/community-hero-section.js index c053411..03b378a 100644 --- a/src/components/community-hero-section/community-hero-section.js +++ b/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 ( -
-
-

¿Cómo ayudar?

- { - cards.map( card => ( - - )) - } -
-
+ 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 ( +
+
+

¿Cómo ayudar?

+ {cards.map((card, idx) => ( + + ))} +
+
) } diff --git a/src/data/authors.json b/src/data/authors.json new file mode 100644 index 0000000..c0d7440 --- /dev/null +++ b/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. " + } +] diff --git a/src/pages/blog.js b/src/pages/blog.js index 6962ff0..c921950 100644 --- a/src/pages/blog.js +++ b/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) {