Merge branch 'main' into main

Author: nancy-verma780

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+# Assign owners for all files in the repository
+* @sanjay-kv @iitzIrFan @Adez017

.github/CODEOWNERS.md

@@ -126,14 +126,14 @@ Google I/O 2026 is happening this week. The timing of this rollout is not accide
 
 The new icons do one thing that the 2020 redesign refused to do: they let each app look different from the others.
 
-The strict four-color rule is gone. Instead of forcing every icon to carry all four brand colors, the new design gives each app its own dominant color identity with gradients replacing the flat hard-edged color blocks.
+The previous requirement that each icon display all four brand colors has been removed, the new design gives each app its own dominant color identity with gradients replacing the flat hard-edged color blocks.
 
 Looking at the new icons directly, here is what stands out:
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
     ![Google 2026 new icon design showing per-app gradient color identity](./assets/09-google-new-design.png)
     </BrowserWindow>
 
-The icons are also physically larger in the launcher. Google removed the Workspace page container that previously boxed each icon in, giving more visual real estate to the icon shapes themselves.
+The icons are also physically larger in the launcher.Google also did away with the Workspace page-shaped container that surrounded the icons, allowing the designs to take up more space and become more visually prominent.
 
 ---
 

blog/google-icon-update/index.md

@@ -42,8 +42,8 @@
     "@mdx-js/react": "^3.0.0",
     "@monaco-editor/react": "^4.7.0",
     "@popperjs/core": "^2.11.8",
-    "@radix-ui/react-avatar": "^1.1.7",
-    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-avatar": "^1.1.12",
+    "@radix-ui/react-collapsible": "^1.1.13",
     "@radix-ui/react-slot": "^1.2.3",
     "@tsparticles/engine": "^4.0.5",
     "@tsparticles/react": "^4.1.0",
@@ -81,14 +81,14 @@
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@typescript-eslint/eslint-plugin": "^8.60.1",
-    "@typescript-eslint/parser": "^8.60.1",
+    "@typescript-eslint/parser": "^8.61.0",
     "autoprefixer": "^10.5.0",
     "eslint": "^10.4.1",
     "eslint-plugin-react": "^7.37.5",
     "husky": "^9.1.7",
     "lint-staged": "^17.0.7",
     "postcss": "^8.5.15",
-    "prettier": "^3.8.3",
+    "prettier": "^3.8.4",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^4.1.4",
     "typescript": "~5.3"

package-lock.json

@@ -2,13 +2,12 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import { getAuthorProfiles } from "../../utils/authors";
-import { usePluginData } from "@docusaurus/useGlobalData";
+
 
 interface BlogCardProps {
   type: string;
   date?: string;
   title: string;
-  content: string;
   imageUrl: string;
   id: string;
   authors?: string[];
@@ -50,7 +49,6 @@ const BlogCard = ({
   type,
   date,
   title,
-  content,
   imageUrl,
   id,
   authors,
@@ -80,7 +78,9 @@ const BlogCard = ({
     <div className="article-card">
       {/* Image */}
       <div className="card-image">
-        <img src={imageUrl} alt={title} loading="lazy" />
+        <Link to={`/blog/${id}`} className="block" aria-label={`Read ${title}`}>
+          <img src={imageUrl} alt={title} loading="lazy" />
+        </Link>
       </div>
 
       {/* Content */}
@@ -202,4 +202,4 @@ const BlogCard = ({
   );
 };
 
-export default BlogCard;
+export default BlogCard;

package.json

@@ -102,6 +102,12 @@
   flex-shrink: 0;
 }
 
+.card-image a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .card-image::after {
   content: "";
   position: absolute;
@@ -112,13 +118,15 @@
   opacity: 0;
   transition: opacity 0.35s ease;
   z-index: 1;
+  pointer-events: none;
 }
 
 .article-card:hover .card-image::after {
   opacity: 1;
 }
 
 .card-image img {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -157,6 +165,7 @@
   transition: color 0.2s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -195,6 +204,7 @@
   margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   flex: 1;
@@ -635,6 +645,7 @@
   transform: translateY(-20px);
   transition: opacity 0.4s ease-in, transform 0.4s ease-in;
 }
+
 /* ── Reading time ── */
 .card-reading-time {
   display: inline-flex;

src/components/blogCarousel/blogCard.tsx

@@ -1,10 +1,12 @@
 // src/components/dashboard/LeaderBoard/BadgeModal.tsx
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { FaTimes } from "react-icons/fa";
+import { FaTimes, FaShareAlt, FaDownload } from "react-icons/fa";
 import { useSafeColorMode } from "@site/src/utils/useSafeColorMode";
+import { Contributor } from "./leaderboard";
+import { generateShareCard } from "../../../utils/cardGenerator";
 
-interface BadgeConfig {
+export interface BadgeConfig {
   image: string;
   name: string;
   criteria: (prs: number, points: number) => boolean;
@@ -15,17 +17,94 @@ interface BadgeModalProps {
   onClose: () => void;
   earnedBadges: string[];
   allBadges: BadgeConfig[];
-  contributorName?: string;
+  contributor: Contributor;
+  rank: number;
 }
 
 export default function BadgeModal({
   isOpen,
   onClose,
   earnedBadges,
   allBadges,
-  contributorName,
+  contributor,
+  rank,
 }: BadgeModalProps): JSX.Element | null {
   const { isDark } = useSafeColorMode();
+  const [isSharing, setIsSharing] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [shareError, setShareError] = useState<string | null>(null);
+
+  const getCardBlob = async () => {
+    return await generateShareCard({
+      username: contributor.username,
+      avatarUrl: contributor.avatar,
+      prs: contributor.prs,
+      points: contributor.points,
+      rank,
+      earnedBadges,
+      allBadges,
+    });
+  };
+
+  const handleDownloadCard = async () => {
+    setIsDownloading(true);
+    setShareError(null);
+    try {
+      const cardBlob = await getCardBlob();
+      const downloadUrl = URL.createObjectURL(cardBlob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = `recodehive-${contributor.username}-achievements.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(downloadUrl);
+    } catch (err) {
+      console.error("Error generating or downloading card: ", err);
+      setShareError("Could not download achievements card. Please try again.");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const handleShareCard = async () => {
+    setIsSharing(true);
+    setShareError(null);
+    try {
+      const cardBlob = await getCardBlob();
+      const file = new File(
+        [cardBlob],
+        `recodehive-${contributor.username}-achievements.png`,
+        { type: "image/png" }
+      );
+
+      if (
+        navigator.share &&
+        navigator.canShare &&
+        navigator.canShare({ files: [file] })
+      ) {
+        await navigator.share({
+          files: [file],
+          title: "My Recode Hive Open Source Achievements",
+          text: `Check out my open-source contribution achievements on Recode Hive! I am ranked #${rank} with ${contributor.prs} merged PRs and ${contributor.points} points. 🚀`,
+        });
+      } else {
+        const downloadUrl = URL.createObjectURL(cardBlob);
+        const link = document.createElement("a");
+        link.href = downloadUrl;
+        link.download = `recodehive-${contributor.username}-achievements.png`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(downloadUrl);
+      }
+    } catch (err) {
+      console.error("Error generating or sharing card: ", err);
+      setShareError("Could not share achievements card. Please try again.");
+    } finally {
+      setIsSharing(false);
+    }
+  };
 
   // Close modal on Escape key press
   useEffect(() => {
@@ -79,27 +158,58 @@ export default function BadgeModal({
                   id="badge-modal-title"
                   className={`badge-modal-title ${isDark ? "dark" : "light"}`}
                 >
-                  {contributorName
-                    ? `${contributorName}'s Badges`
-                    : "Achievement Badges"}
+                  {contributor.username ? `${contributor.username}'s Badges` : "Achievement Badges"}
                 </h2>
                 <p
                   className={`badge-modal-subtitle ${isDark ? "dark" : "light"}`}
                 >
                   {earnedBadges.length} of {allBadges.length} badges earned
                 </p>
               </div>
-              <button
-                className={`badge-modal-close ${isDark ? "dark" : "light"}`}
-                onClick={onClose}
-                aria-label="Close modal"
-              >
-                <FaTimes />
-              </button>
+              <div className="badge-modal-header-actions">
+                <button
+                  className={`badge-modal-download-btn ${isDark ? "dark" : "light"}`}
+                  onClick={handleDownloadCard}
+                  disabled={isDownloading || isSharing}
+                  aria-label="Download achievements card"
+                  title="Download Card"
+                >
+                  {isDownloading ? (
+                    <span className="badge-modal-spinner" />
+                  ) : (
+                    <FaDownload />
+                  )}
+                </button>
+                <button
+                  className={`badge-modal-share-btn ${isDark ? "dark" : "light"}`}
+                  onClick={handleShareCard}
+                  disabled={isDownloading || isSharing}
+                  aria-label="Share achievements card"
+                >
+                  {isSharing ? (
+                    <span className="badge-modal-spinner" />
+                  ) : (
+                    <FaShareAlt style={{ marginRight: 6 }} />
+                  )}
+                  {isSharing ? "Generating..." : "Share Card"}
+                </button>
+                <button
+                  className={`badge-modal-close ${isDark ? "dark" : "light"}`}
+                  onClick={onClose}
+                  aria-label="Close modal"
+                >
+                  <FaTimes />
+                </button>
+              </div>
             </div>
 
             {/* Modal Body */}
             <div className={`badge-modal-body ${isDark ? "dark" : "light"}`}>
+              {shareError && (
+                <div className={`badge-modal-error-banner ${isDark ? "dark" : "light"}`}>
+                  {shareError}
+                </div>
+              )}
               <div className="badge-grid">
                 {allBadges.map((badge, index) => {
                   const isEarned = earnedBadges.includes(badge.image);