Merge branch 'recodehive:main' into Experiment

Author: Adez017

blog/git-coding-agent/index.md

@@ -2,23 +2,23 @@
 title: "GitHub Copilot Coding Agent"
 sidebar_label: GitHub Copilot Coding Agent
 authors: [sanjay-kv]
-tags: [GitHub, SEO, Coding agent]
+tags: [GitHub, SEO, Coding agent,Copilot, AI, Automation]
 date: 2025-07-04
 
-description: DeepMind is an auxiliary of Google that centers around man-made brainpower. All the more explicitly, it utilizes a part of AI.
+description: An overview of the GitHub Copilot Coding Agent, an AI-powered tool that automates software engineering tasks by taking GitHub Issues as input to write code, run tests, and create pull requests.
 draft: false
 canonical_url: 
 # meta:
 #   - name: "robots"
 #     content: "index, follow"
 #   - property: "og:title"
-#     content: "What is Google DeepMind AI?"
+#     content: "Introduction to the GitHub Copilot Coding Agent"
 #   - property: "og:description"
-#     content: "DeepMind is an auxiliary of Google that centers around man-made brainpower. All the more explicitly, it utilizes a part of AI called AI"
+#     content: "Learn how the GitHub Copilot Coding Agent works asynchronously within GitHub Actions to improve developer productivity."
 #   - property: "og:type"
 #     content: "article"
 #   - property: "og:url"
-#     content: "/blog/getting-started-with-mern"
+#     content: "/blog/getting-copilot-coding-agent"
 #   - property: "og:image"
 #     content: "/assets/images/mern-8a27add30515e58f789f89a4c9072818.jpg"
 #   - name: "twitter:card"
@@ -32,7 +32,7 @@ canonical_url:
 
 ---
  <!-- truncate -->
-
+In the fast-evolving world of software development, AI-powered tools are changing the game. GitHub is at the forefront with its latest innovation: the **GitHub Copilot Coding Agent**. More than just an in-editor assistant, this powerful new agent works asynchronously to handle entire engineering tasks on its own. Let's dive into what it is, how it works, and how you can leverage it to automate your workflow.
 ### 🚀 **What Is GitHub Coding Agent**  
 The GitHub Copilot Coding Agent is an asynchronous software engineering agent that:
 
@@ -49,7 +49,7 @@ When creating an issue for the GitHub Copilot Coding Agent, clarity and structur
 
 - **Provide Clear Context:**  
     Begin by describing the problem or feature request in detail. Explain *why* the change is needed, referencing any relevant background, user stories, or business goals. If the issue relates to a bug, include steps to reproduce, expected vs. actual behavior, and any error messages or screenshots.
-![UI-UX Design impact in future](/img/blogs/github-copilot/01-code-issue.png)
+![Creating a new GitHub issue for Copilot](/img/blogs/github-copilot/01-code-issue.png)
 
 
 - **Define Expected Outcomes:**  
@@ -63,7 +63,7 @@ When creating an issue for the GitHub Copilot Coding Agent, clarity and structur
 
 - **Assign the Issue to Copilot:**  
     Just like you would with a human teammate, assign the issue to Copilot. This triggers the agent workflow and signals that the issue is ready for automated handling.
-    ![UI-UX Design impact in future](/img/blogs/github-copilot/02-assign-copilot.png)
+    ![Assigning the GitHub issue to the Copilot agent](/img/blogs/github-copilot/02-assign-copilot.png)
 
 
 ### **Example Issue Template:**
@@ -96,12 +96,12 @@ Once you assign the issue to GitHub Copilot, the agent will analyze the requirem
 You can expect:
 
 - A new PR created automatically by Copilot, referencing the original issue.  
-    [View the example PR here.](https://github.com/recodehive/recode-website/pull/141)
+    [An example Pull Request created by GitHub Copilot](https://github.com/recodehive/recode-website/pull/141)
 - Automated test results and code suggestions included in the PR.
 - Clear traceability between your issue and the resulting code changes.
 
 Stay engaged by reviewing the PR, providing feedback, or merging it when ready. This workflow helps you leverage automation while maintaining control over your codebase.
-    ![UI-UX Design impact in future](/img/blogs/github-copilot/03-pr-copilot.png)
+    ![Promotional banner for GitHub Copilot feedback](/img/blogs/github-copilot/03-pr-copilot.png)
 
 ---
 
@@ -111,6 +111,8 @@ Stay engaged by reviewing the PR, providing feedback, or merging it when ready.
 
 We’re inviting early adopters to help shape the future of the GitHub Copilot Coding Agent. Your insights are invaluable in improving the agent’s usability, reliability, and overall experience. By participating, you’ll have the opportunity to directly influence upcoming features and enhancements.
 
+📍**Note:** The following feedback program was available for early adopters and may no longer be active. Please check the official GitHub blog for current opportunities.
+
 **How to participate:**
 1. **Try out the Copilot Coding Agent:**  
     Use the agent to automate coding tasks, resolve issues, or create pull requests in your repository.
@@ -141,4 +143,4 @@ Check out this video walkthrough of the GitHub Copilot Coding Agent in action:
 <iframe width="100%" height="400" src="https://www.youtube.com/embed/6AmzJDAOHJ8" title="GitHub Copilot Coding Agent Demo" frameborder="0" allowfullscreen></iframe>
 
 ---
-<GiscusComments/>
+<GiscusComments/>

blog/github-cli-agent/index.md

@@ -72,7 +72,7 @@ pwsh --version
 
 Install globally with npm:
 Powered by the same agentic harness as GitHub's Copilot coding agent, it provides intelligent assistance while staying deeply integrated with your GitHub workflow.
-Enter the promt in the command line. 
+Enter the prompt in the command line. 
 
 ```bash
 npm install -g @github/copilot
@@ -112,7 +112,7 @@ setx GH_TOKEN your_token_here
 ---
 
 ## 🖥️ Usage
-Once you installed run copilot on your terminal, Image of the splash screen for the Copilot CLI. The usage is pretty straight forward you can use the arrow keys to navigate to proceed cancel instruction etc.
+Once installed, run copilot on your terminal, Image of the splash screen for the Copilot CLI. The usage is pretty straight forward you can use the arrow keys to navigate to proceed cancel instruction etc.
 
 Each time you submit a prompt to GitHub Copilot CLI, your monthly quota of premium requests is reduced by one. For information about premium requests,
 `https://docs.github.com/en/copilot/concepts/billing/copilot-requests`
@@ -139,7 +139,7 @@ set COPILOT_MODEL=gpt-5
 
 ## Version checking and Exit CLI
 ```bash
-gh copilot --version
+copilot --version
 ```
 
 Exit anytime with:
@@ -150,7 +150,7 @@ Ctrl + C (twice)
 
 ## Get Suggestions for Common Dev Tasks
 
-Now lets get start with development, here fork this repo and activate GitHub CLI and enter the below bash commands. [Website](https://github.com/recodehive/recode-website)
+Now let's get started with development, here fork this repo and activate GitHub CLI and enter the below bash commands. [Website](https://github.com/recodehive/recode-website)
 
 ### List of all commands in CLI
 I have linked the offical website repo to log any bugs or do direct PR. [GitHub CLI repo](https://github.com/github/copilot-cli?utm_source=changelog-amp-linkedin&utm_campaign=agentic-copilot-cli-launch-2025) and [Official Documentation](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/use-copilot-cli?utm_campaign=agentic-copilot-cli-launch-2025&utm_source=changelog-amp-linkedin)
@@ -258,4 +258,4 @@ Less setup, more shipping.
 
 ---
 
-<GiscusComments/>
+<GiscusComments/>

src/components/dashboard/LeaderBoard/leaderboard.css

@@ -860,6 +860,160 @@
 
 }
 
+/* Skeleton Loader Styles */
+.skeleton-loader {
+  padding: 24px;
+  border-radius: 12px;
+  margin-top: 24px;
+}
+
+.skeleton-loader.light {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+}
+
+.skeleton-loader.dark {
+  background: #2b303b;
+  border: 1px solid #444;
+}
+
+.skeleton-header {
+  display: grid;
+  grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr;
+  gap: 16px;
+  padding: 16px 24px;
+  font-weight: 600;
+  font-size: 14px;
+  border-bottom: 2px solid;
+  margin-bottom: 16px;
+}
+
+.skeleton-loader.light .skeleton-header {
+  color: #666;
+  border-color: #e2e8f0;
+}
+
+.skeleton-loader.dark .skeleton-header {
+  color: #b3b3b3;
+  border-color: #444;
+}
+
+.skeleton-row {
+  display: grid;
+  grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 24px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+}
+
+.skeleton-loader.light .skeleton-row {
+  background: #f8fafc;
+}
+
+.skeleton-loader.dark .skeleton-row {
+  background: #323742;
+}
+
+.skeleton-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 2s infinite;
+}
+
+.skeleton-loader.dark .skeleton-avatar {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
+  background-size: 200% 100%;
+}
+
+.skeleton-avatar.large {
+  width: 40px;
+  height: 40px;
+}
+
+.skeleton-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.skeleton-bar {
+  height: 16px;
+  width: 60%;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 2s infinite;
+}
+
+.skeleton-loader.dark .skeleton-bar {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
+  background-size: 200% 100%;
+}
+
+.skeleton-badges {
+  display: flex;
+  gap: 8px;
+}
+
+.skeleton-badge {
+  height: 20px;
+  width: 60px;
+  border-radius: 12px;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 2s infinite;
+}
+
+.skeleton-loader.dark .skeleton-badge {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
+  background-size: 200% 100%;
+}
+
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
 /* PR List Modal Styles */
 .pr-modal-backdrop {
   position: fixed;