From d4158fe9a58dc3fa03b40e93a44dc24b60a816f0 Mon Sep 17 00:00:00 2001
From: essiebx <crayonconor@ggmail.com>
Date: Sat, 24 Jan 2026 13:11:04 +0200
Subject: [PATCH] Make GitHub Repo badge clickable with link to repository

- Added clickable link to GitHub Repo badge (same URL as View on GitHub button)
- Badge now uses anchor tag for GitHub repos, span for Opinion posts
- Added text-decoration: none to prevent underlines on badge link
- Maintains all existing styling through project-badge class
---
 README.md                           |  8 +++++++-
 src/app/post/[id]/PostPageClient.js | 23 +++++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 09a8a4d..191c754 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,13 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-
 
 ## Getting Started
 
-First, run the development server:
+1. Install dependencies (first time only):
+
+```bash
+npm install
+```
+
+2. Run the development server:
 
 ```bash
 npm run dev
diff --git a/src/app/post/[id]/PostPageClient.js b/src/app/post/[id]/PostPageClient.js
index 1473e20..e659a63 100644
--- a/src/app/post/[id]/PostPageClient.js
+++ b/src/app/post/[id]/PostPageClient.js
@@ -979,10 +979,23 @@ export default function PostPageClient({ postDetails: initialPostDetails, params
             </div>
 
             <div className="project-meta">
-              <span className="project-badge">
-                <i className={mainPost.github_repo ? "fab fa-github" : "fas fa-comment-alt"}></i>
-                {getSourceLabel(mainPost)}
-              </span>
+              {/* GitHub Repo badge - Made clickable to link to repository (same URL as "View on GitHub" button) */}
+              {mainPost.github_repo ? (
+                <a 
+                  href={mainPost.github_repo + '?utm_source=opensourceprojects.dev&ref=opensourceprojects.dev'} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="project-badge"
+                >
+                  <i className="fab fa-github"></i>
+                  {getSourceLabel(mainPost)}
+                </a>
+              ) : (
+                <span className="project-badge">
+                  <i className="fas fa-comment-alt"></i>
+                  {getSourceLabel(mainPost)}
+                </span>
+              )}
               <time className="project-date" dateTime={mainPost.date}>
                 <i className="fas fa-calendar"></i>
                 {formatDate(mainPost.date)}
@@ -1555,6 +1568,8 @@ export default function PostPageClient({ postDetails: initialPostDetails, params
           align-items: center;
           gap: 0.375rem;
           box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
+          /*no underline, overlines or strikethrough on the anchor link*/
+          text-decoration: none;
         }
 
         .project-date {