Skip to content

Conversation

@brenocq
Copy link
Owner

@brenocq brenocq commented May 4, 2025

Feat: Add Dynamic SVG Roadmap to README

Closes #63

This PR improves the README section to provide real-time updates of Atta's development, since we moved from GitHub projects to GitHub issues to track tasks, it was necessary to also update the README progress images.

The previous progress tracking was very simple and would just show the development progress for each Atta module

The new progress section provides information about the tasks that are being worked on, and better follows the GitHub UI (I honestly think it looks sick)

Functionality:

  1. GitHub Actions Workflow: A new workflow (.github/workflows/update-readme.yml) triggers on relevant issue events (creation, updates, labels, comments).
  2. Python Script: The workflow executes a Python script that uses the GitHub API to fetch data for relevant issues (pinned issues, latest updated issues, issues with specific labels). It gathers details like status, type, priority (from labels), task list progress, reactions, participants, and linked PR/branch information (commit/diff stats).
  3. SVG Generation: The script generates two types of SVG images:
    • Status Cards: Summarizing the number of issues per status label (e.g., status:todo, status:doing).
    • Issue Cards: Detailed cards for individual issues (pinned or recently updated), displaying title, number, type icon, labels, progress, participants, reactions, comments, and linked PR/branch stats. SVGs support light/dark mode themes.
  4. Detached Branch Deployment: The generated SVG files are automatically committed and pushed to a dedicated, detached branch (roadmap-svgs).
  5. README Integration: The main README.md now embeds these SVG images using direct links to the raw files on the roadmap-svgs branch. This allows the README content to update visually whenever the SVGs are regenerated, without adding SVG churn to the main branch history.
  6. Clickable SVGs: The generated SVGs are interactive, linking directly to the corresponding GitHub issues. This was done by hosting a Flask server in redirect.brenocq.com to parse the SVG and extract the issue link to redirect.

This system ensures the README provides a valuable, real-time insight into the project's development landscape.

🔧 Changelog

  • Docs
    • Updated README.md to embed the dynamically generated roadmap SVGs.
  • Chore
    • Configured necessary permissions for the workflow to interact with issues and the repository.
    • Implemented Python script to fetch detailed issue data via GitHub API.
    • Implemented Python script to generate interactive SVG status cards and issue cards with light/dark mode support.
    • Added GitHub Actions workflow to automate SVG generation and deployment to a detached roadmap-svgs branch.

@brenocq brenocq self-assigned this May 4, 2025
@brenocq brenocq linked an issue May 4, 2025 that may be closed by this pull request
51 tasks
@github-actions github-actions bot added the status:review The task is under review label May 4, 2025
@brenocq brenocq added prio:low Low priority type:docs Improvements or additions to documentation labels May 4, 2025
@brenocq brenocq requested a review from Copilot May 4, 2025 18:33
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR enhances the project documentation by integrating dynamic SVG roadmap images in the README, which automatically reflect the current status of issues and tasks. Key changes include:

  • Updating README.md to embed dynamically generated SVG images for status and issue cards.
  • Adding a GitHub Actions workflow to generate and deploy SVGs to a dedicated branch.
  • Implementing new Python scripts for fetching GitHub issue data and rendering interactive SVG status and issue cards.

Reviewed Changes

Copilot reviewed 8 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
README.md Updated to embed new dynamic SVG images and improved progress section presentation.
.github/workflows/update-readme.yml Added workflow to trigger on relevant GitHub events and push SVG updates to a detached branch.
.github/scripts/readme_svgs/gen_status_cards.py New script to generate status card SVGs using GitHub issue status data.
.github/scripts/readme_svgs/gen_issue_cards.py New script to generate detailed issue card SVGs with interactive features.
.github/scripts/readme_svgs/common.py New module defining style constants and helper functions for SVG generation.
.github/scripts/updateReadmeButtons/updateReadmeButtons.py Removed legacy script no longer needed for the new roadmap system.
Files not reviewed (6)
  • .github/scripts/.gitignore: Language not supported
  • .github/scripts/readme_svgs/.gitignore: Language not supported
  • .github/scripts/readme_svgs/requirements.txt: Language not supported
  • .github/scripts/updateReadmeButtons/decrypt_secret.sh: Language not supported
  • .github/scripts/updateReadmeButtons/requirements.txt: Language not supported
  • .github/workflows/updateReadmeButtons.yml: Language not supported

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Breno Cunha Queiroz <Breno1423@gmail.com>
@sonarqubecloud
Copy link

sonarqubecloud bot commented May 4, 2025

@brenocq brenocq merged commit 564d7e6 into main May 4, 2025
8 checks passed
@brenocq brenocq deleted the docs/readme-roadmap branch May 4, 2025 18:52
@github-actions github-actions bot added status:done Task completed successfully and removed status:review The task is under review labels May 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

prio:low Low priority status:done Task completed successfully type:docs Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] README roadmap

2 participants