diff --git a/gatsby-config.js b/gatsby-config.js index 263e802..05cc8ee 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -60,15 +60,27 @@ module.exports = { { resolve: `gatsby-plugin-manifest`, options: { - name: `Gatsby Starter Blog`, - short_name: `GatsbyJS`, + name: `Platzi Master Blog`, + short_name: `Blog`, + description: 'Blog posts by Platzi Master students', start_url: `/`, - background_color: `#ffffff`, - theme_color: `#663399`, - display: `minimal-ui`, + background_color: `#f1f1f1`, + theme_color: `#8DA54C`, + display: `standalone`, + orientation: 'any', icon: `assets/platzimaster-icon.png`, + cache_busting_mode: 'none' }, }, + { + resolve: 'gatsby-plugin-offline', + options: { + precachePages: [`/content/*`], + workboxConfig: { + globPatterns: ['**/*'] + } + } + }, `gatsby-plugin-react-helmet`, { resolve: `gatsby-plugin-typography`, diff --git a/package-lock.json b/package-lock.json index 4143041..b3160e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2737,13 +2737,24 @@ } }, "bl": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.1.tgz", - "integrity": "sha512-FL/TdvchukRCuWVxT0YMO/7+L5TNeNrVFvRU2IY63aUyv9mpt8splf2NEr6qXtPo5fya5a66YohQKvGNmLrWNA==", + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz", + "integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==", "requires": { + "buffer": "^5.5.0", + "inherits": "^2.0.4", "readable-stream": "^3.4.0" }, "dependencies": { + "buffer": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz", + "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==", + "requires": { + "base64-js": "^1.0.2", + "ieee754": "^1.1.4" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -5482,6 +5493,11 @@ "is-symbol": "^1.0.2" } }, + "es6-object-assign": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz", + "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" + }, "es6-promisify": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-6.0.2.tgz", @@ -7702,14 +7718,26 @@ } }, "gatsby-plugin-manifest": { - "version": "2.2.45", - "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.2.45.tgz", - "integrity": "sha512-K9A0hw3xs+yd9iSg8ztObtrKTKybStnv8aydgby+CREgVNIUsziL89Wq5MgKvPegjt+9snTBF4ar5tE9EBaHhw==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.2.tgz", + "integrity": "sha512-tJQbofNs41rbcZN3W3SDrAHwXc5sYaLrWB+nPc8GTjz5rXzh76uRMMgMBLBfx4DtFInXFmM3igBjW58rikWVeg==", "requires": { - "@babel/runtime": "^7.7.6", - "gatsby-core-utils": "^1.0.31", + "@babel/runtime": "^7.8.7", + "gatsby-core-utils": "^1.1.1", "semver": "^5.7.1", - "sharp": "^0.23.4" + "sharp": "^0.25.1" + }, + "dependencies": { + "gatsby-core-utils": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.1.1.tgz", + "integrity": "sha512-EboPcBx37YQVUKN9JH753S54nDxjRmOefbR0i08KTmaVgQ1lZnDXJr8JfrImmMqupZlOkPQX1mWlXfp+r1jGhA==", + "requires": { + "ci-info": "2.0.0", + "configstore": "^5.0.1", + "node-object-hash": "^2.0.0" + } + } } }, "gatsby-plugin-offline": { @@ -7749,15 +7777,15 @@ } }, "gatsby-plugin-sharp": { - "version": "2.4.8", - "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.4.8.tgz", - "integrity": "sha512-WbQ5koNtUnb+5uXMUeI0AHT0go4WLYaezy4lc+vJIYmxQwmJfKipqCWNEbcx74mYfYmPxWKwGNdm7PxTdiP0Hw==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.5.3.tgz", + "integrity": "sha512-/qx0QJNXsmHudEGlRm6oqkq+X228hGBJ6KjCJpJK5bUwWdhcZRJNar337g/2BXPchaxk1emJTUK9y+qSvVpPvw==", "requires": { - "@babel/runtime": "^7.7.6", + "@babel/runtime": "^7.8.7", "async": "^2.6.3", "bluebird": "^3.7.2", "fs-extra": "^8.1.0", - "gatsby-core-utils": "^1.0.31", + "gatsby-core-utils": "^1.1.1", "got": "^8.3.2", "imagemin": "^6.1.0", "imagemin-mozjpeg": "^8.0.0", @@ -7769,9 +7797,9 @@ "probe-image-size": "^4.1.1", "progress": "^2.0.3", "semver": "^5.7.1", - "sharp": "^0.23.4", + "sharp": "^0.25.1", "svgo": "1.3.2", - "uuid": "^3.3.3" + "uuid": "^3.4.0" }, "dependencies": { "async": { @@ -7781,6 +7809,16 @@ "requires": { "lodash": "^4.17.14" } + }, + "gatsby-core-utils": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.1.1.tgz", + "integrity": "sha512-EboPcBx37YQVUKN9JH753S54nDxjRmOefbR0i08KTmaVgQ1lZnDXJr8JfrImmMqupZlOkPQX1mWlXfp+r1jGhA==", + "requires": { + "ci-info": "2.0.0", + "configstore": "^5.0.1", + "node-object-hash": "^2.0.0" + } } } }, @@ -7994,17 +8032,17 @@ } }, "gatsby-transformer-sharp": { - "version": "2.3.17", - "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.3.17.tgz", - "integrity": "sha512-cFVzZ6PzBtwWTuyqluawuJbtAAmUlMZM6+99LUgosOntKse66qK1cSHna8rz1W7i2VZ/mddY76HPs+7XX/ewTg==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.4.2.tgz", + "integrity": "sha512-y8p2eBXEkSft411jyR3KOzzPRbjJ7i4aJzopB1lCQrYgOoxRtA/DeiAaANziRhJWoJUDa7M30iElizUy7n9Kzw==", "requires": { - "@babel/runtime": "^7.7.6", + "@babel/runtime": "^7.8.7", "bluebird": "^3.7.2", "fs-extra": "^8.1.0", "potrace": "^2.1.2", "probe-image-size": "^4.1.1", "semver": "^5.7.1", - "sharp": "^0.23.4" + "sharp": "^0.25.1" } }, "gauge": { @@ -11146,9 +11184,9 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" }, "minipass": { "version": "3.1.1", @@ -11237,6 +11275,11 @@ } } }, + "mkdirp-classic": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz", + "integrity": "sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==" + }, "modularscale": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/modularscale/-/modularscale-1.0.2.tgz", @@ -11315,7 +11358,8 @@ "nan": { "version": "2.14.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", - "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==" + "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==", + "optional": true }, "nanomatch": { "version": "1.2.13", @@ -11378,6 +11422,11 @@ "semver": "^5.4.1" } }, + "node-addon-api": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-2.0.0.tgz", + "integrity": "sha512-ASCL5U13as7HhOExbT6OlWJJUV/lLzL2voOSP1UVehpRD8FbSrSDjfScK/KwAvVTI5AS6r4VwbOMlIqtvRidnA==" + }, "node-emoji": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", @@ -13177,6 +13226,11 @@ "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" }, + "promise-polyfill": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz", + "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc=" + }, "prompts": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.1.tgz", @@ -14719,25 +14773,25 @@ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" }, "sharp": { - "version": "0.23.4", - "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz", - "integrity": "sha512-fJMagt6cT0UDy9XCsgyLi0eiwWWhQRxbwGmqQT6sY8Av4s0SVsT/deg8fobBQCTDU5iXRgz0rAeXoE2LBZ8g+Q==", + "version": "0.25.2", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.25.2.tgz", + "integrity": "sha512-l1GN0kFNtJr3U9i9pt7a+vo2Ij0xv4tTKDIPx8W6G9WELhPwrMyZZJKAAQNBSI785XB4uZfS5Wpz8C9jWV4AFQ==", "requires": { "color": "^3.1.2", "detect-libc": "^1.0.3", - "nan": "^2.14.0", + "node-addon-api": "^2.0.0", "npmlog": "^4.1.2", "prebuild-install": "^5.3.3", - "semver": "^6.3.0", + "semver": "^7.1.3", "simple-get": "^3.1.0", - "tar": "^5.0.5", + "tar": "^6.0.1", "tunnel-agent": "^0.6.0" }, "dependencies": { "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz", + "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==" } } }, @@ -15804,6 +15858,15 @@ } } }, + "sweetalert": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz", + "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==", + "requires": { + "es6-object-assign": "^1.1.0", + "promise-polyfill": "^6.0.2" + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", @@ -15851,18 +15914,23 @@ "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==" }, "tar": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/tar/-/tar-5.0.5.tgz", - "integrity": "sha512-MNIgJddrV2TkuwChwcSNds/5E9VijOiw7kAc1y5hTNJoLDSuIyid2QtLYiCYNnICebpuvjhPQZsXwUL0O3l7OQ==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.1.tgz", + "integrity": "sha512-bKhKrrz2FJJj5s7wynxy/fyxpE0CmCjmOQ1KV4KkgXFWOgoIT/NbTMnB1n+LFNrNk0SSBVGGxcK5AGsyC+pW5Q==", "requires": { "chownr": "^1.1.3", "fs-minipass": "^2.0.0", "minipass": "^3.0.0", "minizlib": "^2.1.0", - "mkdirp": "^0.5.0", + "mkdirp": "^1.0.3", "yallist": "^4.0.0" }, "dependencies": { + "mkdirp": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.3.tgz", + "integrity": "sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==" + }, "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", @@ -15871,20 +15939,20 @@ } }, "tar-fs": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.0.tgz", - "integrity": "sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.1.tgz", + "integrity": "sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==", "requires": { "chownr": "^1.1.1", - "mkdirp": "^0.5.1", + "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", "tar-stream": "^2.0.0" } }, "tar-stream": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.1.tgz", - "integrity": "sha512-GZjLk64XcE/58qwIc1ZfXGqTSE4OutPMEkfBE/oh9eJ4x1eMRjYkgrLrav7PzddpvIpSJSGi8FgNNYXdB9Vumg==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz", + "integrity": "sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==", "requires": { "bl": "^4.0.1", "end-of-stream": "^1.4.1", diff --git a/package.json b/package.json index 386ae10..9ee7b96 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ "gatsby-image": "^2.2.39", "gatsby-plugin-feed": "^2.3.26", "gatsby-plugin-google-analytics": "^2.1.34", - "gatsby-plugin-manifest": "^2.2.39", + "gatsby-plugin-manifest": "^2.3.2", "gatsby-plugin-offline": "^3.0.32", "gatsby-plugin-react-helmet": "^3.1.21", - "gatsby-plugin-sharp": "^2.4.3", + "gatsby-plugin-sharp": "^2.5.3", "gatsby-plugin-typography": "^2.3.21", "gatsby-remark-copy-linked-files": "^2.1.36", "gatsby-remark-images": "^3.1.42", @@ -24,13 +24,14 @@ "gatsby-remark-smartypants": "^2.1.20", "gatsby-source-filesystem": "^2.1.46", "gatsby-transformer-remark": "^2.6.48", - "gatsby-transformer-sharp": "^2.3.13", + "gatsby-transformer-sharp": "^2.4.2", "md5": "^2.2.1", "prismjs": "^1.19.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-typography": "^0.16.19", + "sweetalert": "^2.1.2", "typeface-merriweather": "0.0.72", "typeface-montserrat": "0.0.75", "typography": "^0.16.19", diff --git a/src/components/shareButton.js b/src/components/shareButton.js new file mode 100644 index 0000000..658fa9b --- /dev/null +++ b/src/components/shareButton.js @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; +import swal from 'sweetalert'; + +const ShareButton = ({ title, description, url }) => { + const [modal, setModal] = useState(false); + + const handleShare = () => { + if (navigator.share !== undefined) { + navigator.share({ + title, + text: description, + url + }) + .catch(error => swal("Error al compartir", "error")); + } else { + setModal(!modal); + } + }; + + const copyLink = () => { + url.toString(); + navigator.clipboard.writeText(url).then(function () { + swal("Url copiada", `${url}`, "success"); + }, function () { + swal("Error al copiar la url", "error"); + }); + }; + + return ( +
+ + { + modal && + <> +
+ + Share for Twitter setModal(!modal)} + /> + + + Share for Facebook setModal(!modal)} + /> + + Copy Link { copyLink(); setModal(!modal); }} + /> +
+ + + } +
+ ); +}; + +export default ShareButton; diff --git a/src/styles/templates/blog-post.css b/src/styles/templates/blog-post.css index 2073af7..7092068 100644 --- a/src/styles/templates/blog-post.css +++ b/src/styles/templates/blog-post.css @@ -27,4 +27,94 @@ .blogpost__date p { font-size: 12px; margin: 0; +} + +.blogpost__share { + position: relative; + width: 100%; + height: 40px; + margin: 20px 0; +} + +.blogpost__share button { + display: flex; + width: 150px; + height: 45px; + margin: 0; + padding: 0; + background-color: transparent; + border: none; + border-bottom: 1px solid transparent; + outline: 0; + align-items: center; +} + +.blogpost__share img { + width: 45px; + height: 45px; + margin: 0 10px 0 0; + padding: 5px; + object-fit: cover; +} + +.blogpost__share p { + margin: 0; + font-size: 18px; +} + +.blogpost__share button:hover { + cursor: pointer; + border-bottom: 1px solid rgb(43, 133, 101); +} + +.blogpost__share button:hover p { + color: rgb(43, 133, 101); +} + +.blogpost__share-modal { + position: absolute; + display: flex; + width: 160px; + height: 40px; + padding: 5px; + border-radius: 8px; + background-color: rgb(51, 145, 112); + align-items: center; + justify-content: space-between; + top: -47px; + left: 10px; + z-index: 999; +} + +.blogpost__share-modal:hover { + cursor: default; +} + +.blogpost__share-modal a { + width: 32px; + height: 32px; +} + + +.blogpost__share-modal img { + width: 32px; + height: 32px; + object-fit: cover; + margin: 0; + padding: 0; +} + +.blogpost__share-modal img:hover { + cursor: pointer; +} + +.blogpost__share-modalsquare { + position: absolute; + width: 20px; + height: 20px; + background-color: rgb(51, 145, 112); + transform: rotateZ(45deg); + z-index: 99; + top: -17px; + left: 80px; } \ No newline at end of file diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index f89bda9..5b21607 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -5,6 +5,7 @@ import { Link, graphql } from "gatsby"; import Layout from "../components/layout"; import SEO from "../components/seo"; +import ShareButton from "../components/shareButton"; import { rhythm } from "../utils/typography"; const BlogPostTemplate = ({ data, pageContext, location }) => { @@ -54,7 +55,11 @@ const BlogPostTemplate = ({ data, pageContext, location }) => { - +