feat(opensource): add guide sharing button and dynamic open graph pre…

client/src/module/student/opensource/CICDGuidePage.tsx

@@ -14,6 +14,7 @@ export default function CICDGuidePage() {
       seoTitle="CI/CD Basics for Open Source Contributors"
       seoDescription="Learn to fix CI/CD failures in open source: lint errors, test failures, type check errors, and build errors. Read CI logs and debug pipeline issues like a pro."
       seoKeywords="CI/CD open source, fix CI failure, lint errors, test failure, GitHub Actions, build errors"
+      ogImage="/og/og-cicd.png"
       icon={Settings}
       iconColor="text-cyan-500"
     />

client/src/module/student/opensource/CommTemplatesPage.tsx

@@ -14,6 +14,7 @@ export default function CommTemplatesPage() {
       seoTitle="Open Source Communication Templates"
       seoDescription="Copy-paste templates for claiming issues, writing PR descriptions, responding to code reviews, filing bug reports, and proposing features in open source projects."
       seoKeywords="open source communication, PR description template, bug report template, issue comment, code review response"
+      ogImage="/og/og-communication.png"
       icon={MessageSquare}
       iconColor="text-violet-500"
     />

client/src/module/student/opensource/FirstPRRoadmapPage.tsx

@@ -155,6 +155,7 @@ export default function FirstPRRoadmapPage() {
         description="Step-by-step roadmap to making your first pull request on GitHub. Learn git workflow, finding issues, and contributing to open source projects."
         keywords="first pull request, open source contribution, GitHub beginner, git workflow, contribute to open source"
         canonicalUrl={canonicalUrl("/student/opensource/first-pr")}
+        ogImage="/og/og-first-pr.png"
       />
 
       {/* Atmospheric background */}
@@ -282,11 +283,11 @@ export default function FirstPRRoadmapPage() {
 
       <ConfirmDialog
         open={showResetConfirm}
-        onOpenChange={setShowResetConfirm}
+        onCancel={() => setShowResetConfirm(false)}
         title="Reset progress?"
         description="This will clear all completed steps. Your server-side progress will be reset."
         confirmLabel="Reset"
-        variant="danger"
+        confirmVariant="danger"
         onConfirm={() => {
           const toReset = Array.from(completed);
           setCompleted(new Set());

client/src/module/student/opensource/GSoCProposalPage.tsx

@@ -78,6 +78,7 @@ export default function GSoCProposalPage() {
         description="Learn how to write a winning Google Summer of Code proposal. Covers project selection, timeline planning, and proposal structure."
         keywords="GSoC proposal guide, Google Summer of Code, GSoC tips, open source proposal, GSoC application"
         canonicalUrl={canonicalUrl("/student/opensource/gsoc-proposal")}
+        ogImage="/og/og-gsoc-proposal.png"
       />
 
       {/* Atmospheric background */}

client/src/module/student/opensource/GSoCReposPage.tsx

@@ -592,6 +592,7 @@ export default function GSoCReposPage() {
         description="Browse Google Summer of Code organizations, past projects, technologies, topics, and contributor links."
         keywords="GSoC, Google Summer of Code, open source organizations, student open source"
         canonicalUrl={canonicalUrl("/student/opensource/gsoc")}
+        ogImage="/og/og-gsoc.png"
       />
 
       <div className="mx-auto max-w-6xl px-4 py-8 sm:px-8">

client/src/module/student/opensource/GitCheatsheetPage.tsx

@@ -14,6 +14,7 @@ export default function GitCheatsheetPage() {
       seoTitle="Git for Open Source - Interactive Cheatsheet"
       seoDescription="Master the Git workflow for open source: fork, clone, branch, commit, rebase, resolve conflicts, and submit pull requests. With copy-paste commands and real examples."
       seoKeywords="git open source, fork clone workflow, git cheatsheet, git rebase, merge conflicts, pull request git"
+      ogImage="/og/og-git-guide.png"
       icon={GitBranch}
       iconColor="text-orange-500"
     />

client/src/module/student/opensource/GuidanceCards.tsx

@@ -1,12 +1,15 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { Link } from "react-router";
 import { motion } from "framer-motion";
 import {
   GitPullRequest, Trophy, Award, GraduationCap,
-  BookOpen, GitBranch, MessageSquare, Settings,
+  BookOpen, GitBranch, MessageSquare, Settings, Share2,
   type LucideIcon,
 } from "lucide-react";
 import { GuideSearch } from "./GuideSearch";
+import { SITE_URL } from "../../../lib/seo.utils";
+import toast from "../../../components/ui/toast";
+import { Button } from "../../../components/ui/button";
 
 interface GuidanceCard {
   to: string;
@@ -27,6 +30,18 @@ const GUIDANCE_CARDS: GuidanceCard[] = [
 ];
 
 export const GuidanceCards = React.memo(function GuidanceCards() {
+  const handleShare = useCallback((e: React.MouseEvent, path: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const url = `${SITE_URL}${path}`;
+    void navigator.clipboard.writeText(url).then(() => {
+      toast.success("Link copied to clipboard!");
+    }).catch(() => {
+      toast.error("Failed to copy link.");
+    });
+  }, []);
+
   return (
     <div className="mb-10">
       <div className="flex items-center gap-2 mb-3">
@@ -45,24 +60,37 @@ export const GuidanceCards = React.memo(function GuidanceCards() {
             initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.05 + Math.min(i, 6) * 0.04, duration: 0.35 }}
+            className="group relative"
           >
             <Link
               to={card.to}
-              className="group relative flex flex-col gap-3 p-4 h-full bg-white dark:bg-stone-900 border-r border-b border-stone-200 dark:border-white/10 no-underline hover:bg-stone-900 dark:hover:bg-stone-50 transition-colors"
+              className="flex flex-col gap-3 p-4 h-full bg-white dark:bg-stone-900 border-r border-b border-stone-200 dark:border-white/10 no-underline hover:bg-stone-50 dark:hover:bg-stone-800 transition-colors"
             >
               <div className="flex items-center justify-between">
-                <span className="text-[10px] font-mono uppercase tracking-widest text-stone-500 dark:text-stone-400 group-hover:text-lime-400">
+                <span className="text-[10px] font-mono uppercase tracking-widest text-stone-500 dark:text-stone-400 group-hover:text-lime-500 transition-colors">
                   / {String(i + 1).padStart(2, "0")}
                 </span>
-                <div className="w-8 h-8 rounded-md bg-stone-100 dark:bg-white/5 group-hover:bg-white/10 dark:group-hover:bg-stone-900/10 flex items-center justify-center transition-colors">
-                  <card.icon className="w-4 h-4 text-stone-700 dark:text-stone-300 group-hover:text-lime-400" aria-hidden />
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    mode="icon"
+                    size="sm"
+                    className="h-8 w-8 rounded-md opacity-0 group-hover:opacity-100 transition-all hover:bg-lime-400/10 hover:text-lime-600 dark:hover:text-lime-400"
+                    onClick={(e) => handleShare(e, card.to)}
+                    title="Share Guide"
+                  >
+                    <Share2 className="w-3.5 h-3.5" />
+                  </Button>
+                  <div className="w-8 h-8 rounded-md bg-stone-100 dark:bg-white/5 group-hover:bg-lime-400/10 flex items-center justify-center transition-colors">
+                    <card.icon className="w-4 h-4 text-stone-700 dark:text-stone-300 group-hover:text-lime-600 dark:group-hover:text-lime-400" aria-hidden />
+                  </div>
                 </div>
               </div>
               <div className="flex flex-col gap-1">
-                <p className="text-sm font-bold tracking-tight text-stone-900 dark:text-stone-50 group-hover:text-stone-50 dark:group-hover:text-stone-900">
+                <p className="text-sm font-bold tracking-tight text-stone-900 dark:text-stone-50">
                   {card.title}
                 </p>
-                <p className="text-xs text-stone-600 dark:text-stone-400 group-hover:text-stone-300 dark:group-hover:text-stone-700 line-clamp-2">
+                <p className="text-xs text-stone-600 dark:text-stone-400 line-clamp-2 leading-relaxed">
                   {card.desc}
                 </p>
               </div>

client/src/module/student/opensource/ProgramTrackerPage.tsx

@@ -5,6 +5,8 @@ import {
   Globe, DollarSign, Calendar, Users, CheckCircle2, X, Filter, CalendarPlus,
 } from "lucide-react";
 import { Button } from "../../../components/ui/button";
+import { SEO } from "../../../components/SEO";
+import { canonicalUrl } from "../../../lib/seo.utils";
 
 function nextDate(month: number, day: number, hour = 23, minute = 59): string {
   const now = new Date();
@@ -1012,6 +1014,13 @@ export default function ProgramTrackerPage() {
 
   return (
     <div className="max-w-5xl mx-auto px-4 py-8">
+      <SEO
+        title="Open Source Program Tracker - Deadlines & Stipends"
+        description="Track deadlines, eligibility, and stipends for GSoC, LFX, MLH Fellowship, Outreachy, and 20+ other open source programs."
+        keywords="GSoC tracker, LFX mentorship, open source internships, Outreachy deadline, paid open source"
+        canonicalUrl={canonicalUrl("/student/opensource/programs")}
+        ogImage="/og/og-programs.png"
+      />
       {/* Hero */}
       <section className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-emerald-50 via-teal-50 to-cyan-50 border border-emerald-100 mb-8 p-8">
         <div className="absolute top-0 right-0 w-56 h-56 bg-gradient-to-bl from-emerald-200/30 to-transparent rounded-bl-full pointer-events-none" />

client/src/module/student/opensource/ReadCodebasePage.tsx

@@ -14,6 +14,7 @@ export default function ReadCodebasePage() {
       seoTitle="How to Read a Codebase - Open Source Guide"
       seoDescription="Learn how to navigate and understand any unfamiliar codebase systematically. Trace features, read tests, understand data models, and use debugging as a reading tool."
       seoKeywords="read codebase, understand code, navigate code, code reading, open source contribution"
+      ogImage="/og/og-read-codebase.png"
       icon={BookOpen}
       iconColor="text-emerald-500"
     />

client/src/module/student/opensource/components/GuideListPage.tsx

@@ -19,13 +19,15 @@ interface Props {
   seoTitle: string;
   seoDescription: string;
   seoKeywords: string;
+  ogImage?: string;
   icon: LucideIcon;
   iconColor: string;         // e.g. "text-emerald-500"
 }
 
 export default function GuideListPage({
   steps, storageKey, basePath, title, titleAccent, subtitle,
   seoTitle, seoDescription, seoKeywords, icon: Icon, iconColor,
+  ogImage,
 }: Props) {
   const [completed, setCompleted] = useState<Set<string>>(() => {
     try {
@@ -62,6 +64,7 @@ export default function GuideListPage({
         description={seoDescription}
         keywords={seoKeywords}
         canonicalUrl={canonicalUrl(basePath)}
+        ogImage={ogImage}
       />
 
       {/* Atmospheric background */}