Showing preview only (372K chars total). Download the full file or copy to clipboard to get everything.
Repository: DenverCoder1/github-readme-streak-stats
Branch: main
Commit: 4ccf1e400748
Files: 57
Total size: 354.3 KB
Directory structure:
gitextract_zrbf4bwk/
├── .deepsource.toml
├── .devcontainer/
│ ├── Dockerfile
│ ├── devcontainer.json
│ ├── first-run-notice.txt
│ ├── on-create.sh
│ └── post-create.sh
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── feature_request.md
│ │ ├── question.md
│ │ └── theme.md
│ ├── dependabot.yml
│ ├── pull_request_template.md
│ └── workflows/
│ ├── force-release.yml
│ ├── phpunit-ci-coverage.yml
│ ├── prettier.yml
│ ├── release.yml
│ └── translation-progress.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.js
├── Aptfile
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── Procfile
├── README.md
├── app.json
├── composer.json
├── docs/
│ ├── faq.md
│ └── themes.md
├── package.json
├── scripts/
│ └── translation-progress.php
├── src/
│ ├── cache.php
│ ├── card.php
│ ├── colors.php
│ ├── demo/
│ │ ├── css/
│ │ │ ├── style.css
│ │ │ └── toggle-dark.css
│ │ ├── index.php
│ │ ├── js/
│ │ │ ├── accordion.js
│ │ │ ├── script.js
│ │ │ └── toggle-dark.js
│ │ └── preview.php
│ ├── index.php
│ ├── stats.php
│ ├── themes.php
│ ├── translations.php
│ └── whitelist.php
└── tests/
├── CacheTest.php
├── OptionsTest.php
├── RenderTest.php
├── StatsTest.php
├── TranslationsTest.php
└── phpunit/
└── phpunit.xml
================================================
FILE CONTENTS
================================================
================================================
FILE: .deepsource.toml
================================================
version = 1
test_patterns = [
"tests/**"
]
exclude_patterns = [
"vendor/**",
"*.min.js"
]
[[analyzers]]
name = "php"
enabled = true
[analyzers.meta]
skip_doc_coverage = ["class", "magic"]
[[analyzers]]
name = "javascript"
enabled = true
================================================
FILE: .devcontainer/Dockerfile
================================================
FROM mcr.microsoft.com/vscode/devcontainers/base:ubuntu-24.04
ADD first-run-notice.txt /usr/local/etc/vscode-dev-containers/first-run-notice.txt
RUN apt-get update -y && \
apt-get install -y php php-curl php-xml inkscape composer
================================================
FILE: .devcontainer/devcontainer.json
================================================
{
"build": {
"dockerfile": "Dockerfile"
},
"onCreateCommand": "/workspaces/github-readme-streak-stats/.devcontainer/on-create.sh",
"postCreateCommand": "/workspaces/github-readme-streak-stats/.devcontainer/post-create.sh"}
================================================
FILE: .devcontainer/first-run-notice.txt
================================================
👋 Welcome to Codespaces! You are using the pre-configured image.
Tests can be executed with: composer test
================================================
FILE: .devcontainer/on-create.sh
================================================
#!/bin/bash
set -e
cd /workspaces/github-readme-streak-stats
composer install
================================================
FILE: .devcontainer/post-create.sh
================================================
#!/bin/bash
set -e
cd /workspaces/github-readme-streak-stats
if [ -n "$GITHUB_TOKEN" ]; then
echo "TOKEN=$GITHUB_TOKEN" > .env
fi
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
indent_size = 2
[*.{js,css}]
indent_size = 2
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto eol=lf
================================================
FILE: .github/FUNDING.yml
================================================
github: [DenverCoder1]
patreon:
open_collective:
ko_fi:
tidelift:
community_bridge:
liberapay:
issuehunt:
otechie:
custom:
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ""
labels: "bug"
assignees: ""
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ""
labels: "enhancement"
assignees: ""
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/ISSUE_TEMPLATE/question.md
================================================
---
name: Question
about: I have a question about GitHub Streak Stats
title: ""
labels: "question"
assignees: ""
---
**Description**
A brief description of the question or issue:
================================================
FILE: .github/ISSUE_TEMPLATE/theme.md
================================================
---
name: Theme Request
about: Request a theme for the project
title: ""
labels: "theme"
assignees: ""
---
**Describe your theme in detail**
A clear description about what the theme would entail.
**Include a screenshot / image**
<!-- Optional -->
**Color palette**
Describe the colors that could be used with this theme.
Are you going to add the theme?
- [ ] Check for yes
================================================
FILE: .github/dependabot.yml
================================================
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: "composer" # See documentation for possible values
directory: "/" # Location of package manifests
schedule:
interval: "daily"
================================================
FILE: .github/pull_request_template.md
================================================
## Description
<!-- Please include a summary of the change and which issue is fixed. -->
Fixes # <!-- add issue number -->
### Type of change
<!-- Please delete options that are not relevant. -->
- [ ] Bug fix (added a non-breaking change which fixes an issue)
- [ ] New feature (added a non-breaking change which adds functionality)
- [ ] Updated documentation (updated the readme, templates, or other repo files)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
## How Has This Been Tested?
<!--
If you have changed a feature of the stats cards, please describe the tests you made to verify your changes.
Changes strictly related to documentation can skip this section.
-->
- [ ] Tested locally with a valid username
- [ ] Tested locally with an invalid username
- [ ] Ran tests with `composer test`
- [ ] Added or updated test cases to test new features
## Checklist:
- [ ] I have checked to make sure no other [pull requests](https://github.com/DenverCoder1/github-readme-streak-stats/pulls?q=is%3Apr+sort%3Aupdated-desc+) are open for this issue
- [ ] The code is properly formatted and is consistent with the existing code style
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
## Screenshots
<!-- If you have updated the design or appearance, please include a screenshot of your changes. -->
================================================
FILE: .github/workflows/force-release.yml
================================================
name: Manual Release
on:
workflow_dispatch:
jobs:
changelog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: conventional Changelog Action
id: changelog
uses: TriPSs/conventional-changelog-action@v3.7.1
with:
github-token: ${{ secrets.CHANGELOG_RELEASE }}
version-file: './composer.json'
output-file: 'false'
skip-on-empty: 'false'
- name: create release
uses: actions/create-release@v1
if: ${{ steps.changelog.outputs.skipped == 'false' }}
env:
GITHUB_TOKEN: ${{ secrets.CHANGELOG_RELEASE }}
with:
tag_name: ${{ steps.changelog.outputs.tag }}
release_name: ${{ steps.changelog.outputs.tag }}
body: ${{ steps.changelog.outputs.clean_changelog }}
================================================
FILE: .github/workflows/phpunit-ci-coverage.yml
================================================
name: PHPUnit CI
on:
workflow_dispatch:
pull_request:
push:
branches:
- main
env:
PHP_VERSION: 8.2
jobs:
build-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: php-actions/composer@v6
with:
php_extensions: intl
php_version: ${{ env.PHP_VERSION }}
- name: PHPUnit Tests
uses: php-actions/phpunit@v4
with:
php_extensions: intl
php_version: ${{ env.PHP_VERSION }}
bootstrap: vendor/autoload.php
configuration: tests/phpunit/phpunit.xml
args: --testdox
env:
TOKEN: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .github/workflows/prettier.yml
================================================
name: Format with Prettier
on:
push:
branches:
- main
pull_request:
paths:
- "**.php"
- "**.md"
- "**.js"
- "**.css"
- ".github/workflows/prettier.yml"
jobs:
prettier:
runs-on: ubuntu-latest
steps:
- name: Checkout Pull Request
if: ${{ github.event_name == 'pull_request' }}
uses: actions/checkout@v3
with:
repository: ${{ github.event.pull_request.head.repo.full_name }}
ref: ${{ github.event.pull_request.head.ref }}
- name: Checkout Push
if: ${{ github.event_name != 'pull_request' }}
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '22'
- name: Install prettier and plugin-php
run: npm i
- name: Lint with Prettier
continue-on-error: true
run: composer lint
- name: Prettify code
run: |
composer lint-fix
git diff
- name: Commit changes
uses: EndBug/add-and-commit@v9
with:
message: "style: Formatted code with Prettier"
default_author: github_actions
================================================
FILE: .github/workflows/release.yml
================================================
name: Automated Releases
on:
workflow_dispatch:
jobs:
changelog:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: conventional Changelog Action
id: changelog
uses: TriPSs/conventional-changelog-action@v3.7.1
with:
github-token: ${{ secrets.CHANGELOG_RELEASE }}
version-file: './composer.json'
output-file: 'false'
- name: create release
uses: actions/create-release@v1
if: ${{ steps.changelog.outputs.skipped == 'false' }}
env:
GITHUB_TOKEN: ${{ secrets.CHANGELOG_RELEASE }}
with:
tag_name: ${{ steps.changelog.outputs.tag }}
release_name: ${{ steps.changelog.outputs.tag }}
body: ${{ steps.changelog.outputs.clean_changelog }}
================================================
FILE: .github/workflows/translation-progress.yml
================================================
name: Update Translation Progress
on:
workflow_dispatch:
push:
branches:
- main
paths:
- "src/translations.php"
- "scripts/translation-progress.php"
- ".github/workflows/translation-progress.yml"
- "README.md"
env:
PHP_VERSION: 8.2
jobs:
build-test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: php-actions/composer@v6
with:
php_extensions: intl
php_version: ${{ env.PHP_VERSION }}
- name: Update Translations
run: php scripts/translation-progress.php
- name: Commit Changes
uses: EndBug/add-and-commit@v7
with:
author_name: GitHub Actions
author_email: github-actions[bot]@users.noreply.github.com
message: "docs(readme): Update translation progress"
add: "README.md"
================================================
FILE: .gitignore
================================================
# Generated files
vendor/
node_modules/
*.log
composer.phar
yarn.lock
package-lock.json
.vercel
# Cache directory
cache/
# Local Configuration
.DS_Store
# Environment
.env
.php-version
DOCKER_ENV
docker_tag
# IDE
.vscode/
.idea/
================================================
FILE: .prettierignore
================================================
vendor
**/*.min.js
.prettierrc
================================================
FILE: .prettierrc.js
================================================
module.exports = {
printWidth: 120,
endOfLine: "auto",
plugins: ["@prettier/plugin-php"],
overrides: [
{
files: "*.php",
options: {
parser: "php",
},
},
],
};
================================================
FILE: Aptfile
================================================
inkscape
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting me via direct message on Twitter, Reddit, or Discord. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: CONTRIBUTING.md
================================================
## Contributing Guidelines
Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.
Make sure your request is meaningful and you have tested the app locally before submitting a pull request.
This documentation contains a set of guidelines to help you during the contribution process.
### Need some help regarding the basics?
You can refer to the following articles on the basics of Git and GitHub in case you are stuck:
- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)
- [Cloning a Repo](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)
- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)
- [Learn GitHub from Scratch](https://github.com/githubtraining/introduction-to-github)
### Installing Requirements
#### Requirements
- [PHP 8.2+](https://www.apachefriends.org/index.html)
- [Composer](https://getcomposer.org)
- [Inkscape](https://inkscape.org) (for PNG rendering)
#### Linux
```bash
sudo apt-get install php
sudo apt-get install php-curl
sudo apt-get install composer
sudo apt-get install inkscape
```
#### Windows
Install PHP from [XAMPP](https://www.apachefriends.org/index.html) or [php.net](https://windows.php.net/download)
[▶ How to install and run PHP using XAMPP (Windows)](https://www.youtube.com/watch?v=K-qXW9ymeYQ)
[📥 Download Composer](https://getcomposer.org/download/)
### Clone the repository
```
git clone https://github.com/DenverCoder1/github-readme-streak-stats.git
cd github-readme-streak-stats
```
### Authorization
To get the GitHub API to run locally you will need to provide a token.
1. Visit [this link](https://github.com/settings/tokens/new?description=GitHub%20Readme%20Streak%20Stats) to create a new Personal Access Token
2. Scroll to the bottom and click **"Generate token"**
3. **Make a copy** of the `.env.example` named `.env` in the root directory and add **your token** after `TOKEN=`.
```php
TOKEN=<your-token>
```
### Install dependencies
Run the following command to install all the required dependencies to work on this project.
```bash
composer install
```
### Running the app locally
```bash
composer start
```
Open http://localhost:8000/?user=DenverCoder1 to run the project locally
Open http://localhost:8000/demo/ to run the demo site
### Running the tests
Run the following command to run the PHPUnit test script which will verify that the tested functionality is still working.
```bash
composer test
```
## Linting
This project uses Prettier for formatting PHP, Markdown, JavaScript and CSS files.
```bash
# Run prettier and show the files that need to be fixed
composer lint
# Run prettier and fix the files
composer lint-fix
```
## Submitting Contributions 👨💻
Below you will find the process and workflow used to review and merge your changes.
### Step 0 : Find an issue
- Take a look at the existing issues or create your **own** issues!
### Step 1 : Fork the Project
- Fork this repository. This will create a copy of this repository on your GitHub profile.
Keep a reference to the original project in the `upstream` remote.
```bash
git clone https://github.com/<your-username>/github-readme-streak-stats.git
cd github-readme-streak-stats
git remote add upstream https://github.com/DenverCoder1/github-readme-streak-stats.git
```
- If you have already forked the project, update your copy before working.
```bash
git remote update
git checkout <branch-name>
git rebase upstream/<branch-name>
```
### Step 2 : Branch
Create a new branch. Use its name to identify the issue you're addressing.
```bash
# Creates a new branch with the name feature_name and switches to it
git checkout -b feature_name
```
### Step 3 : Work on the issue assigned
- Work on the issue(s) assigned to you.
- Make all the necessary changes to the codebase.
- After you've made changes or made your contribution to the project, add changes to the branch you've just created using:
```bash
# To add all new files to the branch
git add .
# To add only a few files to the branch
git add <some files (with path)>
```
### Step 4 : Commit
- Commit a descriptive message using:
```bash
# This message will get associated with all files you have changed
git commit -m "message"
```
### Step 5 : Work Remotely
- Now you are ready to your work on the remote repository.
- When your work is ready and complies with the project conventions, upload your changes to your fork:
```bash
# To push your work to your remote repository
git push -u origin Branch_Name
```
- Here is how your branch will look.
### Step 6 : Pull Request
- Go to your forked repository in your browser and click on "Compare and pull request". Then add a title and description to your pull request that explains your contribution.
<img width="700" alt="compare and pull request" src="https://user-images.githubusercontent.com/63443481/136186304-c0a767ea-1fd2-4b0c-b5a8-3e366ddc06a3.PNG">
<img width="882" alt="opening pull request" src="https://user-images.githubusercontent.com/63443481/136186322-bfd5f333-136a-4d2f-8891-e8f97c379ba8.PNG">
- Voila! Your Pull Request has been submitted and it's ready to be merged.🥳
#### Happy Contributing!
================================================
FILE: Dockerfile
================================================
# Use PHP 8.3 (8.4 not supported yet)
FROM php:8.3-apache@sha256:6be4ef702b2dd05352f7e5fe14667696a4ad091c9d2ad9083becbee4300dc3b1
# Install system dependencies and PHP extensions in one layer
RUN apt-get update && apt-get install -y --no-install-recommends \
git \
unzip \
libicu-dev \
inkscape \
fonts-dejavu-core \
curl \
&& docker-php-ext-configure intl \
&& docker-php-ext-install intl \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*
# Install Composer
COPY --from=composer/composer:latest-bin@sha256:c9bda63056674836406cacfbbdd8ef770fb4692ac419c967034225213c64e11b /composer /usr/bin/composer
# Set working directory
WORKDIR /var/www/html
# Copy composer files and install dependencies
COPY composer.json composer.lock ./
COPY src/ ./src/
RUN composer install --no-dev --optimize-autoloader --no-scripts
# Configure Apache to serve from src/ directory and pass environment variables
RUN a2enmod rewrite headers && \
echo 'ServerTokens Prod\n\
ServerSignature Off\n\
PassEnv TOKEN\n\
PassEnv WHITELIST\n\
<VirtualHost *:80>\n\
ServerAdmin webmaster@localhost\n\
DocumentRoot /var/www/html/src\n\
<Directory /var/www/html/src>\n\
Options -Indexes\n\
AllowOverride None\n\
Require all granted\n\
Header always set Access-Control-Allow-Origin "*"\n\
Header always set Content-Type "image/svg+xml" "expr=%{REQUEST_URI} =~ m#\\.svg$#i"\n\
Header always set Content-Security-Policy "default-src 'none'; style-src 'unsafe-inline'; img-src data:;" "expr=%{REQUEST_URI} =~ m#\\.svg$#i"\n\
Header always set Referrer-Policy "no-referrer-when-downgrade"\n\
Header always set X-Content-Type-Options "nosniff"\n\
</Directory>\n\
ErrorLog ${APACHE_LOG_DIR}/error.log\n\
CustomLog ${APACHE_LOG_DIR}/access.log combined\n\
</VirtualHost>' > /etc/apache2/sites-available/000-default.conf
RUN mkdir -p /var/www/html/cache
# Set secure permissions (cache dir needs write access for www-data)
RUN chown -R www-data:www-data /var/www/html && \
find /var/www/html -type d -exec chmod 755 {} \; && \
find /var/www/html -type f -exec chmod 644 {} \; && \
chmod 775 /var/www/html/cache
# Health check
HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
CMD curl -f http://localhost/demo/ || exit 1
# Expose port
EXPOSE 80
# Start Apache
CMD ["apache2-foreground"]
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2020 Jonah Lawrence
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: Procfile
================================================
web: vendor/bin/heroku-php-apache2 src/
================================================
FILE: README.md
================================================
<p align="center">
<img src="https://i.imgur.com/GZHodUG.png" width="100px"/>
<h3 align="center">Github Readme Streak Stats</h3>
</p>
<p align="center">
Display your total contributions, current streak,
<br/>
and longest streak on your GitHub profile README
</p>
<p align="center">
<a href="https://github.com/search?q=extension%3Amd+%22github+readme+streak+stats+herokuapp%22&type=Code" alt="Users" title="Repo users">
<img src="https://freshidea.com/jonah/app/github-search-results/streak-stats"/></a>
<a href="https://discord.gg/fPrdqh3Zfu" alt="Discord" title="Dev Pro Tips Discussion & Support Server">
<img src="https://img.shields.io/discord/819650821314052106?color=7289DA&logo=discord&logoColor=white&style=for-the-badge"/></a>
</p>
## ⚡ Quick setup
1. Copy-paste the markdown below into your GitHub profile README
2. Replace the value after `?user=` with your GitHub username
```md
[](https://git.io/streak-stats)
```
3. Star the repo 😄
### Next Steps
- Check out the [Demo Site](https://streak-stats.demolab.com) or [Options](https://github.com/DenverCoder1/github-readme-streak-stats?tab=readme-ov-file#-options) below for available customizations.
- It is recommended to self-host the project more better reliability. See [Deploying it on your own](https://github.com/DenverCoder1/github-readme-streak-stats?tab=readme-ov-file#-deploying-it-on-your-own) for more details.
[![][hspace]](#) [][herokudeploy] [][verceldeploy]
## ⚙ Demo Site
Here you can customize your Streak Stats card with a live preview.
<https://streak-stats.demolab.com>
[](http://streak-stats.demolab.com/demo/)
## 🔧 Options
The `user` field is the only required option. All other fields are optional.
If the `theme` parameter is specified, any color customizations specified will be applied on top of the theme, overriding the theme's values.
| Parameter | Details | Example |
| :------------------------: | :----------------------------------------------: | :------------------------------------------------------------------------------------------------: |
| `user` | GitHub username to show stats for | `DenverCoder1` |
| `theme` | The theme to apply (Default: `default`) | `dark`, `radical`, etc. [🎨➜](./docs/themes.md) |
| `hide_border` | Make the border transparent (Default: `false`) | `true` or `false` |
| `border_radius` | Set the roundness of the edges (Default: `4.5`) | Number `0` (sharp corners) to `248` (ellipse) |
| `background` | Background color (eg. `f2f2f2`, `35,d22,00f`) | **hex code** without `#`, **css color**, or gradient in the form `angle,start_color,...,end_color` |
| `border` | Border color | **hex code** without `#` or **css color** |
| `stroke` | Stroke line color between sections | **hex code** without `#` or **css color** |
| `ring` | Color of the ring around the current streak | **hex code** without `#` or **css color** |
| `fire` | Color of the fire in the ring | **hex code** without `#` or **css color** |
| `currStreakNum` | Current streak number | **hex code** without `#` or **css color** |
| `sideNums` | Total and longest streak numbers | **hex code** without `#` or **css color** |
| `currStreakLabel` | Current streak label | **hex code** without `#` or **css color** |
| `sideLabels` | Total and longest streak labels | **hex code** without `#` or **css color** |
| `dates` | Date range text color | **hex code** without `#` or **css color** |
| `excludeDaysLabel` | Excluded days of the week text color | **hex code** without `#` or **css color** |
| `date_format` | Date format pattern or empty for locale format | See note below on [📅 Date Formats](#-date-formats) |
| `locale` | Locale for labels and numbers (Default: `en`) | ISO 639-1 code - See [🗪 Locales](#-locales) |
| `short_numbers` | Use short numbers (e.g. 1.5k instead of 1,500) | `true` or `false` |
| `type` | Output format (Default: `svg`) | Current options: `svg`, `png` or `json` |
| `mode` | Streak mode (Default: `daily`) | `daily` (contribute daily) or `weekly` (contribute once per Sun-Sat week) |
| `exclude_days` | List of days of the week to exclude from streaks | Comma-separated list of day abbreviations (Sun, Mon, Tue, Wed, Thu, Fri, Sat) e.g. `Sun,Sat` |
| `disable_animations` | Disable SVG animations (Default: `false`) | `true` or `false` |
| `card_width` | Width of the card in pixels (Default: `495`) | Positive integer, minimum width is 100px per column |
| `card_height` | Height of the card in pixels (Default: `195`) | Positive integer, minimum height is 170px |
| `hide_total_contributions` | Hide the total contributions (Default: `false`) | `true` or `false` |
| `hide_current_streak` | Hide the current streak (Default: `false`) | `true` or `false` |
| `hide_longest_streak` | Hide the longest streak (Default: `false`) | `true` or `false` |
| `starting_year` | Starting year of contributions | Integer, must be `2005` or later, eg. `2017`. By default, your account creation year is used. |
### 🖌 Themes
To enable a theme, append `&theme=` followed by the theme name to the end of the source URL:
```md
[](https://git.io/streak-stats)
```
| Theme | Preview |
| :------------: | :-----------------------------------------------------------: |
| `default` |  |
| `dark` |  |
| `highcontrast` |  |
| More themes! | **🎨 [See a list of all available themes](./docs/themes.md)** |
**If you have come up with a new theme you'd like to share with others, please see [Issue #32](https://github.com/DenverCoder1/github-readme-streak-stats/issues/32) for more information on how to contribute.**
### 🗪 Locales
The following are the locales that have labels translated in Streak Stats. The `locale` query parameter accepts any ISO language or locale code, see [here](https://gist.github.com/DenverCoder1/f61147ba26bfcf7c3bf605af7d3382d5) for a list of valid locales. The locale provided will be used for the date format and number format even if translations are not yet available.
<!-- This section is automatically generated by the `translation-progress.php` script. -->
<!-- prettier-ignore-start -->
<!-- TRANSLATION_PROGRESS_START -->
<table><tbody><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L37"><code>en</code></a> - English<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L37"><img src="https://progress-bar.xyz/100" alt="English 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L47"><code>am</code></a> - አማርኛ<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L47"><img src="https://progress-bar.xyz/100" alt="አማርኛ 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L56"><code>ar</code></a> - العربية<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L56"><img src="https://progress-bar.xyz/100" alt="العربية 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L67"><code>as</code></a> - অসমীয়া<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L67"><img src="https://progress-bar.xyz/100" alt="অসমীয়া 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L84"><code>bho</code></a> - भोजपुरी<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L84"><img src="https://progress-bar.xyz/100" alt="भोजपुरी 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L93"><code>bn</code></a> - বাংলা<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L93"><img src="https://progress-bar.xyz/100" alt="বাংলা 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L102"><code>ca</code></a> - català<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L102"><img src="https://progress-bar.xyz/100" alt="català 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L111"><code>ceb</code></a> - Cebuano<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L111"><img src="https://progress-bar.xyz/100" alt="Cebuano 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L120"><code>da</code></a> - dansk<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L120"><img src="https://progress-bar.xyz/100" alt="dansk 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L129"><code>de</code></a> - Deutsch<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L129"><img src="https://progress-bar.xyz/100" alt="Deutsch 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L138"><code>el</code></a> - Ελληνικά<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L138"><img src="https://progress-bar.xyz/100" alt="Ελληνικά 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L147"><code>es</code></a> - español<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L147"><img src="https://progress-bar.xyz/100" alt="español 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L156"><code>fa</code></a> - فارسی<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L156"><img src="https://progress-bar.xyz/100" alt="فارسی 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L167"><code>fil</code></a> - Filipino<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L167"><img src="https://progress-bar.xyz/100" alt="Filipino 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L176"><code>fr</code></a> - français<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L176"><img src="https://progress-bar.xyz/100" alt="français 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L185"><code>gu</code></a> - ગુજરાતી<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L185"><img src="https://progress-bar.xyz/100" alt="ગુજરાતી 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L194"><code>he</code></a> - עברית<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L194"><img src="https://progress-bar.xyz/100" alt="עברית 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L204"><code>hi</code></a> - हिन्दी<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L204"><img src="https://progress-bar.xyz/100" alt="हिन्दी 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L221"><code>hu</code></a> - magyar<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L221"><img src="https://progress-bar.xyz/100" alt="magyar 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L238"><code>id</code></a> - Indonesia<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L238"><img src="https://progress-bar.xyz/100" alt="Indonesia 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L247"><code>it</code></a> - italiano<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L247"><img src="https://progress-bar.xyz/100" alt="italiano 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L256"><code>ja</code></a> - 日本語<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L256"><img src="https://progress-bar.xyz/100" alt="日本語 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L267"><code>jv</code></a> - Jawa<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L267"><img src="https://progress-bar.xyz/100" alt="Jawa 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L276"><code>kn</code></a> - ಕನ್ನಡ<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L276"><img src="https://progress-bar.xyz/100" alt="ಕನ್ನಡ 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L285"><code>ko</code></a> - 한국어<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L285"><img src="https://progress-bar.xyz/100" alt="한국어 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L294"><code>mai</code></a> - मैथिली<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L294"><img src="https://progress-bar.xyz/100" alt="मैथिली 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L303"><code>mal</code></a> - മലയാളം<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L303"><img src="https://progress-bar.xyz/100" alt="മലയാളം 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L313"><code>mi</code></a> - Māori<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L313"><img src="https://progress-bar.xyz/100" alt="Māori 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L322"><code>mr</code></a> - मराठी<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L322"><img src="https://progress-bar.xyz/100" alt="मराठी 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L331"><code>ms</code></a> - Melayu<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L331"><img src="https://progress-bar.xyz/100" alt="Melayu 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L340"><code>ms_ID</code></a> - Melayu (Indonesia)<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L340"><img src="https://progress-bar.xyz/100" alt="Melayu (Indonesia) 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L349"><code>my</code></a> - မြန်မာ<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L349"><img src="https://progress-bar.xyz/100" alt="မြန်မာ 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L358"><code>ne</code></a> - नेपाली<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L358"><img src="https://progress-bar.xyz/100" alt="नेपाली 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L367"><code>nl</code></a> - Nederlands<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L367"><img src="https://progress-bar.xyz/100" alt="Nederlands 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L376"><code>no</code></a> - norsk<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L376"><img src="https://progress-bar.xyz/100" alt="norsk 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L385"><code>pa</code></a> - ਪੰਜਾਬੀ<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L385"><img src="https://progress-bar.xyz/100" alt="ਪੰਜਾਬੀ 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L394"><code>pl</code></a> - polski<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L394"><img src="https://progress-bar.xyz/100" alt="polski 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L403"><code>ps</code></a> - پښتو<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L403"><img src="https://progress-bar.xyz/100" alt="پښتو 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L414"><code>pt</code></a> - português<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L414"><img src="https://progress-bar.xyz/100" alt="português 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L423"><code>pt_BR</code></a> - português (Brasil)<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L423"><img src="https://progress-bar.xyz/100" alt="português (Brasil) 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L432"><code>ro</code></a> - română<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L432"><img src="https://progress-bar.xyz/100" alt="română 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L441"><code>ru</code></a> - русский<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L441"><img src="https://progress-bar.xyz/100" alt="русский 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L458"><code>sa</code></a> - संस्कृत भाषा<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L458"><img src="https://progress-bar.xyz/100" alt="संस्कृत भाषा 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L467"><code>sd_PK</code></a> - سنڌي (پاڪستان)<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L467"><img src="https://progress-bar.xyz/100" alt="سنڌي (پاڪستان) 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L479"><code>sr_Cyrl</code></a> - српски (ћирилица)<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L479"><img src="https://progress-bar.xyz/100" alt="српски (ћирилица) 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L488"><code>sr_Latn</code></a> - srpski (latinica)<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L488"><img src="https://progress-bar.xyz/100" alt="srpski (latinica) 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L497"><code>su</code></a> - Basa Sunda<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L497"><img src="https://progress-bar.xyz/100" alt="Basa Sunda 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L506"><code>sv</code></a> - svenska<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L506"><img src="https://progress-bar.xyz/100" alt="svenska 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L515"><code>sw</code></a> - Kiswahili<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L515"><img src="https://progress-bar.xyz/100" alt="Kiswahili 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L524"><code>ta</code></a> - தமிழ்<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L524"><img src="https://progress-bar.xyz/100" alt="தமிழ் 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L533"><code>tcy</code></a> - Tulu<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L533"><img src="https://progress-bar.xyz/100" alt="Tulu 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L542"><code>te</code></a> - తెలుగు<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L542"><img src="https://progress-bar.xyz/100" alt="తెలుగు 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L551"><code>th</code></a> - ไทย<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L551"><img src="https://progress-bar.xyz/100" alt="ไทย 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L560"><code>tr</code></a> - Türkçe<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L560"><img src="https://progress-bar.xyz/100" alt="Türkçe 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L569"><code>uk</code></a> - українська<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L569"><img src="https://progress-bar.xyz/100" alt="українська 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L578"><code>ur_PK</code></a> - اردو (پاکستان)<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L578"><img src="https://progress-bar.xyz/100" alt="اردو (پاکستان) 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L589"><code>vi</code></a> - Tiếng Việt<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L589"><img src="https://progress-bar.xyz/100" alt="Tiếng Việt 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L598"><code>yo</code></a> - Èdè Yorùbá<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L598"><img src="https://progress-bar.xyz/100" alt="Èdè Yorùbá 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L608"><code>zh_Hans</code></a> - 中文（简体）<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L608"><img src="https://progress-bar.xyz/100" alt="中文（简体） 100%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L618"><code>zh_Hant</code></a> - 中文（繁體）<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L618"><img src="https://progress-bar.xyz/100" alt="中文（繁體） 100%"></a></td></tr><tr><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L76"><code>bg</code></a> - български<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L76"><img src="https://progress-bar.xyz/86" alt="български 86%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L213"><code>ht</code></a> - créole haïtien<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L213"><img src="https://progress-bar.xyz/86" alt="créole haïtien 86%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L230"><code>hy</code></a> - հայերեն<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L230"><img src="https://progress-bar.xyz/86" alt="հայերեն 86%"></a></td><td><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L450"><code>rw</code></a> - Kinyarwanda<br /><a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L450"><img src="https://progress-bar.xyz/86" alt="Kinyarwanda 86%"></a></td><td></td></tr></tbody></table>
<!-- TRANSLATION_PROGRESS_END -->
<!-- prettier-ignore-end -->
**If you would like to help translate the Streak Stats cards, please see [Issue #236](https://github.com/DenverCoder1/github-readme-streak-stats/issues/236) for more information.**
### 📅 Date Formats
If `date_format` is not provided or is empty, the PHP Intl library is used to determine the date format based on the locale specified in the `locale` query parameter.
A custom date format can be specified by passing a string to the `date_format` parameter.
The required format is to use format string characters from [PHP's date function](https://www.php.net/manual/en/datetime.format.php) with brackets around the part representing the year.
When the contribution year is equal to the current year, the characters in brackets will be omitted.
**Examples:**
| Date Format | Result |
| :-----------------: | :-----------------------------------------------------------------------------: |
| <pre>d F[, Y]</pre> | <pre>"2020-04-14" => "14 April, 2020"<br/><br/>"2024-04-14" => "14 April"</pre> |
| <pre>j/n/Y</pre> | <pre>"2020-04-14" => "14/4/2020"<br/><br/>"2024-04-14" => "14/4/2024"</pre> |
| <pre>[Y.]n.j</pre> | <pre>"2020-04-14" => "2020.4.14"<br/><br/>"2024-04-14" => "4.14"</pre> |
| <pre>M j[, Y]</pre> | <pre>"2020-04-14" => "Apr 14, 2020"<br/><br/>"2024-04-14" => "Apr 14"</pre> |
### Example
```md
[](https://git.io/streak-stats)
```
## ℹ️ How these stats are calculated
This tool uses the contribution graphs on your GitHub profile to calculate which days you have contributed.
To include contributions in private repositories, turn on the setting for "Private contributions" from the dropdown menu above the contribution graph on your profile page.
Contributions include commits, pull requests, and issues that you create in standalone repositories.
The longest streak is the highest number of consecutive days on which you have made at least one contribution.
The current streak is the number of consecutive days ending with the current day on which you have made at least one contribution. If you have made a contribution today, it will be counted towards the current streak, however, if you have not made a contribution today, the streak will only count days before today so that your streak will not be zero.
> [!NOTE]
> You may need to wait up to 24 hours for new contributions to show up ([Learn how contributions are counted](https://docs.github.com/articles/why-are-my-contributions-not-showing-up-on-my-profile))
## 📤 Deploying it on your own
It is preferable to host the files on your own server and it takes less than 2 minutes to set up.
Doing this can lead to better uptime and more control over customization (you can modify the code for your usage).
You can deploy the PHP files on any website server with PHP installed including Heroku and Vercel.
The Inkscape dependency is required for PNG rendering, as well as Segoe UI font for the intended rendering. If using Heroku, the buildpacks will install these for you automatically.
### [][verceldeploy]
Vercel is the recommended option for hosting the files since it is **free** and easy to set up. Watch the video below or expand the instructions to learn how to deploy to Vercel.
> [!NOTE]
> PNG mode is not supported since Inkscape will not be installed but the default SVG mode will work.
### 📺 [Click here for a video tutorial on how to self-host on Vercel](https://www.youtube.com/watch?v=maoXtlb8t44)
<details>
<summary><b>Instructions for deploying to Vercel (Free)</b></summary>
### Step-by-step instructions for deploying to Vercel
#### Option 1: Deploy to Vercel quickly with the Deploy button (recommended)
> [!IMPORTANT]
> Make sure that you host the **`vercel`** branch as otherwise you'll get a 404 error from Vercel. You can set the `vercel` branch as default after forking the repo.
1. Click the Deploy button below
[![][hspace]](#) [][verceldeploy]
2. Create your repository by filling in a Repository Name and clicking "Create"
3. Visit [this link](https://github.com/settings/tokens/new?description=GitHub%20Readme%20Streak%20Stats) to create a new Personal Access Token (no scopes required)
4. Scroll to the bottom and click **"Generate token"**
5. **Add the token** as a Config Var with the key `TOKEN`:
6. Click **"Deploy"** at the end of the form
7. Once the app is deployed, click the screenshot of your app or continue to the dashboard to find your domain to use in place of `streak-stats.demolab.com`
> ⚠️ **Note**
> If you receive an error related to libssl or Node 20.x, you can fix this by opening your Vercel project settings and changing the Node.js version to 18.x.
>
> 
#### Option 2: Deploy to Vercel manually
1. Sign in to **Vercel** or create a new account at <https://vercel.com>
2. Use the following command to clone the repository: `git clone https://github.com/DenverCoder1/github-readme-streak-stats.git`. If you plan to make changes, you can also fork the repository and clone your fork instead. If you do not have Git installed, you can download it from <https://git-scm.com/downloads>.
3. Navigate to the cloned repository's directory using the command `cd github-readme-streak-stats`
4. Switch to the "vercel" branch using the command `git checkout vercel`
5. Make sure you have the Vercel CLI (Command Line Interface) installed on your system. If not, you can download it from <https://vercel.com/download>.
6. Run the command `vercel` and follow the prompts to link your Vercel account and choose a project name
7. After successful deployment, your app will be available at `<project-name>.vercel.app`
8. Open [this link](https://github.com/settings/tokens/new?description=GitHub%20Readme%20Streak%20Stats) to create a new Personal Access Token on GitHub. You don't need to select any scopes for the token.
9. Scroll to the bottom of the page and click on **"Generate token"**
10. Visit the Vercel dashboard at <https://vercel.com/dashboard> and select your project. Then, click on **"Settings"** and choose **"Environment Variables"**.
11. Add a new environment variable with the key `TOKEN` and the value as the token you generated in step 9, then save your changes
12. (Optional) You can also set the `WHITELIST` environment variable to restrict which GitHub usernames can be accessed through the service. Provide the usernames as a comma-separated list, for example: `user1,user2,user3`. If the variable is not set, information can be requested for any GitHub user.
13. To apply the new environment variable(s), you need to redeploy the app. Run `vercel --prod` to deploy the app to production.
> ⚠️ **Note**
> To set up automatic Vercel deployments from GitHub, make sure to turn **off** "Include source files outside of the Root Directory" in the General settings and use `vercel` as the production branch in the Git settings.
> ⚠️ **Note**
> If you receive an error related to libssl or Node 20.x, you can fix this by opening your Vercel project settings and changing the Node.js version to 18.x.
>
> 
</details>
### [][herokudeploy]
Heroku is another great option for hosting the files. All features are supported on Heroku and it is where the default domain is hosted. Heroku is not free, however, and you will need to pay between \$5 and \$7 per month to keep the app running. Expand the instructions below to learn how to deploy to Heroku.
<details>
<summary><b>Instructions for deploying to Heroku (Paid)</b></summary>
### Step-by-step instructions for deploying to Heroku
1. Sign in to **Heroku** or create a new account at <https://heroku.com>
2. Visit [this link](https://github.com/settings/tokens/new?description=GitHub%20Readme%20Streak%20Stats) to create a new Personal Access Token (no scopes required)
3. Scroll to the bottom and click **"Generate token"**
4. Click the Deploy button below
[![][hspace]](#) [][herokudeploy]
5. **Add the token** as a Config Var with the key `TOKEN`:
6. (Optional) You can also set the `WHITELIST` Config Var to restrict which GitHub usernames can be accessed through the service. Provide the usernames as a comma-separated list, for example: `user1,user2,user3`. If the variable is not set, information can be requested for any GitHub user.
7. Click **"Deploy App"** at the end of the form
8. Once the app is deployed, you can use `<your-app-name>.herokuapp.com` in place of `streak-stats.demolab.com`
</details>
### 
You can transfer the files to any webserver using FTP or other means, then refer to [CONTRIBUTING.md](/CONTRIBUTING.md) for installation steps.
### 🐳 Docker
Docker is a great option for self-hosting with full control over your environment. All features are supported including PNG rendering with Inkscape. Expand the instructions below to learn how to deploy with Docker.
<details>
<summary><b>Instructions for deploying with Docker</b></summary>
### Step-by-step instructions for deploying with Docker
1. Clone the repository:
```bash
git clone https://github.com/DenverCoder1/github-readme-streak-stats.git
cd github-readme-streak-stats
```
2. Visit https://github.com/settings/tokens/new?description=GitHub%20Readme%20Streak%20Stats to create a new Personal Access Token (no scopes required)
3. Scroll to the bottom and click "Generate token"
4. Build the Docker image:
```bash
docker build -t streak-stats .
```
5. Run the container with your GitHub token:
```bash
docker run -d -p 8080:80 -e TOKEN=your_github_token_here streak-stats
```
6. You can also optionally set the `WHITELIST` environment variable to restrict which GitHub usernames can be accessed through the service. If the `WHITELIST` variable is not set, information can be requested for any GitHub user.
Provide the usernames as a comma-separated list, for example:
```bash
docker run -d -p 8080:80 -e TOKEN=your_github_token_here -e WHITELIST=user1,user2,user3 streak-stats
```
7. Visit http://localhost:8080 to access your self-hosted instance
</details>
[hspace]: https://user-images.githubusercontent.com/20955511/136058102-b79570bc-4912-4369-b664-064a0ada8588.png
[verceldeploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDenverCoder1%2Fgithub-readme-streak-stats%2Ftree%2Fvercel&env=TOKEN&envDescription=GitHub%20Personal%20Access%20Token%20(no%20scopes%20required)&envLink=https%3A%2F%2Fgithub.com%2Fsettings%2Ftokens%2Fnew%3Fdescription%3DGitHub%2520Readme%2520Streak%2520Stats&project-name=streak-stats&repository-name=github-readme-streak-stats
[herokudeploy]: https://heroku.com/deploy?template=https://github.com/DenverCoder1/github-readme-streak-stats/tree/main
## 🤗 Contributing
Contributions are welcome! Feel free to [open an issue](https://github.com/DenverCoder1/github-readme-streak-stats/issues/new/choose) or submit a [pull request](https://github.com/DenverCoder1/github-readme-streak-stats/compare) if you have a way to improve this project.
Make sure your request is meaningful and you have tested the app locally before submitting a pull request.
Refer to [CONTRIBUTING.md](/CONTRIBUTING.md) for more details on contributing, installing requirements, and running the application.
## 🙋♂️ Support
💙 If you like this project, give it a ⭐ and share it with friends!
<p align="left">
<a href="https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1"><img alt="Youtube" title="Youtube" src="https://img.shields.io/badge/-Subscribe-red?style=for-the-badge&logo=youtube&logoColor=white"/></a>
<a href="https://github.com/sponsors/DenverCoder1"><img alt="Sponsor with Github" title="Sponsor with Github" src="https://img.shields.io/badge/-Sponsor-ea4aaa?style=for-the-badge&logo=github&logoColor=white"/></a>
</p>
[☕ Buy me a coffee](https://ko-fi.com/jlawrence)
---
Made with ❤️ and PHP
<a href="https://heroku.com/"><img alt="Powered by Heroku" title="Powered by Heroku" src="https://img.shields.io/badge/-Powered%20by%20Heroku-6567a5?style=for-the-badge&logo=heroku&logoColor=white"/></a>
================================================
FILE: app.json
================================================
{
"name": "GitHub Readme Streak Stats",
"description": "🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README.",
"repository": "https://github.com/DenverCoder1/github-readme-streak-stats/",
"logo": "https://i.imgur.com/Z4bDOxC.png",
"keywords": ["github", "dynamic", "readme", "contributions", "streak", "stats"],
"addons": [],
"env": {
"TOKEN": {
"description": "GitHub personal access token obtained from https://github.com/settings/tokens/new",
"required": true
}
},
"formation": {
"web": {
"quantity": 1,
"size": "basic"
}
},
"buildpacks": [
{
"url": "https://github.com/heroku/heroku-buildpack-apt"
},
{
"url": "https://github.com/DenverCoder1/heroku-buildpack-fonts-segoe-ui"
},
{
"url": "heroku/php"
}
]
}
================================================
FILE: composer.json
================================================
{
"name": "denvercoder1/github-readme-streak-stats",
"description": "🔥 Stay motivated and show off your contribution streak! 🌟 Display your total contributions, current streak, and longest streak on your GitHub profile README.",
"keywords": [
"github",
"dynamic",
"readme",
"contributions",
"streak",
"stats"
],
"license": "MIT",
"version": "1.6.0",
"homepage": "https://github.com/DenverCoder1/github-readme-streak-stats",
"repositories": [
{
"type": "vcs",
"url": "https://github.com/DenverCoder1/github-readme-streak-stats"
}
],
"support": {
"issues": "https://github.com/DenverCoder1/github-readme-streak-stats/issues",
"source": "https://github.com/DenverCoder1/github-readme-streak-stats"
},
"autoload": {
"classmap": [
"src/"
]
},
"require": {
"php": "^8.2",
"ext-intl": "*",
"vlucas/phpdotenv": "^5.3"
},
"require-dev": {
"phpunit/phpunit": "^11"
},
"scripts": {
"start": [
"Composer\\Config::disableProcessTimeout",
"php -S localhost:8000 -t src"
],
"test": "./vendor/bin/phpunit --testdox tests",
"lint": "npx prettier --check *.md **/*.{php,md,js,css}",
"lint-fix": "npx prettier --write *.md **/*.{php,md,js,css}"
}
}
================================================
FILE: docs/faq.md
================================================
# FAQ
## How do I create a Readme for my profile?
A profile readme appears on your profile page when you create a repository with the same name as your username and add a `README.md` file to it. For example, the repository for the user [`DenverCoder1`](https://github.com/DenverCoder1) is located at [`DenverCoder1/DenverCoder1`](https://github.com/DenverCoder1/DenverCoder1).
## How do I include GitHub Readme Streak Stats in my Readme?
Markdown files on GitHub support embedded images using Markdown or HTML. You can customize your Streak Stats image on the [demo site](https://streak-stats.demolab.com/demo/) and use the image source in either of the following ways:
### Markdown
```md
[](https://git.io/streak-stats)
```
### HTML
<!-- prettier-ignore-start -->
```html
<a href="https://git.io/streak-stats"><img src="https://streak-stats.demolab.com?user=DenverCoder1"/></a>
```
<!-- prettier-ignore-end -->
## Why doesn't my Streak Stats match my contribution graph?
GitHub Readme Streak Stats uses the GitHub API to fetch your contribution data. These stats are returned in UTC time which may not match your local time. Additionally, due to caching, the stats may not be updated immediately after a commit. You may need to wait up to a few hours to see the latest stats.
If you think your stats are not showing up because of a time zone issue, you can try one of the following:
1. Change the date of the commit. You can [adjust the time](https://codewithhugo.com/change-the-date-of-a-git-commit/) of a past commit to make it in the middle of the day.
2. Create a new commit in a repository with the date set to the date that is missing from your streak stats:
```bash
git commit --date="2022-08-02 12:00" -m "Test commit" --allow-empty
git push
```
## What is considered a "contribution"?
Contributions include commits, pull requests, and issues that you create in standalone repositories ([Learn more about what is considered a contribution](https://docs.github.com/articles/why-are-my-contributions-not-showing-up-on-my-profile)).
The longest streak is the highest number of consecutive days on which you have made at least one contribution.
The current streak is the number of consecutive days ending with the current day on which you have made at least one contribution. If you have made a contribution today, it will be counted towards the current streak, however, if you have not made a contribution today, the streak will only count days before today so that your streak will not be zero.
> Note: You may need to wait up to 24 hours for new contributions to show up ([Learn how contributions are counted](https://docs.github.com/articles/why-are-my-contributions-not-showing-up-on-my-profile))
## How do I enable private contributions?
To include contributions in private repositories, turn on the setting for "Private contributions" from the dropdown menu above the contribution graph on your profile page.
## How do I center the image on the page?
To center align images, you must use the HTML syntax and wrap it in an element with the HTML attribute `align="center"`.
<!-- prettier-ignore-start -->
```html
<p align="center">
<a href="https://git.io/streak-stats"><img src="https://streak-stats.demolab.com?user=DenverCoder1"/></a>
</p>
```
<!-- prettier-ignore-end -->
## How do I make different images for dark mode and light mode?
You can [specify theme context](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) using the `<picture>` and `<source>` elements as shown below. The dark mode version appears in the `srcset` of the `<source>` tag and the light mode version appears in the `src` of the `<img>` tag.
<!-- prettier-ignore-start -->
```html
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://streak-stats.demolab.com?user=DenverCoder1&theme=dark" />
<img src="https://streak-stats.demolab.com?user=DenverCoder1&theme=default" />
</picture>
```
<!-- prettier-ignore-end -->
## Why and how do I self-host GitHub Readme Streak Stats?
Self-hosting the code can be done online and only takes a couple minutes. The benefits include better uptime since it will use your own access token so will not run into ratelimiting issues and it allows you to customize the deployment for your own use case.
### [📺 Click here for a video tutorial on how to self-host on Vercel](https://www.youtube.com/watch?v=maoXtlb8t44)
See [Deploying it on your own](https://github.com/DenverCoder1/github-readme-streak-stats?tab=readme-ov-file#-deploying-it-on-your-own) in the Readme for detailed instructions.
================================================
FILE: docs/themes.md
================================================
## Currently supported themes
To enable a theme, append `&theme=` followed by the theme name to the end of your url.
You can also try out and customize these themes on the [Demo Site](https://streak-stats.demolab.com/demo/)!
Note: Theme names provided are case-insensitive and any use of underscores will be treated the same as hyphens.
| Theme | Preview |
| :---------------------------: | :------------------------------------------------------------------------------------------------------------------------: |
| `default` |  |
| `dark` |  |
| `highcontrast` |  |
| `transparent` |  |
| `radical` |  |
| `merko` |  |
| `gruvbox` |  |
| `gruvbox-duo` |  |
| `tokyonight` |  |
| `tokyonight-duo` |  |
| `onedark` |  |
| `onedark-duo` |  |
| `cobalt` |  |
| `synthwave` |  |
| `dracula` |  |
| `prussian` |  |
| `monokai` |  |
| `vue` |  |
| `vue-dark` |  |
| `shades-of-purple` |  |
| `nightowl` |  |
| `buefy` |  |
| `buefy-dark` |  |
| `blue-green` |  |
| `algolia` |  |
| `great-gatsby` |  |
| `darcula` |  |
| `bear` |  |
| `solarized-dark` |  |
| `solarized-light` |  |
| `chartreuse-dark` |  |
| `nord` |  |
| `gotham` |  |
| `material-palenight` |  |
| `graywhite` |  |
| `vision-friendly-dark` |  |
| `ayu-mirage` |  |
| `midnight-purple` |  |
| `calm` |  |
| `flag-india` |  |
| `omni` |  |
| `react` |  |
| `jolly` |  |
| `maroongold` |  |
| `yeblu` |  |
| `blueberry` |  |
| `blueberry-duo` |  |
| `slateorange` |  |
| `kacho-ga` |  |
| `ads-juicy-fresh` |  |
| `black-ice` |  |
| `soft-green` |  |
| `blood` |  |
| `blood-dark` |  |
| `green-nur` |  |
| `neon-dark` |  |
| `neon-palenight` |  |
| `dark-smoky` |  |
| `monokai-metallian` |  |
| `city-lights` |  |
| `blux` |  |
| `earth` |  |
| `deepblue` |  |
| `holi-theme` |  |
| `ayu-light` |  |
| `javascript` |  |
| `javascript-dark` |  |
| `noctis-minimus` |  |
| `github-dark` |  |
| `github-dark-blue` |  |
| `github-light` |  |
| `elegant` |  |
| `leafy` |  |
| `navy-gear` |  |
| `hacker` |  |
| `garden` |  |
| `github-green-purple` |  |
| `icegray` |  |
| `neon-blurange` |  |
| `yellowdark` |  |
| `java-dark` |  |
| `android-dark` |  |
| `deuteranopia-friendly-theme` |  |
| `windows-dark` |  |
| `git-dark` |  |
| `python-dark` |  |
| `sea` |  |
| `sea-dark` |  |
| `violet-dark` |  |
| `horizon` |  |
| `material` |  |
| `modern-lilac` |  |
| `modern-lilac2` |  |
| `halloween` |  |
| `violet-punch` |  |
| `submarine-flowers` |  |
| `rising-sun` |  |
| `gruvbox-light` |  |
| `outrun` |  |
| `ocean-dark` |  |
| `discord-old-blurple` |  |
| `aura-dark` |  |
| `panda` |  |
| `cobalt2` |  |
| `swift` |  |
| `aura` |  |
| `apprentice` |  |
| `moltack` |  |
| `codestackr` |  |
| `rose-pine` |  |
| `date-night` |  |
| `one-dark-pro` |  |
| `rose` |  |
| `neon` |  |
| `sunset-gradient` |  |
| `ocean-gradient` |  |
| `ambient-gradient` |  |
| `catppuccin-latte` |  |
| `catppuccin-frappe` |  |
| `catppuccin-macchiato` |  |
| `catppuccin-mocha` |  |
| `burnt-neon` |  |
| `humoris` |  |
| `shadow-red` |  |
| `shadow-green` |  |
| `shadow-blue` |  |
| `shadow-orange` |  |
| `shadow-purple` |  |
| `shadow-brown` |  |
| `github-dark-dimmed` |  |
| `blue-navy` |  |
| `calm-pink` |  |
| `whatsapp-light` |  |
| `whatsapp-dark` |  |
| `carbonfox` |  |
| `dawnfox` |  |
| `dayfox` |  |
| `duskfox` |  |
| `nightfox` |  |
| `nordfox` |  |
| `terafox` |  |
| `iceberg` |  |
| `whatsapp-light2` |  |
| `whatsapp-dark2` |  |
| `travelers-theme` |  |
| `youtube-dark` |  |
| `meta-light` |  |
| `meta-dark` |  |
| `dark-minimalist` |  |
| `telegram` |  |
| `taiga` |  |
| `telegram-gradient` |  |
| `microsoft` |  |
| `microsoft-dark` |  |
| `hacker-inverted` |  |
| `rust-ferris-light` |  |
| `rust-ferris-dark` |  |
| `cyber-streakglow` |  |
| `vitesse` |  |
| `nord-aurora` |  |
| `dark-aura` |  |
| `everforest-dark` |  |
| `everforest-light` |  |
| `oceanic-next` |  |
| `kanagawa-paper` |  |
| `sakura-x` |  |
### Can't find the theme you like?
You can now customize your stats card with the interactive [Demo Site](https://streak-stats.demolab.com/demo/) or by customizing the [url parameters](/README.md#-options).
If you would like to share your theme with others, feel free to open an issue/pull request!
Note: When submitting a new theme, make sure the name is all lowercase. Hyphens are allowed between words, but there should be no underscores. On the demo site, you can export a list of colors from the advanced section by clicking "Export to PHP".
================================================
FILE: package.json
================================================
{
"engines": {
"node": "22.x"
},
"devDependencies": {
"@prettier/plugin-php": "^0.24.0",
"prettier": "^3.6.2"
}
}
================================================
FILE: scripts/translation-progress.php
================================================
<?php
$TRANSLATIONS = include __DIR__ . "/../src/translations.php";
/**
* Get the percentage of translated phrases for each locale
*
* @param array $translations The translations array
* @return array The percentage of translated phrases for each locale
*/
function getProgress(array $translations): array
{
$phrases_to_translate = [
"Total Contributions",
"Current Streak",
"Longest Streak",
"Week Streak",
"Longest Week Streak",
"Present",
"Excluding {days}",
];
$translations_file = file(__DIR__ . "/../src/translations.php");
$progress = [];
foreach ($translations as $locale => $phrases) {
// skip aliases
if (is_string($phrases)) {
continue;
}
$translated = 0;
foreach ($phrases_to_translate as $phrase) {
if (isset($phrases[$phrase])) {
$translated++;
}
}
$percentage = round(($translated / count($phrases_to_translate)) * 100);
$locale_name = Locale::getDisplayName($locale, $locale);
$line_number = getLineNumber($translations_file, $locale);
$progress[$locale] = [
"locale" => $locale,
"locale_name" => $locale_name,
"percentage" => $percentage,
"line_number" => $line_number,
];
}
// sort by percentage
uasort($progress, function ($a, $b) {
return $b["percentage"] <=> $a["percentage"];
});
return $progress;
}
/**
* Get the line number of the locale in the translations file
*
* @param array $translations_file The translations file
* @param string $locale The locale
* @return int The line number of the locale in the translations file
*/
function getLineNumber(array $translations_file, string $locale): int
{
return key(preg_grep("/^\\s*\"$locale\"\\s*=>\\s*\\[/", $translations_file)) + 1;
}
/**
* Convert progress to labeled badges
*
* @param array $progress The progress array
* @return string The markdown for the image badges
*/
function progressToBadges(array $progress): string
{
$per_row = 5;
$table = "<table><tbody>";
$i = 0;
foreach (array_values($progress) as $data) {
if ($i % $per_row === 0) {
$table .= "<tr>";
}
$line_url = "https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/src/translations.php#L{$data["line_number"]}";
$table .= "<td><a href=\"{$line_url}\"><code>{$data["locale"]}</code></a> - {$data["locale_name"]}<br /><a href=\"{$line_url}\"><img src=\"https://progress-bar.xyz/{$data["percentage"]}\" alt=\"{$data["locale_name"]} {$data["percentage"]}%\"></a></td>";
$i++;
if ($i % $per_row === 0) {
$table .= "</tr>";
}
}
if ($i % $per_row !== 0) {
while ($i % $per_row !== 0) {
$table .= "<td></td>";
$i++;
}
$table .= "</tr>";
}
$table .= "</tbody></table>\n";
return $table;
}
/**
* Update readme by replacing the content between the start and end markers
*
* @param string $path The path to the readme file
* @param string $start The start marker
* @param string $end The end marker
* @param string $content The content to replace the content between the start and end markers
* @return int|false The number of bytes that were written to the file, or false on failure
*/
function updateReadme(string $path, string $start, string $end, string $content): int|false
{
$readme = file_get_contents($path);
if (strpos($readme, $start) === false || strpos($readme, $end) === false) {
throw new Exception("Start or end marker not found in readme");
}
$start_pos = strpos($readme, $start) + strlen($start);
$end_pos = strpos($readme, $end);
$length = $end_pos - $start_pos;
$readme = substr_replace($readme, $content, $start_pos, $length);
return file_put_contents($path, $readme);
}
$progress = getProgress($GLOBALS["TRANSLATIONS"]);
$badges = "\n" . progressToBadges($progress);
$update = updateReadme(
__DIR__ . "/../README.md",
"<!-- TRANSLATION_PROGRESS_START -->",
"<!-- TRANSLATION_PROGRESS_END -->",
$badges,
);
exit($update === false ? 1 : 0);
================================================
FILE: src/cache.php
================================================
<?php
declare(strict_types=1);
/**
* Simple file-based cache for GitHub contribution stats
*
* Caches stats for 24 hours to avoid repeated API calls
*/
// Default cache duration: 24 hours (in seconds)
define("CACHE_DURATION", 24 * 60 * 60);
define("CACHE_DIR", __DIR__ . "/../cache");
/**
* Generate a cache key for a user's request
*
* Uses structured JSON format to prevent hash collisions between different
* user/options combinations that could produce the same concatenated string.
*
* @param string $user GitHub username
* @param array $options Additional options that affect the stats (mode, exclude_days, starting_year)
* @return string Cache key (filename-safe)
*/
function getCacheKey(string $user, array $options = []): string
{
ksort($options);
try {
$keyData = json_encode(["user" => $user, "options" => $options], JSON_THROW_ON_ERROR);
} catch (JsonException $e) {
// Fallback to simple concatenation if JSON encoding fails
error_log("Cache key JSON encoding failed: " . $e->getMessage());
$keyData = $user . serialize($options);
}
return hash("sha256", $keyData);
}
/**
* Get the cache file path for a given key
*
* @param string $key Cache key
* @return string Full path to cache file
*/
function getCacheFilePath(string $key): string
{
return CACHE_DIR . "/" . $key . ".json";
}
/**
* Ensure the cache directory exists
*
* @return bool True if directory exists or was created
*/
function ensureCacheDir(): bool
{
if (!is_dir(CACHE_DIR)) {
return mkdir(CACHE_DIR, 0755, true);
}
return true;
}
/**
* Get cached stats if available and not expired
*
* @param string $user GitHub username
* @param array $options Additional options
* @param int $maxAge Maximum age in seconds (default: 24 hours)
* @return array|null Cached stats array or null if not cached/expired
*/
function getCachedStats(string $user, array $options = [], int $maxAge = CACHE_DURATION): ?array
{
$key = getCacheKey($user, $options);
$filePath = getCacheFilePath($key);
if (!file_exists($filePath)) {
return null;
}
$mtime = filemtime($filePath);
if ($mtime === false) {
return null;
}
$fileAge = time() - $mtime;
if ($fileAge > $maxAge) {
unlink($filePath);
return null;
}
$handle = fopen($filePath, "r");
if ($handle === false) {
return null;
}
if (!flock($handle, LOCK_SH)) {
fclose($handle);
return null;
}
$contents = stream_get_contents($handle);
flock($handle, LOCK_UN);
fclose($handle);
if ($contents === false || $contents === "") {
return null;
}
$data = json_decode($contents, true);
if (!is_array($data)) {
return null;
}
return $data;
}
/**
* Save stats to cache
*
* @param string $user GitHub username
* @param array $options Additional options
* @param array $stats Stats array to cache
* @return bool True if successfully cached
*/
function setCachedStats(string $user, array $options, array $stats): bool
{
if (!ensureCacheDir()) {
error_log("Failed to create cache directory: " . CACHE_DIR);
return false;
}
$key = getCacheKey($user, $options);
$filePath = getCacheFilePath($key);
$data = json_encode($stats);
if ($data === false) {
error_log("Failed to encode stats to JSON for user: " . $user);
return false;
}
$result = file_put_contents($filePath, $data, LOCK_EX);
if ($result === false) {
error_log("Failed to write cache file: " . $filePath);
return false;
}
return true;
}
/**
* Clear all expired cache files
*
* @param int $maxAge Maximum age in seconds
* @return int Number of files deleted
*/
function clearExpiredCache(int $maxAge = CACHE_DURATION): int
{
if (!is_dir(CACHE_DIR)) {
return 0;
}
$deleted = 0;
$files = glob(CACHE_DIR . "/*.json");
if ($files === false) {
return 0;
}
foreach ($files as $file) {
$mtime = filemtime($file);
if ($mtime === false) {
continue;
}
$fileAge = time() - $mtime;
if ($fileAge > $maxAge) {
if (unlink($file)) {
$deleted++;
}
}
}
return $deleted;
}
/**
* Clear cache for a specific user
*
* Note: This function only clears the cache for the user with empty/default options.
* Cache entries with non-empty options (starting_year, mode, exclude_days) will NOT
* be cleared. This is a limitation of the hash-based cache key system - we cannot
* enumerate all possible option combinations without storing additional metadata.
*
* @param string $user GitHub username
* @return bool True if cache was cleared (or didn't exist)
*/
function clearUserCache(string $user): bool
{
if (!is_dir(CACHE_DIR)) {
return true;
}
$key = getCacheKey($user, []);
$filePath = getCacheFilePath($key);
if (file_exists($filePath)) {
return unlink($filePath);
}
return true;
}
================================================
FILE: src/card.php
================================================
<?php
declare(strict_types=1);
/**
* Convert date from Y-M-D to more human-readable format
*
* @param string $dateString String in Y-M-D format
* @param string|null $format Date format to use, or null to use locale default
* @param string $locale Locale code
* @return string Formatted Date string
*/
function formatDate(string $dateString, string|null $format, string $locale): string
{
$date = new DateTime($dateString);
$formatted = "";
$patternGenerator = new IntlDatePatternGenerator($locale);
// if current year, display only month and day
if (date_format($date, "Y") == date("Y")) {
if ($format) {
// remove brackets and all text within them
$formatted = date_format($date, preg_replace("/\[.*?\]/", "", $format));
} else {
// format without year using locale
$pattern = $patternGenerator->getBestPattern("MMM d");
$dateFormatter = new IntlDateFormatter(
$locale,
IntlDateFormatter::MEDIUM,
IntlDateFormatter::NONE,
pattern: $pattern,
);
$formatted = $dateFormatter->format($date);
}
}
// otherwise, display month, day, and year
else {
if ($format) {
// remove brackets, but leave text within them
$formatted = date_format($date, str_replace(["[", "]"], "", $format));
} else {
// format with year using locale
$pattern = $patternGenerator->getBestPattern("yyyy MMM d");
$dateFormatter = new IntlDateFormatter(
$locale,
IntlDateFormatter::MEDIUM,
IntlDateFormatter::NONE,
pattern: $pattern,
);
$formatted = $dateFormatter->format($date);
}
}
// sanitize and return formatted date
return htmlspecialchars($formatted);
}
/**
* Translate days of the week
*
* Takes a list of days (eg. ["Sun", "Mon", "Sat"]) and returns the short abbreviation of the days of the week in another locale
* e.g. ["Sun", "Mon", "Sat"] -> ["dim", "lun", "sam"]
*
* @param array<string> $days List of days to translate
* @param string $locale Locale code
*
* @return array<string> Translated days
*/
function translateDays(array $days, string $locale): array
{
if ($locale === "en") {
return $days;
}
$patternGenerator = new IntlDatePatternGenerator($locale);
$pattern = $patternGenerator->getBestPattern("EEE");
$dateFormatter = new IntlDateFormatter(
$locale,
IntlDateFormatter::NONE,
IntlDateFormatter::NONE,
pattern: $pattern,
);
$translatedDays = [];
foreach ($days as $day) {
$translatedDays[] = $dateFormatter->format(new DateTime($day));
}
return $translatedDays;
}
/**
* Get the excluding days text
*
* @param array<string> $excludedDays List of excluded days
* @param array<string,string> $localeTranslations Translations for the locale
* @param string $localeCode Locale code
* @return string Excluding days text
*/
function getExcludingDaysText($excludedDays, $localeTranslations, $localeCode)
{
$separator = $localeTranslations["comma_separator"] ?? ", ";
$daysCommaSeparated = implode($separator, translateDays($excludedDays, $localeCode));
return str_replace("{days}", $daysCommaSeparated, $localeTranslations["Excluding {days}"]);
}
/**
* Normalize a theme name
*
* @param string $theme Theme name
* @return string Normalized theme name
*/
function normalizeThemeName(string $theme): string
{
return strtolower(str_replace("_", "-", $theme));
}
/**
* Check theme and color customization parameters to generate a theme mapping
*
* @param array<string,string> $params Request parameters
* @return array<string,string> The chosen theme or default
*/
function getRequestedTheme(array $params): array
{
/**
* @var array<string,array<string,string>> $THEMES
* List of theme names mapped to labeled colors
*/
$THEMES = include "themes.php";
/**
* @var array<string> $CSS_COLORS
* List of valid CSS colors
*/
$CSS_COLORS = include "colors.php";
// normalize theme name
$selectedTheme = normalizeThemeName($params["theme"] ?? "default");
// get theme colors, or default colors if theme not found
$theme = $THEMES[$selectedTheme] ?? $THEMES["default"];
// personal theme customizations
$properties = array_keys($theme);
foreach ($properties as $prop) {
// check if each property was passed as a parameter
if (isset($params[$prop])) {
// ignore case
$param = strtolower($params[$prop]);
// check if color is valid hex color (3, 4, 6, or 8 hex digits)
if (preg_match("/^([a-f0-9]{3}|[a-f0-9]{4}|[a-f0-9]{6}|[a-f0-9]{8})$/", $param)) {
// set property
$theme[$prop] = "#" . $param;
}
// check if color is valid css color
elseif (in_array($param, $CSS_COLORS)) {
// set property
$theme[$prop] = $param;
}
// if the property is background gradient is allowed (angle,start_color,...,end_color)
elseif ($prop == "background" && preg_match("/^-?[0-9]+,[a-f0-9]{3,8}(,[a-f0-9]{3,8})+$/", $param)) {
// set property
$theme[$prop] = $param;
}
}
}
// hide borders
if (isset($params["hide_border"]) && $params["hide_border"] == "true") {
$theme["border"] = "#0000"; // transparent
}
// set background
$gradient = "";
$backgroundParts = explode(",", $theme["background"] ?? "");
if (count($backgroundParts) >= 3) {
$theme["background"] = "url(#gradient)";
$gradient = "<linearGradient id='gradient' gradientTransform='rotate({$backgroundParts[0]})' gradientUnits='userSpaceOnUse'>";
$backgroundColors = array_slice($backgroundParts, 1);
$colorCount = count($backgroundColors);
for ($index = 0; $index < $colorCount; $index++) {
$offset = ($index * 100) / ($colorCount - 1);
$gradient .= "<stop offset='{$offset}%' stop-color='#{$backgroundColors[$index]}' />";
}
$gradient .= "</linearGradient>";
}
$theme["backgroundGradient"] = $gradient;
return $theme;
}
/**
* Wraps a string to a given number of characters
*
* Similar to `wordwrap()`, but uses regex and does not break with certain non-ascii characters
*
* @param string $string The input string
* @param int $width The number of characters at which the string will be wrapped
* @param string $break The line is broken using the optional `break` parameter
* @param bool $cut_long_words If the `cut_long_words` parameter is set to true, the string is
* the string is always wrapped at or before the specified width. So if you have
* a word that is larger than the given width, it is broken apart.
* When false the function does not split the word even if the width is smaller
* than the word width.
* @return string The given string wrapped at the specified length
*/
function utf8WordWrap(string $string, int $width = 75, string $break = "\n", bool $cut_long_words = false): string
{
// match anything 1 to $width chars long followed by whitespace or EOS
$string = preg_replace("/(.{1,$width})(?:\s|$)/uS", "$1$break", $string);
// split words that are too long after being broken up
if ($cut_long_words) {
$string = preg_replace("/(\S{" . $width . "})(?=\S)/u", "$1$break", $string);
}
// trim any trailing line breaks
return rtrim($string, $break);
}
/**
* Get the length of a string with utf8 characters
*
* Similar to `strlen()`, but uses regex and does not break with certain non-ascii characters
*
* @param string $string The input string
* @return int The length of the string
*/
function utf8Strlen(string $string): int
{
return preg_match_all("/./us", $string, $matches);
}
/**
* Split lines of text using <tspan> elements if it contains a newline or exceeds a maximum number of characters
*
* @param string $text Text to split
* @param int $maxChars Maximum number of characters per line
* @param int $line1Offset Offset for the first line
* @return string Original text if one line, or split text with <tspan> elements
*/
function splitLines(string $text, int $maxChars, int $line1Offset): string
{
// if too many characters, insert \n before a " " or "-" if possible
if ($maxChars > 0 && utf8Strlen($text) > $maxChars && strpos($text, "\n") === false) {
// prefer splitting at " - " if possible
if (strpos($text, " - ") !== false) {
$text = str_replace(" - ", "\n- ", $text);
}
// otherwise, use word wrap to split at spaces
else {
$text = utf8WordWrap($text, $maxChars, "\n", true);
}
}
$text = htmlspecialchars($text);
return preg_replace(
"/^(.*)\n(.*)/",
"<tspan x='0' dy='{$line1Offset}'>$1</tspan><tspan x='0' dy='16'>$2</tspan>",
$text,
);
}
/**
* Normalize a locale code
*
* @param string $localeCode Locale code
* @return string Normalized locale code
*/
function normalizeLocaleCode(string $localeCode): string
{
preg_match("/^([a-z]{2,3})(?:[_-]([a-z]{4}))?(?:[_-]([0-9]{3}|[a-z]{2}))?$/i", $localeCode, $matches);
if (empty($matches)) {
return "en";
}
$language = $matches[1];
$script = $matches[2] ?? "";
$region = $matches[3] ?? "";
// convert language to lowercase
$language = strtolower($language);
// convert script to title case
$script = ucfirst(strtolower($script));
// convert region to uppercase
$region = strtoupper($region);
// combine language, script, and region using underscores
return implode("_", array_filter([$language, $script, $region]));
}
/**
* Get the translations for a locale code after normalizing it
*
* @param string $localeCode Locale code
* @return array Translations for the locale code
*/
function getTranslations(string $localeCode): array
{
// normalize locale code
$localeCode = normalizeLocaleCode($localeCode);
// get the labels from the translations file
$translations = include "translations.php";
// if the locale does not exist, try without the script and region
if (!isset($translations[$localeCode])) {
$localeCode = explode("_", $localeCode)[0];
}
// get the translations for the locale or empty array if it does not exist
$localeTranslations = $translations[$localeCode] ?? [];
// if the locale returned is a string, it is an alias for another locale
if (is_string($localeTranslations)) {
// get the translations for the alias
$localeTranslations = $translations[$localeTranslations];
}
// fill in missing translations with English
$localeTranslations += $translations["en"];
// return the translations
return $localeTranslations;
}
/**
* Get the card width from params taking into account minimum and default values
*
* @param array<string,string> $params Request parameters
* @param int $numColumns Number of columns in the card
* @return int Card width
*/
function getCardWidth(array $params, int $numColumns = 3): int
{
$defaultWidth = 495;
$minimumWidth = 100 * $numColumns;
return max($minimumWidth, intval($params["card_width"] ?? $defaultWidth));
}
/**
* Get the card height from params taking into account minimum and default values
*
* @param array<string,string> $params Request parameters
* @return int Card width
*/
function getCardHeight(array $params): int
{
$defaultHeight = 195;
$minimumHeight = 170;
return max($minimumHeight, intval($params["card_height"] ?? $defaultHeight));
}
/**
* Format number using locale and short number if requested
*
* @param float $num The number to format
* @param string $localeCode Locale code
* @param bool $useShortNumbers Whether to use short numbers
* @return string The formatted number
*/
function formatNumber(float $num, string $localeCode, bool $useShortNumbers): string
{
$numFormatter = new NumberFormatter($localeCode, NumberFormatter::DECIMAL);
$suffix = "";
if ($useShortNumbers) {
$units = ["", "K", "M", "B", "T"];
for ($i = 0; $num >= 1000; $i++) {
$num /= 1000;
}
$suffix = $units[$i];
$num = round($num, 1);
}
return $numFormatter->format($num) . $suffix;
}
/**
* Generate SVG output for a stats array
*
* @param array<string,mixed> $stats Streak stats
* @param array<string,string>|NULL $params Request parameters
* @return string The generated SVG Streak Stats card
*
* @throws InvalidArgumentException If a locale does not exist
*/
function generateCard(array $stats, array $params = null): string
{
$params = $params ?? $_REQUEST;
// get requested theme
$theme = getRequestedTheme($params);
// get requested locale, default to English
$localeCode = $params["locale"] ?? "en";
$localeTranslations = getTranslations($localeCode);
// whether the locale is right-to-left
$direction = $localeTranslations["rtl"] ?? false ? "rtl" : "ltr";
// get date format
// locale date formatter (used only if date_format is not specified)
$dateFormat = $params["date_format"] ?? ($localeTranslations["date_format"] ?? null);
// read border_radius parameter, default to 4.5 if not set
$borderRadius = $params["border_radius"] ?? 4.5;
$showTotalContributions = ($params["hide_total_contributions"] ?? "") !== "true";
$showCurrentStreak = ($params["hide_current_streak"] ?? "") !== "true";
$showLongestStreak = ($params["hide_longest_streak"] ?? "") !== "true";
$numColumns = intval($showTotalContributions) + intval($showCurrentStreak) + intval($showLongestStreak);
$cardWidth = getCardWidth($params, $numColumns);
$rectWidth = $cardWidth - 1;
$columnWidth = $numColumns > 0 ? $cardWidth / $numColumns : 0;
$cardHeight = getCardHeight($params);
$rectHeight = $cardHeight - 1;
$heightOffset = ($cardHeight - 195) / 2;
// X offsets for the bars between columns
$barOffsets = [-999, -999];
for ($i = 0; $i < $numColumns - 1; $i++) {
$barOffsets[$i] = $columnWidth * ($i + 1);
}
// offsets for the text in each column
$columnOffsets = [];
for ($i = 0; $i < $numColumns; $i++) {
$columnOffsets[] = $columnWidth / 2 + $columnWidth * $i;
}
// reverse the column offsets if the locale is right-to-left
if ($direction === "rtl") {
$columnOffsets = array_reverse($columnOffsets);
}
$nextColumnIndex = 0;
$totalContributionsOffset = $showTotalContributions ? $columnOffsets[$nextColumnIndex++] : -999;
$currentStreakOffset = $showCurrentStreak ? $columnOffsets[$nextColumnIndex++] : -999;
$longestStreakOffset = $showLongestStreak ? $columnOffsets[$nextColumnIndex++] : -999;
// Y offsets for the bars
$barHeightOffsets = [28 + $heightOffset / 2, 170 + $heightOffset];
// Y offsets for the numbers and dates
$longestStreakHeightOffset = $totalContributionsHeightOffset = [
48 + $heightOffset,
84 + $heightOffset,
114 + $heightOffset,
];
$currentStreakHeightOffset = [
48 + $heightOffset,
108 + $heightOffset,
145 + $heightOffset,
71 + $heightOffset,
19.5 + $heightOffset,
];
$useShortNumbers = ($params["short_numbers"] ?? "") === "true";
// total contributions
$totalContributions = formatNumber($stats["totalContributions"], $localeCode, $useShortNumbers);
$firstContribution = formatDate($stats["firstContribution"], $dateFormat, $localeCode);
$totalContributionsRange = $firstContribution . " - " . $localeTranslations["Present"];
// current streak
$currentStreak = formatNumber($stats["currentStreak"]["length"], $localeCode, $useShortNumbers);
$currentStreakStart = formatDate($stats["currentStreak"]["start"], $dateFormat, $localeCode);
$currentStreakEnd = formatDate($stats["currentStreak"]["end"], $dateFormat, $localeCode);
$currentStreakRange = $currentStreakStart;
if ($currentStreakStart != $currentStreakEnd) {
$currentStreakRange .= " - " . $currentStreakEnd;
}
// longest streak
$longestStreak = formatNumber($stats["longestStreak"]["length"], $localeCode, $useShortNumbers);
$longestStreakStart = formatDate($stats["longestStreak"]["start"], $dateFormat, $localeCode);
$longestStreakEnd = formatDate($stats["longestStreak"]["end"], $dateFormat, $localeCode);
$longestStreakRange = $longestStreakStart;
if ($longestStreakStart != $longestStreakEnd) {
$longestStreakRange .= " - " . $longestStreakEnd;
}
// if the translations contain over max characters or a newline, split the text into two tspan elements
$maxCharsPerLineLabels = $numColumns > 0 ? intval(floor($cardWidth / $numColumns / 7.5)) : 0;
$totalContributionsText = splitLines($localeTranslations["Total Contributions"], $maxCharsPerLineLabels, -9);
if ($stats["mode"] === "weekly") {
$currentStreakText = splitLines($localeTranslations["Week Streak"], $maxCharsPerLineLabels, -9);
$longestStreakText = splitLines($localeTranslations["Longest Week Streak"], $maxCharsPerLineLabels, -9);
} else {
$currentStreakText = splitLines($localeTranslations["Current Streak"], $maxCharsPerLineLabels, -9);
$longestStreakText = splitLines($localeTranslations["Longest Streak"], $maxCharsPerLineLabels, -9);
}
// if the ranges contain over max characters, split the text into two tspan elements
$maxCharsPerLineDates = $numColumns > 0 ? intval(floor($cardWidth / $numColumns / 6)) : 0;
$totalContributionsRange = splitLines($totalContributionsRange, $maxCharsPerLineDates, 0);
$currentStreakRange = splitLines($currentStreakRange, $maxCharsPerLineDates, 0);
$longestStreakRange = splitLines($longestStreakRange, $maxCharsPerLineDates, 0);
// if days are excluded, add a note to the corner
$excludedDays = "";
if (!empty($stats["excludedDays"])) {
$offset = $direction === "rtl" ? $cardWidth - 5 : 5;
$excludingDaysText = getExcludingDaysText($stats["excludedDays"], $localeTranslations, $localeCode);
$excludedDays = "<g style='isolation: isolate'>
<!-- Excluded Days -->
<g transform='translate({$offset},187)'>
<text stroke-width='0' text-anchor='right' fill='{$theme["excludeDaysLabel"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='10px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
* {$excludingDaysText}
</text>
</g>
</g>";
}
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
style='isolation: isolate' viewBox='0 0 {$cardWidth} {$cardHeight}' width='{$cardWidth}px' height='{$cardHeight}px' direction='{$direction}'>
<style>
@keyframes currstreak {
0% { font-size: 3px; opacity: 0.2; }
80% { font-size: 34px; opacity: 1; }
100% { font-size: 28px; opacity: 1; }
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<defs>
<clipPath id='outer_rectangle'>
<rect width='{$cardWidth}' height='{$cardHeight}' rx='{$borderRadius}'/>
</clipPath>
<mask id='mask_out_ring_behind_fire'>
<rect width='{$cardWidth}' height='{$cardHeight}' fill='white'/>
<ellipse id='mask-ellipse' cx='{$currentStreakOffset}' cy='32' rx='13' ry='18' fill='black'/>
</mask>
{$theme["backgroundGradient"]}
</defs>
<g clip-path='url(#outer_rectangle)'>
<g style='isolation: isolate'>
<rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='{$rectWidth}' height='{$rectHeight}'/>
</g>
<g style='isolation: isolate'>
<line x1='{$barOffsets[0]}' y1='{$barHeightOffsets[0]}' x2='{$barOffsets[0]}' y2='{$barHeightOffsets[1]}' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
<line x1='{$barOffsets[1]}' y1='$barHeightOffsets[0]' x2='{$barOffsets[1]}' y2='$barHeightOffsets[1]' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
</g>
<g style='isolation: isolate'>
<!-- Total Contributions big number -->
<g transform='translate({$totalContributionsOffset}, {$totalContributionsHeightOffset[0]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideNums"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
{$totalContributions}
</text>
</g>
<!-- Total Contributions label -->
<g transform='translate({$totalContributionsOffset}, {$totalContributionsHeightOffset[1]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>
{$totalContributionsText}
</text>
</g>
<!-- Total Contributions range -->
<g transform='translate({$totalContributionsOffset}, {$totalContributionsHeightOffset[2]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>
{$totalContributionsRange}
</text>
</g>
</g>
<g style='isolation: isolate'>
<!-- Current Streak label -->
<g transform='translate({$currentStreakOffset}, {$currentStreakHeightOffset[1]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["currStreakLabel"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
{$currentStreakText}
</text>
</g>
<!-- Current Streak range -->
<g transform='translate({$currentStreakOffset}, {$currentStreakHeightOffset[2]})'>
<text x='0' y='21' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
{$currentStreakRange}
</text>
</g>
<!-- Ring around number -->
<g mask='url(#mask_out_ring_behind_fire)'>
<circle cx='{$currentStreakOffset}' cy='{$currentStreakHeightOffset[3]}' r='40' fill='none' stroke='{$theme["ring"]}' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>
</g>
<!-- Fire icon -->
<g transform='translate({$currentStreakOffset}, {$currentStreakHeightOffset[4]})' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
<path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>
<path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='{$theme["fire"]}' stroke-opacity='0'/>
</g>
<!-- Current Streak big number -->
<g transform='translate({$currentStreakOffset}, {$currentStreakHeightOffset[0]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["currStreakNum"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>
{$currentStreak}
</text>
</g>
</g>
<g style='isolation: isolate'>
<!-- Longest Streak big number -->
<g transform='translate({$longestStreakOffset}, {$longestStreakHeightOffset[0]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideNums"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>
{$longestStreak}
</text>
</g>
<!-- Longest Streak label -->
<g transform='translate({$longestStreakOffset}, {$longestStreakHeightOffset[1]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>
{$longestStreakText}
</text>
</g>
<!-- Longest Streak range -->
<g transform='translate({$longestStreakOffset}, {$longestStreakHeightOffset[2]})'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='{$theme["dates"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>
{$longestStreakRange}
</text>
</g>
</g>
{$excludedDays}
</g>
</svg>
";
}
/**
* Generate SVG displaying an error message
*
* @param string $message The error message to display
* @param array<string,string>|NULL $params Request parameters
* @return string The generated SVG error card
*/
function generateErrorCard(string $message, array $params = null): string
{
$params = $params ?? $_REQUEST;
// get requested theme, use $_REQUEST if no params array specified
$theme = getRequestedTheme($params);
// read border_radius parameter, default to 4.5 if not set
$borderRadius = $params["border_radius"] ?? 4.5;
// read card_width parameter
$cardWidth = getCardWidth($params);
$rectWidth = $cardWidth - 1;
$centerOffset = $cardWidth / 2;
// read card_height parameter
$cardHeight = getCardHeight($params);
$rectHeight = $cardHeight - 1;
$heightOffset = ($cardHeight - 195) / 2;
$errorLabelOffset = $cardHeight / 2 + 10.5;
return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation: isolate' viewBox='0 0 {$cardWidth} {$cardHeight}' width='{$cardWidth}px' height='{$cardHeight}px'>
<style>
a {
fill: {$theme["dates"]};
}
</style>
<defs>
<clipPath id='outer_rectangle'>
<rect width='{$cardWidth}' height='{$cardHeight}' rx='{$borderRadius}'/>
</clipPath>
{$theme["backgroundGradient"]}
</defs>
<g clip-path='url(#outer_rectangle)'>
<g style='isolation: isolate'>
<rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='{$rectWidth}' height='{$rectHeight}'/>
</g>
<g style='isolation: isolate'>
<!-- Error lable -->
<g transform='translate({$centerOffset}, {$errorLabelOffset})'>
<text x='0' y='50' dy='0.25em' stroke-width='0' text-anchor='middle' fill='{$theme["sideLabels"]}' stroke='none' font-family='\"Segoe UI\", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal'>
{$message}
</text>
</g>
<!-- Mask for background behind face -->
<defs>
<mask id='cut-off-area'>
<rect x='0' y='0' width='500' height='500' fill='white' />
<ellipse cx='{$centerOffset}' cy='31' rx='13' ry='18'/>
</mask>
</defs>
<!-- Sad face -->
<g transform='translate({$centerOffset}, {$heightOffset})'>
<path fill='{$theme["fire"]}' d='M0,35.8c-25.2,0-45.7,20.5-45.7,45.7s20.5,45.8,45.7,45.8s45.7-20.5,45.7-45.7S25.2,35.8,0,35.8z M0,122.3c-11.2,0-21.4-4.5-28.8-11.9c-2.9-2.9-5.4-6.3-7.4-10c-3-5.7-4.6-12.1-4.6-18.9c0-22.5,18.3-40.8,40.8-40.8 c10.7,0,20.4,4.1,27.7,10.9c3.8,3.5,6.9,7.7,9.1,12.4c2.6,5.3,4,11.3,4,17.6C40.8,104.1,22.5,122.3,0,122.3z'/>
<path fill='{$theme["fire"]}' d='M4.8,93.8c5.4,1.1,10.3,4.2,13.7,8.6l3.9-3c-4.1-5.3-10-9-16.6-10.4c-10.6-2.2-21.7,1.9-28.3,10.4l3.9,3 C-13.1,95.3-3.9,91.9,4.8,93.8z'/>
<circle fill='{$theme["fire"]}' cx='-15' cy='71' r='4.9'/>
<circle fill='{$theme["fire"]}' cx='15' cy='71' r='4.9'/>
</g>
</g>
</g>
</svg>
";
}
/**
* Remove animations from SVG
*
* @param string $svg The SVG for the card as a string
* @return string The SVG without animations
*/
function removeAnimations(string $svg): string
{
$svg = preg_replace("/(<style>\X*?<\/style>)/m", "", $svg);
$svg = preg_replace("/(opacity: 0;)/m", "opacity: 1;", $svg);
$svg = preg_replace("/(animation: fadein[^;'\"]+)/m", "opacity: 1;", $svg);
$svg = preg_replace("/(animation: currstreak[^;'\"]+)/m", "font-size: 28px;", $svg);
$svg = preg_replace("/<a \X*?>(\X*?)<\/a>/m", '\1', $svg);
return $svg;
}
/**
* Convert a color from hex 3/4/6/8 digits to hex 6 digits and opacity (0-1)
*
* @param string $color The color to convert
* @return array<string, string> The converted color
*/
function convertHexColor(string $color): array
{
$color = preg_replace("/[^0-9a-fA-F]/", "", $color);
// double each character if the color is in 3/4 digit format
if (strlen($color) === 3) {
$chars = str_split($color);
$color = "{$chars[0]}{$chars[0]}{$chars[1]}{$chars[1]}{$chars[2]}{$chars[2]}";
} elseif (strlen($color) === 4) {
$chars = str_split($color);
$color = "{$chars[0]}{$chars[0]}{$chars[1]}{$chars[1]}{$chars[2]}{$chars[2]}{$chars[3]}{$chars[3]}";
}
// convert to 6 digit hex and opacity
if (strlen($color) === 6) {
return [
"color" => "#{$color}",
"opacity" => 1,
];
} elseif (strlen($color) === 8) {
return [
"color" => "#" . substr($color, 0, 6),
"opacity" => hexdec(substr($color, 6, 2)) / 255,
];
}
throw new AssertionError("Invalid color: " . $color);
}
/**
* Convert transparent hex colors (4/8 digits) in an SVG to hex 6 digits and corresponding opacity attribute (0-1)
*
* @param string $svg The SVG for the card as a string
* @return string The SVG with converted colors
*/
function convertHexColors(string $svg): string
{
// convert "transparent" to "#0000"
$svg = preg_replace("/(fill|stroke)=['\"]transparent['\"]/m", '\1="#0000"', $svg);
// convert hex colors to 6 digits and corresponding opacity attribute
$svg = preg_replace_callback(
"/(fill|stroke|stop-color)=['\"]#([0-9a-fA-F]{4}|[0-9a-fA-F]{8})['\"]/m",
function ($matches) {
$attribute = $matches[1];
$opacityAttribute = $attribute === "stop-color" ? "stop-opacity" : "{$attribute}-opacity";
$result = convertHexColor($matches[2]);
$color = $result["color"];
$opacity = $result["opacity"];
return "{$attribute}='{$color}' {$opacityAttribute}='{$opacity}'";
},
$svg,
);
return $svg;
}
/**
* Converts an SVG card to a PNG image
*
* @param string $svg The SVG for the card as a string
* @param int $cardWidth The width of the card
* @return string The generated PNG data
*/
function convertSvgToPng(string $svg, int $cardWidth, int $cardHeight): string
{
// trim off all whitespaces to make it a valid SVG string
$svg = trim($svg);
// remove style and animations
$svg = removeAnimations($svg);
// replace newlines with spaces
$svg = str_replace("\n", " ", $svg);
// escape svg for shell
$svg = escapeshellarg($svg);
// `--pipe`: read input from pipe (stdin)
// `--export-filename -`: write output to stdout
// `-w 495 -h 195`: set width and height of the output image
// `--export-type png`: set the output format to PNG
$cmd = "echo {$svg} | inkscape --pipe --export-filename - -w {$cardWidth} -h {$cardHeight} --export-type png";
// convert svg to png
$png = shell_exec($cmd); // skipcq: PHP-A1009
// check if the conversion was successful
if (empty($png)) {
// `2>&1`: redirect stderr to stdout
$error = shell_exec("$cmd 2>&1"); // skipcq: PHP-A1009
throw new InvalidArgumentException("Failed to convert SVG to PNG: {$error}", 500);
}
// return the generated png
return $png;
}
/**
* Return headers and response based on type
*
* @param string|array $output The stats (array) or error message (string) to display
* @param array<string,string>|NULL $params Request parameters
* @param int $errorCode The HTTP error code (used for JSON responses)
* @return array The Content-Type header and the response body, and status code in case of an error
*/
function generateOutput(string|array $output, array $params = null, int $errorCode = 200): array
{
$params = $params ?? $_REQUEST;
$requestedType = $params["type"] ?? "svg";
// output JSON data
if ($requestedType === "json") {
// generate array from output
$data = gettype($output) === "string" ? ["error" => $output, "code" => $errorCode] : $output;
return [
"contentType" => "application/json",
"body" => json_encode($data),
];
}
// generate SVG card
$svg = gettype($output) === "string" ? generateErrorCard($output, $params) : generateCard($output, $params);
// some renderers such as inkscape doesn't support transparent colors in hex format, so we need to convert them
$svg = convertHexColors($svg);
// output PNG card
if ($requestedType === "png") {
try {
// extract width from SVG
$cardWidth = (int) preg_replace("/.*width=[\"'](\d+)px[\"'].*/", "$1", $svg);
$cardHeight = (int) preg_replace("/.*height=[\"'](\d+)px[\"'].*/", "$1", $svg);
$png = convertSvgToPng($svg, $cardWidth, $cardHeight);
return [
"contentType" => "image/png",
"body" => $png,
];
} catch (Exception $e) {
return [
"contentType" => "image/svg+xml",
"status" => 500,
"body" => generateErrorCard($e->getMessage(), $params),
];
}
}
// remove animations if disable_animations is set
if (isset($params["disable_animations"]) && $params["disable_animations"] == "true") {
$svg = removeAnimations($svg);
}
// output SVG card
return [
"contentType" => "image/svg+xml",
"body" => $svg,
];
}
/**
* Set headers and output response
*
* @param string|array $output The Content-Type header and the response body
* @param int $responseCode The HTTP response code to send (stored for JSON consumers but always returns 200 for images)
* @return void The function exits after sending the response
*/
function renderOutput(string|array $output, int $responseCode = 200): void
{
$response = generateOutput($output, null, $responseCode);
// Always return HTTP 200 for SVG/PNG so GitHub's image proxy (Camo) displays error cards
// instead of broken images. The original error code is included in JSON responses.
http_response_code(200);
header("Content-Type: {$response["contentType"]}");
exit($response["body"]);
}
================================================
FILE: src/colors.php
================================================
<?php
// return a list of valid CSS colors
return [
"aliceblue",
"antiquewhite",
"aqua",
"aquamarine",
"azure",
"beige",
"bisque",
"black",
"blanchedalmond",
"blue",
"blueviolet",
"brown",
"burlywood",
"cadetblue",
"chartreuse",
"chocolate",
"coral",
"cornflowerblue",
"cornsilk",
"crimson",
"cyan",
"darkblue",
"darkcyan",
"darkgoldenrod",
"darkgray",
"darkgreen",
"darkgrey",
"darkkhaki",
"darkmagenta",
"darkolivegreen",
"darkorange",
"darkorchid",
"darkred",
"darksalmon",
"darkseagreen",
"darkslateblue",
"darkslategray",
"darkslategrey",
"darkturquoise",
"darkviolet",
"deeppink",
"deepskyblue",
"dimgray",
"dimgrey",
"dodgerblue",
"firebrick",
"floralwhite",
"forestgreen",
"fuchsia",
"gainsboro",
"ghostwhite",
"gold",
"goldenrod",
"gray",
"green",
"greenyellow",
"grey",
"honeydew",
"hotpink",
"indianred",
"indigo",
"ivory",
"khaki",
"lavender",
"lavenderblush",
"lawngreen",
"lemonchiffon",
"lightblue",
"lightcoral",
"lightcyan",
"lightgoldenrodyellow",
"lightgray",
"lightgreen",
"lightgrey",
"lightpink",
"lightsalmon",
"lightseagreen",
"lightskyblue",
"lightslategray",
"lightslategrey",
"lightsteelblue",
"lightyellow",
"lime",
"limegreen",
"linen",
"magenta",
"maroon",
"mediumaquamarine",
"mediumblue",
"mediumorchid",
"mediumpurple",
"mediumseagreen",
"mediumslateblue",
"mediumspringgreen",
"mediumturquoise",
"mediumvioletred",
"midnightblue",
"mintcream",
"mistyrose",
"moccasin",
"navajowhite",
"navy",
"oldlace",
"olive",
"olivedrab",
"orange",
"orangered",
"orchid",
"palegoldenrod",
"palegreen",
"paleturquoise",
"palevioletred",
"papayawhip",
"peachpuff",
"peru",
"pink",
"plum",
"powderblue",
"purple",
"rebeccapurple",
"red",
"rosybrown",
"royalblue",
"saddlebrown",
"salmon",
"sandybrown",
"seagreen",
"seashell",
"sienna",
"silver",
"skyblue",
"slateblue",
"slategray",
"slategrey",
"snow",
"springgreen",
"steelblue",
"tan",
"teal",
"thistle",
"tomato",
"transparent",
"turquoise",
"violet",
"wheat",
"white",
"whitesmoke",
"yellow",
"yellowgreen",
];
================================================
FILE: src/demo/css/style.css
================================================
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
:root {
--background: #eee;
--card-background: white;
--text: #1a1a1a;
--border: #ccc;
--stroke: #a9a9a9;
--blue-light: #2196f3;
--blue-transparent: #2196f3aa;
--blue-dark: #1e88e5;
--button-outline: black;
--red: #ff6464;
--yellow: #ffee58;
--yellow-light: #fffde7;
}
[data-theme="dark"] {
--background: #090d13;
--card-background: #0d1117;
--text: #efefef;
--border: #2a2e34;
--stroke: #737373;
--blue-light: #1976d2;
--blue-transparent: #2196f320;
--blue-dark: #1565c0;
--button-outline: black;
--red: #ff6464;
--yellow: #a59809;
--yellow-light: #716800;
}
body {
background: var(--background);
font-family:
Segoe UI,
Ubuntu,
sans-serif;
padding-top: 10px;
color: var(--text);
}
.github {
text-align: center;
margin-bottom: 12px;
}
.github span {
margin: 0 2px;
}
.container {
margin: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.properties,
.output {
max-width: 550px;
margin: 10px;
background: var(--card-background);
padding: 25px;
padding-top: 0;
border: 1px solid var(--border);
border-radius: 6px;
}
@media only screen and (max-width: 1024px) {
.properties,
.output {
width: 100%;
}
}
h1 {
text-align: center;
}
h2 {
border-bottom: 1px solid var(--stroke);
}
:not(.btn):focus {
outline: var(--blue-light) auto 2px;
}
.btn {
max-width: 100%;
background-color: var(--blue-light);
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
transition: 0.2s ease-in-out;
}
.btn:focus {
outline: var(--button-outline) auto 2px;
}
.btn:hover {
background-color: var(--blue-dark);
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn:disabled {
background: var(--blue-transparent);
box-shadow: none;
cursor: not-allowed;
}
.parameters {
margin: auto;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
justify-content: start;
text-align: left;
grid-gap: 8px;
}
.parameters .btn {
margin-top: 8px;
}
.parameters input[type="text"],
.parameters input[type="number"],
.parameters input.jscolor,
.parameters select {
padding: 10px 14px;
display: inline-block;
border: 1px solid var(--border);
border-radius: 6px;
box-sizing: border-box;
font-family: inherit;
background: var(--card-background);
width: 100%;
color: inherit;
}
.parameters input.jscolor {
font-size: 12px;
max-width: 130px;
}
@media only screen and (max-width: 1024px) {
.parameters input.jscolor {
max-width: none;
}
}
.parameters select {
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
}
[data-theme="dark"] .parameters select {
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}
.parameters select option[disabled] {
display: none;
}
.parameters label,
.parameters span[data-property] {
text-transform: capitalize;
}
.checkbox-buttons input {
display: none !important;
}
.checkbox-buttons input[type="checkbox"] + label {
font-size: 90%;
display: inline-block;
border-radius: 6px;
height: 30px;
margin: 2px 3px 2px 0;
line-height: 28px;
text-align: center;
cursor: pointer;
background: var(--card-background);
color: var(--text);
border: 1px solid var(--border);
padding: 0 10px;
}
.checkbox-buttons input[type="checkbox"]:checked + label {
background: var(--text);
color: var(--background);
}
.checkbox-buttons input[type="checkbox"]:disabled + label {
background: var(--card-background);
color: var(--stroke);
}
span[title="required"] {
color: var(--red);
}
input:focus:invalid {
outline: 2px var(--red) auto;
}
.advanced {
grid-column-start: 1;
grid-column-end: -1;
}
.advanced summary {
padding: 6px;
cursor: pointer;
}
.advanced .parameters {
margin-top: 8px;
}
.radio-button-group {
display: flex;
align-items: center;
gap: 0.75em;
}
.advanced .color-properties {
grid-template-columns: auto 1fr auto;
}
.advanced .grid-middle {
display: grid;
grid-template-columns: 30% 35% 35%;
}
.input-text-group {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25em;
}
.input-text-group span {
font-size: 0.8em;
font-weight: bold;
padding-right: 1.5em;
}
.advanced .color-properties label:first-of-type {
font-weight: bold;
}
.plus.btn,
.minus.btn {
margin: 0;
background: inherit;
color: inherit;
font-size: 22px;
padding: 0;
height: 40px;
width: 40px;
}
.plus.btn:hover,
.minus.btn:hover {
background: var(--background);
}
.output img {
max-width: 100%;
}
.output .warning {
font-size: 0.84em;
background: var(--yellow-light);
padding: 8px 14px;
border-left: 4px solid var(--yellow);
}
.output .code-container,
.output .json {
background: var(--border);
border-radius: 6px;
padding: 12px 16px;
word-break: break-all;
}
.output .btn {
margin-top: 16px;
}
.top-bottom-split {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* tooltips */
.btn.tooltip {
display: flex;
justify-content: center;
align-items: center;
}
/* tooltip bubble */
.btn.tooltip:before {
content: attr(title);
position: absolute;
transform: translateY(-45px);
height: auto;
width: auto;
background: #4a4a4afa;
border-radius: 4px;
color: white;
line-height: 30px;
font-size: 1em;
padding: 0 12px;
pointer-events: none;
opacity: 0;
}
/* tooltip bottom triangle */
.btn.tooltip:after {
content: "";
position: absolute;
transform: translateY(-25px);
border-style: solid;
border-color: #4a4a4afa transparent transparent transparent;
border-width: 5px;
pointer-events: none;
opacity: 0;
}
/* show tooltip on hover */
.btn.tooltip[title]:hover:before,
.btn.tooltip[title]:hover:after,
.btn.tooltip:disabled:hover:before,
.btn.tooltip:disabled:hover:after {
transition: 0.2s ease-in opacity;
opacity: 1;
}
.btn.tooltip:disabled:before {
content: "You must first input a valid username.";
}
textarea#exported-php {
margin-top: 10px;
width: 100%;
resize: vertical;
height: 100px;
}
/* link underline effect */
a.underline-hover {
position: relative;
text-decoration: none;
color: var(--text);
margin-top: 2em;
display: inline-flex;
align-items: center;
gap: 0.25em;
}
.underline-hover::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 1px;
background-color: var(--blue-light);
transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (pointer: fine) {
.underline-hover:hover::before {
left: 0;
right: auto;
width: 100%;
}
}
================================================
FILE: src/demo/css/toggle-dark.css
================================================
a.darkmode {
position: fixed;
top: 2em;
right: 2em;
color: var(--text);
background: var(--background);
height: 3em;
width: 3em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 2px solid var(--border);
box-shadow:
0 0 3px rgb(0 0 0 / 12%),
0 1px 2px rgb(0 0 0 / 24%);
transition: 0.2s ease-in box-shadow;
text-decoration: none;
}
a.darkmode:hover {
box-shadow:
0 0 6px rgb(0 0 0 / 16%),
0 3px 6px rgb(0 0 0 / 23%);
}
@media only screen and (max-width: 600px) {
a.darkmode {
top: unset;
bottom: 1em;
right: 1em;
}
}
================================================
FILE: src/demo/index.php
================================================
<?php
$THEMES = include "../themes.php";
$TRANSLATIONS = include "../translations.php";
// Get the keys of the first value in the translations array
// and filter to only include locales that have an array as the value
$LOCALES = array_filter(array_keys($TRANSLATIONS), function ($locale) use ($TRANSLATIONS) {
return is_array($TRANSLATIONS[$locale]);
});
$darkmode = $_COOKIE["darkmode"] ?? null;
/**
* Convert a camelCase string to a skewer-case string
* @param string $str The camelCase string
* @return string The skewer-case string
*/
function camelToSkewer(string $str): string
{
return preg_replace_callback(
"/([A-Z])/",
function ($matches) {
return "-" . strtolower($matches[0]);
},
$str,
);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-48CYVH0XEF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-48CYVH0XEF');
</script>
<title>GitHub Readme Streak Stats Demo</title>
<link rel="stylesheet" href="./css/style.css?v=<?= filemtime("./css/style.css") ?>">
<link rel="stylesheet" href="./css/toggle-dark.css?v=<?= filemtime("./css/toggle-dark.css") ?>">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="mask-icon" href="icon.svg" color="#fb8c00">
<script type="text/javascript" src="./js/script.js?v=<?= filemtime("./js/script.js") ?>" defer></script>
<script type="text/javascript" src="./js/accordion.js?v=<?= filemtime("./js/accordion.js") ?>" defer></script>
<script type="text/javascript" src="./js/toggle-dark.js?v=<?= filemtime("./js/toggle-dark.js") ?>" defer></script>
<script type="text/javascript" src="./js/jscolor.min.js?v=<?= filemtime("./js/jscolor.min.js") ?>" defer></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body <?php echo $darkmode === "on" ? 'data-theme="dark"' : ""; ?>>
<h1>🔥 GitHub Readme Streak Stats</h1>
<!-- GitHub badges/links section -->
<div class="github">
<!-- GitHub Sponsors -->
<a class="github-button" href="https://github.com/sponsors/denvercoder1" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @denvercoder1 on GitHub">Sponsor</a>
<!-- View on GitHub -->
<a class="github-button" href="https://github.com/denvercoder1/github-readme-streak-stats" data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" aria-label="View denvercoder1/github-readme-streak-stats on GitHub">View on GitHub</a>
<!-- GitHub Star -->
<a class="github-button" href="https://github.com/denvercoder1/github-readme-streak-stats" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star denvercoder1/github-readme-streak-stats on GitHub">Star</a>
</div>
<div class="container">
<div class="properties">
<h2>Properties</h2>
<form class="parameters">
<label for="user">Username<span title="required">*</span></label>
<input class="param" type="text" id="user" name="user" placeholder="DenverCoder1" pattern="^[A-Za-z\d-]{0,39}[A-Za-z\d]$" title="Up to 40 letters or hyphens but not ending with hyphen" />
<label for="theme">Theme</label>
<select class="param" id="theme" name="theme">
<?php foreach ($THEMES as $theme => $options): ?>
<?php
$dataAttrs = "";
foreach ($options as $key => $value) {
// convert key from camelCase to skewer-case
$key = camelToSkewer($key);
// remove '#' from hex color value
$value = preg_replace("/^\#/", "", $value);
// add data attribute
$dataAttrs .= "data-" . $key . "=\"" . $value . "\" ";
}
?>
<option value="<?php echo $theme; ?>" <?php echo $dataAttrs; ?>><?php echo $theme; ?></option>
<?php endforeach; ?>
</select>
<label for="hide-border">Hide Border</label>
<select class="param" id="hide-border" name="hide_border">
<option>false</option>
<option>true</option>
</select>
<label for="border-radius">Border Radius</label>
<input class="param" type="number" id="border-radius" name="border_radius" placeholder="4.5" value="4.5" step="0.1" min="0" />
<label for="locale">Locale</label>
<select class="param" id="locale" name="locale">
<?php foreach ($LOCALES as $locale): ?>
<option value="<?php echo $locale; ?>">
<?php $display = Locale::getDisplayName($locale, $locale); ?>
<?php echo $display . " (" . $locale . ")"; ?>
</option>
<?php endforeach; ?>
</select>
<label for="short-numbers">Short Numbers</label>
<select class="param" id="short-numbers" name="short_numbers">
<option>false</option>
<option>true</option>
</select>
<label for="date-format">Date Format</label>
<select class="param" id="date-format" name="date_format">
<option value="">default</option>
<option value="M j[, Y]">Aug 10, 2016</option>
<option value="j M[ Y]">10 Aug 2016</option>
<option value="[Y ]M j">2016 Aug 10</option>
<option value="j/n[/Y]">10/8/2016</option>
<option value="n/j[/Y]">8/10/2016</option>
<option value="[Y.]n.j">2016.8.10</option>
</select>
<label for="mode">Streak Mode</label>
<select class="param" id="mode" name="mode">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
</select>
<span id="exclude-days-label">Exclude Days</span>
<div class="checkbox-buttons weekdays" role="group" aria-labelledby="exclude-days-label">
<input type="checkbox" value="Sun" id="weekday-sun" />
<label for="weekday-sun" data-tooltip="Exclude Sunday" title="Exclude Sunday">S</label>
<input type="checkbox" value="Mon" id="weekday-mon" />
<label for="weekday-mon" data-tooltip="Exclude Monday" title="Exclude Monday">M</label>
<input type="checkbox" value="Tue" id="weekday-tue" />
<label for="weekday-tue" data-tooltip="Exclude Tuesday" title="Exclude Tuesday">T</label>
<input type="checkbox" value="Wed" id="weekday-wed" />
<label for="weekday-wed" data-tooltip="Exclude Wednesday" title="Exclude Wednesday">W</label>
<input type="checkbox" value="Thu" id="weekday-thu" />
<label for="weekday-thu" data-tooltip="Exclude Thursday" title="Exclude Thursday">T</label>
<input type="checkbox" value="Fri" id="weekday-fri" />
<label for="weekday-fri" data-tooltip="Exclude Friday" title="Exclude Friday">F</label>
<input type="checkbox" value="Sat" id="weekday-sat" />
<label for="weekday-sat" data-tooltip="Exclude Saturday" title="Exclude Saturday">S</label>
<input type="hidden" id="exclude-days" name="exclude_days" class="param" />
</div>
<span id="show-sections-label">Show Sections</span>
<div class="checkbox-buttons sections" role="group" aria-labelledby="show-sections-label">
<input type="checkbox" value="total" id="section-total" checked />
<label for="section-total" data-tooltip="Total Contributions" title="Total Contributions">Total</label>
<input type="checkbox" value="current" id="section-current" checked />
<label for="section-current" data-tooltip="Current Streak" title="Current Streak">Current</label>
<input type="checkbox" value="longest" id="section-longest" checked />
<label for="section-longest" data-tooltip="Longest Streak" title="Longest Streak">Longest</label>
<input type="hidden" id="sections" name="sections" class="param" value="total,current,longest" />
</div>
<label for="card-width">Card Width</label>
<input class="param" type="number" id="card-width" name="card_width" placeholder="495" value="495" step="1" min="300" />
<label for="card-width">Card Height</label>
<input class="param" type="number" id="card-width" name="card_height" placeholder="195" value="195" step="1" min="170" />
<label for="type">Output Type</label>
<select class="param" id="type" name="type">
<option value="svg">SVG</option>
<option value="png">PNG</option>
<option value="json">JSON</option>
</select>
<details class="advanced">
<summary>⚙ Advanced Options</summary>
<div class="content">
<div class="radio-buttons parameters" role="radiogroup" aria-labelledby="background-type-label">
<!-- Radio buttons to choose between solid and gradient background -->
<span id="background-type-label">Background Type</span>
<div class="radio-button-group">
<div>
<input type="radio" id="background-type-solid" name="background-type" value="solid" checked />
<label for="background-type-solid">Solid</label>
</div>
<div>
<input type="radio" id="background-type-gradient" name="background-type" value="gradient" />
<label for="background-type-gradient">Gradient</label>
</div>
</div>
</div>
<div class="color-properties parameters">
<label for="properties">Add Property</label>
<select id="properties" name="properties">
<?php foreach ($THEMES["default"] as $option => $color): ?>
<option><?php echo $option; ?></option>
<?php endforeach; ?>
</select>
<button class="plus btn" type="button" onclick="preview.addProperty()">+</button>
</div>
</div>
<button class="btn" type="button" onclick="preview.exportPhp()">Export to PHP</button>
<button id="clear-button" class="btn" type="button" onclick="preview.removeAllProperties()" disabled>Clear Options</button>
<textarea id="exported-php" hidden></textarea>
</details>
<button class="btn" type="submit">Open Permalink</button>
</form>
</div>
<div class="output top-bottom-split">
<div class="top">
<h2>Preview</h2>
<img alt="GitHub Readme Streak Stats" src="preview.php?user=" />
<div class="json" style="display: none;">
<pre></pre>
</div>
<p class="warning">
Note: The stats above are just examples and not from your GitHub profile.
</p>
<div>
<h2>Markdown</h2>
<div class="code-container md">
<code></code>
</div>
<button class="copy-button btn tooltip copy-md" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
Copy To Clipboard
</button>
</div>
<div>
<h2>HTML</h2>
<div class="code-container html">
<code></code>
</div>
<button class="copy-button btn tooltip copy-html" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
Copy To Clipboard
</button>
</div>
<div>
<h2>JSON</h2>
<div class="code-container json">
<code></code>
</div>
<button class="copy-button btn tooltip copy-json" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
Copy To Clipboard
</button>
</div>
</div>
<div class="bottom">
<a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">
Frequently Asked Questions
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v9l-3.794-3.793-5.999 6-1.414-1.414 5.999-6L12 3h9z"></path>
</g>
</svg>
</a>
</div>
</div>
</div>
<a href="javascript:toggleTheme()" class="darkmode" title="toggle dark mode">
<span id="darkmode-icon">
<?php if ($darkmode === "on"): ?>
🌞
<?php else: ?>
🌙
<?php endif; ?>
</span>
</a>
</body>
</html>
================================================
FILE: src/demo/js/accordion.js
================================================
// Based on https://css-tricks.com/how-to-animate-the-details-element-using-waapi/
class Accordion {
constructor(el) {
// Store the <details> element
this.el = el;
// Store the <summary> element
this.summary = el.querySelector("summary");
// Store the <div class="content"> element
this.content = el.querySelector(".content");
// Store the animation object (so we can cancel it if needed)
this.animation = null;
// Store if the element is closing
this.isClosing = false;
// Store if the element is expanding
this.isExpanding = false;
}
init() {
// Detect user clicks on the summary element
this.summary.addEventListener("click", (e) => this.onClick(e));
}
onClick(e) {
// Stop default behaviour from the browser
e.preventDefault();
// Add an overflow on the <details> to avoid content overflowing
this.el.style.overflow = "hidden";
// Check if the element is being closed or is already closed
if (this.isClosing || !this.el.open) {
this.open();
// Check if the element is being openned or is already open
} else if (this.isExpanding || this.el.open) {
this.shrink();
}
}
shrink() {
// Set the element as "being closed"
this.isClosing = true;
// Store the current height of the element
const startHeight = `${this.el.offsetHeight}px`;
// Calculate the height of the summary
const endHeight = `${this.summary.offsetHeight}px`;
// If there is already an animation running
if (this.animation) {
// Cancel the current animation
this.animation.cancel();
}
// Start a WAAPI animation
this.animation = this.el.animate(
{
// Set the keyframes from the startHeight to endHeight
height: [startHeight, endHeight],
},
{
duration: 400,
easing: "ease-out",
},
);
// When the animation is complete, call onAnimationFinish()
this.animation.onfinish = () => this.onAnimationFinish(false);
// If the animation is cancelled, isClosing variable is set to false
this.animation.oncancel = () => (this.isClosing = false);
}
open() {
// Apply a fixed height on the element
this.el.style.height = `${this.el.offsetHeight}px`;
// Force the [open] attribute on the details element
this.el.open = true;
// Wait for the next frame to call the expand function
window.requestAnimationFrame(() => this.expand());
}
expand() {
// Set the element as "being expanding"
this.isExpanding = true;
// Get the current fixed height of the element
const startHeight = `${this.el.offsetHeight}px`;
// Calculate the open height of the element (summary height + content height)
const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
// If there is already an animation running
if (this.animation) {
// Cancel the current animation
this.animation.cancel();
}
// Start a WAAPI animation
this.animation = this.el.animate(
{
// Set the keyframes from the startHeight to endHeight
height: [startHeight, endHeight],
},
{
duration: 400,
easing: "ease-out",
},
);
// When the animation is complete, call onAnimationFinish()
this.animation.onfinish = () => this.onAnimationFinish(true);
// If the animation is cancelled, isExpanding variable is set to false
this.animation.oncancel = () => (this.isExpanding = false);
}
onAnimationFinish(open) {
// Set the open attribute based on the parameter
this.el.open = open;
// Clear the stored animation
this.animation = null;
// Reset isClosing & isExpanding
this.isClosing = false;
this.isExpanding = false;
// Remove the overflow hidden and the fixed height
this.el.style.height = this.el.style.overflow = "";
}
}
document.querySelectorAll("details").forEach((el) => {
const accordion = new Accordion(el);
accordion.init();
});
================================================
FILE: src/demo/js/script.js
================================================
/*global jscolor*/
/*eslint no-undef: "error"*/
const preview = {
/**
* Default values - if set to these values, the params do not need to appear in the query string
*/
defaults: {
theme: "default",
hide_border: "false",
date_format: "",
locale: "en",
border_radius: "4.5",
mode: "daily",
type: "svg",
exclude_days: "",
card_width: "495",
card_height: "195",
hide_total_contributions: "false",
hide_current_streak: "false",
hide_longest_streak: "false",
short_numbers: "false",
},
/**
* Update the preview with the current parameters
*/
update() {
// get parameter values from all .param elements
const params = this.objectFromElements(document.querySelectorAll(".param"));
// convert sections to hide_... parameters
params.hide_total_contributions = String(!params.sections.includes("total"));
params.hide_current_streak = String(!params.sections.includes("current"));
params.hide_longest_streak = String(!params.sections.includes("longest"));
delete params.sections;
// convert parameters to query string
const query = Object.keys(params)
.filter((key) => params[key] !== this.defaults[key])
.map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
.join("&");
// generate links and markdown
const imageURL = `${window.location.origin}?${query}`;
const demoImageURL = `preview.php?${query}`;
// update preview
if (params.type !== "json") {
const repoLink = "https://git.io/streak-stats";
const md = `[](${repoLink})`;
const html = `<a href="${repoLink}"><img src="${imageURL}" alt="GitHub Streak" /></a>`;
document.querySelector(".output img").src = demoImageURL;
document.querySelector(".md code").innerText = md;
document.querySelector(".html code").innerText = html;
document.querySelector(".copy-md").parentElement.style.display = "block";
document.querySelector(".copy-html").parentElement.style.display = "block";
document.querySelector(".output img").style.display = "block";
document.querySelector(".output .json").style.display = "none";
document.querySelector(".copy-json").parentElement.style.display = "none";
} else {
fetch(demoImageURL)
.then((response) => response.json())
.then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
.catch(console.error);
document.querySelector(".json code").innerText = imageURL;
document.querySelector(".copy-md").parentElement.style.display = "none";
document.querySelector(".copy-html").parentElement.style.display = "none";
document.querySelector(".output img").style.display = "none";
document.querySelector(".output .json").style.display = "block";
document.querySelector(".copy-json").parentElement.style.display = "block";
}
// disable copy button if username is invalid
const copyButtons = document.querySelectorAll(".copy-button");
copyButtons.forEach((button) => {
button.disabled = Boolean(document.querySelector("#user:invalid") || !document.querySelector("#user").value);
});
// disable clear button if no added advanced options
const clearButton = document.querySelector("#clear-button");
clearButton.disabled = !document.querySelectorAll(".minus").length;
},
/**
* Add a property in the advanced section
* @param {string} property - the name of the property, selected element is used if not provided
* @param {string} value - the value to set the property to
*/
addProperty(property, value = "#EB5454FF") {
const selectElement = document.querySelector("#properties");
// if no property passed, get the currently selected property
const propertyName = property || selectElement.value;
if (!selectElement.disabled) {
// disable option in menu
Array.prototype.find.call(selectElement.options, (o) => o.value === propertyName).disabled = true;
// select first unselected option
const firstAvailable = Array.prototype.find.call(selectElement.options, (o) => !o.disabled);
if (firstAvailable) {
firstAvailable.selected = true;
} else {
selectElement.disabled = true;
}
// color picker
const jscolorConfig = {
format: "hexa",
onChange: `preview.pickerChange(this, '${propertyName}')`,
onInput: `preview.pickerChange(this, '${propertyName}')`,
};
const parent = document.querySelector(".advanced .color-properties");
if (propertyName === "background" && document.querySelector("#background-type-gradient").checked) {
const valueParts = value.split(",");
let angleValue = "45";
let color1Value = "#EB5454FF";
let color2Value = "#EB5454FF";
if (valueParts.length === 3) {
angleValue = valueParts[0];
color1Value = valueParts[1];
color2Value = valueParts[2];
}
const input = document.createElement("span");
input.className = "grid-middle";
input.setAttribute("data-property", propertyName);
const rotateInputGroup = document.createElement("div");
rotateInputGroup.className = "input-text-group";
const rotate = document.createElement("input");
rotate.className = "param";
rotate.type = "number";
rotate.id = "rotate";
rotate.placeholder = "45";
rotate.value = angleValue;
const degText = document.createElement("span");
degText.innerText = "\u00B0"; // degree symbol
rotateInputGroup.appendChild(rotate);
rotateInputGroup.appendChild(degText);
const color1 = document.createElement("input");
color1.className = "param jscolor";
color1.id = "background-color1";
color1.setAttribute(
"data-jscolor",
JSON.stringify({
format: "hexa",
onChange: `preview.pickerChange(this, '${color1.id}')`,
onInput: `preview.pickerChange(this, '${color1.id}')`,
}),
);
const color2 = document.createElement("input");
color2.className = "param jscolor";
color2.id = "background-color2";
color2.setAttribute(
"data-jscolor",
JSON.stringify({
format: "hexa",
onChange: `preview.pickerChange(this, '${color2.id}')`,
onInput: `preview.pickerChange(this, '${color2.id}')`,
}),
);
rotate.name = color1.name = color2.name = propertyName;
color1.value = color1Value;
color2.value = color2Value;
// label
const label = document.createElement("span");
label.innerText = propertyName;
label.setAttribute("data-property", propertyName);
label.id = "background-label";
input.setAttribute("role", "group");
input.setAttribute("aria-labelledby", "background-label");
// add elements
parent.appendChild(label);
input.appendChild(rotateInputGroup);
input.appendChild(color1);
input.appendChild(color2);
parent.appendChild(input);
// initialise jscolor on elements
jscolor.install(input);
// check initial color values
this.checkColor(color1.value, color1.id);
this.checkColor(color2.value, color2.id);
} else {
const input = document.createElement("input");
input.className = "param jscolor";
input.id = propertyName;
input.name = propertyName;
input.setAttribute("data-property", propertyName);
input.setAttribute("data-jscolor", JSON.stringify(jscolorConfig));
input.value = value;
// label
const label = document.createElement("label");
label.innerText = propertyName;
label.setAttribute("data-property", propertyName);
label.setAttribute("for", propertyName);
// add elements
parent.appendChild(label);
parent.appendChild(input);
// initialise jscolor on element
jscolor.install(parent);
// check initial color value
this.checkColor(value, propertyName);
}
// removal button
const minus = document.createElement("button");
minus.className = "minus btn";
minus.setAttribute("onclick", "return preview.removeProperty(this.getAttribute('data-property'));");
minus.setAttribute("type", "button");
minus.innerText = "−";
minus.setAttribute("data-property", propertyName);
parent.appendChild(minus);
// update and exit
this.update();
}
},
/**
* Remove a property from the advanced section
* @param {string} property - the name of the property to remove
*/
removeProperty(property) {
const parent = document.querySelector(".advanced .color-properties");
const selectElement = document.querySelector("#properties");
// remove all elements for given property
parent.querySelectorAll(`[data-property="${property}"]`).forEach((x) => parent.removeChild(x));
// enable option in menu
const option = Array.prototype.find.call(selectElement.options, (o) => o.value === property);
selectElement.disabled = false;
option.disabled = false;
selectElement.value = option.value;
// update and exit
this.update();
},
/**
* Removes all properties from the advanced section
*/
removeAllProperties() {
const parent = document.querySelector(".advanced .color-properties");
const activeProperties = parent.querySelectorAll("[data-property]");
// select active and unique property names
const propertyNames = Array.prototype.map
.call(activeProperties, (prop) => prop.getAttribute("data-property"))
.filter((value, index, self) => self.indexOf(value) === index);
// remove each active property name
propertyNames.forEach((prop) => this.removeProperty(prop));
},
/**
* Create a key-value mapping of names to values from all elements in a Node list
* @param {NodeList} elements - the elements to get the values from
* @returns {Object} the key-value mapping
*/
objectFromElements(elements) {
return Array.from(elements).reduce((acc, next) => {
const obj = { ...acc };
let value = next.value;
if (value.indexOf("#") >= 0) {
// if the value is colour, remove the hash sign
value = value.replace(/#/g, "");
if (value.length > 6) {
// if the value is in hexa and opacity is 1, remove FF
value = value.replace(/[Ff]{2}$/, "");
}
}
// if the property already exists, append the value to the existing one
if (next.name in obj) {
obj[next.name] = `${obj[next.name]},${value}`;
return obj;
}
// otherwise, add the value to the object
obj[next.name] = value;
return obj;
}, {});
},
/**
* Export the advanced parameters to PHP code for creating a new theme
*/
exportPhp() {
// get default values from the currently selected theme
const themeSelect = document.querySelector("#theme");
const selectedOption = themeSelect.options[themeSelect.selectedIndex];
const defaultParams = selectedOption.dataset;
// get parameters with the advanced options
const advancedParams = this.objectFromElements(document.querySelectorAll(".advanced .param"));
// update default values with the advanced options
const params = { ...defaultParams, ...advancedParams };
// convert parameters to PHP code
const mappings = Object.keys(params)
.map((key) => {
const value = params[key].includes(",") ? params[key] : `#${params[key]}`;
return ` "${key}" => "${value}",`;
})
.join("\n");
const output = `[\n${mappings}\n]`;
// set the textarea value to the output
const textarea = document.getElementById("exported-php");
textarea.value = output;
textarea.hidden = false;
},
/**
* Remove "FF" from a hex color if opacity is 1
* @param {string} color - the hex color
* @param {string} input - the property name, or id of the element to update
*/
checkColor(color, input) {
// if color has hex alpha value -> remove it
if (color.length === 9 && color.slice(-2) === "FF") {
document.querySelector(`#${input}`).value = color.slice(0, -2);
}
},
/**
* Check a color when the picker changes
* @param {Object} picker - the JSColor picker object
* @param {string} input - the property name, or id of the element to update
*/
pickerChange(picker, input) {
// color was changed by picker - check it
this.checkColor(picker.toHEXAString(), input);
// update preview
this.update();
},
/**
* Update checkboxes based on the query string parameter
*
* @param {string|null} param - the query string parameter to read
* @param {string} selector - the selector of the parent container to find the checkboxes
*/
updateCheckboxes(param, selector) {
if (!param) {
return;
}
// uncheck all checkboxes
[...document.querySelectorAll(`${selector} input[value]`)].forEach((checkbox) => {
checkbox.checked = false;
});
// check checkboxes based on values in the query string
param.split(",").forEach((value) => {
const checkbox = document.querySelector(`${selector} input[value="${value}"]`);
if (checkbox) {
checkbox.checked = true;
}
});
},
/**
* Assign values to input boxes based on the query string
*
* @param {URLSearchParams} searchParams - the query string parameters or empty to use the current URL
*/
updateFormInputs(searchParams) {
searchParams = searchParams || new URLSearchParams(window.location.search);
const backgroundParams = searchParams.getAll("background");
// set background-type
if (backgroundParams.length > 1) {
document.querySelector("#background-type-gradient").checked = true;
}
// set input field and select values
searchParams.forEach((val, key) => {
const paramInput = document.querySelector(`[name="${key}"]`);
if (paramInput) {
// set parameter value
paramInput.value = val;
} else {
// add advanced property
document.querySelector("details.advanced").open = true;
preview.addProperty(key, searchParams.getAll(key).join(","));
}
});
// set background angle and gradient colors
if (backgroundParams.length > 1) {
document.querySelector("#rotate").value = backgroundParams[0];
document.querySelector("#background-color1").value = backgroundParams[1];
document.querySelector("#background-color2").value = backgroundParams[2];
preview.checkColor(backgroundParams[1], "background-color1");
preview.checkColor(backgroundParams[2], "background-color2");
}
// set weekday checkboxes
this.updateCheckboxes(searchParams.get("exclude_days"), ".weekdays");
// set show sections checkboxes
this.updateCheckboxes(searchParams.get("sections"), ".sections");
},
};
const clipboard = {
/**
* Copy the content of an element to the clipboard
* @param {Element} el - the element to copy
*/
copy(el) {
// create input box to copy from
const input = document.createElement("input");
if (el.classList.contains("copy-md")) {
input.value = document.querySelector(".md code").innerText;
} else if (el.classList.contains("copy-html")) {
input.value = document.querySelector(".html code").innerText;
} else if (el.classList.contains("copy-json")) {
input.value = document.querySelector(".json code").innerText;
}
document.body.appendChild(input);
// select all
input.select();
input.setSelectionRange(0, 99999);
// copy
document.execCommand("copy");
// remove input box
input.parentElement.removeChild(input);
// set tooltip text
el.title = "Copied!";
},
};
const tooltip = {
/**
* Reset the tooltip text
* @param {Element} el - the element to reset the tooltip for
*/
reset(el) {
// remove tooltip text
el.removeAttribute("title");
},
};
// when the page loads
window.addEventListener(
"load",
() => {
// refresh preview on
gitextract_zrbf4bwk/
├── .deepsource.toml
├── .devcontainer/
│ ├── Dockerfile
│ ├── devcontainer.json
│ ├── first-run-notice.txt
│ ├── on-create.sh
│ └── post-create.sh
├── .editorconfig
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ ├── feature_request.md
│ │ ├── question.md
│ │ └── theme.md
│ ├── dependabot.yml
│ ├── pull_request_template.md
│ └── workflows/
│ ├── force-release.yml
│ ├── phpunit-ci-coverage.yml
│ ├── prettier.yml
│ ├── release.yml
│ └── translation-progress.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.js
├── Aptfile
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── Procfile
├── README.md
├── app.json
├── composer.json
├── docs/
│ ├── faq.md
│ └── themes.md
├── package.json
├── scripts/
│ └── translation-progress.php
├── src/
│ ├── cache.php
│ ├── card.php
│ ├── colors.php
│ ├── demo/
│ │ ├── css/
│ │ │ ├── style.css
│ │ │ └── toggle-dark.css
│ │ ├── index.php
│ │ ├── js/
│ │ │ ├── accordion.js
│ │ │ ├── script.js
│ │ │ └── toggle-dark.js
│ │ └── preview.php
│ ├── index.php
│ ├── stats.php
│ ├── themes.php
│ ├── translations.php
│ └── whitelist.php
└── tests/
├── CacheTest.php
├── OptionsTest.php
├── RenderTest.php
├── StatsTest.php
├── TranslationsTest.php
└── phpunit/
└── phpunit.xml
SYMBOL INDEX (139 symbols across 14 files)
FILE: scripts/translation-progress.php
function getProgress (line 11) | function getProgress(array $translations): array
function getLineNumber (line 60) | function getLineNumber(array $translations_file, string $locale): int
function progressToBadges (line 71) | function progressToBadges(array $progress): string
function updateReadme (line 107) | function updateReadme(string $path, string $start, string $end, string $...
FILE: src/cache.php
function getCacheKey (line 25) | function getCacheKey(string $user, array $options = []): string
function getCacheFilePath (line 44) | function getCacheFilePath(string $key): string
function ensureCacheDir (line 54) | function ensureCacheDir(): bool
function getCachedStats (line 70) | function getCachedStats(string $user, array $options = [], int $maxAge =...
function setCachedStats (line 124) | function setCachedStats(string $user, array $options, array $stats): bool
function clearExpiredCache (line 155) | function clearExpiredCache(int $maxAge = CACHE_DURATION): int
function clearUserCache (line 195) | function clearUserCache(string $user): bool
FILE: src/card.php
function formatDate (line 13) | function formatDate(string $dateString, string|null $format, string $loc...
function translateDays (line 67) | function translateDays(array $days, string $locale): array
function getExcludingDaysText (line 95) | function getExcludingDaysText($excludedDays, $localeTranslations, $local...
function normalizeThemeName (line 108) | function normalizeThemeName(string $theme): string
function getRequestedTheme (line 119) | function getRequestedTheme(array $params): array
function utf8WordWrap (line 203) | function utf8WordWrap(string $string, int $width = 75, string $break = "...
function utf8Strlen (line 223) | function utf8Strlen(string $string): int
function splitLines (line 236) | function splitLines(string $text, int $maxChars, int $line1Offset): string
function normalizeLocaleCode (line 263) | function normalizeLocaleCode(string $localeCode): string
function getTranslations (line 288) | function getTranslations(string $localeCode): array
function getCardWidth (line 318) | function getCardWidth(array $params, int $numColumns = 3): int
function getCardHeight (line 331) | function getCardHeight(array $params): int
function formatNumber (line 346) | function formatNumber(float $num, string $localeCode, bool $useShortNumb...
function generateCard (line 370) | function generateCard(array $stats, array $params = null): string
function generateErrorCard (line 618) | function generateErrorCard(string $message, array $params = null): string
function removeAnimations (line 689) | function removeAnimations(string $svg): string
function convertHexColor (line 705) | function convertHexColor(string $color): array
function convertHexColors (line 739) | function convertHexColors(string $svg): string
function convertSvgToPng (line 768) | function convertSvgToPng(string $svg, int $cardWidth, int $cardHeight): ...
function generateOutput (line 810) | function generateOutput(string|array $output, array $params = null, int ...
function renderOutput (line 871) | function renderOutput(string|array $output, int $responseCode = 200): void
FILE: src/demo/index.php
function camelToSkewer (line 18) | function camelToSkewer(string $str): string
FILE: src/demo/js/accordion.js
class Accordion (line 2) | class Accordion {
method constructor (line 3) | constructor(el) {
method init (line 18) | init() {
method onClick (line 23) | onClick(e) {
method shrink (line 37) | shrink() {
method open (line 66) | open() {
method expand (line 75) | expand() {
method onAnimationFinish (line 104) | onAnimationFinish(open) {
FILE: src/demo/js/script.js
method update (line 28) | update() {
method addProperty (line 84) | addProperty(property, value = "#EB5454FF") {
method removeProperty (line 219) | removeProperty(property) {
method removeAllProperties (line 236) | removeAllProperties() {
method objectFromElements (line 252) | objectFromElements(elements) {
method exportPhp (line 278) | exportPhp() {
method checkColor (line 306) | checkColor(color, input) {
method pickerChange (line 318) | pickerChange(picker, input) {
method updateCheckboxes (line 331) | updateCheckboxes(param, selector) {
method updateFormInputs (line 353) | updateFormInputs(searchParams) {
method copy (line 392) | copy(el) {
method reset (line 420) | reset(el) {
FILE: src/demo/js/toggle-dark.js
function setCookie (line 7) | function setCookie(cname, cvalue, exdays) {
function getCookie (line 19) | function getCookie(name) {
function darkmode (line 41) | function darkmode() {
function lightmode (line 50) | function lightmode() {
function toggleTheme (line 59) | function toggleTheme() {
FILE: src/stats.php
function buildContributionGraphQuery (line 14) | function buildContributionGraphQuery(string $user, int $year): string
function executeContributionGraphRequests (line 43) | function executeContributionGraphRequests(string $user, array $years): a...
function getContributionGraphs (line 124) | function getContributionGraphs(string $user, ?int $startingYear = null):...
function getGitHubTokens (line 165) | function getGitHubTokens(): array
function getGitHubToken (line 191) | function getGitHubToken(): string
function removeGitHubToken (line 209) | function removeGitHubToken(string $token): void
function getGraphQLCurlHandle (line 230) | function getGraphQLCurlHandle(string $query, string $token): CurlHandle
function getContributionDates (line 257) | function getContributionDates(array $contributionGraphs): array
function normalizeDays (line 288) | function normalizeDays(array $days): array
function isExcludedDay (line 307) | function isExcludedDay(string $date, array $excludedDays): bool
function getContributionStats (line 323) | function getContributionStats(array $contributions, array $excludedDays ...
function getPreviousSunday (line 390) | function getPreviousSunday(string $date): string
function getWeeklyContributionStats (line 402) | function getWeeklyContributionStats(array $contributions): array
FILE: src/whitelist.php
function isWhitelisted (line 9) | function isWhitelisted(string $user): bool
FILE: tests/CacheTest.php
class CacheTest (line 11) | final class CacheTest extends TestCase
method testCacheKeyConsistency (line 16) | public function testCacheKeyConsistency(): void
method testCacheKeyDifferentInputs (line 26) | public function testCacheKeyDifferentInputs(): void
method testCacheKeyNoCollisions (line 41) | public function testCacheKeyNoCollisions(): void
method testCacheKeyOptionOrdering (line 56) | public function testCacheKeyOptionOrdering(): void
method testCacheKeyFormat (line 66) | public function testCacheKeyFormat(): void
method testGetCacheFilePath (line 75) | public function testGetCacheFilePath(): void
method testCacheRoundtrip (line 85) | public function testCacheRoundtrip(): void
method testGetCachedStatsNotFound (line 109) | public function testGetCachedStatsNotFound(): void
method testSetCachedStatsWithEmptyStats (line 118) | public function testSetCachedStatsWithEmptyStats(): void
method testClearUserCache (line 130) | public function testClearUserCache(): void
method testClearUserCacheNonExistent (line 150) | public function testClearUserCacheNonExistent(): void
method testEnsureCacheDir (line 159) | public function testEnsureCacheDir(): void
FILE: tests/OptionsTest.php
class OptionsTest (line 10) | final class OptionsTest extends TestCase
method testThemes (line 29) | public function testThemes(): void
method testThemesInDocumentation (line 50) | public function testThemesInDocumentation(): void
method testFallbackToDefaultTheme (line 66) | public function testFallbackToDefaultTheme(): void
method testThemesHaveValidParameters (line 81) | public function testThemesHaveValidParameters(): void
method testColorOverrideParameters (line 127) | public function testColorOverrideParameters(): void
method testValidColorInputs (line 148) | public function testValidColorInputs(): void
method testInvalidColorInputs (line 176) | public function testInvalidColorInputs(): void
method testHideBorder (line 198) | public function testHideBorder(): void
method testDateFormatSameYear (line 213) | public function testDateFormatSameYear(): void
method testDateFormatDifferentYear (line 223) | public function testDateFormatDifferentYear(): void
method testDateFormatNoBracketsDiffYear (line 232) | public function testDateFormatNoBracketsDiffYear(): void
method testDateFormatNoBracketsSameYear (line 241) | public function testDateFormatNoBracketsSameYear(): void
method testNormalizeThemeName (line 251) | public function testNormalizeThemeName(): void
method testAllThemeNamesNormalized (line 262) | public function testAllThemeNamesNormalized(): void
FILE: tests/RenderTest.php
class RenderTest (line 10) | final class RenderTest extends TestCase
method testCardRender (line 46) | public function testCardRender(): void
method testErrorCardRender (line 62) | public function testErrorCardRender(): void
method testDateFormatRender (line 73) | public function testDateFormatRender(): void
method testLocaleRenderDateFormat (line 88) | public function testLocaleRenderDateFormat(): void
method testBorderRadius (line 107) | public function testBorderRadius(): void
method testSplitLines (line 122) | public function testSplitLines(): void
method testDisableAnimations (line 148) | public function testDisableAnimations(): void
method testAlphaInHexColors (line 164) | public function testAlphaInHexColors(): void
method testGradientBackground (line 190) | public function testGradientBackground(): void
method testGradientBackgroundWithMoreThan2Colors (line 204) | public function testGradientBackgroundWithMoreThan2Colors(): void
method testExcludeDays (line 218) | public function testExcludeDays(): void
method testCardWidth (line 228) | public function testCardWidth(): void
method testCardHeight (line 244) | public function testCardHeight(): void
method testFirstAndThirdColumnsSwappedWhenDirectionIsRtl (line 260) | public function testFirstAndThirdColumnsSwappedWhenDirectionIsRtl(): void
method testExcludeDaysParameter (line 277) | public function testExcludeDaysParameter(): void
FILE: tests/StatsTest.php
class StatsTest (line 24) | final class StatsTest extends TestCase
method testValidUsername (line 29) | public function testValidUsername(): void
method testOverrideStartingYear (line 77) | public function testOverrideStartingYear(): void
method testInvalidUsername (line 89) | public function testInvalidUsername(): void
method testValidUsernameWithWhitelist (line 99) | public function testValidUsernameWithWhitelist(): void
method testNotWhitelistedUsername (line 114) | public function testNotWhitelistedUsername(): void
method testOrganizationName (line 129) | public function testOrganizationName(): void
method testContributedToday (line 139) | public function testContributedToday(): void
method testMissingToday (line 170) | public function testMissingToday(): void
method testMissingTwoDays (line 201) | public function testMissingTwoDays(): void
method testMultipleYearStreak (line 232) | public function testMultipleYearStreak(): void
method testFutureCommits (line 262) | public function testFutureCommits(): void
method testWeeklyStats (line 326) | public function testWeeklyStats(): void
method testWeeklyStatsMissingWeek (line 362) | public function testWeeklyStatsMissingWeek(): void
method testWeeklyStatsMissingThisWeek (line 406) | public function testWeeklyStatsMissingThisWeek(): void
method testExcludeDays (line 441) | public function testExcludeDays(): void
method testExcludeDaysNoContributionBeforeWeekend (line 475) | public function testExcludeDaysNoContributionBeforeWeekend(): void
FILE: tests/TranslationsTest.php
class TranslationsTest (line 10) | final class TranslationsTest extends TestCase
method testAllPhrasesValid (line 15) | public function testAllPhrasesValid(): void
method testLocalesSortedAlphabetically (line 48) | public function testLocalesSortedAlphabetically(): void
method testKeysNormalized (line 69) | public function testKeysNormalized(): void
method testGetTranslations (line 84) | public function testGetTranslations(): void
method testNormalizeLocaleCode (line 103) | public function testNormalizeLocaleCode(): void
Condensed preview — 57 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (389K chars).
[
{
"path": ".deepsource.toml",
"chars": 252,
"preview": "version = 1\n\ntest_patterns = [\n \"tests/**\"\n]\n\nexclude_patterns = [\n \"vendor/**\",\n \"*.min.js\"\n]\n\n[[analyzers]]\nname = "
},
{
"path": ".devcontainer/Dockerfile",
"chars": 236,
"preview": "FROM mcr.microsoft.com/vscode/devcontainers/base:ubuntu-24.04\n\nADD first-run-notice.txt /usr/local/etc/vscode-dev-contai"
},
{
"path": ".devcontainer/devcontainer.json",
"chars": 235,
"preview": "{\n \"build\": {\n \"dockerfile\": \"Dockerfile\"\n },\n \"onCreateCommand\": \"/workspaces/github-readme-streak-stats/.devcont"
},
{
"path": ".devcontainer/first-run-notice.txt",
"chars": 108,
"preview": "👋 Welcome to Codespaces! You are using the pre-configured image.\n\nTests can be executed with: composer test\n"
},
{
"path": ".devcontainer/on-create.sh",
"chars": 79,
"preview": "#!/bin/bash\nset -e\n\ncd /workspaces/github-readme-streak-stats\ncomposer install\n"
},
{
"path": ".devcontainer/post-create.sh",
"chars": 133,
"preview": "#!/bin/bash\nset -e\n\ncd /workspaces/github-readme-streak-stats\nif [ -n \"$GITHUB_TOKEN\" ]; then\n echo \"TOKEN=$GITHUB_TOKE"
},
{
"path": ".editorconfig",
"chars": 234,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 4\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ni"
},
{
"path": ".gitattributes",
"chars": 73,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto eol=lf\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 123,
"preview": "github: [DenverCoder1]\npatreon:\nopen_collective:\nko_fi:\ntidelift:\ncommunity_bridge:\nliberapay:\nissuehunt:\notechie:\ncusto"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 832,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: \"bug\"\nassignees: \"\"\n---\n\n**Describe the"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 605,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: \"enhancement\"\nassignees: \"\"\n---\n\n**I"
},
{
"path": ".github/ISSUE_TEMPLATE/question.md",
"chars": 181,
"preview": "---\nname: Question\nabout: I have a question about GitHub Streak Stats\ntitle: \"\"\nlabels: \"question\"\nassignees: \"\"\n---\n\n**"
},
{
"path": ".github/ISSUE_TEMPLATE/theme.md",
"chars": 379,
"preview": "---\nname: Theme Request\nabout: Request a theme for the project\ntitle: \"\"\nlabels: \"theme\"\nassignees: \"\"\n---\n\n**Describe y"
},
{
"path": ".github/dependabot.yml",
"chars": 506,
"preview": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where "
},
{
"path": ".github/pull_request_template.md",
"chars": 1492,
"preview": "## Description\n\n<!-- Please include a summary of the change and which issue is fixed. -->\n\nFixes # <!-- add issue number"
},
{
"path": ".github/workflows/force-release.yml",
"chars": 835,
"preview": "name: Manual Release\n\non:\n workflow_dispatch:\n\njobs:\n changelog:\n runs-on: ubuntu-latest\n\n steps:\n - uses: "
},
{
"path": ".github/workflows/phpunit-ci-coverage.yml",
"chars": 673,
"preview": "name: PHPUnit CI\n\non:\n workflow_dispatch:\n pull_request:\n push:\n branches:\n - main\n\nenv:\n PHP_VERSION: 8.2\n\n"
},
{
"path": ".github/workflows/prettier.yml",
"chars": 1186,
"preview": "name: Format with Prettier\n\non:\n push:\n branches:\n - main\n pull_request:\n paths:\n - \"**.php\"\n - \""
},
{
"path": ".github/workflows/release.yml",
"chars": 806,
"preview": "name: Automated Releases\n\non:\n workflow_dispatch:\n\njobs:\n changelog:\n runs-on: ubuntu-latest\n\n steps:\n - us"
},
{
"path": ".github/workflows/translation-progress.yml",
"chars": 868,
"preview": "name: Update Translation Progress\n\non:\n workflow_dispatch:\n push:\n branches:\n - main\n paths:\n - \"src/t"
},
{
"path": ".gitignore",
"chars": 233,
"preview": "# Generated files\nvendor/\nnode_modules/\n*.log\ncomposer.phar\nyarn.lock\npackage-lock.json\n.vercel\n\n# Cache directory\ncache"
},
{
"path": ".prettierignore",
"chars": 30,
"preview": "vendor\n**/*.min.js\n.prettierrc"
},
{
"path": ".prettierrc.js",
"chars": 203,
"preview": "module.exports = {\n printWidth: 120,\n endOfLine: \"auto\",\n plugins: [\"@prettier/plugin-php\"],\n overrides: [\n {\n "
},
{
"path": "Aptfile",
"chars": 9,
"preview": "inkscape\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3367,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "CONTRIBUTING.md",
"chars": 5784,
"preview": "## Contributing Guidelines\n\nContributions are welcome! Feel free to open an issue or submit a pull request if you have a"
},
{
"path": "Dockerfile",
"chars": 2414,
"preview": "# Use PHP 8.3 (8.4 not supported yet)\nFROM php:8.3-apache@sha256:6be4ef702b2dd05352f7e5fe14667696a4ad091c9d2ad9083becbee"
},
{
"path": "LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) 2020 Jonah Lawrence\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "Procfile",
"chars": 40,
"preview": "web: vendor/bin/heroku-php-apache2 src/\n"
},
{
"path": "README.md",
"chars": 43230,
"preview": "<p align=\"center\">\n <img src=\"https://i.imgur.com/GZHodUG.png\" width=\"100px\"/>\n <h3 align=\"center\">Github Readme Strea"
},
{
"path": "app.json",
"chars": 922,
"preview": "{\n \"name\": \"GitHub Readme Streak Stats\",\n \"description\": \"🔥 Stay motivated and show off your contribution streak! 🌟 Di"
},
{
"path": "composer.json",
"chars": 1294,
"preview": "{\n \"name\": \"denvercoder1/github-readme-streak-stats\",\n \"description\": \"🔥 Stay motivated and show off your contribution"
},
{
"path": "docs/faq.md",
"chars": 4683,
"preview": "# FAQ\n\n## How do I create a Readme for my profile?\n\nA profile readme appears on your profile page when you create a repo"
},
{
"path": "docs/themes.md",
"chars": 27604,
"preview": "## Currently supported themes\n\nTo enable a theme, append `&theme=` followed by the theme name to the end of your url.\n\nY"
},
{
"path": "package.json",
"chars": 134,
"preview": "{\n \"engines\": {\n \"node\": \"22.x\"\n },\n \"devDependencies\": {\n \"@prettier/plugin-php\": \"^0.24.0\",\n \"prettier\": \""
},
{
"path": "scripts/translation-progress.php",
"chars": 4255,
"preview": "<?php\n\n$TRANSLATIONS = include __DIR__ . \"/../src/translations.php\";\n\n/**\n * Get the percentage of translated phrases fo"
},
{
"path": "src/cache.php",
"chars": 5113,
"preview": "<?php\n\ndeclare(strict_types=1);\n\n/**\n * Simple file-based cache for GitHub contribution stats\n *\n * Caches stats for 24 "
},
{
"path": "src/card.php",
"chars": 37668,
"preview": "<?php\n\ndeclare(strict_types=1);\n\n/**\n * Convert date from Y-M-D to more human-readable format\n *\n * @param string $dateS"
},
{
"path": "src/colors.php",
"chars": 2581,
"preview": "<?php\n\n// return a list of valid CSS colors\nreturn [\n \"aliceblue\",\n \"antiquewhite\",\n \"aqua\",\n \"aquamarine\",\n"
},
{
"path": "src/demo/css/style.css",
"chars": 7449,
"preview": "html {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n*,\n*::before,\n*::af"
},
{
"path": "src/demo/css/toggle-dark.css",
"chars": 621,
"preview": "a.darkmode {\n position: fixed;\n top: 2em;\n right: 2em;\n color: var(--text);\n background: var(--background);\n heigh"
},
{
"path": "src/demo/index.php",
"chars": 15420,
"preview": "<?php\n\n$THEMES = include \"../themes.php\";\n$TRANSLATIONS = include \"../translations.php\";\n// Get the keys of the first va"
},
{
"path": "src/demo/js/accordion.js",
"chars": 4012,
"preview": "// Based on https://css-tricks.com/how-to-animate-the-details-element-using-waapi/\nclass Accordion {\n constructor(el) {"
},
{
"path": "src/demo/js/script.js",
"chars": 19119,
"preview": "/*global jscolor*/\n/*eslint no-undef: \"error\"*/\n\nconst preview = {\n /**\n * Default values - if set to these values, t"
},
{
"path": "src/demo/js/toggle-dark.js",
"chars": 1737,
"preview": "/**\n * Set a cookie\n * @param {string} cname - cookie name\n * @param {string} cvalue - cookie value\n * @param {number} e"
},
{
"path": "src/demo/preview.php",
"chars": 1425,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nrequire_once \"../card.php\";\nrequire_once \"../stats.php\";\n\n$mode = $_GET[\"mode\"] ?? \"dai"
},
{
"path": "src/index.php",
"chars": 2930,
"preview": "<?php\n\ndeclare(strict_types=1);\n\n// load functions\nrequire_once \"../vendor/autoload.php\";\nrequire_once \"stats.php\";\nrequ"
},
{
"path": "src/stats.php",
"chars": 17769,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nrequire_once \"whitelist.php\";\n\n/**\n * Build a GraphQL query for a contribution graph\n *"
},
{
"path": "src/themes.php",
"chars": 66725,
"preview": "<?php\n\n// mapping of theme colors given a theme name\nreturn [\n \"default\" => [\n \"background\" => \"#FFFEFE\",\n "
},
{
"path": "src/translations.php",
"chars": 24728,
"preview": "<?php\n\n/**\n * Locales\n * -------\n * For a list of supported locale codes, see https://gist.github.com/DenverCoder1/f6114"
},
{
"path": "src/whitelist.php",
"chars": 440,
"preview": "<?php\n\n/**\n * Check if a GitHub username is allowed based on the whitelist\n *\n * @param string $user GitHub username to "
},
{
"path": "tests/CacheTest.php",
"chars": 5575,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\n// load functions\nrequire_once dirname(__DIR__, 1) . \""
},
{
"path": "tests/OptionsTest.php",
"chars": 9743,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\n// load functions\nrequire_once \"src/card.php\";\n\nfinal "
},
{
"path": "tests/RenderTest.php",
"chars": 11703,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\n// load functions\nrequire_once \"src/card.php\";\n\nfinal "
},
{
"path": "tests/StatsTest.php",
"chars": 17700,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\n// load functions\nrequire_once dirname(__DIR__, 1) . \""
},
{
"path": "tests/TranslationsTest.php",
"chars": 5025,
"preview": "<?php\n\ndeclare(strict_types=1);\n\nuse PHPUnit\\Framework\\TestCase;\n\n// load functions\nrequire_once dirname(__DIR__, 1) . \""
},
{
"path": "tests/phpunit/phpunit.xml",
"chars": 184,
"preview": "<?xml version=\"1.0\"?>\n<phpunit colors=\"true\">\n <testsuites>\n <testsuite name=\"main\">\n <directory suffix=\"Test.p"
}
]
About this extraction
This page contains the full source code of the DenverCoder1/github-readme-streak-stats GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 57 files (354.3 KB), approximately 103.3k tokens, and a symbol index with 139 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.