From 774c6c926ed2eb864e23ad0af3147f1b491c1e59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tonalli=20L=C3=B3pez?= Date: Tue, 24 Mar 2020 23:54:03 -0600 Subject: [PATCH 1/6] [Feature] Share button --- assets/copylinkIcon.png | Bin 0 -> 1408 bytes assets/facebookIcon.png | Bin 0 -> 1275 bytes assets/shareIcon.png | Bin 0 -> 1084 bytes assets/twitterIcon.svg | 1 + package-lock.json | 139 +++++++++++++++++++---------- package.json | 6 +- src/styles/templates/blog-post.css | 89 ++++++++++++++++++ src/templates/blog-post.js | 74 ++++++++++++++- 8 files changed, 259 insertions(+), 50 deletions(-) create mode 100644 assets/copylinkIcon.png create mode 100644 assets/facebookIcon.png create mode 100644 assets/shareIcon.png create mode 100644 assets/twitterIcon.svg diff --git a/assets/copylinkIcon.png b/assets/copylinkIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..ea83312930c2dace9eef804690f18f908f547383 GIT binary patch literal 1408 zcmV-`1%LX9P)A0$mINF(u5A_>NzM)5_(8hA0j5CS}Co7gra-eRorT2foqhyNMo z%<0VTOn0~SVgJb{JKua~&i^~N?{c7o{}*OVHvym;SOS~_{0{U1e@rW*gjfUg0{;RT z>o*E~4%|3>)Z(EE_yCdq5$FOoBI2#UYrxOu{XSsU^w7+X8sG?U8hDv#l2yQVqxUtC zo)UI3Q3D)BOQ|(xn>Jt!_zIX=BwiEH1iTUP&NgC$^X>wm1K0sP0-W!>zYi_5w+qHJ z1a;Q`$4!TqI6B#kXhtWLx5+cWZ)i|#>_W?Ic_B!%t1NHkXvDgZ5uhc|8KL_SS}IRD@-;*o;o(-(w#|}lHL`h$S%+Y~`Pip9^isee zaDw0n#xVk5f$8TNOZK3VU7U<^G&+D|Kt&dv2Gi*#OSTBD^IS%NKbyB(vTa6oUP8VB zv;vnU&~Inr=-y9hr%_g**=$B09~?1*m{-G~%&RD%RlQ}1`mbUs-lYSDfv zsu5{)1ZGg!(T>9PxoB7FPDE=MzQ4=OsGTS(F_vSoIQkf%R_@3E8ai77!g zBUa=4mNU1i#>C+t#A26*4nxzfn)PQc+Uwxc&->ON_?hL#<+x8b7MpmDrt(Q;qqw4_=-Dvs6 zsohrLd-MwOaE>=4(#;N$QL-O_o)JU9g_gV)&E|oa{STl6q%xOcF4QAKHd?Z$jci3k z8{3FFOP)eYZ5-{BICzxF`<(#hpk=VrlFdWay#XfX%TY$y`NRu3`rHdVZ#}mlCzv;S zfu9J56iuiWJA^8L3sE?qD?RODVia46e2sTSuon$p!HRAknhl9p9QjIAi?t)xV+2b! zaWcE*1drnd=+=EZHy=c}( zfG4JjV{pgsnw+_cZah(g{x8)^8)X+uXsHf-xC z)%@BQz)q(FIiyXr;H%O0Et7T|*cS54wvOtAU+)IB+MREX`8AH#&==V{YNxU-A!!lX zS)kUFYt9*pqiwV!#+R$YhHV|C37>Y7!ixZ?)k$=RcKoy?S4Ayn1;2I}c+#yWe!sAy zwu0p~Wh}aH{%~h{uQGD|R<17A5TE`Ecs^UDtgqJG>U6}8!)B~r`2hR&tmL8UplSKu zclsF^9JAGzLUw0c%`9K7y2h@`xh2*W%WBH_@a?B9ML0!J2Sd$~3afHUAzF!VKOW-5 zOFNdM>p7>O6RMTy`>YC0U#+^vu1bH2Tm;J8jOY`gv$dYZ!TEDyaw^W?pZ_rvO9Jrq zcYks5lI>6dFfMAg#w_}qPWE)}igaE#FQZU7#vTEy|sw;1X)zkHe-6SMgm zavsJfB6#|%3dBUF!DNo8kwSRl4Q1G9nXOtw1@OchN?ph_nF$#vfGeKxA-@}K8N|_h zfczvA3qwjJQ$3kRgOI++)=?##D~wNWkp5_A)AdZNY4)2w#=J*Sw3?YMws5gFOqRHN zfN@>dkC_#i3W=Tw-#|FDus%6Qkk3xH*N>Z(S#GLlZpjD0@Pc{eoDo#)fK{QTkp7bm z6AH21>=znA?ag*lpL64}x%r2q2#&VCrAu^nh95Q9kGB8KjPs2Yz_&e-#$DMeQm#UPuEmz}x@;002ovPDHLkV1oO`XvhEn literal 0 HcmV?d00001 diff --git a/assets/shareIcon.png b/assets/shareIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..1156e883d546e095a9e207836e6175df3877a9c1 GIT binary patch literal 1084 zcmV-C1jGA@P)v0**!R6SH%HPAxiE=P6>+l~g9;NFVbqEkgU3R|$FhTSjt4o8n>Fi``UiIq58oJ@J>5__dB=*Bhp zS*-aN#jMogFcD8`?WNrGVl@sZ&~`C4i2;0sGgJ9_xVlE$)nYb|FYsIk;-E~~qU6Y; zI{G;YZ=`lVh~umct(}_#O3=N4H zyD1H%Qlfl{CFm$Rh!S^UK~CE)T#0STi4Cf+={|gzY&PNiO#LhzC-!3@dNF&9`VMiz z%oC?bTHZszCI+kqQ2aPAjnCSJh@LdcbP318>zVS-n+_ zwpd!Daf)#4p*q^M)n>0eexDSB>91nfw#RQNAP$P;7@<~QQ%=d;n4G*#S(4NWh`$-< zfcT8+5~W*2^zRLqDBo&RiIPV&9w|iQoJ?I?iNR^TdeS1;Wd*NMZU5WP4gQ`Ttm zVXKkJ2O{V$HgeB&iRC?nN9%ZIO`4ewI!hb?Z>qf?9@juRs1;-rbU&u=Y*5WoO3>Zc zQtt{-N|_FdeVB*MVy{$XqH@2#i|g`RLjLDrw=sSyoak))mpDScpB3iftCo9IkOj)= z(y>^X?B=!HqXt+jHuBO@>X(RRwRXH5D#{GJBi{JyLgp+K5&hLvzEMb*wx>q~zMl-2 zD8C9dK6TWViH4KIO=gM^jI+hhZ66E0HpwKDG|2xv5E(%*T%S+?0000 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4143041..b5e599e 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", @@ -7702,14 +7713,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 +7772,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 +7792,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 +7804,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 +8027,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 +11179,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 +11270,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 +11353,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 +11417,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", @@ -14719,25 +14763,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==" } } }, @@ -15851,18 +15895,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 +15920,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..4d6bdea 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,7 +24,7 @@ "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", diff --git a/src/styles/templates/blog-post.css b/src/styles/templates/blog-post.css index 2073af7..839a3cf 100644 --- a/src/styles/templates/blog-post.css +++ b/src/styles/templates/blog-post.css @@ -27,4 +27,93 @@ .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 a:hover { + cursor: pointer; +} + +.blogpost__share-modal img { + width: 32px; + height: 32px; + object-fit: cover; + margin: 0; + padding: 0; +} + +.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..cc05bf9 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import gravatar from '../utils/gravatar'; import '../styles/templates/blog-post.css'; import { Link, graphql } from "gatsby"; @@ -7,11 +7,42 @@ import Layout from "../components/layout"; import SEO from "../components/seo"; import { rhythm } from "../utils/typography"; +import shareIcon from "../../assets/shareIcon.png"; +import twitterIcon from "../../assets/twitterIcon.svg"; +import facebookIcon from "../../assets/facebookIcon.png"; +import copylinkIcon from "../../assets/copylinkIcon.png"; + const BlogPostTemplate = ({ data, pageContext, location }) => { + const [modal, setModal] = useState(false); + const post = data.markdownRemark; const siteTitle = data.site.siteMetadata.title; const { previous, next } = pageContext; const { title, date, description, author, email, platziUser } = post.frontmatter; + const url_post = window.location.href; + + const handleShare = () => { + if (navigator.share !== undefined) { + navigator.share({ + title: title, + text: description, + url: url_post + }) + .then(() => console.log('Compartido')) + .catch(error => console.log('Error al compartir', error)); + } else { + setModal(!modal); + } + }; + + const copyLink = () => { + url_post.toString(); + navigator.clipboard.writeText(url_post).then(function () { + alert(`Enlace: ${url_post} Copiado`); + }, function () { + alert("Error al copiar enlace"); + }); + }; return ( @@ -54,7 +85,46 @@ const BlogPostTemplate = ({ data, pageContext, location }) => {
- +
+ + { + modal && + <> +
+ + Twitter + + + Facebook + + Copy Link +
+ + + } +