up-for-grabs.net icon indicating copy to clipboard operation
up-for-grabs.net copied to clipboard

Fix Issue #4334: Add GitHub icon linking to git repository

Open foxzhang1224 opened this issue 7 months ago • 2 comments

🔧 What has been changed? This PR adds a GitHub icon next to each project name on the homepage that links to its github repository page. Clicking the GitHub icon takes the user directly to the root GitHub repository of the project (e.g., https://github.com/user/repo).

🎯 Why This Matters Many projects listed on up-for-grabs.net currently link to a GitHub label like: https://github.com/user/repo/issues/labels/good-first-issue

Therefore, it there could be a way to directly link the user to the GitHub repository, a quicker navigation could be offered to explore the full project on a technical term, especially to those potential contributor.

🛠️ How It Works

  1. Extracted the repository root by splitting the project.upforgrabs.link and joining the first 5 segments: project.upforgrabs.link.split('/').slice(0, 5).join('/') Since we couldn't directly get the url of many projects, parsing the link to its labelled issue could lead us to the main repo page.

  2. Conditionally rendered the icon only if project.upforgrabs.link is defined

  3. Added the icon using a github SVG from Simple Icons cdn

<img src="https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/github.svg" alt="GitHub" width="20" height="20" style="vertical-align: middle;" />

✅ Preview Screenshot 2025-04-30 at 5 53 09 PM

foxzhang1224 avatar Apr 30 '25 21:04 foxzhang1224

Deploy Preview for up-for-grabs-test-bench ready!

Name Link
Latest commit d764d588236fa91e4643d80d6abd4a44a6f5c963
Latest deploy log https://app.netlify.com/sites/up-for-grabs-test-bench/deploys/68129d28e678f800081dd6b2
Deploy Preview https://deploy-preview-5179--up-for-grabs-test-bench.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Apr 30 '25 21:04 netlify[bot]

:wave: I'm a robot checking the state of this pull request to save the human reviewers time. I don't see any changes under _data/projects/ so I don't have any feedback here.

As you make changes to this pull request, I'll re-run these checks.

shiftbot avatar Apr 30 '25 21:04 shiftbot