Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Copy Image Functionality and added icons to buttons #124

Merged
merged 8 commits into from
Feb 9, 2023
Merged

Added Copy Image Functionality and added icons to buttons #124

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
970482f
Added Copy Image Functionality
max-programming Jan 1, 2023
7b53fd3
Added icons to buttons
max-programming Jan 1, 2023
9004f88
Added then catch
max-programming Jan 29, 2023
20a0b21
Added error toast in catch
max-programming Jan 29, 2023
941a384
Use react-icons instead of @tabler/icons
max-programming Feb 3, 2023
6507227
Merge branch 'master' of https://github.com/max-programming/github-co…
max-programming Feb 3, 2023
bd02f5a
Merge branch 'master' into master
max-programming Feb 3, 2023
b60452a
Merge branch 'icons-copy' into master
sallar Feb 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"node": ">=16"
},
"dependencies": {
"@tabler/icons": "^1.119.0",
"@vercel/analytics": "^0.1.6",
"cheerio": "^1.0.0-rc.3",
"data-uri-to-buffer": "^3.0.0",
Expand All @@ -17,6 +18,7 @@
"prop-types": "^15.7.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"twitter": "^1.7.1"
},
"license": "MIT",
Expand Down
2 changes: 2 additions & 0 deletions src/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Toaster } from "react-hot-toast";
import { Analytics } from "@vercel/analytics/react";
import "normalize.css/normalize.css";
import "../styles/index.css";
Expand All @@ -15,6 +16,7 @@ const App = ({ Component, pageProps }) => (
/>
</Head>
<Component {...pageProps} />
<Toaster position="bottom-right" />
<Analytics />
</>
);
Expand Down
36 changes: 36 additions & 0 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
import {
IconCopy,
IconDownload,
IconShare,
IconBrandTwitter
} from "@tabler/icons";
Copy link

@styfle styfle Jan 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are there a lot of icons in this package?

This could cause the bundle to include every icon.

See https://nextjs.org/blog/next-13-1#import-resolution-for-smaller-bundles

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will take a look if I can make the change

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@styfle I can't find another way to import these icons. Would you like to use a different icon library instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used the react-icons library which seems more performant. (Using Tabler Icons under the hood)
This is the build command output

Route (pages)                              Size     First Load JS
┌ ○ /                                      14.3 kB        93.4 kB
├   /_app                                  0 B            79.1 kB
├ ○ /404                                   181 B          79.3 kB
├ λ /api/v1/[username]                     0 B            79.1 kB
└ λ /api/v1/tweetMedia                     0 B            79.1 kB
+ First Load JS shared by all              80.9 kB
  ├ chunks/framework-114634acb84f8baa.js   45.4 kB
  ├ chunks/main-ee0cf4b7f81d7c24.js        27.1 kB
  ├ chunks/pages/_app-3adada8895e66558.js  5.82 kB
  ├ chunks/webpack-ee7e63bc15b31913.js     815 B
  └ css/671175cd27e07421.css               1.81 kB

import { toast } from "react-hot-toast";
import React, { useRef, useState, useEffect } from "react";
import {
download,
Expand Down Expand Up @@ -56,6 +63,24 @@ const App = () => {
download(canvasRef.current);
};

const onCopy = (e) => {
e.preventDefault();
if ("ClipboardItem" in window) {
canvasRef.current.toBlob((blob) => {
const item = new ClipboardItem({ "image/png": blob });
navigator.clipboard.write([item])
.then(() => toast("🎉 Copied image!"))
.catch(err => {
toast("Sorry, copying image is not supported on this browser");
console.error("failed to copy");
});
});
} else {
toast("Sorry, copying image is not supported on this browser");
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can fallback to this solution: https://copee.ceriously.com

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do. Thanks

Copy link
Contributor Author

@max-programming max-programming Jan 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@styfle Does copee helps with copying images to clipboard? Or just text?
Or do you want me to change this and use try...catch instead

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@max-programming this answer is relevant: https://stackoverflow.com/a/68241516

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sallar Check it now

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven’t tried with an image blob but I suspect it won’t work now that I think about it

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@max-programming @styfle I think it's not that it's not supported, the issue is that the time delay between the click and the copy call is too long and safari blocks it, the blob needs to be ready when the user clicks the button

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@styfle @max-programming I fixed the safari issue:
https://github.com/sallar/github-contributions-chart/pull/131/files#diff-64525bbcfc9ec7f8181ea4db7b0d1692090358183eb03af8f1f2711116903537

console.error("failed to copy");
}
};

const onDownloadJson = (e) => {
e.preventDefault();
if (data != null) {
Expand Down Expand Up @@ -130,11 +155,20 @@ const App = () => {
{data !== null && (
<>
<div className="App-buttons">
<button
className="App-download-button"
onClick={onCopy}
type="button"
>
<IconCopy size={18} />
Copy the Image
</button>
<button
className="App-download-button"
onClick={onDownload}
type="button"
>
<IconDownload size={18} />
Download the Image
</button>
{global.navigator && "share" in navigator ? (
Expand All @@ -143,6 +177,7 @@ const App = () => {
onClick={onShare}
type="button"
>
<IconShare size={18} />
Share
</button>
) : (
Expand All @@ -151,6 +186,7 @@ const App = () => {
onClick={onShareTwitter}
type="button"
>
<IconBrandTwitter size={18} />
Share on Twitter
</button>
)}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@ form button {
line-height: 2rem;
margin: 0 1rem;
margin-right: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 7px;
}

.App-twitter-button {
Expand Down
17 changes: 17 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@
dependencies:
tslib "^2.4.0"

"@tabler/icons@^1.119.0":
version "1.119.0"
resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.119.0.tgz#8c590bc5a563c8673a78ccd451bedabd584b376e"
integrity sha512-Fk3Qq4w2SXcTjc/n1cuL5bccPkylrOMo7cYpQIf/yw6zP76LQV9dtLcHQUjFiUnaYuswR645CnURIhlafyAh9g==

"@vercel/analytics@^0.1.6":
version "0.1.6"
resolved "https://registry.yarnpkg.com/@vercel/analytics/-/analytics-0.1.6.tgz#a1ce184168d8f5ec02e35ec954d84ee68ea01f4b"
Expand Down Expand Up @@ -328,6 +333,11 @@ github-contributions-canvas@^0.6.0:
dependencies:
date-fns "^2.17.0"

goober@^2.1.10:
version "2.1.11"
resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.11.tgz#bbd71f90d2df725397340f808dbe7acc3118e610"
integrity sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==

har-schema@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
Expand Down Expand Up @@ -549,6 +559,13 @@ react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"

react-hot-toast@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.0.tgz#b91e7a4c1b6e3068fc599d3d83b4fb48668ae51d"
integrity sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==
dependencies:
goober "^2.1.10"

react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
Expand Down