From 38a8e88743e6ecf712a51aa783ce1eac28fe7141 Mon Sep 17 00:00:00 2001 From: steam_bell_92 Date: Tue, 21 Oct 2025 20:54:29 +0530 Subject: [PATCH 1/4] Introduced Fun-Profile-Customizations uDER Docs/GitHub --- .../Anurag-Hazra's-GitHub-Readme-Cards.md | 56 +++++++++++++++ .../Snake-Contribution-Animation.md | 69 +++++++++++++++++++ .../Trophy Case-Streaks.md | 27 ++++++++ .../Why-Customize.md | 25 +++++++ sidebars.ts | 11 +++ 5 files changed, 188 insertions(+) create mode 100644 docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md create mode 100644 docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md create mode 100644 docs/GitHub/Fun-Profile-Customizations/Trophy Case-Streaks.md create mode 100644 docs/GitHub/Fun-Profile-Customizations/Why-Customize.md diff --git a/docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md b/docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md new file mode 100644 index 00000000..18c4ce1d --- /dev/null +++ b/docs/GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards.md @@ -0,0 +1,56 @@ +# Anurag Hazra's GitHub Readme Cards + +This is the foundational tool for dynamic profile statistics. It uses a serverless function to generate SVGs (Scalable Vector Graphics) displaying **real-time data** pulled directly from your GitHub profile. These cards are the quickest and most popular way to upgrade your Readme. + +| Feature | Description | +| :--- | :--- | +| **Stats Card** | Shows core metrics: total stars, commits (in the last year), pull requests, and contribution count. | +| **Language Card** | Displays your usage breakdown of **top languages** across your repositories (excluding forks). | + +### Setup Example (Stats & Language Cards) + +To use these cards, you simply embed them as images in your `README.md`. **Replace `YOUR_USERNAME` with your actual GitHub username.** The code below uses the popular `buefy` theme. + +```markdown +## My GitHub Stats + +[![GitHub Stats](https://github-readme-stats.vercel.app/api?username=YOUR_USERNAME&show_icons=true&theme=buefy&hide_rank=true)](https://github.com/anuraghazra/github-readme-stats) + +## Top Languages + +[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=YOUR_USERNAME&layout=compact&theme=buefy&exclude_repo=recode-hive-docs,test-repo)](https://github.com/anuraghazra/github-readme-stats) + +### Customization: Themes and Layouts + +You can drastically change the appearance and content of your cards by adding parameters to the URL string (e.g., `¶m=value`). + +#### 🎨 Popular Themes (`&theme`) + +The &theme= parameter allows you to apply a full color scheme. Try one of these popular options by adding it to the API URL: + +- dark: Standard dark mode, high contrast. +- buefy: Bright blue and purple scheme (used in the example above). +- synthwave: Retro 80s neon look. +- onedark: A popular editor theme, often used by developers. +- solarized_light: A classic light theme option. + + +#### πŸ“ Layout Options (`&layout`) + +This parameter is most commonly used for the Top Languages card to optimize space: + +- default: (Used on the Stats Card) A larger vertical layout with distinct borders. +- compact: (Recommended for Language Card) Displays language bars horizontally, resulting in a much shorter, more compact card. + +#### Other Key Parameters + +| Parameter | Example Value | Description | +| :--- | :--- | :--- | +| `&show_icons=` | `show_icons=true` | Displays icons next to each stat label (highly recommended). | +| `&hide=` | `hide=issues,prs` | Hides specific statistics, like issues or pull requests, if you prefer a cleaner look. | +| `&title_color=` | `title_color=007bff` | Sets a custom hexadecimal color for the card title. | +| `&exclude_repo=` | `exclude_repo=test-repo,docs` | Hides specific repositories from the language calculations.| + +⚠️ **Important Note on Language Calculations:** The Top Languages card calculates language usage from all public repos you own. To ensure the card accurately reflects your coding focus (and not just boilerplate files), it is strongly recommended to use the &exclude_repo= parameter to ignore repositories containing auto-generated documentation or simple configuration. + +πŸ”— Relevant Repo: ![Anurag Hazra's GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats) \ No newline at end of file diff --git a/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md b/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md new file mode 100644 index 00000000..75597912 --- /dev/null +++ b/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md @@ -0,0 +1,69 @@ +# Snake Contribution Animation 🐍 + +The Snake Contribution Animation is a visually unique and engaging way to represent your yearly activity. This feature adds a looping GIF or SVG of a "snake" chasing and consuming your contribution blocks, creating a dynamic element on your profile. + +### How the Snake Animation Works + +Unlike the static stat cards, the snake animation is a generated file (usually an SVG or GIF). This file must be **generated and committed** back to your profile repository regularly to stay up-to-date with your latest activity. This entire process is fully automated using a **GitHub Action** that runs on a schedule (e.g., once a day). + +### Setup Steps (High-Level): + +The easiest and most common method for setup is by utilizing the powerful `lowlighter/metrics` action, which includes a dedicated snake plugin to handle the generation and commit process for you. + +1. **Repository Structure:** Ensure your profile repository (the one named after your username) is ready. You may want to create a folder (e.g., `assets/` or `output/`) in your repository to store the generated animation file. +2. **Workflow File:** Create a YAML file in the `.github/workflows/` directory (e.g., `snake.yml`). This file contains the instructions for the action. +3. **Action Configuration:** Configure the workflow to use the `lowlighter/metrics` action with the `plugins.activity.snake` parameter enabled. You must grant the action write permissions so it can commit the new image file back to your repository. + +### Final Embedding Example + +Once your GitHub Action is running and successfully generating the output file (often named `github-snake.svg`), you can embed the image path in your Readme using the direct URL to the file in your repository: + +```markdown +## My GitHub Activity + +![Snake Animation](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_USERNAME/output/github-snake.svg) + +``` +name: Generate Snake Animation + +on: + schedule: + # Runs at 1 AM UTC every day + - cron: "0 1 * * *" + workflow_dispatch: + # Allows manual trigger via the GitHub Actions tab + +jobs: + generate: + runs-on: ubuntu-latest + permissions: + contents: write # Required to commit the generated file back to the repo + + steps: + - uses: actions/checkout@v4 + - uses: lowlighter/metrics@latest # Use the metrics action + + with: + # Your GitHub token (required for stats gathering and file commit) + token: ${{ secrets.GITHUB_TOKEN }} + + # The file name and path where the output will be saved + output_fmt: svg + output_name: output/github-snake.svg + + # Base configuration + user: ${{ github.repository_owner }} # Automatically detects your username + template: snake + base: "" # Base is disabled to focus only on the snake plugin + + # Plugin configuration for the snake + plugin_activity_limit: 5 # Limit the amount of activity data used + plugin_activity_days: 365 # Include the last 365 days of activity + plugin_activity_timestamps: false + plugin_activity_details: false + + # Snake-specific settings + plugin_isocalendar: yes + plugin_isocalendar_duration: full-year + plugin_traffic: yes +``` \ No newline at end of file diff --git a/docs/GitHub/Fun-Profile-Customizations/Trophy Case-Streaks.md b/docs/GitHub/Fun-Profile-Customizations/Trophy Case-Streaks.md new file mode 100644 index 00000000..780abb76 --- /dev/null +++ b/docs/GitHub/Fun-Profile-Customizations/Trophy Case-Streaks.md @@ -0,0 +1,27 @@ +# Trophy Case and Contribution Streaks + +These tools complement the core GitHub Readme Stats by focusing on **gamification** and **consistency**, turning your contributions into visible achievements. + +### GitHub Trophy Case πŸ† + +This service awards different virtual "trophies" based on your activity, such as total star count, number of commits, number of followers, and maintaining contribution streaks. It’s an excellent motivator for long-term engagement. + +**Setup Example:** +To include the trophy case, simply embed the SVG image link in your Readme, replacing `YOUR_USERNAME`: + +### My Trophy Case + +[![GitHub Trophies](https://github-profile-trophy.vercel.app/?username=YOUR_USERNAME&theme=gruvbox&no-frame=true)](https://github.com/ryo-ma/github-profile-trophy) + +πŸ”— Relevant Repo: ![ryo-ma/github-profile-trophy](https://github.com/ryo-ma/github-profile-trophy) + +### GitHub Streaks πŸ”₯ +This card displays your current streak of contributions and your longest historical streak, promoting a daily habit of coding. Seeing your streak number grow can be a powerful psychological push! + +**Setup Example:** + +[![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=YOUR_USERNAME&theme=highcontrast&date_format=j+M+Y)](https://github.com/DenverCoder1/github-readme-streak-stats) + +πŸ”— Relevant Repo: ![DenverCoder1/github-readme-streak-stats](https://github.com/DenverCoder1/github-readme-streak-stats) + +πŸ’‘ Tip: To maintain a streak, remember that contributions count if they are made within a 24-hour period, based on UTC time. \ No newline at end of file diff --git a/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md b/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md new file mode 100644 index 00000000..cb4fc3f7 --- /dev/null +++ b/docs/GitHub/Fun-Profile-Customizations/Why-Customize.md @@ -0,0 +1,25 @@ +# 🎨 Fun GitHub Profile Customizations + +Your GitHub profile Readme is a prime piece of digital real estate. It’s more than just a list of code repositoriesβ€”it's your developer brand, your digital workshop, and your **first impression** on the global coding community. Customizing it is essential for promoting the dynamic developer culture of Recode Hive and maximizing your personal visibility. + +--- + +## Why Customize? + +### πŸ› οΈ The Essential First Step: Create Your Profile Repository + +Before you can add any dynamic stats or flair, you must complete the single, most important requirement: + +**Requirement:** You must create a **public GitHub repository** named *exactly* the same as your GitHub username (e.g., if your username is `recode`, the repo must be `recode/recode`). When you create this special repository, GitHub will automatically use its `README.md` file as the content for your public profile page. + +### Why Personalization Pays Off + +Once your profile repo is set up, customization offers tangible benefits that go far beyond aesthetics: + +1. **First Impressions and Engagement:** A creative, customized profile is immediately **engaging and memorable**, encouraging visitors (mentors, recruiters, or collaborators) to spend more time exploring your work. By highlighting your key skills and active projects upfront, you dramatically increase the chances of a meaningful connection. + +2. **Highlight Activity and Commitment:** Dynamic cards displaying stats for your **total commits, contribution streaks, and top languages** automatically validate your commitment to continuous learning and development. This proof-of-work is far more convincing than a simple claim on a resume. + +3. **Showcase Your Identity and Skills:** Customization allows you to highlight projects that matter most to you, whether it's a specific Recode Hive project or a new language you're mastering. Your profile becomes a curated **showcase of your specific expertise** and personality. + +4. **Professional Polish and Detail:** A well-structured, customized profile demonstrates **attention to detail, technical flair, and ownership**. These soft skills are highly valued in any professional development setting. \ No newline at end of file diff --git a/sidebars.ts b/sidebars.ts index 848fd614..d12e9335 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -68,6 +68,17 @@ const sidebars: SidebarsConfig = { "GitHub/Maintainer-guide/enable-dicussion", ], }, + { + type: "category", + label: "🎨 Fun Proflie Contributions", + className: "custom-sidebar-fun", + items: [ + "GitHub/Fun-profile-contributions/Why-Customize", + "GitHub/Fun-profile-contributions/Anurag-Hazra's-GitHub-Readme-Cards", + "GitHub/Fun-profile-contributions/Trophy Case-Streaks", + "GitHub/Fun-profile-contributions/Snake-Contribution-Animation", + ] + } ], }, { From f03397f17f123be4f7ab650e3d2930dc0e0c7ad6 Mon Sep 17 00:00:00 2001 From: steam_bell_92 Date: Tue, 21 Oct 2025 21:08:33 +0530 Subject: [PATCH 2/4] Corrected paths in sidebars.ts and renamed one of GitHub docs file --- .../{Trophy Case-Streaks.md => Trophy-Case-Streaks.md} | 0 sidebars.ts | 10 +++++----- 2 files changed, 5 insertions(+), 5 deletions(-) rename docs/GitHub/Fun-Profile-Customizations/{Trophy Case-Streaks.md => Trophy-Case-Streaks.md} (100%) diff --git a/docs/GitHub/Fun-Profile-Customizations/Trophy Case-Streaks.md b/docs/GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks.md similarity index 100% rename from docs/GitHub/Fun-Profile-Customizations/Trophy Case-Streaks.md rename to docs/GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks.md diff --git a/sidebars.ts b/sidebars.ts index d12e9335..8460a13b 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -70,13 +70,13 @@ const sidebars: SidebarsConfig = { }, { type: "category", - label: "🎨 Fun Proflie Contributions", + label: "🎨 Fun Proflie Customizations", className: "custom-sidebar-fun", items: [ - "GitHub/Fun-profile-contributions/Why-Customize", - "GitHub/Fun-profile-contributions/Anurag-Hazra's-GitHub-Readme-Cards", - "GitHub/Fun-profile-contributions/Trophy Case-Streaks", - "GitHub/Fun-profile-contributions/Snake-Contribution-Animation", + "GitHub/Fun-Profile-Customizations/Why-Customize", + "GitHub/Fun-Profile-Customizations/Anurag-Hazra's-GitHub-Readme-Cards", + "GitHub/Fun-Profile-Customizations/Trophy-Case-Streaks", + "GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation", ] } ], From bf5d33fc69eb5fcc51add0932f052a1f1a99b794 Mon Sep 17 00:00:00 2001 From: steam_bell_92 Date: Tue, 21 Oct 2025 21:22:55 +0530 Subject: [PATCH 3/4] Updated Snake-Contribution-Animation.md as some eror occured --- .../Snake-Contribution-Animation.md | 69 ------------------- .../nake-Contribution-Animation.md | 61 ++++++++++++++++ 2 files changed, 61 insertions(+), 69 deletions(-) delete mode 100644 docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md create mode 100644 docs/GitHub/Fun-Profile-Customizations/nake-Contribution-Animation.md diff --git a/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md b/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md deleted file mode 100644 index 75597912..00000000 --- a/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md +++ /dev/null @@ -1,69 +0,0 @@ -# Snake Contribution Animation 🐍 - -The Snake Contribution Animation is a visually unique and engaging way to represent your yearly activity. This feature adds a looping GIF or SVG of a "snake" chasing and consuming your contribution blocks, creating a dynamic element on your profile. - -### How the Snake Animation Works - -Unlike the static stat cards, the snake animation is a generated file (usually an SVG or GIF). This file must be **generated and committed** back to your profile repository regularly to stay up-to-date with your latest activity. This entire process is fully automated using a **GitHub Action** that runs on a schedule (e.g., once a day). - -### Setup Steps (High-Level): - -The easiest and most common method for setup is by utilizing the powerful `lowlighter/metrics` action, which includes a dedicated snake plugin to handle the generation and commit process for you. - -1. **Repository Structure:** Ensure your profile repository (the one named after your username) is ready. You may want to create a folder (e.g., `assets/` or `output/`) in your repository to store the generated animation file. -2. **Workflow File:** Create a YAML file in the `.github/workflows/` directory (e.g., `snake.yml`). This file contains the instructions for the action. -3. **Action Configuration:** Configure the workflow to use the `lowlighter/metrics` action with the `plugins.activity.snake` parameter enabled. You must grant the action write permissions so it can commit the new image file back to your repository. - -### Final Embedding Example - -Once your GitHub Action is running and successfully generating the output file (often named `github-snake.svg`), you can embed the image path in your Readme using the direct URL to the file in your repository: - -```markdown -## My GitHub Activity - -![Snake Animation](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_USERNAME/output/github-snake.svg) - -``` -name: Generate Snake Animation - -on: - schedule: - # Runs at 1 AM UTC every day - - cron: "0 1 * * *" - workflow_dispatch: - # Allows manual trigger via the GitHub Actions tab - -jobs: - generate: - runs-on: ubuntu-latest - permissions: - contents: write # Required to commit the generated file back to the repo - - steps: - - uses: actions/checkout@v4 - - uses: lowlighter/metrics@latest # Use the metrics action - - with: - # Your GitHub token (required for stats gathering and file commit) - token: ${{ secrets.GITHUB_TOKEN }} - - # The file name and path where the output will be saved - output_fmt: svg - output_name: output/github-snake.svg - - # Base configuration - user: ${{ github.repository_owner }} # Automatically detects your username - template: snake - base: "" # Base is disabled to focus only on the snake plugin - - # Plugin configuration for the snake - plugin_activity_limit: 5 # Limit the amount of activity data used - plugin_activity_days: 365 # Include the last 365 days of activity - plugin_activity_timestamps: false - plugin_activity_details: false - - # Snake-specific settings - plugin_isocalendar: yes - plugin_isocalendar_duration: full-year - plugin_traffic: yes -``` \ No newline at end of file diff --git a/docs/GitHub/Fun-Profile-Customizations/nake-Contribution-Animation.md b/docs/GitHub/Fun-Profile-Customizations/nake-Contribution-Animation.md new file mode 100644 index 00000000..8d7fcf45 --- /dev/null +++ b/docs/GitHub/Fun-Profile-Customizations/nake-Contribution-Animation.md @@ -0,0 +1,61 @@ +# Snake Contribution Animation 🐍 + +The Snake Contribution Animation is a visually unique and engaging way to represent your yearly activity. This feature adds a looping GIF or SVG of a "snake" chasing and consuming your contribution blocks, creating a dynamic element on your profile. + +### How the Snake Animation Works + +Unlike static image cards, the snake animation is a generated file (usually an SVG). This file must be **generated by a script and committed** back to your profile repository regularly to stay up-to-date with your latest activity. This entire process is fully automated using a **GitHub Action** that runs on a schedule. + +--- + +## GitHub Action Setup + +To automate the snake animation, you must create a YAML workflow file named **`snake.yml`** inside your profile repository's `.github/workflows/` directory. + +### 1. The Workflow File (`snake.yml`) + +Use the following content for your workflow file. This configuration uses the recommended `lowlighter/metrics` action, sets it to run daily, and ensures the necessary permissions are granted. + +```yaml +name: Generate Snake Animation + +on: + schedule: + # Runs at 1 AM UTC every day + - cron: "0 01 * * *" + workflow_dispatch: + # Allows manual trigger via the GitHub Actions tab + +jobs: + generate: + runs-on: ubuntu-latest + permissions: + contents: write # CRITICAL: This grants permission to commit the new file + + steps: + - uses: actions/checkout@v4 + - uses: lowlighter/metrics@latest # Use the metrics action + + with: + # REQUIRED: GitHub token (automatically provided by GitHub) + token: ${{ secrets.GITHUB_TOKEN }} + + # Output configuration + output_name: output/github-snake.svg + user: ${{ github.repository_owner }} # Automatically detects your username + + # Plugin configuration for the snake + template: snake + base: "" # Base is disabled to focus only on the snake plugin + plugin_isocalendar: yes + plugin_isocalendar_duration: full-year +``` +Once your workflow runs successfully (you can check the Actions tab on GitHub), the generated file will be saved to your repository. Embed the image in your main README.md using the path where the action saved the file: + +```markdown +## My 2024 GitHub Activity + +![Snake Animation](https://raw.githubusercontent.com/YOUR_USERNAME/YOUR_USERNAME/output/github-snake.svg) +``` + +(Replace YOUR_USERNAME with your actual GitHub username.) \ No newline at end of file From 8b4f98cb280f4a45083d05a07944a6068335d720 Mon Sep 17 00:00:00 2001 From: steam_bell_92 Date: Tue, 21 Oct 2025 21:26:34 +0530 Subject: [PATCH 4/4] Correcting unfornate spelling mistake on title --- ...-Contribution-Animation.md => Snake-Contribution-Animation.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/GitHub/Fun-Profile-Customizations/{nake-Contribution-Animation.md => Snake-Contribution-Animation.md} (100%) diff --git a/docs/GitHub/Fun-Profile-Customizations/nake-Contribution-Animation.md b/docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md similarity index 100% rename from docs/GitHub/Fun-Profile-Customizations/nake-Contribution-Animation.md rename to docs/GitHub/Fun-Profile-Customizations/Snake-Contribution-Animation.md