🎉 Revamp Project

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,20 +1,34 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# Compiled JS
-build
-*.js
-./**/*.js
-
-# Dependency directories
-node_modules/
-
-# Optional eslint cache
-.eslintcache
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Vercel
+# vercel
 .vercel

README.md

@@ -1,36 +1,34 @@
-<p align="center">
- <h1 align="center">LeetCode Readme Stats</h1>
- <p align="center">Dynamically generated LeetCode stats for your readmes!</p>
-</p>
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## How To Use
-Copy-paste this into your markdown content, and that's it. Simple!
-Change the `?username=` value to your LeetCode username.
+## Getting Started
 
-```md
-[![KnlnKS's LeetCode stats](https://leetcode-stats-six.vercel.app/api?username=KnlnKS)](https://github.com/KnlnKS/leetcode-stats)
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
 ```
 
-Which will appear as:
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-[![KnlnKS's LeetCode stats](https://leetcode-stats-six.vercel.app/api?username=KnlnKS)](https://github.com/KnlnKS/leetcode-stats)
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
 
-## Themes
-You can customize your card with themes! There are currently 3 themes available.
-light (default), dark, and midnight. To use them, simply add `&theme=` to the
-end of the url with the theme you'd like to use.
-Ex.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
 
-```md
-[![KnlnKS's LeetCode stats](https://leetcode-stats-six.vercel.app/api?username=KnlnKS&theme=dark)](https://github.com/KnlnKS/leetcode-stats)
-```
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-Which will appear as:
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-[![KnlnKS's LeetCode stats](https://leetcode-stats-six.vercel.app/api?username=KnlnKS&theme=dark)](https://github.com/KnlnKS/leetcode-stats)
+## Deploy on Vercel
 
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-## GitHub Actions
-If you don't want to rely on an external api for your LeetCode stats, no need to fear!
-On the following branch is a LeetCode Stats Card generated via GitHub Actions!
-https://github.com/KnlnKS/leetcode-stats/tree/github-actions
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

package.json

@@ -1,25 +1,26 @@
 {
   "name": "leetcode-stats",
-  "version": "1.0.0",
-  "main": "index.ts",
-  "license": "MIT",
+  "private": true,
   "scripts": {
-    "dev": "node -r sucrase/register ./",
-    "build": "sucrase ./ -d ./ --transforms typescript,imports",
-    "start": "node build"
-  },
-  "devDependencies": {
-    "@types/express": "4.17.12",
-    "@types/html-minifier": "4.0.1",
-    "@types/node": "15.3.0",
-    "npm-run-all": "4.1.5",
-    "sucrase": "3.18.1",
-    "typescript": "4.2.4"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "express": "4.17.1",
-    "graphql": "15.5.0",
-    "graphql-request": "3.4.0",
-    "html-minifier": "4.0.0"
+    "@chakra-ui/react": "1.8.1",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^5",
+    "graphql": "16.3.0",
+    "graphql-request": "4.0.0",
+    "html-minifier": "4.0.0",
+    "next": "12.0.10",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "eslint": "8.8.0",
+    "eslint-config-next": "12.0.10"
   }
 }

pages/_app.js

@@ -0,0 +1,46 @@
+import Head from "next/head";
+import { ChakraProvider } from "@chakra-ui/react";
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>LeetCode Stats</title>
+        <meta
+          name="description"
+          content="Dynamically generated LeetCode stats for your GitHub READMEs!"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="/favicon-16x16.png"
+          sizes="16x16"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="/favicon-32x32.png"
+          sizes="32x32"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="/favicon-96x96.png"
+          sizes="96x96"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="/favicon-192x192.png"
+          sizes="192x192"
+        />
+      </Head>
+      <ChakraProvider>
+        <Component {...pageProps} />
+      </ChakraProvider>
+    </>
+  );
+}
+
+export default MyApp;

index.ts → pages/api/index.js

@@ -1,11 +1,6 @@
-import express from "express";
-import { generateStatSVG, getSubmissionStats } from "./svg";
+import { generateStatSVG, getSubmissionStats } from "../../src";
 
-const app = express();
-
-app.get("/", (_, res) => res.send("<em>Nothing here...</em>"));
-
-app.get("/api", async (req, res, next) => {
+export default async function handler(req, res) {
   const { username, theme = "light" } = req?.query;
 
   if (username) {
@@ -29,9 +24,4 @@ app.get("/api", async (req, res, next) => {
       res.status(400).send("Username does not exist");
     }
   } else res.status(400).send("Missing Parameter");
-});
-
-const port = process.env.PORT || 2001;
-app.listen(port, () =>
-  console.log(`Server running on ${port}, http://localhost:${port}`)
-);
+}

pages/index.js

@@ -0,0 +1,11 @@
+import styles from "../styles/Home.module.css";
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <h1 className={styles.title}>LeetCode Stats</h1>
+      </main>
+    </div>
+  );
+}

svg/generateStatSVG.ts → src/generateStatSVG.js

@@ -1,7 +1,6 @@
 import { minify } from "html-minifier";
-import { IGenerateStatSVG, Theme, ThemeColours } from "../types";
 
-const getThemeColours = (theme?: Theme): ThemeColours => {
+const getThemeColours = (theme) => {
   if (theme === "dark") {
     return {
       bg: "#292A2B",
@@ -27,7 +26,7 @@ export const generateStatSVG = ({
   allQuestionsCount,
   acSubmissionNum,
   theme,
-}: IGenerateStatSVG) => {
+}) => {
   const { bg, text, secondaryText, altDiffText } = getThemeColours(theme);
   return minify(
     `

svg/getSubmissionStats.ts → src/getSubmissionStats.js

@@ -1,7 +1,5 @@
 import { request, gql } from "graphql-request";
 
-import { IGetSubmissionStats } from "../types";
-
 const query = gql`
   query getUserProfile($username: String!) {
     allQuestionsCount {
@@ -20,7 +18,5 @@ const query = gql`
   }
 `;
 
-export const getSubmissionStats = async (
-  username
-): Promise<IGetSubmissionStats> =>
+export const getSubmissionStats = async (username) =>
   await request("https://leetcode.com/graphql", query, { username });