{"id":14981980,"url":"https://github.com/lucinyan/pixel-profile","last_synced_at":"2025-04-09T05:08:46.678Z","repository":{"id":224057961,"uuid":"737569348","full_name":"LuciNyan/pixel-profile","owner":"LuciNyan","description":"Generate a pixel art style profile card from your GitHub data! ✨","archived":false,"fork":false,"pushed_at":"2024-09-19T10:21:55.000Z","size":38978,"stargazers_count":446,"open_issues_count":1,"forks_count":20,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T05:08:34.177Z","etag":null,"topics":["github-stats-card","jsx","pixel-art","readme-generator","readme-stats","satori","serverless","vercel"],"latest_commit_sha":null,"homepage":"https://pixel-profile.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LuciNyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-31T15:03:50.000Z","updated_at":"2025-04-06T15:16:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"95f6a1ec-7aeb-490c-8d19-fc20559f63be","html_url":"https://github.com/LuciNyan/pixel-profile","commit_stats":{"total_commits":156,"total_committers":6,"mean_commits":26.0,"dds":"0.34615384615384615","last_synced_commit":"708d74cdbecd7cc3272867217e11eb935b21b12f"},"previous_names":["lucinyan/pixel-profile"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuciNyan%2Fpixel-profile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuciNyan%2Fpixel-profile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuciNyan%2Fpixel-profile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuciNyan%2Fpixel-profile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LuciNyan","download_url":"https://codeload.github.com/LuciNyan/pixel-profile/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247980837,"owners_count":21027808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-stats-card","jsx","pixel-art","readme-generator","readme-stats","satori","serverless","vercel"],"created_at":"2024-09-24T14:04:36.391Z","updated_at":"2025-04-09T05:08:46.659Z","avatar_url":"https://github.com/LuciNyan.png","language":"TypeScript","funding_links":["https://ko-fi.com/8pxl"],"categories":[],"sub_categories":[],"readme":"![Pixel Profile](.github/img/card.png)\n**Pixel Profile**: Generate pixel art profiles from your GitHub data\n\n\u003e ### 🚀 What's New\n\u003e\n\u003e ### GitHub Actions Integration\n\u003e\n\u003e We've introduced GitHub Actions support for automatic pre-generation of GitHub stats cards. This means:\n\u003e\n\u003e - Your stats card will always be visible, even in poor network conditions\n\u003e - Faster loading times for your GitHub profile\n\u003e\n\u003e **How to use:**\n\u003e 1. Check out our example setup: [LuciNyan's Profile](https://github.com/LuciNyan/LuciNyan)\n\u003e 2. Copy the workflow file to your repository\n\u003e 3. Replace the username with your own\n\u003e 4. Enjoy automatically updated stats cards!\n\n\u003e 🎉🎉🎉 [Halid](https://github.com/imhalid) has created an awesome [UI](https://github.com/imhalid/pixel-profile-generator) for pixel-profile, which makes it a breeze to edit our own GitHub cards!\n\u003e\n\u003e Check it out! ✨ https://pixel-profile-generator.vercel.app\n\n## Overview\n\nYou can easily generate a Github stats card with default styling using the following link:\n```html\n\u003c!--Replace \u003cusername\u003e with your own GitHub username.--\u003e\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\n```\n![Default Github Stats Card](.github/img/default-github-stats.png)\n\nOf course, you can customize the styling to better suit your preferences. For example, here is a stats card designed for GitHub's Dark Theme::\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026screen_effect=true\u0026theme=rainbow\n```\nThis is what it looks like in use in a README:\n\n![Demo 1](.github/img/demo-1.png)\n\nIf you want to include a GitHub stats card in your own README file and have it display the appropriate card for both the light and dark themes on GitHub, you can refer to the following configuration and configure your preferred theme, or fully customize elements like color, background, screen effects, etc:\n\n```md\n\u003cpicture decoding=\"async\" loading=\"lazy\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=summer\"\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026screen_effect=true\u0026theme=blue_chill\"\u003e\n  \u003cimg alt=\"github stats\" src=\"https://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=summer\"\u003e\n\u003c/picture\u003e\n```\n\n[Here](https://github.com/LuciNyan) is a ready-made example configuration you can reference if you need inspiration for your own config.\n\n## Documentation\n### Themes\nBelow 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!\n#### 1. Journey without pixelated avatar.\n![Journey](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-journey-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=journey\u0026pixelate_avatar=false\n```\n#### With dithering.\nThe `dithering=true` configuration is a standalone setting that can be applied to any theme.\n\n![Journey](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-journey-theme-and-dithering-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=journey\u0026dithering=true\u0026hide=avatar\n```\n\n#### 2. Road trip without pixelated avatar.\n![Road Trip](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-road-trip-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=road_trip\u0026pixelate_avatar=false\n```\n\n#### 3. Fuji without pixelated avatar.\n![Fuji](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-fuji-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=fuji\u0026pixelate_avatar=false\n```\n\n#### 4. Rainbow without pixelated avatar.\n![Rainbow](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-rainbow-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=rainbow\u0026pixelate_avatar=false\n```\n\n#### 5. Monica.\n![Monica](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-monica-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=monica\n```\n\n#### 6. Summer.\n![Summer](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-summer-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=summer\n```\n\n#### 7. Lax.\n![Lax](./packages/pixel-profile/test/__image_snapshots__/theme-test-ts-theme-render-card-with-lax-theme-1-snap.png)\n```html\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026theme=lax\n```\n\n\n### Github Stats Card Options\n\n| Name                  | Description                                                                                                                                           | Default value |\n|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|\n| `background`          | Set background color/image. Supports a subset of CSS background property values                                                                       | `#434343`     |\n| `color`               | Set text color to any valid CSS color value                                                                                                           | `white`       |\n| `hide`                | Hide specific stats or elements by passing a comma-separated list. Valid keys: 'avatar', 'commits', 'contributions', 'issues', 'prs', 'rank', 'stars' |               |\n| `include_all_commits` | Count all commits                                                                                                                                     | `false`       |\n| `pixelate_avatar`     | Apply pixelation to avatar                                                                                                                            | `true`        |\n| `screen_effect`       | Enable curved screen effect                                                                                                                           | `false`       |\n| `username`            | GitHub username                                                                                                                                       | ''            |\n| `theme`               | Check out the built-in themes below                                                                                                                   | ''            |\n| `dithering`           | Rendered the image using a 256-color palette with dithering                                                                                           | `false`       |\n\n\n### Hiding individual stats\n\nYou can pass a query parameter `\u0026hide=` to hide any specific stats with comma-separated values.\n\n\u003e Options: `\u0026hide=avatar,commits,contributions,issues,prs,rank,stars`\n```html\n\u003c!--Replace \u003cusername\u003e with your own GitHub username.--\u003e\nhttps://pixel-profile.vercel.app/api/github-stats?username=\u003cusername\u003e\u0026hide=rank\n```\n![Hiding individual stats](./packages/pixel-profile/test/__image_snapshots__/github-stats-test-ts-packages-pixel-profile-test-github-stats-test-ts-github-stats-render-card-without-rank-with-theme-1-snap.png)\n\n## Deploy on your own\n\nThe GitHub API has a rate limit of 5k requests per hour. So my https://pixel-profile.vercel.app/api setup could potentially hit that cap. By self-hosting, you eliminate that concern. \n\n### Deploy on Vercel (Recommend)\n\n#### 1. Creating a Personal Access Token\nTo use this tool to retrieve user statistics, you'll need to generate a Personal Access Token (PAT) with the proper scopes.\n\nClick [here](https://github.com/settings/tokens/new) to create a new PAT.\n\nUnder \"Select scopes\" check the box for \"repo\" and \"user\" like in the image below:\n\n![Image of selecting repo scope for PAT](.github/img/select-scopes.png)\n\nCopy the generated PAT for use in the config file or as an environment variable.\n\n#### 2. Deploy to Vercel\n[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FLuciNyan%2Fpixel-profile\u0026env=PAT_1\u0026envDescription=To%20use%20this%20tool%20to%20retrieve%20user%20statistics%2C%20you'll%20need%20to%20generate%20a%20Personal%20Access%20Token%20(PAT)%20with%20the%20proper%20scopes.\u0026envLink=https%3A%2F%2Fgithub.com%2FLuciNyan%2Fpixel-profile%3Ftab%3Dreadme-ov-file%231-creating-a-personal-access-token)\n\n#### 3. Using the PAT with Vercel\nOnce you have generated a Personal Access Token (PAT) from your GitHub account, you'll need to add it to your Vercel project configuration in order to authenticate API requests.\n\nTo add the PAT to Vercel:\n\n![Image of adding env step 1](.github/img/add-env-step-1.png)\n\n![Image of adding env step 2](.github/img/add-env-step-2.png)\n\n### Other platforms or self-hosted\nIn addition to Vercel, you can also deploy to other PaaS platforms (e.g. zeabur.com, heroku.com, fly.io) or hosted on your own server!\n\n#### Deploy on Zeabur\nFirst you need to have a [zeabur](zeabur.com) account.\n\nFork this repository and log in to Zeabur.\n\n\"Create a Project (or select an existing one)\" - \"Add Service\" - \"Git\" - \"Select the forked `pixel-profile` repository\".\n\n![Image of deploy on zeabur](.github/img/deploy-on-zeabur.gif)\n\nDon't forget to add your \"Personal Access Token (PAT) \" in \"Variable\".\n\n![Image of add variable on service](.github/img/deploy-on-zeabur-add-variable.png)\n\nFinally, go to \"Networking\" and generate a domain (or bind your own).\n\n![Image of generate a domain on service](.github/img/deploy-on-zeabur-generate-domain.png)\n\n#### Running on docker\n\u003e [!WARNING]  \n\u003e When hosting on Docker, caching is not available, which can quickly cause the API rate limits to be exceeded. It is recommended to use Nginx or a CDN as a proxy to provide caching functionality and optimize performance.\n\n```bash\n# Clone repository\ngit clone https://github.com/LuciNyan/pixel-profile.git\n\n# Go to the directory to build the Docker image\ncd pixel-profile\ndocker build -t pixel-profile .\n\n# Create and start the container\ndocker run -d \\\n  --name pixel-profile \\\n  -p 3000:3000 \\\n  -e PAT_1=ghp_xxxxxx \\ # Please change it to your \"Personal Access Token (PAT) \"\n  -e PORT=3000 \\\n  --restart always \\\n  pixel-profile\n\n# The service has successfully started on port 3000!\n\n```\n\n## Contribute\nThe layout in this project is entirely done with JSX, so developing it is almost no different than a normal React project. This means anyone can easily create new cards with very little effort. If you have any ideas, feel free to contribute them here! ❤️\n\n### Running Locally\nFollow these 4 easy steps to get `pixel-profile` running on your local machine:\n\n#### 1. Install dependencies\n```shell\npnpm install\n```\n\n#### 2. Generate a Personal Access Token (PAT)\nRefer to the \"Creating a Personal Access Token\" section above.\n\n#### 3. Create a .env file\nUse .env.example as a guide to set your environment variables.\n```markdown\nPAT_1=xxxxxxx\n```\n\n#### 4. Run! 🚀\n```shell\npnpm start\n```\n\n### TODO\n- [X] Github stats card.\n- [ ] Github repo card.\n- [ ] Leetcode stats card.\n\n## Author\n\n- [LuciNyan](https://github.com/LuciNyan)\n\n\u0026nbsp;\n\n\u003ca aria-label=\"Vercel logo\" href=\"https://vercel.com\"\u003e\n  \u003cimg src=\"https://badgen.net/badge/icon/Made%20with%20Love?icon=zeit\u0026label\u0026color=black\u0026labelColor=black\"\u003e\n\u003c/a\u003e\n\n\u003e This Pixel Profile project would not have been possible without these amazing projects:\n\u003e\n\u003e [Github Readme Stats](https://github.com/anuraghazra/github-readme-stats): One of the best tools out there for generating awesome Github stats cards.\n\u003e\n\u003e [resvg-js](https://github.com/yisibl/resvg-js): A high-performance SVG renderer and toolkit.\n\u003e\n\u003e [Satori](https://github.com/vercel/satori): An enlightened library to convert HTML and CSS to SVG.\n\u003e\n\u003e [Jubilee](https://ko-fi.com/8pxl) A truly unmatched pixel artist! ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucinyan%2Fpixel-profile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucinyan%2Fpixel-profile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucinyan%2Fpixel-profile/lists"}