Skip to content

Commit

Permalink
feat: implement dynamic visibility for stats and avatar via hide pa…
Browse files Browse the repository at this point in the history 
…rameter (#8)

* feat: implement dynamic visibility for stats and avatar via `hide` parameter

test: update test cases for `renderStats` function

fix: remove dynamic height adjustment to maintain consistent separator length

refactor: rename stat variables and update visibility check function

* test: update

* fix: hide rank

---------

Co-authored-by: Luci <22126563+LuciNyan@users.noreply.github.com>
  • Loading branch information
@liby @LuciNyan
liby and LuciNyan authored Mar 5, 2024
1 parent 32c652f commit 20ca108
Show file tree
Hide file tree
Showing 9 changed files with 208 additions and 182 deletions.
Binary file added .github/img/sample-github-stats-with-hidden-stats.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@ vercel_token
*.code-workspace

dist
__diff_output__/
33 changes: 21 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,18 +93,27 @@ https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&theme=serene

### Github Stats Card Options

| Name | Description | Default value |
|-----------------------|---------------------------------------------------------------------------------|---------------|
| `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` |
| `show_rank` | Display rank value | `true` |
| `show_total_stars` | Display total stars earned | `true` |
| `username` | GitHub username | '' |
| `theme` | Check out the built-in themes below | '' |
| Name | Description | Default value |
|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| `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` |
| `hide` | Hide specific stats or elements by passing a comma-separated list. Valid keys: 'avatar', 'commits', 'contributions', 'issues', 'prs', 'rank', 'stars' | |
| `include_all_commits` | Count all commits | `false` |
| `pixelate_avatar` | Apply pixelation to avatar | `true` |
| `screen_effect` | Enable curved screen effect | `false` |
| `username` | GitHub username | '' |
| `theme` | Check out the built-in themes below | '' |

### Hiding individual stats

You can pass a query parameter `&hide=` to hide any specific stats with comma-separated values.

> Options: `&hide=avatar,commits,contributions,issues,prs,rank,stars`
```html
<!--Replace <username> with your own GitHub username.-->
https://pixel-profile.vercel.app/api/github-stats?username=<username>&hide=avatar,stars
```
![Hiding individual stats](.github/img/sample-github-stats-with-hidden-stats.png)

## Deploy on your own

Expand Down
18 changes: 5 additions & 13 deletions packages/pixel-profile-server/src/github-stats.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,11 @@ githubStats.get('/', async (c) => {
cache_seconds = `${CONSTANTS.CARD_CACHE_SECONDS}`,
color,
exclude_repo,
hide = '',
include_all_commits,
pixelate_avatar,
screen_effect,
show,
show_avatar,
show_rank,
show_total_stars,
username,
theme
} = req.query()
Expand All @@ -26,9 +24,6 @@ githubStats.get('/', async (c) => {

try {
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(
Expand All @@ -40,10 +35,6 @@ githubStats.get('/', async (c) => {
showStats.includes('discussions_answered')
)

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)

cacheSeconds = process.env.CACHE_SECONDS ? parseInt(process.env.CACHE_SECONDS, 10) || cacheSeconds : cacheSeconds
Expand All @@ -54,12 +45,13 @@ githubStats.get('/', async (c) => {
)

const options = {
screenEffect: parseBoolean(screen_effect),
color: parseString(color),
background: parseString(background),
color: parseString(color),
hiddenStatsKeys: hide ? parseArray(hide) : undefined,
includeAllCommits,
pixelateAvatar: parseBoolean(pixelate_avatar),
theme: parseString(theme),
includeAllCommits
screenEffect: parseBoolean(screen_effect)
}

const result = await renderStats(stats, options)
Expand Down
20 changes: 9 additions & 11 deletions packages/pixel-profile/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,15 @@ If you want to include a GitHub stats card in your own README and have it displa

Github Stats Card Options

| Name | Description | Default value |
| --------------------- | ------------------------------------------------------------------------------- | ------------- |
| `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` |
| `show_rank` | Display rank value | `true` |
| `show_total_stars` | Display total stars earned | `true` |
| `username` | GitHub username | '' |
| Name | Description | Default value |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `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` |
| `hide` | Hide specific stats or elements by passing a comma-separated list. Valid keys: 'avatar', 'commits', 'contributions', 'issues', 'prs', 'rank', 'stars' | |
| `include_all_commits` | Count all commits | `false` |
| `pixelate_avatar` | Apply pixelation to avatar | `true` |
| `screen_effect` | Enable curved screen effect | `false` |
| `username` | GitHub username |

## Contribute

Expand Down
41 changes: 25 additions & 16 deletions packages/pixel-profile/src/cards/stats.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import satori from 'satori'
export type Stats = {
name: string
username: string
totalStars: number | null
totalStars: number
totalCommits: number
totalIssues: number
totalPRs: number
Expand All @@ -33,41 +33,49 @@ type Options = {
color?: string
showRank?: boolean
background?: string
pixelateAvatar?: boolean
hiddenStatsKeys?: string[]
includeAllCommits?: boolean
pixelateAvatar?: boolean
}

export async function renderStats(stats: Stats, options: Options = {}): Promise<Buffer> {
const { name, username, totalStars, totalCommits, totalIssues, totalPRs, avatarUrl, contributedTo, rank } = stats
let modifiedAvatarUrl = avatarUrl

const {
screenEffect = false,
color,
background,
pixelateAvatar = true,
color,
hiddenStatsKeys = [],
includeAllCommits = false,
pixelateAvatar = true,
screenEffect = false,
theme = ''
} = options

const themeOptions = getThemeOptions(theme)

const cardSize = rank ? CARD_SIZE.BIG : CARD_SIZE.SMALL
if (hiddenStatsKeys.includes('avatar')) {
modifiedAvatarUrl = ''
}

const width = cardSize.CARD_WIDTH
const height = cardSize.CARD_HEIGHT
const themeOptions = getThemeOptions(theme)
const baseCardSize = !hiddenStatsKeys.includes('rank') ? CARD_SIZE.BIG : CARD_SIZE.SMALL
const width = baseCardSize.CARD_WIDTH
const height = baseCardSize.CARD_HEIGHT

const fontPath = join(process.cwd(), 'packages', 'pixel-profile', 'fonts', 'PressStart2P-Regular.ttf')

const [fontData, avatar] = await Promise.all([readFile(fontPath), makeAvatar(avatarUrl, pixelateAvatar, !!theme)])
const [fontData, avatar] = await Promise.all([
readFile(fontPath),
makeAvatar(modifiedAvatarUrl, pixelateAvatar, !!theme)
])

const _stats = {
name,
avatar,
totalStars: totalStars ? kFormatter(totalStars) : '',
totalCommits: kFormatter(totalCommits),
totalIssues: kFormatter(totalIssues),
totalPRs: kFormatter(totalPRs),
contributedTo: kFormatter(contributedTo),
stars: totalStars ? kFormatter(totalStars) : '',
commits: kFormatter(totalCommits),
issues: kFormatter(totalIssues),
prs: kFormatter(totalPRs),
contributions: kFormatter(contributedTo),
rank: rank ? rank.level : ''
}

Expand All @@ -80,6 +88,7 @@ export async function renderStats(stats: Stats, options: Options = {}): Promise<
color,
background
}),
hiddenStatsKeys,
includeAllCommits
}

Expand Down
Loading

0 comments on commit 20ca108

Please sign in to comment.