Skip to content

feat: Integrate CP_pipeline and automate static portfolio site deployment to GitHub Pages - #9

Open
LIGHTUNCHARGED wants to merge 4 commits into
SarJ2004:mainfrom
LIGHTUNCHARGED:feature/cp-pipeline-integration
Open

LIGHTUNCHARGED wants to merge 4 commits into
SarJ2004:mainfrom
LIGHTUNCHARGED:feature/cp-pipeline-integration

Conversation

@LIGHTUNCHARGED

Copy link
Copy Markdown
Contributor

I created an automated serverless pipeline involving CFPusher to push my Codeforces solutions to my GitHub repository (LIGHTUNCHARGED/Competitive-Programming). The problem with the extension was that it didn't sort the problems in folders with rating, thus I made a janitor.yml bot which sorted the problems and categorized it.

I wanted others to see my Codeforces stats and solutions in a better frontend, so I also designed a frontend for the solutions called CP Vault (lightuncharged.github.io/Competitive-Programming/). Now my friends also wanted to have the same portfolio-type website for their Codeforces solutions, so I thought to contribute to your CFPusher extension itself. I integrated my CP pipeline to this cf-pusher extension so that any user can instantly deploy their own organized solutions vault and portfolio site.

Here are the details of the integration:

Core Features Integrated

  1. Nested Rating-Based Folder Organization:
  • Instead of a flat layout, submissions are now automatically sorted based on Codeforces problem rating under: Sorted_Problems/{rating}/{contestId}_{index} - {name}/
  • The source solution and the fetched problem description (README.md) are placed inside this nested problem folder.
  1. Client-Side Database Update & Stat Aggregation:
  • The extension now fetches user's repository's database.json dynamically from GitHub, deserializes it, updates it with the new problem's metadata, aggregates solving statistics (total count and count by rating tier), sorts the list chronologically (newest first), and commits it back in a single atomic update.
  1. Automated Static Portfolio Website Deployment:
  • If enabled, the extension checks if the portfolio website files (index.html, solution.html, category.html, and style/script assets) exist in your repository.
  • If missing, it automatically deploys a generalized template of these files directly into the repository root.
  • Personal settings are written dynamically to a client-side config.json file inside the repository. The template files dynamically load this configuration to customize your profile details, avatar, handles, and solution listings.
  1. Automated CI/CD Workflow:
  • Pushes a GitHub Actions workflow .github/workflows/static.yml to automatically build and deploy your portfolio website to GitHub Pages on every new commit.
  1. Manual Handle Fallback:
  • Added a manual handle entry option under the login panel. This acts as a fallback for developers and local testers where the Codeforces OAuth redirect fails due to local extension ID mismatches.

Detailed Changes

  1. Core Extension Configuration
  • public/manifest.json: Exposed the HTML, CSS, and JS website templates using the web_accessible_resources property so they can be read dynamically inside the extension context.
  1. New Services
  • src/services/databaseService.js Ported the Python data parsing and formatting logic to JavaScript. Updates database.json entries, deduplicates files, calculates rating distributions, and sorts items.
  • src/services/websiteService.js : Handles template copies from the extension, generates custom config.json files, and deploys the .github/workflows/static.yml Pages workflow.
  1. Service Enhancements
  • src/services/githubService.js: Added and exported fetchFileFromGitHub() to download files (like database.json) and return decoded UTF-8 contents and Git SHAs.
  • src/background.js:
  • Re-routed file paths to follow the nested Sorted_Problems/ layout.
  • Configured sync loops to run checkAndDeployWebsite immediately upon startup, manual trigger, or settings adjustment.
  • Batched database updates so that if multiple files are synced (such as during history backfills), database.json is updated and committed only once at the end of the batch to save API limits.
  1. Frontend / Popup Enhancements

src/popup/Popup.jsx:

  • Added Deploy Portfolio Website toggle settings switch under Submission Preferences.
  • Added a notification box explaining how to change the GitHub Pages configuration to use GitHub Actions.
    - src/components/ProfileInfo.jsx: Implemented manual Codeforces handle entry support to bypass local OAuth redirect limitations.
  1. Bundled Templates (public/templates/)
    index.html, solution.html, category.html, assets/app.js, assets/app.css: Generalized templates that load configurations dynamically from config.json rather than referencing hardcoded users/usernames.

Verification Plan

  • Local Build: Verified compilation success using npm run build on Vite 6.
  • Functional Test: Tested loading the unpacked extension inside Chrome, linking a test repository, enabling portfolio deployment, and performing manual syncs. The folders, assets, index files, and actions workflow are pushed successfully.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant