From 02cae0f81ea934cbd1bf96722a741fa34db2b164 Mon Sep 17 00:00:00 2001 From: David Date: Tue, 27 Oct 2020 00:25:47 -0500 Subject: [PATCH 1/2] fix: arreglo del font weight de la pagina Arreglo del font weight de la pagina que se encontraba completmente en bold --- gatsby-browser.js | 3 +- gatsby-config.js | 4 +- package-lock.json | 11 ++- package.json | 3 +- .../community-hero-section.js | 72 +++++++++++-------- 5 files changed, 55 insertions(+), 38 deletions(-) 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..1252790 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`, 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/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) => ( + + ))} +
+
) } From 7c8e50d9a86c8196c2b67adcfeb614a92b0522e1 Mon Sep 17 00:00:00 2001 From: David Date: Tue, 27 Oct 2020 00:27:35 -0500 Subject: [PATCH 2/2] feat(blog): crear template para entrada del blog creacion de template para entrada del blog --- gatsby-config.js | 1 - gatsby-node.js | 20 ++++++--- src/components/author/author.js | 50 +++++++++++++++++++++ src/components/author/author.module.css | 41 +++++++++++++++++ src/data/authors.json | 42 ++++++++++++++++++ src/pages/blog.js | 5 ++- src/pages/blog/gatsby-deploy.mdx | 1 + src/templates/blog-entry.js | 58 +++++++++++++++---------- src/templates/blog-entry.module.css | 8 ++++ 9 files changed, 194 insertions(+), 32 deletions(-) create mode 100644 src/components/author/author.js create mode 100644 src/components/author/author.module.css create mode 100644 src/data/authors.json create mode 100644 src/templates/blog-entry.module.css diff --git a/gatsby-config.js b/gatsby-config.js index 1252790..3b6bdc5 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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/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/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) {