add streak card widget

api/cards/streak-stats.ts

@@ -0,0 +1,35 @@
+import { changToNextGitHubToken } from "../utils/github-token-updater"
+import { getErrorMsgCard } from "../utils/error-card"
+import type { VercelRequest, VercelResponse } from "@vercel/node"
+import {getStreakCardSVGWithThemeName} from "../../src/cards/streak-cards"
+
+export default async (req: VercelRequest, res: VercelResponse) => {
+  const { username, theme = "default" } = req.query
+  if (typeof theme !== "string") {
+    res.status(400).send("theme must be a string")
+    return
+  }
+  if (typeof username !== "string") {
+    res.status(400).send("username must be a string")
+    return
+  }
+  try {
+    let tokenIndex = 0
+    while (true) {
+      try {
+        const cardSVG = await getStreakCardSVGWithThemeName(username, theme)
+        res.setHeader("Content-Type", "image/svg+xml")
+        res.send(cardSVG)
+        return
+      } catch (err: any) {
+        console.log(err.message)
+        // We update github token and try again, until getNextGitHubToken throw an Error
+        changToNextGitHubToken(tokenIndex)
+        tokenIndex += 1
+      }
+    }
+  } catch (err: any) {
+    console.log(err)
+    res.send(getErrorMsgCard(err.message, theme))
+  }
+}

api/pages/demo.html

@@ -160,6 +160,20 @@
                                 </v-btn>
                             </v-col>
                         </v-row>
+                        <!-- Added Streak Stats Card -->
+                        <v-row justify="center" no-gutters>
+                            <v-col cols="10">
+                                <v-card outlined>
+                                    <v-img :src="streakStatsSource"></v-img>
+                                    <v-card-text class="text--primary">
+                                        <div>Markdown Usage</div>
+                                        <code>
+                                            ![]({{ streakStatsSource }})
+                                        </code>
+                                    </v-card-text>
+                                </v-card>
+                            </v-col>
+                        </v-row>
                         <v-row justify="center" no-gutters>
                             <v-col cols="10">
                                 <v-card outlined>
@@ -240,6 +254,7 @@
                     themes: ['default'],
                     username: 'vn7n24fzkq',
                     theme: 'default',
+                    streakStatsSource: '',
                     profileDetailSource: '',
                     repoLanguageSource: '',
                     commitLanguageSource: '',
@@ -265,6 +280,7 @@
                         this.theme = theme;
                     },
                     updateAllCards: function () {
+                        this.streakStatsSource = `${this.baseURL}/api/cards/streak-stats?username=${this.username}&theme=${this.theme}`;
                         this.profileDetailSource = `${this.baseURL}/api/cards/profile-details?username=${this.username}&theme=${this.theme}`;
                         this.repoLanguageSource = `${this.baseURL}/api/cards/repos-per-language?username=${this.username}&theme=${this.theme}`;
                         this.commitLanguageSource = `${this.baseURL}/api/cards/most-commit-language?username=${this.username}&theme=${this.theme}`;

src/app.ts

@@ -7,6 +7,7 @@ import {createProductiveTimeCard} from './cards/productive-time-card';
 import {spawn} from 'child_process';
 import {translateLanguage} from './utils/translator';
 import {OUTPUT_PATH, generatePreviewMarkdown} from './utils/file-writer';
+import { createStreakCardForUser } from './cards/streak-cards';
 
 const execCmd = (cmd: string, args: string[] = []) =>
     new Promise((resolve, reject) => {
@@ -128,6 +129,7 @@ const main = async (username: string, utcOffset: number, exclude: Array<string>)
         await createCommitsPerLanguageCard(username, exclude);
         await createStatsCard(username);
         await createProductiveTimeCard(username, utcOffset);
+        await createStreakCardForUser(username)
         generatePreviewMarkdown(false);
     } catch (error: any) {
         console.error(error);

src/cards/streak-cards.ts

@@ -0,0 +1,61 @@
+import { ThemeMap } from "../const/theme"
+import { createStreakCard, type StreakData } from "../templates/streak-card"
+import { writeSVG } from "../utils/file-writer"
+import { calculateStreaks } from "../github-api/streak-calculator"
+import { getContributionByYear } from "../github-api/contributions-by-year"
+import { getProfileDetails } from "../github-api/profile-details"
+
+export const createStreakCardForUser = async (username: string) => {
+  const streakData = await getStreakCardData(username)
+  for (const themeName of ThemeMap.keys()) {
+    const title = ``
+    const svgString = getStreakCardSVG(title, streakData, themeName)
+    // output to folder, use 1- prefix for sort in preview
+    writeSVG(themeName, "1-streak-card", svgString)
+  }
+}
+
+export const getStreakCardSVGWithThemeName = async (username: string, themeName: string): Promise<string> => {
+  if (!ThemeMap.has(themeName)) throw new Error("Theme does not exist")
+  const streakData = await getStreakCardData(username)
+  const title = ``
+  return getStreakCardSVG(title, streakData, themeName)
+}
+
+const getStreakCardSVG = (title: string, streakData: StreakData, themeName: string): string => {
+  const svgString = createStreakCard(title, streakData, ThemeMap.get(themeName)!)
+  return svgString
+}
+
+const getStreakCardData = async (username: string): Promise<StreakData> => {
+  const profileDetails = await getProfileDetails(username)
+
+  // Calculate total contributions
+  let totalContributions = 0
+  if (process.env.VERCEL_I) {
+    profileDetails.contributionYears = profileDetails.contributionYears.slice(0, 1)
+    for (const year of profileDetails.contributionYears) {
+      totalContributions += (await getContributionByYear(username, year)).totalContributions
+    }
+  } else {
+    for (const year of profileDetails.contributionYears) {
+      totalContributions += (await getContributionByYear(username, year)).totalContributions
+    }
+  }
+
+  // Calculate streaks from contribution data
+  const streakInfo = calculateStreaks(profileDetails.contributions)
+
+  const streakData: StreakData = {
+    currentStreak: streakInfo.currentStreak,
+    currentStreakStart: streakInfo.currentStreakStart,
+    currentStreakEnd: streakInfo.currentStreakEnd,
+    maxStreak: streakInfo.maxStreak,
+    maxStreakStart: streakInfo.maxStreakStart,
+    maxStreakEnd: streakInfo.maxStreakEnd,
+    totalContributions: totalContributions,
+    joinedDate: new Date(profileDetails.createdAt),
+  }
+
+  return streakData
+}

src/github-api/streak-calculator.ts

@@ -0,0 +1,119 @@
+import moment from "moment"
+import type { ProfileContribution } from "./profile-details"
+
+export interface StreakInfo {
+  currentStreak: number
+  currentStreakStart: Date
+  currentStreakEnd: Date
+  maxStreak: number
+  maxStreakStart: Date
+  maxStreakEnd: Date
+}
+
+/**
+ * Calculate current and max streak from contribution data
+ * @param contributions Array of contribution data sorted by date
+ * @returns StreakInfo object with current and max streak information
+ */
+export function calculateStreaks(contributions: ProfileContribution[]): StreakInfo {
+  if (contributions.length === 0) {
+    return {
+      currentStreak: 0,
+      currentStreakStart: new Date(),
+      currentStreakEnd: new Date(),
+      maxStreak: 0,
+      maxStreakStart: new Date(),
+      maxStreakEnd: new Date(),
+    }
+  }
+
+  // Sort contributions by date ascending
+  const sorted = [...contributions].sort((a, b) => a.date.getTime() - b.date.getTime())
+
+  let currentStreak = 0
+  let maxStreak = 0
+  let currentStreakStart = sorted[0].date
+  let currentStreakEnd = sorted[0].date
+  let maxStreakStart = sorted[0].date
+  let maxStreakEnd = sorted[0].date
+  let tempStreakStart = sorted[0].date
+
+  // Iterate through contributions to find streaks
+  for (let i = 0; i < sorted.length; i++) {
+    const current = sorted[i]
+    const previous = i > 0 ? sorted[i - 1] : null
+
+    // Check if this is a continuation of streak (has contributions)
+    if (current.contributionCount > 0) {
+      if (previous && current.contributionCount > 0) {
+        const dayDiff = moment(current.date).diff(moment(previous.date), "days")
+
+        // If consecutive days, continue streak
+        if (dayDiff === 1) {
+          currentStreak++
+          currentStreakEnd = current.date
+        } else {
+          // Streak broken, check if it's the max
+          if (currentStreak > maxStreak) {
+            maxStreak = currentStreak
+            maxStreakStart = tempStreakStart
+            maxStreakEnd = sorted[i - 1].date
+          }
+          currentStreak = 1
+          tempStreakStart = current.date
+          currentStreakStart = current.date
+          currentStreakEnd = current.date
+        }
+      } else if (!previous) {
+        // First day
+        currentStreak = 1
+        tempStreakStart = current.date
+        currentStreakStart = current.date
+        currentStreakEnd = current.date
+      }
+    } else {
+      // No contribution on this day, streak broken
+      if (currentStreak > 0 && currentStreak > maxStreak) {
+        maxStreak = currentStreak
+        maxStreakStart = tempStreakStart
+        maxStreakEnd = sorted[i - 1].date
+      }
+      currentStreak = 0
+    }
+  }
+
+  // Check final streak
+  if (currentStreak > maxStreak) {
+    maxStreak = currentStreak
+    maxStreakStart = tempStreakStart
+    maxStreakEnd = sorted[sorted.length - 1].date
+  }
+
+  // Calculate current streak from today backwards
+  const today = moment().startOf("day")
+  let actualCurrentStreak = 0
+  let actualCurrentStreakStart = today.toDate()
+  const actualCurrentStreakEnd = today.toDate()
+
+  for (let i = sorted.length - 1; i >= 0; i--) {
+    const current = sorted[i]
+    const currentMoment = moment(current.date).startOf("day")
+    const daysDiff = today.diff(currentMoment, "days")
+
+    if (daysDiff === actualCurrentStreak && current.contributionCount > 0) {
+      actualCurrentStreak++
+      actualCurrentStreakStart = current.date
+    } else if (daysDiff > actualCurrentStreak) {
+      break
+    }
+  }
+
+  return {
+    currentStreak: actualCurrentStreak,
+    currentStreakStart: actualCurrentStreakStart,
+    currentStreakEnd: actualCurrentStreakEnd,
+    maxStreak: maxStreak,
+    maxStreakStart: maxStreakStart,
+    maxStreakEnd: maxStreakEnd,
+  }
+}