From 168baea9717a9f9bb6f893324edd21c689b4278d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20Calder=C3=B3n?= Date: Tue, 11 Sep 2018 08:02:36 -0500 Subject: [PATCH] :nail_care: Fix identations and some code structure --- .prettierrc | 5 - gatsby-config.js | 242 +++++++++--------- gatsby-node.js | 121 +++++---- package.json | 134 +++++----- src/components/About/About.js | 86 +++---- src/components/AuthorPost/AuthorPost.js | 2 +- src/components/Card/Card.js | 44 ++-- src/components/ContactForm/ContactForm.js | 26 +- src/components/ContactSocial/ContactSocial.js | 3 +- src/components/Footer/Footer.js | 11 +- src/components/Navbar/Navbar.js | 60 +++-- src/components/PortfolioItem/PortfolioItem.js | 34 +-- src/components/Rotational/Rotational.js | 6 +- src/components/SEO/SEO.js | 145 +++++------ src/components/Share/Share.js | 16 +- src/layouts/index.js | 98 ++++--- src/pages/404.js | 53 ++-- src/pages/blog.js | 108 ++++---- src/pages/contact.js | 30 +-- src/pages/index.js | 93 ++++--- src/pages/portfolio.js | 10 +- src/templates/blogTemplate.js | 58 ++--- src/utils/index.js | 24 +- src/utils/typography.js | 4 +- 24 files changed, 656 insertions(+), 757 deletions(-) delete mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 36301bc5..00000000 --- a/.prettierrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "semi": false, - "singleQuote": true, - "trailingComma": "es5" -} diff --git a/gatsby-config.js b/gatsby-config.js index 121c3e24..6250a7ac 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,128 +1,128 @@ module.exports = { - siteMetadata: { - title: 'Dante Calderón', - author: 'Dante Calderón', - description: 'Dante Hemerson Calderón Vasquez, Programmer', - siteUrl: 'https://dantecalderon.com' - }, - plugins: [ - 'gatsby-plugin-react-helmet', - 'gatsby-plugin-sass', - { - resolve: 'gatsby-plugin-typography', - options: { - pathToConfigModule: 'src/utils/typography.js', - } - - }, - { - resolve: 'gatsby-source-filesystem', - options: { - name: 'img', - path: `${__dirname}/src/assets/images/`, - } - }, - { // Paginas no utilizado aún. - resolve: 'gatsby-source-filesystem', - options: { - name: 'pages', - path: `${__dirname}/src/pages/`, - } - }, - { - resolve: 'gatsby-transformer-remark', - options: { - plugins: [ - { - resolve: `gatsby-remark-images`, - options: { - maxWidth: 590, - sizeByPixelDensity: true, - }, - }, - { - resolve: `gatsby-remark-responsive-iframe`, - options: { - wrapperStyle: `margin-bottom: 1.0725rem`, - }, - }, - { - resolve: `gatsby-remark-autolink-headers`, - options: { - offsetY: `75`, - } - }, - { - resolve: 'gatsby-remark-embed-gist', - options: { - username: 'dantehemerson' - } - }, - { - resolve: 'gatsby-remark-emojis', - options: { - // Deactivate the plugin globally (default: true) - active : true, - // Add a custom css class - class : 'emoji-icon', - // Select the size (available size: 16, 24, 32, 64) - size : 64, - // Add custom styles - styles : { - display : 'inline', - margin : '0', - position : 'relative' - } - } - }, - 'gatsby-remark-external-links', - 'gatsby-remark-prismjs', - 'gatsby-remark-copy-linked-files', - 'gatsby-remark-smartypants', - ], + siteMetadata: { + title: 'Dante Calderón', + author: 'Dante Calderón', + description: 'Dante Hemerson Calderón Vasquez, Programmer', + siteUrl: 'https://dantecalderon.com' + }, + plugins: [ + 'gatsby-plugin-react-helmet', + 'gatsby-plugin-sass', + { + resolve: 'gatsby-plugin-typography', + options: { + pathToConfigModule: 'src/utils/typography.js', + } + }, - }, - 'gatsby-transformer-sharp', - 'gatsby-plugin-sharp', - `gatsby-plugin-catch-links`, - 'gatsby-plugin-sitemap', - 'gatsby-plugin-robots-txt', - { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: 'UA-121858272-1', - head: false, + { + resolve: 'gatsby-source-filesystem', + options: { + name: 'img', + path: `${__dirname}/src/assets/images/`, + } }, - }, - 'gatsby-plugin-netlify-cms', - { - resolve: `gatsby-plugin-netlify`, - options: { - mergeSecurityHeaders: true, - mergeLinkHeaders: true, - mergeCachingHeaders: true, - generateMatchPathRewrites: true, + { // Paginas no utilizado aún. + resolve: 'gatsby-source-filesystem', + options: { + name: 'pages', + path: `${__dirname}/src/pages/`, + } }, - }, - { - resolve: `gatsby-plugin-nprogress`, - options: { - color: '#dcbb72', - showSpinner: false + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: `gatsby-remark-images`, + options: { + maxWidth: 590, + sizeByPixelDensity: true, + }, + }, + { + resolve: `gatsby-remark-responsive-iframe`, + options: { + wrapperStyle: `margin-bottom: 1.0725rem`, + }, + }, + { + resolve: `gatsby-remark-autolink-headers`, + options: { + offsetY: `75`, + } + }, + { + resolve: 'gatsby-remark-embed-gist', + options: { + username: 'dantehemerson' + } + }, + { + resolve: 'gatsby-remark-emojis', + options: { + // Deactivate the plugin globally (default: true) + active: true, + // Add a custom css class + class: 'emoji-icon', + // Select the size (available size: 16, 24, 32, 64) + size: 64, + // Add custom styles + styles: { + display: 'inline', + margin: '0', + position: 'relative' + } + } + }, + 'gatsby-remark-external-links', + 'gatsby-remark-prismjs', + 'gatsby-remark-copy-linked-files', + 'gatsby-remark-smartypants', + ], + }, }, - }, - `gatsby-plugin-offline`, - { - resolve: `gatsby-plugin-manifest`, - options: { - name: 'Dante Calderon', - short_name: 'Dante', - start_url: '/', - background_color: '#DFBD83', - theme_color: '#DFBD83', - display: 'minimal-ui', + 'gatsby-transformer-sharp', + 'gatsby-plugin-sharp', + `gatsby-plugin-catch-links`, + 'gatsby-plugin-sitemap', + 'gatsby-plugin-robots-txt', + { + resolve: `gatsby-plugin-google-analytics`, + options: { + trackingId: 'UA-121858272-1', + head: false, + }, }, - }, - `gatsby-plugin-styled-components`, - ], + 'gatsby-plugin-netlify-cms', + { + resolve: `gatsby-plugin-netlify`, + options: { + mergeSecurityHeaders: true, + mergeLinkHeaders: true, + mergeCachingHeaders: true, + generateMatchPathRewrites: true, + }, + }, + { + resolve: `gatsby-plugin-nprogress`, + options: { + color: '#dcbb72', + showSpinner: false + }, + }, + `gatsby-plugin-offline`, + { + resolve: `gatsby-plugin-manifest`, + options: { + name: 'Dante Calderon', + short_name: 'Dante', + start_url: '/', + background_color: '#DFBD83', + theme_color: '#DFBD83', + display: 'minimal-ui', + }, + }, + `gatsby-plugin-styled-components`, + ], } diff --git a/gatsby-node.js b/gatsby-node.js index d1169657..824525d9 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -4,13 +4,12 @@ const path = require('path') const { createFilePath } = require('gatsby-source-filesystem') exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators - - return new Promise((resolve, reject) => { - const blogPost = path.resolve('./src/templates/blogTemplate.js') - resolve( - graphql( - ` + const { createPage } = boundActionCreators + return new Promise((resolve, reject) => { + const blogPost = path.resolve('./src/templates/blogTemplate.js') + resolve( + graphql( + ` { allMarkdownRemark( sort: { fields: [frontmatter___date], order: DESC } @@ -33,67 +32,65 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } } ` - ).then(result => { - if (result.errors) { - console.log(result.errors) - reject(result.errors) - } + ).then(result => { + if (result.errors) { + console.log(result.errors) + reject(result.errors) + } - const posts = result.data.allMarkdownRemark.edges + const posts = result.data.allMarkdownRemark.edges - _.each(posts, (post, index) => { - const previous = - index === posts.length - 1 ? null : posts[index + 1].node - const next = index === 0 ? null : posts[index - 1].node + _.each(posts, (post, index) => { + const previous = + index === posts.length - 1 ? null : posts[index + 1].node + const next = index === 0 ? null : posts[index - 1].node - createPage({ - path: post.node.frontmatter.path.trim(), - component: blogPost, - context: { - slug: post.node.frontmatter.path, - previous, - next, - }, - }) - }) - }) - ) - }) + createPage({ + path: post.node.frontmatter.path.trim(), + component: blogPost, + context: { + slug: post.node.frontmatter.path, + previous, + next, + }, + }) + }) + }) + ) + }) } exports.onCreateNode = ({ node, boundActionCreators, getNode }) => { - const { createNodeField } = boundActionCreators - const { frontmatter } = node - - if (frontmatter) { - const { thumbnail, model } = frontmatter - if (thumbnail) { - if(model === 'post') { - if (thumbnail.indexOf('/img') === 0) { - createNodeField({ - name: `thumbnail`, - node, - value: `.${thumbnail}`, - }) - } - } - else if(model === 'project') { - createNodeField({ - name: 'thumbnail', - node, - value: `../posts${thumbnail}`, - }) - } - - } - } + const { createNodeField } = boundActionCreators + const { frontmatter } = node + if (frontmatter) { + const { thumbnail, model } = frontmatter + if (thumbnail) { + if (model === 'post') { + if (thumbnail.indexOf('/img') === 0) { + createNodeField({ + name: `thumbnail`, + node, + value: `.${thumbnail}`, + }) + } + } + else if (model === 'project') { + createNodeField({ + name: 'thumbnail', + node, + value: `../posts${thumbnail}`, + }) + } - if (node.internal.type === `MarkdownRemark`) { - createNodeField({ - name: `slug`, - node, - value: `/${frontmatter.path}`, - }) - } + } + } + if (node.internal.type === `MarkdownRemark`) { + createNodeField({ + name: `slug`, + node, + value: `/${frontmatter.path}`, + }) + } } \ No newline at end of file diff --git a/package.json b/package.json index 9a4914ca..cc1ad1a2 100644 --- a/package.json +++ b/package.json @@ -1,68 +1,68 @@ { - "name": "dc-web", - "description": "Gatsby default starter", - "version": "1.0.0", - "author": "Kyle Mathews ", - "dependencies": { - "@clr/icons": "^0.12.10", - "@webcomponents/custom-elements": "^1.0.0", - "ast-get-object": "^1.3.2", - "babel-plugin-styled-components": "^1.6.0", - "bluebird": "^3.5.1", - "gatsby": "^1.9.247", - "gatsby-image": "^1.0.52", - "gatsby-link": "^1.6.40", - "gatsby-plugin-catch-links": "^1.0.24", - "gatsby-plugin-feed": "^1.3.25", - "gatsby-plugin-google-analytics": "^1.0.31", - "gatsby-plugin-manifest": "^1.0.27", - "gatsby-plugin-netlify": "^1.0.21", - "gatsby-plugin-netlify-cms": "^2.0.1", - "gatsby-plugin-nprogress": "^1.0.14", - "gatsby-plugin-offline": "^1.0.18", - "gatsby-plugin-react-helmet": "^2.0.10", - "gatsby-plugin-robots-txt": "^1.2.0", - "gatsby-plugin-sass": "^1.0.26", - "gatsby-plugin-sharp": "^1.6.47", - "gatsby-plugin-sitemap": "^1.2.25", - "gatsby-plugin-styled-components": "^2.0.11", - "gatsby-plugin-typography": "^1.7.18", - "gatsby-remark-autolink-headers": "^1.4.19", - "gatsby-remark-copy-linked-files": "^1.5.37", - "gatsby-remark-embed-gist": "^1.1.2", - "gatsby-remark-emojis": "^0.2.3", - "gatsby-remark-external-links": "0.0.4", - "gatsby-remark-images": "^1.5.67", - "gatsby-remark-prismjs": "^2.0.5", - "gatsby-remark-responsive-iframe": "^1.4.20", - "gatsby-remark-smartypants": "^1.4.12", - "gatsby-source-filesystem": "^1.5.38", - "gatsby-transformer-remark": "^1.7.44", - "gatsby-transformer-sharp": "^1.6.26", - "lodash": "^4.17.10", - "netlify-cms": "^1.9.3", - "prismjs": "^1.15.0", - "react-awesome-button": "^5.0.0", - "react-disqus-comments": "^1.2.0", - "react-helmet": "^5.2.0", - "styled-components": "^3.4.5", - "sweetalert2": "^7.26.9" - }, - "keywords": [ - "gatsby" - ], - "license": "MIT", - "scripts": { - "build": "gatsby build", - "develop": "gatsby develop", - "format": "prettier --write 'src/**/*.js'", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "devDependencies": { - "prettier": "^1.12.0" - }, - "repository": { - "type": "git", - "url": "https://github.com/gatsbyjs/gatsby-starter-default" - } -} + "name": "dc-web", + "description": "Gatsby default starter", + "version": "1.0.0", + "author": "Kyle Mathews ", + "dependencies": { + "@clr/icons": "^0.12.10", + "@webcomponents/custom-elements": "^1.0.0", + "ast-get-object": "^1.3.2", + "babel-plugin-styled-components": "^1.6.0", + "bluebird": "^3.5.1", + "gatsby": "^1.9.247", + "gatsby-image": "^1.0.52", + "gatsby-link": "^1.6.40", + "gatsby-plugin-catch-links": "^1.0.24", + "gatsby-plugin-feed": "^1.3.25", + "gatsby-plugin-google-analytics": "^1.0.31", + "gatsby-plugin-manifest": "^1.0.27", + "gatsby-plugin-netlify": "^1.0.21", + "gatsby-plugin-netlify-cms": "^2.0.1", + "gatsby-plugin-nprogress": "^1.0.14", + "gatsby-plugin-offline": "^1.0.18", + "gatsby-plugin-react-helmet": "^2.0.10", + "gatsby-plugin-robots-txt": "^1.2.0", + "gatsby-plugin-sass": "^1.0.26", + "gatsby-plugin-sharp": "^1.6.47", + "gatsby-plugin-sitemap": "^1.2.25", + "gatsby-plugin-styled-components": "^2.0.11", + "gatsby-plugin-typography": "^1.7.18", + "gatsby-remark-autolink-headers": "^1.4.19", + "gatsby-remark-copy-linked-files": "^1.5.37", + "gatsby-remark-embed-gist": "^1.1.2", + "gatsby-remark-emojis": "^0.2.3", + "gatsby-remark-external-links": "0.0.4", + "gatsby-remark-images": "^1.5.67", + "gatsby-remark-prismjs": "^2.0.5", + "gatsby-remark-responsive-iframe": "^1.4.20", + "gatsby-remark-smartypants": "^1.4.12", + "gatsby-source-filesystem": "^1.5.38", + "gatsby-transformer-remark": "^1.7.44", + "gatsby-transformer-sharp": "^1.6.26", + "lodash": "^4.17.10", + "netlify-cms": "^1.9.3", + "prismjs": "^1.15.0", + "react-awesome-button": "^5.0.0", + "react-disqus-comments": "^1.2.0", + "react-helmet": "^5.2.0", + "styled-components": "^3.4.5", + "sweetalert2": "^7.26.9" + }, + "keywords": [ + "gatsby" + ], + "license": "MIT", + "scripts": { + "build": "gatsby build", + "develop": "gatsby develop", + "format": "prettier --write 'src/**/*.js'", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "devDependencies": { + "prettier": "^1.12.0" + }, + "repository": { + "type": "git", + "url": "https://github.com/gatsbyjs/gatsby-starter-default" + } +} \ No newline at end of file diff --git a/src/components/About/About.js b/src/components/About/About.js index fc22544b..cce6600c 100644 --- a/src/components/About/About.js +++ b/src/components/About/About.js @@ -1,47 +1,47 @@ import React from 'react' import Img from 'gatsby-image' - -class About extends React.Component { - - render() { - return ( -
-
-
-
-

Sobre mí

-

Hola, soy Dante Calderón y programo en Python, por que Python es cool.

-
-
- - -
-
-
- -
-
-
-

Intereses

-
    -
  • Inteligencia Artificial
    • -
  • Machine Learning
    • -
  • Data Science
    • -
  • Competitive Programming
    • -
  • Games Development
    • -
  • Data, data and more data.
    • - {/* -
  • El fascinante mundo de Javascript y Nodejs
    • - */} -
- -
+export default props => ( +
+
+
+
+

Sobre mí

+

+ Hola, soy Dante Calderón y programo en Python, por que Python es cool. +

+
+
+
+
+
+
-
-
- ) - } -} - -export default About \ No newline at end of file +
+
+

Intereses

+
    +
  • + Inteligencia Artificial +
    • +
  • + Machine Learning +
    • +
  • + Data Science +
    • +
  • + Competitive Programming +
    • +
  • + Games Development +
    • +
  • + Data, data and more data +
    • +
+
+
+ +
+) \ No newline at end of file diff --git a/src/components/AuthorPost/AuthorPost.js b/src/components/AuthorPost/AuthorPost.js index d9a269ec..5c9bb5fd 100644 --- a/src/components/AuthorPost/AuthorPost.js +++ b/src/components/AuthorPost/AuthorPost.js @@ -2,7 +2,7 @@ import React from 'react' import Link from 'gatsby-link' import Img from 'gatsby-image' -export default (props) => ( +export default props => (
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js index a36d6030..ae2390fd 100644 --- a/src/components/Card/Card.js +++ b/src/components/Card/Card.js @@ -2,27 +2,23 @@ import React from 'react' import Link from 'gatsby-link' import Img from 'gatsby-image' -class Card extends React.Component { - render() { - return ( -
- - - -
- -

{ this.props.data.title }

- -

- - ·{ this.props.data.timeToRead} min read -

-

{ this.props.data.excerpt }

- Seguir Leyendo ➞ -
-
- ) - } -} - -export default Card \ No newline at end of file +export default props => ( +
+ + + +
+ +

{ props.data.title }

+ +

+ + ·{ props.data.timeToRead} min read +

+

{ props.data.excerpt }

+ + Seguir Leyendo ➞ + +
+
+) \ No newline at end of file diff --git a/src/components/ContactForm/ContactForm.js b/src/components/ContactForm/ContactForm.js index 83e1b0f9..6c204cd1 100644 --- a/src/components/ContactForm/ContactForm.js +++ b/src/components/ContactForm/ContactForm.js @@ -1,10 +1,9 @@ import React from 'react' import Swal from 'sweetalert2' - import { AwesomeButton } from 'react-awesome-button'; -const encode = (data) => { +const encode = data => { return Object.keys(data) .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])) .join("&") @@ -27,7 +26,10 @@ class ContactForm extends React.Component { headers: { "Content-Type": "application/x-www-form-urlencoded" }, - body: encode({ "form-name": "contact", ...this.state }) + body: encode({ + "form-name": "contact", + ...this.state + }) }) .then(() => { Swal({ @@ -43,16 +45,17 @@ class ContactForm extends React.Component { subject: "", message: "" }) - }, + } }) }) - .catch(error => alert("Error")) - + .catch(error => alert("Error al enviar el mensaje. Vuelve a intentarlo.")) e.preventDefault() } - handleChange = e => this.setState({ [e.target.name]: e.target.value }) + handleChange = e => this.setState({ + [e.target.name]: e.target.value + }) render() { const { name, email, subject, message } = this.state @@ -67,7 +70,7 @@ class ContactForm extends React.Component {

Tu nombre

- +
@@ -97,11 +100,10 @@ class ContactForm extends React.Component {
- ENVIAR + size="medium" + type="primary"> + ENVIAR -
diff --git a/src/components/ContactSocial/ContactSocial.js b/src/components/ContactSocial/ContactSocial.js index d1112490..95e2b2a5 100644 --- a/src/components/ContactSocial/ContactSocial.js +++ b/src/components/ContactSocial/ContactSocial.js @@ -1,7 +1,6 @@ import React from 'react' import styled from 'styled-components' - const ContactSocialWrapper = styled.div` text-align: center; ` @@ -26,7 +25,7 @@ const ContactSocialIcon = styled.a` transform: scale(.9); } ` -export default (props) => ( +export default props => ( ( +export default props => ( -) - -export default Footer; \ No newline at end of file +) \ No newline at end of file diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index c1e2f7b0..e63bdf41 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' import Link from 'gatsby-link' -import Img from 'gatsby-image' import Logo from '../../assets/images/logo_letter.png' @@ -22,14 +21,16 @@ class Navbar extends React.Component { } componentDidMount() { + let scrollPosition = document.documentElement.scrollTop const scrollListener = () => { - this.setState({ navbarIsTop: document.body.scrollTop <= 5 && - document.documentElement.scrollTop <= 5 }) + this.setState({ + navbarIsTop: scrollPosition <= 5 + }) } window.addEventListener('scroll', scrollListener) } - handleToggle = (event) => { + handleToggle = event => { this.setState((prevState, props) => { return { menuIsOpen: !prevState.menuIsOpen, @@ -40,50 +41,55 @@ class Navbar extends React.Component { render() { const { menuIsOpen } = this.state return ( -
- { this.setState({menuIsOpen: false}) } } to="/"> + { this.setState({menuIsOpen: false}) } } + to="/">

Dante Calderón

- - -
    +
    • - { this.setState({menuIsOpen: false}) } } className={`Navbar__link ${ this.props.activePage === '' ? 'active' : ''}`} to="/"> - - Inicio + { this.setState({menuIsOpen: false}) } } + className={`Navbar__link ${ this.props.activePage === '' ? 'active' : ''}`} + to="/"> + + Inicio
    • - { this.setState({menuIsOpen: false}) }} className={`Navbar__link ${ this.props.activePage === 'Blog' ? 'active' : ''}`} to="/blog"> - - Blog + { this.setState({menuIsOpen: false}) }} + className={`Navbar__link ${ this.props.activePage === 'Blog' ? 'active' : ''}`} to="/blog"> + + Blog
    • - { this.setState({menuIsOpen: false}) }} className={`Navbar__link ${ this.props.activePage === 'Contact' ? 'active' : ''}`} to="/contact"> - - Contacto + { this.setState({menuIsOpen: false}) }} + className={`Navbar__link ${ this.props.activePage === 'Contact' ? 'active' : ''}`} to="/contact"> + + Contacto
    • - { this.setState({menuIsOpen: false}) }} className={`Navbar__link ${ this.props.activePage === 'Portfolio' ? 'active' : ''}`} to="/portfolio"> - - Portafolio + { this.setState({menuIsOpen: false}) }} + className={`Navbar__link ${ this.props.activePage === 'Portfolio' ? 'active' : ''}`}to="/portfolio"> + + Portafolio
    diff --git a/src/components/PortfolioItem/PortfolioItem.js b/src/components/PortfolioItem/PortfolioItem.js index a09167df..58bee0b4 100644 --- a/src/components/PortfolioItem/PortfolioItem.js +++ b/src/components/PortfolioItem/PortfolioItem.js @@ -116,24 +116,7 @@ const ItemLink = styled(Link)` } ` -const ItemView = styled.p` - color: white; - padding: 10px 40px; - background: #c59d59; - border-radius: 3px; - font-weight: 600; - margin: 0; - &:hover { - background: #a98548; - } - @media (max-width: 575px) { - font-size: .9rem; - padding: 9px 30px; - } -` - const TagsWrapper = styled.div` - ` const Tag = styled(Link)` @@ -156,7 +139,7 @@ const Tag = styled(Link)` } ` -export default (props) => ( +export default props => ( @@ -164,30 +147,25 @@ export default (props) => ( { props.data.title } - + { props.data.subtitle } { - - props.data.tags.map((value, index) => { return ( - - - {" " + value} + + + { " " + value } ) }) - - - } - VER + VER diff --git a/src/components/Rotational/Rotational.js b/src/components/Rotational/Rotational.js index ad35747a..21ee9ec8 100644 --- a/src/components/Rotational/Rotational.js +++ b/src/components/Rotational/Rotational.js @@ -1,7 +1,7 @@ import React from 'react' import Img from 'gatsby-image' -const Rotational = (props) => ( +export default props => (
    @@ -17,6 +17,4 @@ const Rotational = (props) => (
-) - -export default Rotational \ No newline at end of file +) \ No newline at end of file diff --git a/src/components/SEO/SEO.js b/src/components/SEO/SEO.js index 67c5ba57..8614d6cc 100644 --- a/src/components/SEO/SEO.js +++ b/src/components/SEO/SEO.js @@ -5,115 +5,108 @@ import Helmet from 'react-helmet' import avatar from '../../assets/images/avatar.jpg' export default class SEO extends PureComponent { - static propTypes = { title: PropTypes.string, image: PropTypes.string, url: PropTypes.string, description: PropTypes.string, isPost: PropTypes.bool, - }; + } static defaultProps = { title: 'Dante Calderón', - image: `https://dantecalderon.com${avatar}`, // En produccion no añade la url + image: `https://dantecalderon.com${avatar}`, url: 'https://dantecalderon.com/', description: 'Dante Hemerson Calderón Vasquez - Programador', - isPost: false, + isPost: false } render() { const { image, url, description, isPost } = this.props - const title = (this.props.title === "" ? "" : `${this.props.title} · `) + "Dante Calderón" - const schemaOrgJSONLD = [ - { - '@context': 'http://schema.org', - '@type': 'WebSite', - 'sameAs': [ - 'https://twitter.com/dantehemerson', - 'https://www.facebook.com/Dante-Calder%C3%B3n-600909820246917/', - 'https://plus.google.com/u/0/101542534057875808813', - 'https://www.instagram.com/dantehemerson', - 'https://www.github.com/dantehemerson', - 'https://www.linkedin.com/in/dantehemerson', - ], - url: url, - name: title, - alternateName: description, - }, + { + '@context': 'http://schema.org', + '@type': 'WebSite', + 'sameAs': [ + 'https://twitter.com/dantehemerson', + 'https://www.facebook.com/Dante-Calder%C3%B3n-600909820246917/', + 'https://plus.google.com/u/0/101542534057875808813', + 'https://www.instagram.com/dantehemerson', + 'https://www.github.com/dantehemerson', + 'https://www.linkedin.com/in/dantehemerson', + ], + url: url, + name: title, + alternateName: description, + } ] if (isPost) { - schemaOrgJSONLD.push([ - { - '@context': 'http://schema.org', - '@type': 'BreadcrumbList', - 'sameAs': [ - 'https://twitter.com/dantehemerson', - 'https://www.facebook.com/Dante-Calder%C3%B3n-600909820246917/', - 'https://plus.google.com/u/0/101542534057875808813', - 'https://www.instagram.com/dantehemerson', - 'https://www.github.com/dantehemerson', - 'https://www.linkedin.com/in/dantehemerson', - ], - itemListElement: [ - { - '@type': 'ListItem', - position: 1, - item: { - '@id': url, - name: title, - image: image, - }, - }, - ], - }, - { - '@context': 'http://schema.org', - '@type': 'BlogPosting', - 'sameAs': [ - 'https://twitter.com/dantehemerson', - 'https://www.facebook.com/Dante-Calder%C3%B3n-600909820246917/', - 'https://plus.google.com/u/0/101542534057875808813', - 'https://www.instagram.com/dantehemerson', - 'https://www.github.com/dantehemerson', - 'https://www.linkedin.com/in/dantehemerson', - ], - url: url, - name: title, - alternateName: `${url} | Dante Calderón`, - headline: title, - image: { - '@type': 'ImageObject', - url: image, - }, - description, - }, - ]) + schemaOrgJSONLD.push([ + { + '@context': 'http://schema.org', + '@type': 'BreadcrumbList', + 'sameAs': [ + 'https://twitter.com/dantehemerson', + 'https://www.facebook.com/Dante-Calder%C3%B3n-600909820246917/', + 'https://plus.google.com/u/0/101542534057875808813', + 'https://www.instagram.com/dantehemerson', + 'https://www.github.com/dantehemerson', + 'https://www.linkedin.com/in/dantehemerson', + ], + itemListElement: [ + { + '@type': 'ListItem', + position: 1, + item: { + '@id': url, + name: title, + image: image, + } + } + ] + }, + { + '@context': 'http://schema.org', + '@type': 'BlogPosting', + 'sameAs': [ + 'https://twitter.com/dantehemerson', + 'https://www.facebook.com/Dante-Calder%C3%B3n-600909820246917/', + 'https://plus.google.com/u/0/101542534057875808813', + 'https://www.instagram.com/dantehemerson', + 'https://www.github.com/dantehemerson', + 'https://www.linkedin.com/in/dantehemerson', + ], + url: url, + name: title, + alternateName: `${url} | Dante Calderón`, + headline: title, + image: { + '@type': 'ImageObject', + url: image + }, + description, + } + ]) } return ( - - + { title } - - - + + + - {/* Facebook Cards */} - {/* No se si sea mi app id*/} + - {/* Twitter Cards */} diff --git a/src/components/Share/Share.js b/src/components/Share/Share.js index aaf9624b..a22db792 100644 --- a/src/components/Share/Share.js +++ b/src/components/Share/Share.js @@ -1,29 +1,29 @@ import React from 'react' -export default (props) => ( -
( +
+ + (props.show ? "" : " hide") }> - + + `http://www.linkedin.com/shareArticle?url=${ props.url }&isFramed=true&lang=es_ES` } + target="_blank"> diff --git a/src/layouts/index.js b/src/layouts/index.js index a770864a..ac69ad1e 100644 --- a/src/layouts/index.js +++ b/src/layouts/index.js @@ -2,70 +2,60 @@ import React from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' - import Navbar from '../components/Navbar' import Footer from '../components/Footer' - import { actualPage } from '../utils' -// Syntax scheme import 'prismjs/themes/prism-solarizedlight.css' - -import './index.scss' - import '@clr/icons/clr-icons.min.css' import 'react-awesome-button/src/styles/styles.scss' +import './index.scss' class Layout extends React.Component { - static propTypes = { - children: PropTypes.func, - } - - componentDidMount() { - require('@webcomponents/custom-elements/custom-elements.min.js') - require('@clr/icons/clr-icons.min.js') - } - - render() { - const { children, data } = this.props - return ( -
- - - {/* Quitar el 400 de Playfair*/} - - - - - {/** ICONS **/} - - - - - - - - - - - - - - - - - - - -
- {children()} -
-
-
- ) - } + static propTypes = { + children: PropTypes.func, + } + + componentDidMount() { + require('@webcomponents/custom-elements/custom-elements.min.js') + require('@clr/icons/clr-icons.min.js') + } + + render() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ { this.props.children() } +
+
+
+ ) + } } export default Layout \ No newline at end of file diff --git a/src/pages/404.js b/src/pages/404.js index 6ae69ec4..37beea41 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -2,30 +2,29 @@ import React from 'react' import Link from 'gatsby-link' import Helmet from 'react-helmet' -const NotFoundPage = () => ( -
- - {`Error 404(Page Not Found) · Dante Calderón`} - - - - - - - - - - - - - - 404 - 404 - -

Página no encontrada

-

Pareces perdido. Ir a Inicio talvez?.

- -
-) - -export default NotFoundPage +export default props => ( +
+ + {`Error 404(Page Not Found) · Dante Calderón`} + + + + + + + + + + + + + + 404 + 404 + +

Página no encontrada

+

Deseas ir al + Inicio talvez?. +

+
+) \ No newline at end of file diff --git a/src/pages/blog.js b/src/pages/blog.js index 9a503fc2..09f89a43 100644 --- a/src/pages/blog.js +++ b/src/pages/blog.js @@ -1,24 +1,20 @@ import React from 'react' -import Link from 'gatsby-link' import get from 'lodash/get' import Card from '../components/Card' import SEO from '../components/SEO' - class Blog extends React.Component { - render() { - const { data } = this.props + const { data } = this.props const posts = get(this, 'props.data.allMarkdownRemark.edges') || [] const siteTitle = get(this, 'props.data.site.siteMetadata.title') - const siteUrl = get(this, 'props.data.site.siteMetadata.siteUrl') - + const siteUrl = get(this, 'props.data.site.siteMetadata.siteUrl') return (
@@ -26,34 +22,33 @@ class Blog extends React.Component {

Blog

{/* -

Sobre programacion y mas.

*/} -
+
-
+
{ - posts.map(({ node }) => { - if(node.frontmatter.published) - return + posts.map(({ node }) => { + if (node.frontmatter.published) + return }) } -
+
@@ -62,40 +57,39 @@ class Blog extends React.Component { } export const queryBlog = graphql` - query QueryBlog { - site { - siteMetadata { + query QueryBlog { + site { + siteMetadata { title siteUrl - } - } - allMarkdownRemark( - sort: { fields: [frontmatter___date], order: DESC } - filter: { frontmatter: { model: { eq: "post"} }} - ) { - edges { - node { - excerpt(pruneLength: 270) - timeToRead - fields { - thumbnail { - childImageSharp { - sizes { - ...GatsbyImageSharpSizes_withWebp - } - } - } - } - frontmatter { - date(formatString: "DD MMMM, YYYY") - title - path - thumbnail - published - } - } + } } - } + allMarkdownRemark( + sort: { fields: [frontmatter___date], order: DESC } + filter: { frontmatter: { model: { eq: "post"} }}) { + edges { + node { + excerpt(pruneLength: 270) + timeToRead + fields { + thumbnail { + childImageSharp { + sizes { + ...GatsbyImageSharpSizes_withWebp + } + } + } + } + frontmatter { + date(formatString: "DD MMMM, YYYY") + title + path + thumbnail + published + } + } + } + } } ` diff --git a/src/pages/contact.js b/src/pages/contact.js index 0efeb910..cf2ffc70 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -11,7 +11,6 @@ class Contact extends React.Component { const { data } = this.props const siteTitle = get(this, 'props.data.site.siteMetadata.title') const siteUrl = get(this, 'props.data.site.siteMetadata.siteUrl') - return (
-
@@ -43,19 +41,19 @@ class Contact extends React.Component { } export const queryContact = graphql` - query QueryContact { - contactImage: imageSharp(id: {regex: "/contact/"}) { - sizes(maxWidth: 4000) { - ...GatsbyImageSharpSizes_tracedSVG - } - } - site { - siteMetadata { - title - siteUrl - } - } - } + query QueryContact { + contactImage: imageSharp(id: {regex: "/contact/"}) { + sizes(maxWidth: 4000) { + ...GatsbyImageSharpSizes_tracedSVG + } + } + site { + siteMetadata { + title + siteUrl + } + } + } ` -export default Contact +export default Contact \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 4b7ef6f7..7f519585 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,70 +1,65 @@ import React from 'react' +import { AwesomeButton } from 'react-awesome-button' import get from 'lodash/get' import Rotational from '../components/Rotational' import About from '../components/About' import SEO from '../components/SEO' -import { animateScroller } from '../utils' -import { AwesomeButton } from 'react-awesome-button' - class Index extends React.Component { - render() { - const { data } = this.props - const siteTitle = get(this, 'props.data.site.siteMetadata.title') - const siteUrl = get(this, 'props.data.site.siteMetadata.siteUrl') + const siteTitle = get(this, 'props.data.site.siteMetadata.title') + const siteUrl = get(this, 'props.data.site.siteMetadata.siteUrl') return ( -
- -
-
-
-
-

Dante Calderón

-

Programmer

- - SOBRE MÍ - -
-
- -
-
-
-
- -
+
+ +
+
+
+
+

Dante Calderón

+

Programmer

+ + SOBRE MÍ + +
+
+ +
+
+
+
+ +
) } } export const queryHome = graphql` - query QueryHome { - avatar: imageSharp(id: {regex: "/avatar/"}) { - sizes(maxWidth: 720) { - ...GatsbyImageSharpSizes_tracedSVG - } - } - aboutImage: imageSharp(id: {regex: "/about-image/"}) { - sizes(maxWidth: 960) { - ...GatsbyImageSharpSizes - } - } - site { - siteMetadata { + query QueryHome { + avatar: imageSharp(id: {regex: "/avatar/"}) { + sizes(maxWidth: 720) { + ...GatsbyImageSharpSizes_tracedSVG + } + } + aboutImage: imageSharp(id: {regex: "/about-image/"}) { + sizes(maxWidth: 960) { + ...GatsbyImageSharpSizes + } + } + site { + siteMetadata { title siteUrl - } - } - } + } + } + } ` export default Index diff --git a/src/pages/portfolio.js b/src/pages/portfolio.js index 268d1382..b5c63f87 100644 --- a/src/pages/portfolio.js +++ b/src/pages/portfolio.js @@ -11,7 +11,6 @@ class Portfolio extends React.Component { const posts = get(this, 'props.data.allMarkdownRemark.edges') || [] const siteTitle = get(this, 'props.data.site.siteMetadata.title') const siteUrl = get(this, 'props.data.site.siteMetadata.siteUrl') - return (
+ mode="portfolio"/>
) }) @@ -64,8 +62,8 @@ export const queryPortfolio = graphql` query QueryPortfolio { site { siteMetadata { - title - siteUrl + title + siteUrl } } diff --git a/src/templates/blogTemplate.js b/src/templates/blogTemplate.js index 594f045d..e265808b 100644 --- a/src/templates/blogTemplate.js +++ b/src/templates/blogTemplate.js @@ -1,9 +1,6 @@ import React from 'react' import Img from 'gatsby-image' import get from 'lodash/get' -import head from 'lodash/head' -import last from 'lodash/last' -import split from 'lodash/split' import getObj from 'ast-get-object' import ReactDisqusComments from 'react-disqus-comments' @@ -19,7 +16,6 @@ export const Post = ({ content, frontmatter, previous, next, siteTitle, image, s

{ frontmatter.title }

- {/*

{ frontmatter.date }

*/}
-
@@ -46,7 +41,6 @@ export const Post = ({ content, frontmatter, previous, next, siteTitle, image, s timeToRead={timeToRead} avatar={avatar} /> -
@@ -56,10 +50,10 @@ export const Post = ({ content, frontmatter, previous, next, siteTitle, image, s export default class BlogPostTemplate extends React.Component { state = { location: '', - show_share: false, + show_share: false } + componentDidMount() { - /* Remueve los underlines de los links que contienen imagen */ let links = document.getElementsByTagName('a') for (const link of links) { if(link.getElementsByTagName('img').length > 0 || link.getElementsByTagName('svg').length > 0 ) { @@ -67,26 +61,22 @@ export default class BlogPostTemplate extends React.Component { } } this.setState({ location: window.location.href }) - - // SHOW HIDE SHARE FIXED let body = document.documentElement let contentY = document.getElementById('Post_content').offsetTop let height = document.getElementById('Post_content').clientHeight const scrollListenerShare = () => { - let y = body.scrollTop - contentY + 110 // 60 para el navbar + let y = body.scrollTop - contentY + 110 let show = y >= 0 && y - 0 <= height - 340 if(this.state.show_share != show) { this.setState({ 'show_share': show }) } } + window.addEventListener('scroll', scrollListenerShare) } - handleNewComment = (comment) => { - console.log(comment.text); - } render() { const post = this.props.data.markdownRemark const siteMetadata = get(this.props, 'data.site.siteMetadata') @@ -96,38 +86,36 @@ export default class BlogPostTemplate extends React.Component { return (
-
- { post.frontmatter.model === 'post' && + { post.frontmatter.model === 'post' &&
+ shortname="dantecalderon" + identifier={ post.frontmatter.path } + title={ post.frontmatter.title } + url={ this.state.location }/>
}
+ title={post.frontmatter.title} + url={`https://dantecalderon.com/` + post.frontmatter.path}/>
) } @@ -137,7 +125,7 @@ export const pageQuery = graphql` query BlogPostBySlug($slug: String!) { avatar: imageSharp(id: {regex: "/avatar/"}) { sizes(maxWidth: 720) { - ...GatsbyImageSharpSizes_tracedSVG + ...GatsbyImageSharpSizes_tracedSVG } } site { diff --git a/src/utils/index.js b/src/utils/index.js index bd9797bd..70decce6 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,31 +1,11 @@ - -function animateScroller(targetHeight) { - targetHeight = document.body.scrollHeight - window.innerHeight > targetHeight + scrollY ? - targetHeight : document.body.scrollHeight - window.innerHeight; - var initialPosition = window.scrollY; - var SCROLL_DURATION = 27; - var step_x = Math.PI / SCROLL_DURATION; - var step_count = 0; - requestAnimationFrame(step); - function step() { - if (step_count < SCROLL_DURATION) { - requestAnimationFrame(step); - step_count++; - window.scrollTo(0, initialPosition + targetHeight * 0.25 * Math.pow((1 - Math.cos(step_x * step_count)), 2)); - } - } -} - const actualPage = (pathname) => { while(pathname[pathname.length - 1] === '/') { pathname = pathname.slice(0, pathname.length - 1); } - // Pathname no tiene / al final const title = pathname.slice(pathname.lastIndexOf('/') + 1).replace(/\b\w/g, l => l.toUpperCase()) return title } -export { - animateScroller, - actualPage +export { + actualPage } diff --git a/src/utils/typography.js b/src/utils/typography.js index 617f5357..eed42dfc 100644 --- a/src/utils/typography.js +++ b/src/utils/typography.js @@ -1,8 +1,8 @@ - import Typography from 'typography' +import Typography from 'typography' const typography = new Typography({ headerFontFamily: ['Playfair Display', 'serif'], - bodyFontFamily: ['Open Sans', 'sans-serif'], + bodyFontFamily: ['Open Sans', 'sans-serif'] }) export default typography \ No newline at end of file