Merge pull request sallar#123 from sallar/vercel

README.md

@@ -9,13 +9,15 @@ The drawing mechanism lives in [the sallar/github-contributions-canvas repositor
 ## Install
 
 Install the packages using [NPM](https://nodejs.org/en/):
+
 ```
 $ npm install
 ```
 
 ## How to run
 
 Running locally:
+
 ```
 $ npm run dev
 ```
@@ -45,3 +47,5 @@ Every release, along with the migration instructions, is documented on the GitHu
 ## License
 
 [MIT license](https://opensource.org/licenses/MIT)
+
+[![Powered by Vercel](/public/powered-by-vercel.svg)](https://vercel.com/?utm_source=github-contributions-chart&utm_campaign=oss)

next.config.js

@@ -1,13 +1,13 @@
 module.exports = {
   env: {
-    TWITTER_CONSUMER_KEY: process.env.TWITTER_CONSUMER_KEY,
-    TWITTER_CONSUMER_SECRET: process.env.TWITTER_CONSUMER_SECRET,
-    TWITTER_ACCESS_TOKEN_KEY: process.env.TWITTER_ACCESS_TOKEN_KEY,
-    TWITTER_ACCESS_TOKEN_SECRET: process.env.TWITTER_ACCESS_TOKEN_SECRET
+    // TWITTER_CONSUMER_KEY: process.env.TWITTER_CONSUMER_KEY,
+    // TWITTER_CONSUMER_SECRET: process.env.TWITTER_CONSUMER_SECRET,
+    // TWITTER_ACCESS_TOKEN_KEY: process.env.TWITTER_ACCESS_TOKEN_KEY,
+    // TWITTER_ACCESS_TOKEN_SECRET: process.env.TWITTER_ACCESS_TOKEN_SECRET
   },
   experimental: {
     css: true,
     granularChunks: true,
     modern: true
   }
-}
+};

package.json

@@ -3,19 +3,19 @@
   "description": "Generate an image of all your GitHub contributions",
   "version": "2.0.0",
   "engines": {
-    "node": ">=10"
+    "node": ">=16"
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.3",
     "data-uri-to-buffer": "^3.0.0",
     "github-contributions-canvas": "^0.6.0",
     "lodash": "^4.17.19",
-    "next": "^11.1.0",
+    "next": "^13.1.1",
     "node-fetch": "^2.6.0",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "twitter": "^1.7.1"
   },
   "license": "MIT",

src/pages/index.js

@@ -1,5 +1,11 @@
 import React, { useRef, useState, useEffect } from "react";
-import { download, uploadToTwitter, fetchData, downloadJSON, cleanUsername } from "../utils/export";
+import {
+  download,
+  uploadToTwitter,
+  fetchData,
+  downloadJSON,
+  cleanUsername
+} from "../utils/export";
 import ThemeSelector from "../components/themes";
 
 const App = () => {
@@ -18,7 +24,7 @@ const App = () => {
     draw();
   }, [data, theme]);
 
-  const handleSubmit = e => {
+  const handleSubmit = (e) => {
     e.preventDefault();
 
     setUsername(cleanUsername(username));
@@ -27,7 +33,7 @@ const App = () => {
     setData(null);
 
     fetchData(cleanUsername(username))
-      .then(data => {
+      .then((data) => {
         setLoading(false);
 
         if (data.years.length === 0) {
@@ -37,26 +43,26 @@ const App = () => {
           inputRef.current.blur();
         }
       })
-      .catch(err => {
+      .catch((err) => {
         console.log(err);
         setLoading(false);
         setError("I could not check your profile successfully...");
       });
   };
 
-  const onDownload = e => {
+  const onDownload = (e) => {
     e.preventDefault();
     download(canvasRef.current);
   };
 
-  const onDownloadJson = e => {
+  const onDownloadJson = (e) => {
     e.preventDefault();
     if (data != null) {
       downloadJSON(data);
     }
   };
 
-  const onShareTwitter = e => {
+  const onShareTwitter = (e) => {
     e.preventDefault();
     uploadToTwitter(canvasRef.current);
   };
@@ -73,7 +79,7 @@ const App = () => {
       data,
       username: username,
       themeName: theme,
-      footerText: "Made by @sallar & friends - github-contributions.now.sh"
+      footerText: "Made by @sallar & friends - github-contributions.vercel.app"
     });
   };
 
@@ -140,7 +146,7 @@ const App = () => {
         <input
           ref={inputRef}
           placeholder="Your GitHub Username"
-          onChange={e => setUsername(e.target.value)}
+          onChange={(e) => setUsername(e.target.value)}
           value={username}
           id="username"
           autoFocus
@@ -166,12 +172,9 @@ const App = () => {
   const _renderDownloadAsJSON = () => {
     if (data === null) return;
     return (
-      <a
-        href="#" 
-        onClick={onDownloadJson}
-      >
+      <a href="#" onClick={onDownloadJson}>
         <span role="img" aria-label="Bar Chart">
-        📊
+          📊
         </span>{" "}
         Download data as JSON for your own visualizations
       </a>
@@ -189,7 +192,7 @@ const App = () => {
         {_renderForm()}
         <ThemeSelector
           currentTheme={theme}
-          onChangeTheme={themeName => setTheme(themeName)}
+          onChangeTheme={(themeName) => setTheme(themeName)}
         />
         {_renderGithubButton()}
         <footer>
@@ -204,6 +207,12 @@ const App = () => {
             .
           </p>
           {_renderDownloadAsJSON()}
+          <a
+            href="https://vercel.com/?utm_source=github-contributions-chart&utm_campaign=oss"
+            target="_blank"
+          >
+            <img src="/powered-by-vercel.svg" alt="Powered by Vercel" />
+          </a>
         </footer>
       </header>
       <section className="App-content">

src/utils/export.js

@@ -46,7 +46,7 @@ export async function uploadToTwitter(canvas) {
     }).then(res => res.json());
     const url = window.encodeURIComponent(data.mediaUrl);
     const text = window.encodeURIComponent(
-      "Check out my #GitHubContributions history over time. A free tool by @sallar and friends. https://github-contributions.now.sh"
+      "Check out my #GitHubContributions history over time. A free tool by @sallar and friends. https://github-contributions.vercel.app"
     );
     window.open(`https://twitter.com/share?text=${text}&url=${url}`);
   } catch (err) {
@@ -56,4 +56,4 @@ export async function uploadToTwitter(canvas) {
 
 export function cleanUsername(username){
   return username.replace(/^(http|https):\/\/(?!www\.)github\.com\//, '');
-}
+}