Merge pull request #84 from renderghost/feature/issue-72-bluesky-stats

feat: add Bluesky stats to profile header

Author: renderghost

src/app/[handle]/page.tsx

@@ -117,6 +117,9 @@ export default async function ProfilePage({ params }: PageProps) {
                 country: location.country,
               }
             : undefined,
+          followersCount: bskyProfile.data.followersCount,
+          followsCount: bskyProfile.data.followsCount,
+          postsCount: bskyProfile.data.postsCount,
         }}
         affiliations={affiliations}
         qualifications={qualifications}

src/components/profile/BlueskyStats/BlueskyStats.constants.ts

@@ -0,0 +1,9 @@
+export const BLUESKY_BASE_URL = 'https://bsky.app/profile';
+
+export const formatCount = (count?: number): string => {
+  if (count === undefined) return '0';
+  if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}K`;
+  }
+  return count.toString();
+};

src/components/profile/BlueskyStats/BlueskyStats.styles.ts

@@ -0,0 +1,6 @@
+export const styles = {
+  container: 'flex items-center gap-4 leading-normal',
+  stat: 'flex items-center gap-1',
+  statNumber: 'font-bold hover:underline',
+  statLabel: 'text-muted-foreground',
+} as const;

src/components/profile/BlueskyStats/BlueskyStats.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import type { BlueskyStatsProps } from './BlueskyStats.types';
+import { styles } from './BlueskyStats.styles';
+import { BLUESKY_BASE_URL, formatCount } from './BlueskyStats.constants';
+
+export default function BlueskyStats({
+  handle,
+  followersCount,
+  followsCount,
+  postsCount,
+}: BlueskyStatsProps) {
+  const stats = [
+    {
+      label: 'followers',
+      value: formatCount(followersCount),
+      href: `${BLUESKY_BASE_URL}/${handle}/followers`,
+    },
+    {
+      label: 'following',
+      value: formatCount(followsCount),
+      href: `${BLUESKY_BASE_URL}/${handle}/follows`,
+    },
+    {
+      label: 'posts',
+      value: formatCount(postsCount),
+      href: `${BLUESKY_BASE_URL}/${handle}`,
+    },
+  ];
+
+  return (
+    <div className={cn(styles.container)}>
+      {stats.map((stat) => (
+        <div key={stat.label} className={cn(styles.stat)}>
+          <Link
+            href={stat.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(styles.statNumber)}
+          >
+            {stat.value}
+          </Link>
+          <span className={cn(styles.statLabel)}>{stat.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/profile/BlueskyStats/BlueskyStats.types.ts

@@ -0,0 +1,6 @@
+export interface BlueskyStatsProps {
+  handle: string;
+  followersCount?: number;
+  followsCount?: number;
+  postsCount?: number;
+}

src/components/profile/ProfileView.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import QRCodeButton from './QRCodeButton';
+import BlueskyStats from './BlueskyStats/BlueskyStats';
 import { normalizeDOI } from '@/lib/data/doi';
 import { formatDateUS, formatDisplayURL, formatWorkType } from '@/lib/utils';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -42,6 +43,9 @@ interface ProfileViewProps {
       city?: string;
       country?: string;
     };
+    followersCount?: number;
+    followsCount?: number;
+    postsCount?: number;
   };
   affiliations: (Affiliation & { rkey: string; uri: string })[];
   qualifications: (Qualification & { rkey: string; uri: string })[];
@@ -140,9 +144,15 @@ export default function ProfileView({
                 >
                   @{profile.handle}
                 </a>
+                <BlueskyStats
+                  handle={profile.handle}
+                  followersCount={profile.followersCount}
+                  followsCount={profile.followsCount}
+                  postsCount={profile.postsCount}
+                />
                 {profile.location &&
                   (profile.location.city || profile.location.country) && (
-                    <div className="flex items-center gap-1 text-sm text-foreground">
+                    <div className="flex items-center gap-1 text-foreground">
                       <MapPin className="h-4 w-4" />
                       <span className="leading-normal">
                         {profile.location.city && `${profile.location.city}, `}