feat: add theme journey (#12)

README.md

@@ -57,13 +57,14 @@ If you want to include a GitHub stats card in your own README and have it displa
 
 ### Themes
 Below are some prebuilt themes to get started. However, cards are fully customizable by passing in background and color props. Feel free to ditch the premade themes and design unique cards by selecting your own colors and backgrounds!
-#### 1. Rainbow.
+#### 1. Journey without pixelated avatar.
 ```html
-https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&theme=rainbow
+https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&theme=journey&pixelate_avatar=false
 ```
-![Rainbow](.github/img/pride-flag-light.png)
+![Rainbow](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-packages-pixel-profile-test-theme-test-ts-theme-render-card-with-theme-journey-1-snap.png)
 
-#### 2. Rainbow with screen effect. Set your profile to dark theme before trying this, I promise MAXIMUM wow factor! 🤩
+#### 2. Rainbow with screen effect.
+Set your profile to dark theme before trying this, I promise MAXIMUM wow factor! 🤩
 ```html
 https://pixel-profile.vercel.app/api/github-stats?username=LuciNyan&theme=rainbow&screen_effect=true
 ```

packages/pixel-profile/src/cards/stats.ts

@@ -140,7 +140,7 @@ export async function renderStats(stats: Stats, options: Options = {}): Promise<
   return await getPngBufferFromPixels(pixels, width, height)
 }
 
-const BLOCK_SIZE = 6.8
+const BASE_AVATAR_BLOCK_SIZE = 6.8
 
 async function makeAvatar(url: string, pixelateAvatar: boolean): Promise<string> {
   if (!url) {
@@ -152,7 +152,7 @@ async function makeAvatar(url: string, pixelateAvatar: boolean): Promise<string>
   let { pixels, width, height } = await getPixelsFromPngBuffer(png)
 
   if (pixelateAvatar) {
-    const blockSize = (height / AVATAR_SIZE.AVATAR_HEIGHT) * BLOCK_SIZE
+    const blockSize = (height / AVATAR_SIZE.AVATAR_HEIGHT) * BASE_AVATAR_BLOCK_SIZE
     pixels = pixelate(pixels, width, height, blockSize)
   }
 

packages/pixel-profile/src/templates/github-stats.tsx

@@ -15,6 +15,10 @@ export type TemplateOptions = {
   color: string
   background: string
   includeAllCommits: boolean
+  textShadow?: string
+  backgroundImage?: string
+  backgroundSize?: string
+  backgroundRepeat?: string
 }
 
 export const defaultTemplateOptions = {
@@ -41,7 +45,7 @@ export const AVATAR_SIZE = {
 export function makeGithubStats(stats: Stats, options: TemplateOptions) {
   const { name, totalStars, totalCommits, totalPRs, totalIssues, contributedTo, rank, avatar } = stats
 
-  const { color, background, includeAllCommits } = options
+  const { color, includeAllCommits } = options
 
   const date = new Date()
   const year = date.getFullYear()
@@ -54,7 +58,7 @@ export function makeGithubStats(stats: Stats, options: TemplateOptions) {
         width: '100%',
         alignItems: 'center',
         justifyContent: 'center',
-        background
+        ...options
       }}
     >
       <div

packages/pixel-profile/src/theme.ts → packages/pixel-profile/src/theme/index.ts

@@ -1,9 +1,15 @@
+import { IMG_JOURNEY } from './images/journey'
+
 type Theme = Record<
   string,
-  {
+  Partial<{
     color: string
     background: string
-  }
+    textShadow: string
+    backgroundImage: string
+    backgroundSize: string
+    backgroundRepeat: string
+  }>
 >
 
 export const THEME: Theme = {
@@ -34,6 +40,12 @@ export const THEME: Theme = {
   serene: {
     color: 'white',
     background: 'linear-gradient(to bottom right, #07A3B2, #D9ECC7)'
+  },
+  journey: {
+    color: 'white',
+    backgroundImage: `url(${IMG_JOURNEY})`,
+    backgroundSize: '100% 100%',
+    backgroundRepeat: 'no-repeat'
   }
 }
 

packages/pixel-profile/test/theme.test.ts

@@ -1,6 +1,7 @@
 import { renderStats } from '../src'
 import { BLUE_AVATAR } from './avatar/blue'
 import { CYAN_AVATAR } from './avatar/cyan'
+import { DARK_GREEN_AVATAR } from './avatar/dark-green'
 import { ORANGE_AVATAR } from './avatar/orange'
 // @ts-expect-error ...
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
@@ -73,4 +74,12 @@ describe('Theme', () => {
     const png = await renderStats({ ...stats, avatarUrl: CYAN_AVATAR }, { theme: 'serene', pixelateAvatar: false })
     expect(png).toMatchImageSnapshot()
   })
+
+  it('Render card with theme journey', async () => {
+    const png = await renderStats(
+      { ...stats, avatarUrl: DARK_GREEN_AVATAR },
+      { theme: 'journey', pixelateAvatar: false }
+    )
+    expect(png).toMatchImageSnapshot()
+  })
 })