github-leetcode-component
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

github-leetcode-component

Blog Example

github-leetcode-component is a react library to:

  1. Generate the calendar that combined GitHub and LeetCode Calendar (Combination Calendar)
  2. Generate the GitHub Contribution Calendar
  3. Generate the LeetCode Submission Calendar
  4. Get User Data from GitHub
  5. Get User Data from LeetCode

Here how GitHub Calendar, Leetcode Calendar, Combination Calendar look in order: Overall_example

Different Sizes of Calendar: Combination Calender (Large - default / wrong input) GitHub Calendar (Medium) LeetCode Calendar (Small) Overall_example

Example of applying to :

Installation

npm install github-leetcode-component

Requirements

You will have to set up a server proxy. Here are guide and examples for vite and next.js.

Vite:

test vite app repo

  1. install the github-leetcode-component
npm install github-leetcode-component
  1. Add server proxy field in the vite.config.ts:

Here is an example:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/github": {
        target: "https://github.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/github/, ""),
      },
      "/leetcode": {
        target: "https://leetcode.com/graphql/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/leetcode/, ""),
      },
    },
  },
});
  1. Use it!
import "./App.css";
import { CombinationCalendar, LeetCodeCalendar } from "github-leetcode-component";

function App() {
  return (
    <>
      <CombinationCalendar
        github_username="ggamsang812"
        leetcode_username="ggamsang812"
        size="small"
      />
      <LeetCodeCalendar username="ggamsang812"/>
    </>
  );
}

export default App;

Next.js:

Project page of my personal blog
test next.js app repo

  1. install the github-leetcode-component
npm install github-leetcode-component
  1. Add rewrites to the next.config.mjs (or next.config.js - whichever you have on your next.js project)
  • my blog uses next.config.js and the demo app uses next.config.mjs

Here is an example:

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/github/:path*",
        destination: "https://github.com/:path*", // Proxy to Backend
      },
      {
        source: "/leetcode/:path*",
        destination: "https://leetcode.com/graphql/:path*", // Proxy to Backend
      },
    ];
  },
};

export default nextConfig;
// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: "/github/:path*",
        destination: "https://github.com/:path*", // Proxy to Backend
      },
      {
        source: "/leetcode/:path*",
        destination: "https://leetcode.com/graphql/:path*", // Proxy to Backend
      },
    ];
  },
};
  1. Create a client side rendering component:

Here is an example:

// app/pages/Calendar.tsx
"use client";

import { GitHubCalendar, CombinationCalendar } from "github-leetcode-component";

export default function Calendar() {
  return (
    <div>
      <GitHubCalendar username="ggamsang812" size="medium" />
      <CombinationCalendar
        github_username="ggamsang812"
        leetcode_username="ggamsang812"
      />
    </div>
  );
}
  1. Use it!
// app/page.tsx
import Calendar from "./pages/Calendar";

export default function Home() {
  return (
    <div>
      <Calendar />
    </div>
  );
}

Usage

CombinationCalendar

Offers two modes of operation:

  1. Current Year Calendar: When no year is specified, the component will generate the github contribution calendar starting from one year ago up until the current date.
  2. Specific Year Calendar: When a year is provided as an input, the component will generate the github calendar for that entire year.
/**
 * Generates GitHub Contribution Calendar
 * @param {string} github_username - GitHub username
 * @param {string} leetcode_username - LeetCode username
 * @param {string} year - Optional param for year of the calendar
 * @param {string} size - Optional param for size of the calendar
 * @returns {jsx} -
 */
import { CombinationCalendar } from "github-leetcode-component";
<CombinationCalendar github_username="ggamsang812" leetcode_username="ggamsang812" />
<CombinationCalendar github_username="ggamsang812" leetcode_username="ggamsang812" size="small"/>

example: CombinationCalendar_example

GitHubCalendar

Offers two modes of operation:

  1. Current Year Calendar: When no year is specified, the component will generate the github contribution calendar starting from one year ago up until the current date.
  2. Specific Year Calendar: When a year is provided as an input, the component will generate the github calendar for that entire year.
/**
 * Generates GitHub Contribution Calendar
 * @param {string} username - GitHub username
 * @param {string} year - Optional param for year of the calendar
 * @param {string} size - Optional param for size of the calendar
 * @returns {jsx} -
 */
import { GitHubCalendar } from "github-leetcode-component";
<GitHubCalendar username="ggamsang812" />
<GitHubCalendar username="ggamsang812" year="2024" />
<GitHubCalendar username="ggamsang812" size="medium" />

example: GitHubCalendar_example

LeetCodeCalendar

Offers two modes of operation:

  1. Current Year Calendar: When no year is specified, the component will generate the leetcode submission calendar starting from one year ago up until the current date.
  2. Specific Year Calendar: When a year is provided as an input, the component will generate the leetcode calendar for that entire year.
/**
 * Generates LeetCode Submissions Calendar
 * @param {string} username - LeetCode username
 * @param {string} year - Optional param for year of the calendar
 * @param {string} size - Optional param for size of the calendar
 * @returns {jsx} -
 */
import { LeetCodeCalendar } from "github-leetcode-component";
<LeetCodeCalendar username="ggamsang812" />
<LeetCodeCalendar username="ggamsang812" year="2024" />
<LeetCodeCalendar username="ggamsang812" size="MeDiUm" />

example: LeetCodeCalendar_example

GetGitHubData

Performs an HTTP request to fetch user data, then converts the fetched data into a stringified HTML format and returns it. Offers two modes of operation:

  1. Current Year Data: When no year is specified, the component will generate the stringified HTML of user data starting from one year ago up until the current date.
  2. Specific Year Data: When a year is provided as an input, the component will generate the leetcode calendar for that entire year.
/**
 * Fetch GitHub user data
 * @param {string} username - LeetCode username
 * @param {string} year - Optional param for specific year data
 * @returns {string} - stringified fetched GitHub data
 */
import { GetGitHubData } from "github-leetcode-component";
<GetGitHubData username="ggamsang812" />
<GetGitHubData username="ggamsang812" year="2024" />

example: GetGitHubData_example

GetLeetCodeData

Performs an HTTP request with GraphQL query to fetch user data, then converts the fetched data into a stringified HTML format and returns it. Offers two modes of operation:

  1. Current Year Data: When no year is specified, the component will generate the stringified HTML of user data starting from one year ago up until the current date.
  2. Specific Year Data: When a year is provided as an input, the component will generate the leetcode calendar for that entire year.
/**
 * Fetch LeetCode user data
 * @param {string} username - LeetCode username
 * @param {string} year - Optional param for specific year data
 * @returns {string} - stringified fetched Leetcode data
 */
import { GetLeetCodeData } from "github-leetcode-component";
<GetLeetCodeData username="ggamsang812" />
<GetLeetCodeData username="ggamsang812" year="2024" />

example: GetLeetCodeData_example

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i github-leetcode-component

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

60.3 kB

Total Files

53

Last publish

Collaborators

  • ggamsang812