feat: make total stars configurable

LuciNyan · Feb 24, 2024 · ffc2b51 · ffc2b51
1 parent f7aae9d
commit ffc2b51
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -44,14 +44,15 @@ Github Stats Card Options
 
 | Name | Description                  | Default value |
 | --- |------------------------------|---------------|
-| `username` | GitHub username              | ''            |
-| `show_rank` | Display rank value             | `true`        |
+| `background` | Set background color/image. Supports a subset of CSS background property values    | `#434343`     |
+| `color` | Set text color to any valid CSS color value | `white`       |
 | `include_all_commits` | Count all commits            | `false`       |
+| `pixelate_avatar` | Apply pixelation to avatar     | `true`        |
 | `screen_effect` | Enable curved screen effect  | `false`       |
 | `show_avatar` | Display avatar                  | `true`        |
-| `pixelate_avatar` | Apply pixelation to avatar     | `true`        |
-| `color` | Set text color to any valid CSS color value | `white`       |
-| `background` | Set background color/image. Supports a subset of CSS background property values    | `#434343`     |
+| `show_rank` | Display rank value             | `true`        |
+| `show_total_stars` | Display total stars earned             | `true`        |
+| `username` | GitHub username              | ''            |
 
 ## Deploy on your own
 

diff --git a/api/github-stats.ts b/api/github-stats.ts
@@ -4,17 +4,18 @@ import { clamp, fetchStats, renderStats } from 'pixel-profile'
 
 export default async (req: VercelRequest, res: VercelResponse) => {
   const {
-    username,
-    screen_effect,
-    show_avatar,
-    pixelate_avatar,
-    color,
     background,
-    show_rank,
-    include_all_commits,
     cache_seconds = `${CONSTANTS.CARD_CACHE_SECONDS}`,
+    color,
     exclude_repo,
-    show
+    include_all_commits,
+    pixelate_avatar,
+    screen_effect,
+    show,
+    show_avatar,
+    show_rank,
+    show_total_stars,
+    username
   } = req.query
 
   res.setHeader('Content-Type', 'image/png')
@@ -23,6 +24,7 @@ export default async (req: VercelRequest, res: VercelResponse) => {
     const showStats = parseArray(show)
     const showAvatar = parseBoolean(show_avatar) ?? true
     const showRank = parseBoolean(show_rank) ?? true
+    const showTotalStars = parseBoolean(show_total_stars) ?? true
     const includeAllCommits = parseBoolean(include_all_commits)
 
     const stats: Parameters<typeof renderStats>[0] = await fetchStats(
@@ -36,6 +38,7 @@ export default async (req: VercelRequest, res: VercelResponse) => {
 
     stats.avatarUrl = showAvatar ? stats.avatarUrl : ''
     stats.rank = showRank ? stats.rank : null
+    stats.totalStars = showTotalStars ? stats.totalStars : null
 
     let cacheSeconds = clamp(parseInt(parseString(cache_seconds) ?? '0', 10), CONSTANTS.SIX_HOURS, CONSTANTS.ONE_DAY)
 

diff --git a/packages/pixel-profile/README.md b/packages/pixel-profile/README.md
@@ -48,14 +48,15 @@ Github Stats Card Options
 
 | Name                  | Description                                                                     | Default value |
 | --------------------- | ------------------------------------------------------------------------------- | ------------- |
-| `username`            | GitHub username                                                                 | ''            |
-| `show_rank`           | Display rank value                                                              | `true`        |
+| `background`          | Set background color/image. Supports a subset of CSS background property values | `#434343`     |
+| `color`               | Set text color to any valid CSS color value                                     | `white`       |
 | `include_all_commits` | Count all commits                                                               | `false`       |
+| `pixelate_avatar`     | Apply pixelation to avatar                                                      | `true`        |
 | `screen_effect`       | Enable curved screen effect                                                     | `false`       |
 | `show_avatar`         | Display avatar                                                                  | `true`        |
-| `pixelate_avatar`     | Apply pixelation to avatar                                                      | `true`        |
-| `color`               | Set text color to any valid CSS color value                                     | `white`       |
-| `background`          | Set background color/image. Supports a subset of CSS background property values | `#434343`     |
+| `show_rank`           | Display rank value                                                              | `true`        |
+| `show_total_stars`    | Display total stars earned                                                      | `true`        |
+| `username`            | GitHub username                                                                 | ''            |
 
 ## Contribute
 

diff --git a/packages/pixel-profile/src/cards/stats.ts b/packages/pixel-profile/src/cards/stats.ts
@@ -10,7 +10,7 @@ import satori from 'satori'
 export type Stats = {
   name: string
   username: string
-  totalStars: number
+  totalStars: number | null
   totalCommits: number
   totalIssues: number
   totalPRs: number
@@ -54,7 +54,7 @@ export async function renderStats(stats: Stats, options: Options = {}): Promise<
   const _stats = {
     name,
     avatar,
-    totalStars: kFormatter(totalStars),
+    totalStars: totalStars ? kFormatter(totalStars) : '',
     totalCommits: kFormatter(totalCommits),
     totalIssues: kFormatter(totalIssues),
     totalPRs: kFormatter(totalPRs),

diff --git a/packages/pixel-profile/src/templates/github-stats.tsx b/packages/pixel-profile/src/templates/github-stats.tsx
@@ -2,7 +2,7 @@ import { Rank } from '../utils'
 
 export type Stats = {
   name: string
-  totalStars: string
+  totalStars: string | null
   totalCommits: string
   totalPRs: string
   totalIssues: string
@@ -110,18 +110,21 @@ export function makeGithubStats(stats: Stats, options: Options) {
               paddingRight: avatar ? 40 : 0
             }}
           >
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                justifyContent: 'space-between',
-                flexDirection: 'row',
-                width: '100%'
-              }}
-            >
-              <div>Total Stars Earned: </div>
-              <div>{`${totalStars}`}</div>
-            </div>
+            {totalStars ? (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  justifyContent: 'space-between',
+                  flexDirection: 'row',
+                  width: '100%'
+                }}
+              >
+                <div>Total Stars Earned: </div>
+                <div>{`${totalStars}`}</div>
+              </div>
+            ) : null}
+
             <div
               style={{
                 display: 'flex',

diff --git a/...-stats-test-ts-github-stats-render-card-with-total-stars-set-to-null-1-snap.png b/...-stats-test-ts-github-stats-render-card-with-total-stars-set-to-null-1-snap.png
diff --git a/packages/pixel-profile/test/github-stats.test.ts b/packages/pixel-profile/test/github-stats.test.ts
@@ -77,4 +77,23 @@ describe('Github stats', () => {
     )
     expect(png).toMatchImageSnapshot()
   })
+
+  it('Render card with totalStars set to null', async () => {
+    const png = await renderStats({
+      name: 'LuciNyan',
+      username: 'username',
+      totalStars: null,
+      totalCommits: 99999,
+      totalIssues: 99,
+      totalPRs: 9,
+      contributedTo: 9999,
+      avatarUrl: '',
+      rank: {
+        level: 'S',
+        percentile: 0,
+        score: 0
+      }
+    })
+    expect(png).toMatchImageSnapshot()
+  })
 })