From 4fc4c1efa4db72898ea7a0b65390c414503eea11 Mon Sep 17 00:00:00 2001 From: Omar Flores Grimontt Date: Wed, 18 Mar 2020 19:00:15 -0500 Subject: [PATCH 1/8] Fixed project name and version in package-lock.json --- package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 76f42b2..4143041 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "gatsby-starter-blog", - "version": "0.1.0", + "name": "platzimaster.github.io", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { From 3abb8aef6b0e4bd7880ce2525b6a5c99bae1c94c Mon Sep 17 00:00:00 2001 From: Omar Flores Grimontt Date: Sun, 29 Mar 2020 19:14:26 -0500 Subject: [PATCH 2/8] [FEATURE] Created search component for articles --- src/components/search.js | 24 ++++++++++++++++++++++++ src/pages/index.js | 10 ++++++++-- src/styles/components/search.css | 17 +++++++++++++++++ 3 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 src/components/search.js create mode 100644 src/styles/components/search.css diff --git a/src/components/search.js b/src/components/search.js new file mode 100644 index 0000000..bba3026 --- /dev/null +++ b/src/components/search.js @@ -0,0 +1,24 @@ +import React from 'react'; +import '../styles/components/search.css' + +const Search = ({ posts, filterHandler }) => { + + const onChangeHandler = event => { + const value = event.target.value.toUpperCase() + const filtered = posts.filter(({ node }) => { + const title = node.frontmatter.title || node.fields.slug + return title.toUpperCase().includes(value) + }) + filterHandler(filtered) + } + + return ( + + ); +} + +export default Search; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 8ace571..304ad5d 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,18 +1,24 @@ -import React from "react" +import React, { useState } from "react" import { Link, graphql } from "gatsby" import Layout from "../components/layout" +import Search from "../components/search" import SEO from "../components/seo" import { rhythm } from "../utils/typography" const BlogIndex = ({ data, location }) => { const siteTitle = data.site.siteMetadata.title const posts = data.allMarkdownRemark.edges + const [filteredPosts, setFilteredPosts] = useState(posts) return ( - {posts.map(({ node }) => { + + {filteredPosts.map(({ node }) => { const title = node.frontmatter.title || node.fields.slug return (
diff --git a/src/styles/components/search.css b/src/styles/components/search.css new file mode 100644 index 0000000..587b575 --- /dev/null +++ b/src/styles/components/search.css @@ -0,0 +1,17 @@ +.search { + border: none; + border-radius: 5px; + font-size: 12px; + font-weight: 300; + outline: none; + padding: 8px 0px 8px 16px; + width: 100%; + background-color: #eaeaea; + font-weight: 500; + padding: 8px 16px; + margin-top: 2em; +} + +.search, .search::placeholder { + color: #444444; +} \ No newline at end of file From ac5542ee9c95dc8ce1c2def32325c77213cc1319 Mon Sep 17 00:00:00 2001 From: Omar Flores Grimontt Date: Sun, 29 Mar 2020 19:24:55 -0500 Subject: [PATCH 3/8] [FIX] Removed unnecesary styles --- src/styles/components/search.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/styles/components/search.css b/src/styles/components/search.css index 587b575..ca5fad7 100644 --- a/src/styles/components/search.css +++ b/src/styles/components/search.css @@ -1,10 +1,7 @@ .search { border: none; border-radius: 5px; - font-size: 12px; - font-weight: 300; outline: none; - padding: 8px 0px 8px 16px; width: 100%; background-color: #eaeaea; font-weight: 500; From 957a6e287956607cebac76ff4e794ef1262ceb47 Mon Sep 17 00:00:00 2001 From: Omar Flores Grimontt Date: Wed, 1 Apr 2020 19:14:50 -0500 Subject: [PATCH 4/8] [FIX] Added min height to main label --- src/components/layout.js | 2 +- src/styles/components/layout.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/layout.js b/src/components/layout.js index 0d306dd..8fc7f57 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -17,7 +17,7 @@ const Layout = ({ children }) => { Platzi Master -
{children}
+
{children}
diff --git a/src/styles/components/layout.css b/src/styles/components/layout.css index e33bcef..921bffc 100644 --- a/src/styles/components/layout.css +++ b/src/styles/components/layout.css @@ -5,6 +5,10 @@ height: 64px; } +.layout__main { + min-height: calc(100vh - 185px); +} + a { text-decoration: none; box-shadow: none; From 9b0e54398e0b8bb730ddd0e0ac06b12c41b61842 Mon Sep 17 00:00:00 2001 From: Omar Flores Grimontt Date: Wed, 1 Apr 2020 19:44:53 -0500 Subject: [PATCH 5/8] Added linting --- .eslintignore | 1 + .eslintrc.js | 204 +++++++++++++++++++++++++++++++++++++ bin/newpost.js | 16 ++- gatsby-browser.js | 6 +- gatsby-config.js | 66 ++++++------ gatsby-node.js | 38 +++---- package-lock.json | 87 +++++++++++----- package.json | 7 ++ src/components/layout.js | 22 ++-- src/components/search.js | 24 ++--- src/components/seo.js | 48 ++++----- src/pages/404.js | 20 ++-- src/pages/index.js | 42 ++++---- src/templates/blog-post.js | 43 ++++---- src/utils/gravatar.js | 6 +- src/utils/typography.js | 26 ++--- 16 files changed, 457 insertions(+), 199 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..096746c --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +/node_modules/ \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..fb5cde0 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,204 @@ +module.exports = { + env: { + browser: true, + es6: true, + }, + extends: [ + 'plugin:react/recommended', + 'airbnb', + ], + globals: { + Atomics: 'readonly', + SharedArrayBuffer: 'readonly', + }, + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 2018, + sourceType: 'module', + }, + plugins: [ + 'react', + ], + rules: { + "react/jsx-filename-extension": 0, + "array-bracket-spacing": 2, + "arrow-body-style": 0, + "block-scoped-var": 2, + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + "comma-spacing": [2, { "before": false, "after": true }], + "comma-style": [2, "last"], + "complexity": 0, + "consistent-return": 1, + "consistent-this": 0, + "curly": [2, "multi-line"], + "default-case": 0, + "dot-location": [2, "property"], + "dot-notation": 0, + "eol-last": 2, + "eqeqeq": [2, "allow-null"], + "func-names": 0, + "func-style": 0, + "generator-star-spacing": [2, "both"], + "guard-for-in": 0, + "handle-callback-err": [2, "^(err|error|anySpecificError)$" ], + "indent": [2, 2, { "SwitchCase": 1 }], + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "linebreak-style": 0, + "max-depth": 0, + "max-len": [2, 1550, 4], + "max-nested-callbacks": 0, + "max-params": 0, + "max-statements": 0, + "new-cap": [2, { "newIsCap": true, "capIsNew": false }], + "newline-after-var": [0, "never"], + "new-parens": 2, + "no-alert": 0, + "no-array-constructor": 2, + "no-bitwise": 0, + "no-caller": 2, + "no-catch-shadow": 0, + "no-cond-assign": 2, + "no-console": 0, + "no-constant-condition": 0, + "no-continue": 0, + "no-control-regex": 2, + "no-debugger": 0, + "no-delete-var": 2, + "no-div-regex": 0, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-else-return": 2, + "no-empty": 0, + "no-empty-character-class": 2, + "no-labels": 2, + "no-eq-null": 0, + "no-eval": 2, + "no-ex-assign": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-extra-boolean-cast": 2, + "no-extra-parens": 0, + "no-extra-semi": 0, + "no-extra-strict": 0, + "no-fallthrough": 2, + "no-floating-decimal": 2, + "no-func-assign": 2, + "no-implied-eval": 2, + "no-inline-comments": 0, + "no-inner-declarations": [2, "functions"], + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-lone-blocks": 0, + "no-lonely-if": 0, + "no-loop-func": 0, + "no-mixed-requires": 0, + "no-mixed-spaces-and-tabs": [2, false], + "no-multi-spaces": 2, + "no-multi-str": 0, + "no-multiple-empty-lines": [2, { "max": 1 }], + "no-native-reassign": 2, + "no-negated-in-lhs": 2, + "no-nested-ternary": 0, + "no-new": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-require": 2, + "no-new-wrappers": 2, + "no-obj-calls": 2, + "no-octal": 2, + "no-octal-escape": 2, + "no-path-concat": 0, + "no-plusplus": 0, + "no-process-env": 0, + "no-process-exit": 0, + "no-proto": 2, + "no-redeclare": 2, + "no-regex-spaces": 2, + "no-reserved-keys": 0, + "no-restricted-modules": 0, + "no-script-url": 0, + "no-self-compare": 2, + "no-sequences": 2, + "no-shadow": 0, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-sparse-arrays": 2, + "no-sync": 0, + "no-ternary": 0, + "no-throw-literal": 2, + "no-trailing-spaces": 2, + "no-undef": 0, + "no-undef-init": 2, + "no-undefined": 0, + "no-underscore-dangle": 0, + "no-unneeded-ternary": 2, + "no-unreachable": 2, + "no-unused-expressions": 0, + "no-unused-vars": [2, { "vars": "all", "args": "none" }], + "no-var": 2, + "no-void": 0, + "no-warning-comments": 0, + "no-with": 2, + "object-curly-newline": 0, + "object-curly-spacing": [2, "always"], + "one-var": 0, + "operator-assignment": 0, + "operator-linebreak": [2, "after"], + "padded-blocks": 0, + "prefer-const": 2, + "quote-props": 0, + "quotes": [2, "single", "avoid-escape"], + "radix": 2, + "jsx-quotes": [2, "prefer-single"], + "jsx-a11y/click-events-have-key-events": 0, + "jsx-a11y/no-noninteractive-element-interactions": 0, + "jsx-a11y/media-has-caption": 0, + "react/display-name": 0, + "react/jsx-boolean-value": 0, + "react/jsx-closing-bracket-location": 2, + "react/jsx-curly-spacing": [2, "never"], + "react/jsx-equals-spacing": [2, "never"], + "react/jsx-indent-props": [2, 2], + "react/jsx-no-bind": [2, { "allowArrowFunctions": true }], + "react/jsx-no-undef": 2, + "react/jsx-pascal-case": 2, + "react/jsx-sort-prop-types": 0, + "react/jsx-sort-props": 0, + "react/jsx-uses-react": 2, + "react/jsx-uses-vars": 2, + "react/no-did-mount-set-state": 2, + "react/no-did-update-set-state": 2, + "react/no-multi-comp": 0, + "react/no-unknown-property": 2, + "react/prop-types": 0, + "react/forbid-prop-types": 0, + "react/prefer-stateless-function": 0, + "react/require-default-props": 0, + "react/react-in-jsx-scope": 2, + "react/self-closing-comp": 2, + "react/sort-comp": 0, + "react/jsx-wrap-multilines": 2, + "semi-spacing": 0, + "sort-vars": 0, + "space-before-blocks": [2, "always"], + "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], + "space-in-parens": [2, "never"], + "space-infix-ops": 2, + "keyword-spacing": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "spaced-comment": [0, "always"], + "strict": 0, + "use-isnan": 2, + "valid-jsdoc": 0, + "valid-typeof": 2, + "vars-on-top": 2, + "wrap-iife": [2, "any"], + "wrap-regex": 0, + "yoda": [2, "never"] + }, +}; diff --git a/bin/newpost.js b/bin/newpost.js index 00865d2..f6809bc 100644 --- a/bin/newpost.js +++ b/bin/newpost.js @@ -2,26 +2,24 @@ const readline = require('readline'); const exec = require('child_process').execSync; const fs = require('fs'); - const rl = readline.Interface({ input: process.stdin, - output: process.stdout + output: process.stdout, }); const postData = {}; -rl.question('Title: ', answer1 => { +rl.question('Title: ', (answer1) => { postData['title'] = answer1; - rl.question('Description: ', answer2 => { + rl.question('Description: ', (answer2) => { postData['description'] = answer2; - rl.question('Platzi user: ', answer3 => { + rl.question('Platzi user: ', (answer3) => { postData['platziUser'] = answer3; rl.close(); }); }); }); - rl.on('close', () => { const now = new Date(); const regexDigitsInDate = /([0-9]{2})/g; @@ -46,9 +44,9 @@ rl.on('close', () => { } try { - fs.statSync(`content/${DigitsInDate[0]}${DigitsInDate[1]}/${postData.fileName}`) + fs.statSync(`content/${DigitsInDate[0]}${DigitsInDate[1]}/${postData.fileName}`); console.error('Error!!: The post has already been created'); - } catch(err) { + } catch (err) { fs.writeFileSync(`content/${DigitsInDate[0]}${DigitsInDate[1]}/${postData.fileName}`, `--- title: '${postData.title}' date: '${postData.date}' @@ -59,4 +57,4 @@ platziUser: '${postData.platziUser}' ---`); console.log(`Success!!: content/${DigitsInDate[0]}${DigitsInDate[1]}/${postData.fileName} was created`); } -}); \ No newline at end of file +}); diff --git a/gatsby-browser.js b/gatsby-browser.js index 3eae868..28c7889 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,5 +1,5 @@ // custom typefaces -import "typeface-montserrat" -import "typeface-merriweather" +import 'typeface-montserrat'; +import 'typeface-merriweather'; -import "prismjs/themes/prism.css" +import 'prismjs/themes/prism.css'; diff --git a/gatsby-config.js b/gatsby-config.js index 263e802..30e409a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,80 +1,80 @@ module.exports = { siteMetadata: { - title: `Platzi Master`, + title: 'Platzi Master', author: { - name: `Platzi Master`, - summary: `Conocimiento colectivo.`, + name: 'Platzi Master', + summary: 'Conocimiento colectivo.', }, - description: `Conocimiento colectivo.`, - siteUrl: `https://platzimaster.github.io/`, + description: 'Conocimiento colectivo.', + siteUrl: 'https://platzimaster.github.io/', social: { - twitter: `platzi`, + twitter: 'platzi', }, }, plugins: [ { - resolve: `gatsby-source-filesystem`, + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/content/`, - name: `blog`, + name: 'blog', }, }, { - resolve: `gatsby-source-filesystem`, + resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/assets`, - name: `assets`, + name: 'assets', }, }, { - resolve: `gatsby-transformer-remark`, + resolve: 'gatsby-transformer-remark', options: { plugins: [ { - resolve: `gatsby-remark-images`, + resolve: 'gatsby-remark-images', options: { maxWidth: 590, }, }, { - resolve: `gatsby-remark-responsive-iframe`, + resolve: 'gatsby-remark-responsive-iframe', options: { - wrapperStyle: `margin-bottom: 1.0725rem`, + wrapperStyle: 'margin-bottom: 1.0725rem', }, }, - `gatsby-remark-prismjs`, - `gatsby-remark-copy-linked-files`, - `gatsby-remark-smartypants`, + 'gatsby-remark-prismjs', + 'gatsby-remark-copy-linked-files', + 'gatsby-remark-smartypants', ], }, }, - `gatsby-transformer-sharp`, - `gatsby-plugin-sharp`, + 'gatsby-transformer-sharp', + 'gatsby-plugin-sharp', { - resolve: `gatsby-plugin-google-analytics`, + resolve: 'gatsby-plugin-google-analytics', options: { //trackingId: `ADD YOUR TRACKING ID HERE`, }, }, - `gatsby-plugin-feed`, + 'gatsby-plugin-feed', { - resolve: `gatsby-plugin-manifest`, + resolve: 'gatsby-plugin-manifest', options: { - name: `Gatsby Starter Blog`, - short_name: `GatsbyJS`, - start_url: `/`, - background_color: `#ffffff`, - theme_color: `#663399`, - display: `minimal-ui`, - icon: `assets/platzimaster-icon.png`, + name: 'Gatsby Starter Blog', + short_name: 'GatsbyJS', + start_url: '/', + background_color: '#ffffff', + theme_color: '#663399', + display: 'minimal-ui', + icon: 'assets/platzimaster-icon.png', }, }, - `gatsby-plugin-react-helmet`, + 'gatsby-plugin-react-helmet', { - resolve: `gatsby-plugin-typography`, + resolve: 'gatsby-plugin-typography', options: { - pathToConfigModule: `src/utils/typography`, + pathToConfigModule: 'src/utils/typography', }, }, ], -} +}; diff --git a/gatsby-node.js b/gatsby-node.js index 9309655..e117054 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,10 +1,10 @@ -const path = require(`path`) -const { createFilePath } = require(`gatsby-source-filesystem`) +const path = require('path'); +const { createFilePath } = require('gatsby-source-filesystem'); exports.createPages = async ({ graphql, actions }) => { - const { createPage } = actions + const { createPage } = actions; - const blogPost = path.resolve(`./src/templates/blog-post.js`) + const blogPost = path.resolve('./src/templates/blog-post.js'); const result = await graphql( ` { @@ -24,19 +24,19 @@ exports.createPages = async ({ graphql, actions }) => { } } } - ` - ) + `, + ); if (result.errors) { - throw result.errors + throw result.errors; } // Create blog posts pages. - const posts = result.data.allMarkdownRemark.edges + const posts = result.data.allMarkdownRemark.edges; posts.forEach((post, index) => { - const previous = index === posts.length - 1 ? null : posts[index + 1].node - const next = index === 0 ? null : posts[index - 1].node + const previous = index === posts.length - 1 ? null : posts[index + 1].node; + const next = index === 0 ? null : posts[index - 1].node; createPage({ path: post.node.fields.slug, @@ -46,19 +46,19 @@ exports.createPages = async ({ graphql, actions }) => { previous, next, }, - }) - }) -} + }); + }); +}; exports.onCreateNode = ({ node, actions, getNode }) => { - const { createNodeField } = actions + const { createNodeField } = actions; - if (node.internal.type === `MarkdownRemark`) { - const value = createFilePath({ node, getNode }) + if (node.internal.type === 'MarkdownRemark') { + const value = createFilePath({ node, getNode }); createNodeField({ - name: `slug`, + name: 'slug', node, value, - }) + }); } -} +}; diff --git a/package-lock.json b/package-lock.json index 4143041..5f0e78c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -915,9 +915,9 @@ } }, "@babel/runtime-corejs3": { - "version": "7.8.7", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.8.7.tgz", - "integrity": "sha512-sc7A+H4I8kTd7S61dgB9RomXu/C+F4IrRr4Ytze4dnfx7AXEpCrejSNpjx7vq6y/Bak9S6Kbk65a/WgMLtg43Q==", + "version": "7.9.2", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz", + "integrity": "sha512-HHxmgxbIzOfFlZ+tdeRKtaxWOMUoCG5Mu3wKeUmOxjYrwb3AAHgnmtCUbPPK11/raIWLIBK250t8E2BPO0p7jA==", "requires": { "core-js-pure": "^3.0.0", "regenerator-runtime": "^0.13.4" @@ -5555,9 +5555,9 @@ } }, "glob-parent": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz", - "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", "requires": { "is-glob": "^4.0.1" } @@ -5600,6 +5600,28 @@ } } }, + "eslint-config-airbnb": { + "version": "18.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz", + "integrity": "sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==", + "dev": true, + "requires": { + "eslint-config-airbnb-base": "^14.1.0", + "object.assign": "^4.1.0", + "object.entries": "^1.1.1" + } + }, + "eslint-config-airbnb-base": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.1.0.tgz", + "integrity": "sha512-+XCcfGyCnbzOnktDVhwsCAx+9DmrzEmuwxyHUJpw+kqBVT744OUBrB09khgFKlK1lshVww6qXGsYPZpavoNjJw==", + "dev": true, + "requires": { + "confusing-browser-globals": "^1.0.9", + "object.assign": "^4.1.0", + "object.entries": "^1.1.1" + } + }, "eslint-config-react-app": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.0.tgz", @@ -5655,9 +5677,9 @@ } }, "eslint-module-utils": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.5.2.tgz", - "integrity": "sha512-LGScZ/JSlqGKiT8OC+cYRxseMjyqt6QO54nl281CK93unD89ijSeRV6An8Ci/2nvWVKe8K/Tqdm75RQoIOCr+Q==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz", + "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==", "requires": { "debug": "^2.6.9", "pkg-dir": "^2.0.0" @@ -5742,9 +5764,9 @@ } }, "eslint-plugin-import": { - "version": "2.20.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz", - "integrity": "sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==", + "version": "2.20.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz", + "integrity": "sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==", "requires": { "array-includes": "^3.0.3", "array.prototype.flat": "^1.2.1", @@ -5835,9 +5857,10 @@ } }, "eslint-plugin-react-hooks": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz", - "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==" + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz", + "integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==", + "dev": true }, "eslint-scope": { "version": "5.0.0", @@ -5862,11 +5885,11 @@ "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==" }, "espree": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.0.tgz", - "integrity": "sha512-Xs8airJ7RQolnDIbLtRutmfvSsAe0xqMMAantCN/GMoqf81TFbeI1T7Jpd56qYu1uuh32dOG5W/X9uO+ghPXzA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz", + "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==", "requires": { - "acorn": "^7.1.0", + "acorn": "^7.1.1", "acorn-jsx": "^5.2.0", "eslint-visitor-keys": "^1.1.0" } @@ -5877,11 +5900,18 @@ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" }, "esquery": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.1.0.tgz", - "integrity": "sha512-MxYW9xKmROWF672KqjO75sszsA8Mxhw06YFeS5VHlB98KDHbOSurm3ArsjO60Eaf3QmGMCP1yn+0JQkNLo/97Q==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.2.0.tgz", + "integrity": "sha512-weltsSqdeWIX9G2qQZz7KlTRJdkkOCTPgLYJUz1Hacf48R4YOwGPHO3+ORfWedqJKbq5WQmsgK90n+pFLIKt/Q==", "requires": { - "estraverse": "^4.0.0" + "estraverse": "^5.0.0" + }, + "dependencies": { + "estraverse": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.0.0.tgz", + "integrity": "sha512-j3acdrMzqrxmJTNj5dbr1YbjacrYgAxVMeF0gK16E3j494mOe7xygM/ZLIguEQ0ETwAg2hlJCtHRGav+y0Ny5A==" + } } }, "esrecurse": { @@ -6649,9 +6679,9 @@ } }, "flatted": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz", - "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==" + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz", + "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==" }, "flush-write-stream": { "version": "1.1.1", @@ -7447,6 +7477,11 @@ } } }, + "eslint-plugin-react-hooks": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz", + "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==" + }, "gatsby-cli": { "version": "2.10.4", "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.10.4.tgz", diff --git a/package.json b/package.json index 386ae10..71a5ce7 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "gatsby-transformer-sharp": "^2.3.13", "md5": "^2.2.1", "prismjs": "^1.19.0", + "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^5.2.1", @@ -37,6 +38,12 @@ "typography-theme-wordpress-2016": "^0.16.19" }, "devDependencies": { + "eslint": "^6.8.0", + "eslint-config-airbnb": "^18.1.0", + "eslint-plugin-import": "^2.20.2", + "eslint-plugin-jsx-a11y": "^6.2.3", + "eslint-plugin-react": "^7.19.0", + "eslint-plugin-react-hooks": "^2.5.1", "prettier": "^1.19.1" }, "homepage": "https://platzimaster.github.io/", diff --git a/src/components/layout.js b/src/components/layout.js index 8fc7f57..d8da957 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,28 +1,32 @@ -import React from "react"; -import { rhythm } from "../utils/typography"; +import React from 'react'; +import { rhythm } from '../utils/typography'; import '../styles/components/layout.css'; const Layout = ({ children }) => { return (
- - Platzi Master + + Platzi Master
-
{children}
+
{children}
- ) + ); }; export default Layout; diff --git a/src/components/search.js b/src/components/search.js index bba3026..176f68e 100644 --- a/src/components/search.js +++ b/src/components/search.js @@ -1,24 +1,24 @@ import React from 'react'; -import '../styles/components/search.css' +import '../styles/components/search.css'; const Search = ({ posts, filterHandler }) => { - const onChangeHandler = event => { - const value = event.target.value.toUpperCase() + const onChangeHandler = (event) => { + const value = event.target.value.toUpperCase(); const filtered = posts.filter(({ node }) => { - const title = node.frontmatter.title || node.fields.slug - return title.toUpperCase().includes(value) - }) - filterHandler(filtered) - } + const title = node.frontmatter.title || node.fields.slug; + return title.toUpperCase().includes(value); + }); + filterHandler(filtered); + }; return ( ); -} +}; -export default Search; \ No newline at end of file +export default Search; diff --git a/src/components/seo.js b/src/components/seo.js index d6f52be..37e9f1e 100644 --- a/src/components/seo.js +++ b/src/components/seo.js @@ -1,7 +1,7 @@ -import React from "react" -import PropTypes from "prop-types" -import Helmet from "react-helmet" -import { useStaticQuery, graphql } from "gatsby" +import React from 'react'; +import PropTypes from 'prop-types'; +import Helmet from 'react-helmet'; +import { useStaticQuery, graphql } from 'gatsby'; const SEO = ({ description, lang, meta, title }) => { const { site } = useStaticQuery( @@ -15,10 +15,10 @@ const SEO = ({ description, lang, meta, title }) => { } } } - ` - ) + `, + ); - const metaDescription = description || site.siteMetadata.description + const metaDescription = description || site.siteMetadata.description; return ( { titleTemplate={`%s | ${site.siteMetadata.title}`} meta={[ { - name: `description`, + name: 'description', content: metaDescription, }, { - property: `og:title`, + property: 'og:title', content: title, }, { - property: `og:description`, + property: 'og:description', content: metaDescription, }, { - property: `og:type`, - content: `website`, + property: 'og:type', + content: 'website', }, { - name: `twitter:card`, - content: `summary`, + name: 'twitter:card', + content: 'summary', }, { - name: `twitter:creator`, + name: 'twitter:creator', content: site.siteMetadata.social.twitter, }, { - name: `twitter:title`, + name: 'twitter:title', content: title, }, { - name: `twitter:description`, + name: 'twitter:description', content: metaDescription, }, ].concat(meta)} /> - ) -} + ); +}; SEO.defaultProps = { - lang: `en`, + lang: 'en', meta: [], - description: ``, -} + description: '', +}; SEO.propTypes = { description: PropTypes.string, lang: PropTypes.string, meta: PropTypes.arrayOf(PropTypes.object), title: PropTypes.string.isRequired, -} +}; -export default SEO +export default SEO; diff --git a/src/pages/404.js b/src/pages/404.js index 05c4088..af05388 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,22 +1,22 @@ -import React from "react" -import { graphql } from "gatsby" +import React from 'react'; +import { graphql } from 'gatsby'; -import Layout from "../components/layout" -import SEO from "../components/seo" +import Layout from '../components/layout'; +import SEO from '../components/seo'; const NotFoundPage = ({ data, location }) => { - const siteTitle = data.site.siteMetadata.title + const siteTitle = data.site.siteMetadata.title; return ( - +

Not Found

You just hit a route that doesn't exist... the sadness.

 - ) -} + ); +}; -export default NotFoundPage +export default NotFoundPage; export const pageQuery = graphql` query { @@ -26,4 +26,4 @@ export const pageQuery = graphql` } } } -` +`; diff --git a/src/pages/index.js b/src/pages/index.js index 304ad5d..3cdbfb7 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,25 +1,25 @@ -import React, { useState } from "react" -import { Link, graphql } from "gatsby" +import React, { useState } from 'react'; +import { Link, graphql } from 'gatsby'; -import Layout from "../components/layout" -import Search from "../components/search" -import SEO from "../components/seo" -import { rhythm } from "../utils/typography" +import Layout from '../components/layout'; +import Search from '../components/search'; +import SEO from '../components/seo'; +import { rhythm } from '../utils/typography'; const BlogIndex = ({ data, location }) => { - const siteTitle = data.site.siteMetadata.title - const posts = data.allMarkdownRemark.edges - const [filteredPosts, setFilteredPosts] = useState(posts) + const siteTitle = data.site.siteMetadata.title; + const posts = data.allMarkdownRemark.edges; + const [filteredPosts, setFilteredPosts] = useState(posts); return ( - + {filteredPosts.map(({ node }) => { - const title = node.frontmatter.title || node.fields.slug + const title = node.frontmatter.title || node.fields.slug; return (
@@ -29,11 +29,17 @@ const BlogIndex = ({ data, location }) => { marginBottom: rhythm(1 / 4), }} > - + {title} - {node.frontmatter.author} - {node.frontmatter.date} + + {node.frontmatter.author} + {' '} + - + {' '} + {node.frontmatter.date} +

{ />

- ) + ); })} - ) -} + ); +}; -export default BlogIndex +export default BlogIndex; export const pageQuery = graphql` query { @@ -75,4 +81,4 @@ export const pageQuery = graphql` } } } -` +`; diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index f89bda9..76b93c1 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -1,11 +1,11 @@ -import React from "react"; +import React from 'react'; +import { Link, graphql } from 'gatsby'; +import Layout from '../components/layout'; +import SEO from '../components/seo'; +import { rhythm } from '../utils/typography'; import gravatar from '../utils/gravatar'; -import '../styles/templates/blog-post.css'; -import { Link, graphql } from "gatsby"; -import Layout from "../components/layout"; -import SEO from "../components/seo"; -import { rhythm } from "../utils/typography"; +import '../styles/templates/blog-post.css'; const BlogPostTemplate = ({ data, pageContext, location }) => { const post = data.markdownRemark; @@ -29,16 +29,16 @@ const BlogPostTemplate = ({ data, pageContext, location }) => { > {title} -
-
+
+ -
+

{date}

@@ -51,31 +51,34 @@ const BlogPostTemplate = ({ data, pageContext, location }) => { marginBottom: rhythm(1), }} /> -
-
+