feat: by default we use colors directly from the GitHub API

Author: cyprieng

README.md

@@ -134,6 +134,7 @@ Here is the list of available options:
 
 - --username (required): GitHub username
 - --token (required): Token with access to the user activity
+- --default-color: Generate light version with GitHub default colors
 - --dark: Generate dark version
 - --light: Generate light version
 - --no-ghost-bricks: All days are used as bricks

src/cli.ts

@@ -6,6 +6,7 @@ import * as path from "path";
 interface ParsedArgs {
   username?: string; // GitHub username
   token?: string; // GitHub token
+  defaultColors?: boolean; // Use default colors
   light?: boolean; // Generate light mode SVG
   dark?: boolean; // Generate dark mode SVG
   enableGhostBricks?: boolean; // Ghost bricks for days without contribution
@@ -32,6 +33,7 @@ function getInput(name: string): string | undefined {
  */
 function parseArgs(argv: string[]): ParsedArgs {
   const parsed: ParsedArgs = {
+    defaultColors: false,
     dark: false,
     light: false,
   };
@@ -41,6 +43,8 @@ function parseArgs(argv: string[]): ParsedArgs {
       parsed.username = argv[++i];
     } else if (arg === "--token" && i + 1 < argv.length) {
       parsed.token = argv[++i];
+    } else if (arg === "--default-colors") {
+      parsed.defaultColors = true;
     } else if (arg === "--dark") {
       parsed.dark = true;
     } else if (arg === "--light") {
@@ -82,6 +86,7 @@ const bricksColorsFromInput =
 const options = {
   username: cliArgs.username || getInput("GITHUB_USERNAME"),
   token: cliArgs.token || getInput("GITHUB_TOKEN"),
+  defaultColors: cliArgs.defaultColors,
   dark: cliArgs.dark,
   light: cliArgs.light,
   enableGhostBricks:
@@ -106,11 +111,12 @@ if (!options.username || !options.token) {
 if (
   !options.dark &&
   !options.light &&
+  !options.defaultColors &&
   !options.bricksColors &&
   !options.paddleColor &&
   !options.ballColor
 ) {
-  options.light = true; // Default to light mode if neither is specified
+  options.defaultColors = true; // Default colors if neither is specified
 
   // Enable both for GitHub actions by default
   if (process.env.GITHUB_ACTIONS === "true") {
@@ -140,6 +146,9 @@ if (options.paddleColor || options.ballColor || options.bricksColors) {
     name: "custom",
   });
 }
+if (options.defaultColors) {
+  variants.push({ bricksColors: undefined, name: "light" });
+}
 if (options.light) {
   variants.push({ bricksColors: "github_light", name: "light" });
 }

src/svg.ts

@@ -62,20 +62,30 @@ type FrameState = {
   bricks: BrickStatus[]; // Array of brick statuses (visible or hidden)
 };
 
+// Interface for GitHub Contribution Graph
+interface GitHubContributionDay {
+  level: 0 | 1 | 2 | 3 | 4;
+  contributionCount: number;
+}
+
+// Interface for GitHub Contribution Response
+interface GithubContributionResponse {
+  days: (GitHubContributionDay | null)[][];
+  defaultColorPalette: ColorPalette;
+}
+
 /**
  * Fetches the GitHub contributions calendar for a user using the GraphQL API.
  *
  * @param userName - The GitHub username to fetch contributions for.
  * @param githubToken - A GitHub personal access token with appropriate permissions.
- * @returns A 2D array representing weeks and days, where each element contains the color string or null.
+ * @returns The default color palette and a 2D array representing weeks and days, where each element contains the color string or null.
  * @throws Will throw an error if the API request fails or returns errors.
  */
 async function fetchGithubContributionsGraphQL(
   userName: string,
   githubToken: string,
-): Promise<
-  ({ level: 0 | 1 | 2 | 3 | 4; contributionCount: number } | null)[][]
-> {
+): Promise<GithubContributionResponse> {
   const query = `
     query($userName:String!) {
       user(login: $userName){
@@ -85,6 +95,7 @@ async function fetchGithubContributionsGraphQL(
               contributionDays {
                 contributionLevel
                 contributionCount
+                color
               }
             }
           }
@@ -115,26 +126,36 @@ async function fetchGithubContributionsGraphQL(
   // Format the contribution days into a 2D array of objects (weeks x days)
   const weeks =
     json.data.user.contributionsCollection.contributionCalendar.weeks;
-  const levels: ({
-    level: 0 | 1 | 2 | 3 | 4;
-    contributionCount: number;
-  } | null)[][] = [];
+  const defaultColorPalette: Record<0 | 1 | 2 | 3 | 4, string> = {
+    0: "#000",
+    1: "#000",
+    2: "#000",
+    3: "#000",
+    4: "#000",
+  };
+  const levels: (GitHubContributionDay | null)[][] = [];
   for (let c = 0; c < weeks.length; c++) {
     levels[c] = [];
     const days = weeks[c].contributionDays;
     for (let r = 0; r < days.length; r++) {
+      const level =
+        (days[r].contributionLevel === "FOURTH_QUARTILE" && 4) ||
+        (days[r].contributionLevel === "THIRD_QUARTILE" && 3) ||
+        (days[r].contributionLevel === "SECOND_QUARTILE" && 2) ||
+        (days[r].contributionLevel === "FIRST_QUARTILE" && 1) ||
+        0;
+
+      defaultColorPalette[level] = days[r].color;
       levels[c][r] = {
-        level:
-          (days[r].contributionLevel === "FOURTH_QUARTILE" && 4) ||
-          (days[r].contributionLevel === "THIRD_QUARTILE" && 3) ||
-          (days[r].contributionLevel === "SECOND_QUARTILE" && 2) ||
-          (days[r].contributionLevel === "FIRST_QUARTILE" && 1) ||
-          0,
+        level,
         contributionCount: days[r].contributionCount,
       };
     }
   }
-  return levels;
+  return {
+    days: levels,
+    defaultColorPalette: Object.values(defaultColorPalette) as ColorPalette,
+  };
 }
 
 /**
@@ -334,15 +355,15 @@ export async function generateSVG(
     enableGhostBricks = true,
     paddleColor = "#1F6FEB",
     ballColor = "#1F6FEB",
-    bricksColors = "github_light",
+    bricksColors,
   } = options;
   const colorDays = await fetchGithubContributionsGraphQL(
     username,
     githubToken,
   );
 
   // The number of columns (weeks) is determined by the API response
-  const brickColumnCount = colorDays.length;
+  const brickColumnCount = colorDays.days.length;
 
   // Calculate canvasWidth and canvasHeight dynamically
   const canvasWidth =
@@ -360,7 +381,7 @@ export async function generateSVG(
   const canvasHeight = paddleY + PADDLE_HEIGHT + PADDING;
 
   // Pick palette
-  let colorPalette: ColorPalette = GITHUB_LIGHT;
+  let colorPalette: ColorPalette = colorDays.defaultColorPalette;
   if (bricksColors === "github_light") {
     colorPalette = GITHUB_LIGHT;
   } else if (bricksColors === "github_dark") {
@@ -373,7 +394,7 @@ export async function generateSVG(
   const bricks: Brick[] = [];
   for (let c = 0; c < brickColumnCount; c++) {
     for (let r = 0; r < 7; r++) {
-      const day = (colorDays[c] && colorDays[c][r]) || null;
+      const day = (colorDays.days[c] && colorDays.days[c][r]) || null;
       if (!day) continue; // skip bricks for missing days
 
       bricks.push({