Skip to content

pemtajo/badge-readme

Use this GitHub action with your project
Add this Action to an existing workflow or create a new one
View on Marketplace

Repository files navigation

πŸ† Badge Readme

Automatically display your Credly badges in your GitHub profile README

GitHub Actions Python License Contributions Welcome

Example Badges

πŸ“‹ Table of Contents

🎯 About

Badge Readme is an open-source GitHub Action that automatically fetches and displays your Credly badges in your GitHub profile README. It's designed to showcase your professional achievements and certifications in a clean, automated way.

What it does:

  • πŸ”„ Automatically updates your README with latest badges
  • πŸ“… Sorts badges by date (newest first)
  • 🎨 Clean markdown format for better compatibility
  • ⚑ Fast and reliable badge extraction
  • πŸ”§ Easy to configure with minimal setup

πŸš€ Why Version 3.1.0?

The Challenge

Credly recently updated their website with a completely new HTML structure and user interface. This broke the existing badge extraction functionality in version 2.x.x.

What Changed in Credly

  • New HTML structure with different class names
  • Dynamic badge loading (badges load progressively)
  • Updated DOM elements for badge containers
  • Changed date format and extraction methods

Our Solution

Version 3.1.0 completely refactors the badge extraction to work with Credly's new interface:

  • βœ… Automatic badge expansion - Clicks "See all badges" to load everything
  • βœ… Updated HTML parser - Works with new class names and structure
  • βœ… Enhanced date extraction - Handles new date formats
  • βœ… Improved reliability - Better error handling and fallbacks

✨ Features

πŸ†• Version 3.1.0 Features

  • 🎯 Smart Badge Extraction: Automatically expands to show all badges
  • πŸ“… Date-Based Sorting: Organizes badges by issue date (newest first)
  • πŸ”„ Modern HTML Parser: Compatible with Credly's new interface
  • πŸ“ Clean Markdown: Simple, compatible output format
  • πŸ’Ύ Direct File Generation: Save badges to files programmatically
  • πŸ§ͺ Comprehensive Testing: Full test coverage for reliability

Core Features

  • πŸ”„ Automated Updates: Runs on schedule via GitHub Actions
  • 🎨 Customizable: Control number of badges and output format
  • πŸ”’ Secure: Uses public data only, no authentication required
  • πŸ“± Responsive: Works across different devices and platforms

πŸš€ Quick Start

1. Add Badge Section to Your README

Add these comments to your README.md:

<!--START_SECTION:badges-->
<!--END_SECTION:badges-->

2. Create GitHub Action Workflow

Create .github/workflows/update-badges.yml:

name: Update Badges

on:
  schedule:
    # Runs daily at 2 AM UTC
    - cron: "0 2 * * *"
  workflow_dispatch: # Allow manual runs

jobs:
  update-badges:
    name: Update README with Credly Badges
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Update Badges
        uses: pemtajo/badge-readme@main
        with:
          CREDLY_USER: ${{ github.actor }} # Uses your GitHub username
          NUMBER_LAST_BADGES: 10 # Show last 10 badges (0 = all)

3. Run the Action

Go to your repository β†’ Actions β†’ "Update Badges" β†’ "Run workflow"

That's it! Your badges will appear in your README automatically.

βš™οΈ Configuration

Available Options

Parameter Default Description Required
GH_TOKEN - GitHub access token Yes*
REPOSITORY username/username Target repository No
CREDLY_USER username Your Credly username No
NUMBER_LAST_BADGES 0 Number of badges to show (0 = all) No
COMMIT_MESSAGE Updated README with new badges Custom commit message No

*Only required for non-profile repositories

Profile Repository Setup

For your profile repository (username/username), you don't need GH_TOKEN:

- name: Update Badges
  uses: pemtajo/badge-readme@main

Other Repository Setup

For other repositories, add your GitHub token to repository secrets:

- name: Update Badges
  uses: pemtajo/badge-readme@main
  with:
    GH_TOKEN: ${{ secrets.GH_TOKEN }}
    REPOSITORY: username/username

πŸ”§ Troubleshooting

ChromeDriver Issues

If you encounter ChromeDriver errors like "Status code was: 127", the setup has been improved with:

  1. webdriver-manager: Automatically downloads and manages compatible ChromeDriver versions
  2. Enhanced setup script: Better dependency management and error handling
  3. Environment detection: Automatically detects Docker vs regular system
  4. Test verification: ChromeDriver test script to verify setup

Quick Fix

Run the test script to verify ChromeDriver:

python3 test_chromedriver.py

Manual Setup

If issues persist, run the setup script:

chmod +x setup_chrome.sh
./setup_chrome.sh

Common Issues

  • Permission errors: Ensure setup scripts are executable
  • Network issues: Check internet connectivity for Chrome/ChromeDriver download
  • Memory issues: Chrome headless mode uses significant memory

πŸ› οΈ Development

Local Development

  1. Clone the repository
  2. Install dependencies: pip install -r requirements.txt
  3. Run setup: ./setup_chrome.sh
  4. Test ChromeDriver: python3 test_chromedriver.py
  5. Run scraper: python3 main.py

Docker Development

# Build and run with Docker
docker-compose up --build

# Or build manually
docker build -t credly-scraper .
docker run credly-scraper

Testing

# Run unit tests
python3 -m pytest tests/

# Run ChromeDriver test
python3 test_chromedriver.py

πŸ’‘ Usage Examples

Basic Usage

- uses: pemtajo/badge-readme@main

Custom Configuration

- uses: pemtajo/badge-readme@main
  with:
    CREDLY_USER: john_doe
    NUMBER_LAST_BADGES: 5
    COMMIT_MESSAGE: "πŸŽ‰ Updated with latest certifications"

Programmatic Usage

from credly import generate_sorted_badges_markdown

# Generate badges for specific user
generate_sorted_badges_markdown(
    username="your_credly_username",
    number_badges=10,
    output_file="my_badges.md"
)

🀝 Contributing

We welcome contributions! This is an open-source project, and your help makes it better for everyone.

How to Contribute

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes and add tests
  4. Run the test suite: python -m unittest discover -v -s tests
  5. Commit your changes: git commit -m 'Add amazing feature'
  6. Push to the branch: git push origin feature/amazing-feature
  7. Open a Pull Request

Development Setup

# Clone the repository
git clone https://github.com/pemtajo/badge-readme.git
cd badge-readme

# Install dependencies
pip install -r requirements.txt

# Run tests
python -m unittest discover -v -s tests

Areas for Contribution

  • πŸ› Bug fixes and error handling improvements
  • ✨ New features and enhancements
  • πŸ“š Documentation improvements
  • πŸ§ͺ Test coverage expansion

Code Style

  • Follow PEP 8 for Python code
  • Add docstrings to new functions
  • Include tests for new features
  • Update documentation as needed

πŸ§ͺ Testing

Running Tests Locally

# Run all tests
python -m unittest discover -v -s tests

# Run specific test file
python -m unittest tests.tests -v

Docker Testing

cd tests
docker-compose build && docker-compose up

Test Coverage

Our test suite covers:

  • βœ… Core functionality - Badge extraction and parsing
  • βœ… Date handling - Extraction and sorting
  • βœ… HTML parsing - New Credly structure compatibility
  • βœ… Error handling - Edge cases and failures
  • βœ… File operations - Markdown generation and saving
  • βœ… Integration - End-to-end workflows

πŸ”§ Technical Details

How It Works

  1. Fetch HTML: Retrieves the Credly profile page
  2. Expand Badges: Clicks "See all badges" to load complete list
  3. Parse Structure: Extracts badge data using new HTML classes
  4. Extract Dates: Parses issue dates from Portuguese format
  5. Sort Badges: Orders by date (newest first)
  6. Generate Markdown: Creates clean, compatible output
  7. Update README: Commits changes to your repository

HTML Structure Changes

Old Structure (v2.x.x):

<div class="data-table-row">
  <img class="badge-image" src="...">
</div>

New Structure (v3.0.0):

<div class="settings__skills-profile__edit-skills-profile__badge-card">
  <img class="settings__skills-profile__edit-skills-profile__badge-card__badge-image" src="...">
  <div class="settings__skills-profile__edit-skills-profile__badge-card__issued">
    Issued 22/11/20
  </div>
</div>

Date Format Handling

Dates are extracted from Portuguese format "Issued dd/mm/yy" and converted to sortable format:

  • Input: Issued 22/11/20
  • Parsed: 2020-11-22
  • Sorted: Newest first

πŸ“‹ Changelog

[3.1.0] - 2024-12-XX

πŸ†• Added

  • Selenium WebDriver integration for JavaScript-rendered content
  • Individual badge links to specific verification pages
  • HTML output format with explicit 80Γ—80 pixel sizing
  • Enhanced badge detection using multiple CSS selectors and fallbacks
  • Automatic ChromeDriver management with webdriver-manager
  • Comprehensive error handling with fallback methods

πŸ”„ Changed

  • Output format switched from markdown images to HTML <img> tags for proper sizing
  • Badge link extraction from div elements with role="button" and href attributes
  • Performance optimizations for Chrome headless mode
  • Documentation updated with new examples and troubleshooting

πŸ› Fixed

  • Badge sizing issues – images now always render at 80 Γ— 80 px
  • JavaScript rendering – properly waits for dynamic badge content

❌ Removed

  • Deprecated BADGE_SIZE parameter (size now fixed at 80 Γ— 80 px)

[3.0.0] - 2024-01-XX

πŸ†• Added

  • Automatic badge expansion ("See all badges" button)
  • Date-based sorting (newest first)
  • Updated HTML parser for new Credly structure
  • Direct file generation methods
  • Comprehensive test suite
  • Enhanced error handling

πŸ”„ Changed

  • Updated HTML class names and parsing logic
  • Improved markdown format (removed href links)
  • Better performance and reliability
  • Enhanced documentation

❌ Removed

  • CREDLY_SORT parameter (no longer supported by Credly)
  • BADGE_SIZE parameter (no longer configurable)

[2.x.x] - Previous Versions

  • Basic badge extraction
  • Configurable sorting and badge size
  • Simple markdown generation

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • Credly for providing the badge platform
  • GitHub Actions for the automation infrastructure
  • Contributors who help improve this project
  • Open Source Community for inspiration and support

Made with ❀️ for the open-source community

If you find this project helpful, please consider giving it a ⭐ star!

About

Add badges in your Readme

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 7