Language ranks (#5)

* Improve profile page SEO

* Redesign overview cards

* Update language card on profile overview

* Refactor profile page (prep for new languages tab)

* Fix lint issues and prepare for release

* Update Next.js route typings

* Migrate to Biome

* Fix country order type guard

Author: maslianok

app/api/ai/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import type { Session } from 'next-auth';
+
+import { auth } from '@/auth';
+import { signedFetch } from '@/lib/signed-fetch';
+
+export type AuthRequest = NextRequest & { auth: Session | null };
+
+export const POST = auth(async function POST(req: AuthRequest, { params }) {
+  const { login } = await params;
+
+  const response = await signedFetch('/user/generate-description', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ login }),
+  });
+
+  const responseData = await response.json();
+
+  if (!response.ok) {
+    return NextResponse.json(
+      { message: 'Failed to generate user description', error: responseData },
+      { status: response.status },
+    );
+  }
+
+  return NextResponse.json(responseData);
+});

app/api/avatar/[login]/route.ts

@@ -0,0 +1,70 @@
+import type { NextRequest } from 'next/server';
+
+import { graphqlDirect } from '@/lib/graphql/graphql-direct';
+import { AvatarByLoginDocument } from '@/types/generated/graphql';
+
+type Props = { params: Promise<{ login: string }> };
+
+export async function GET(req: NextRequest, { params }: Props) {
+  const { login } = await params;
+
+  const { user } = await graphqlDirect(AvatarByLoginDocument, { login });
+
+  if (!user?.avatarUrl) {
+    return new Response('User not found', { status: 404 });
+  }
+
+  const src = user.avatarUrl;
+
+  // Forward validators for 304 support
+  const etag = req.headers.get('if-none-match') ?? undefined;
+  const ims = req.headers.get('if-modified-since') ?? undefined;
+
+  const upstream = await fetch(src, {
+    headers: {
+      ...(etag ? { 'if-none-match': etag } : {}),
+      ...(ims ? { 'if-modified-since': ims } : {}),
+      // Optional: set Accept for smaller formats if GH honors it (not guaranteed)
+      Accept: req.headers.get('accept') ?? 'image/*',
+      // Never forward arbitrary user-provided headers
+    },
+    // Let your platform/CDN cache it:
+    next: { revalidate: 60 * 60 * 24 }, // 1 day (app-level hint)
+  });
+
+  // Pass through 304 to leverage browser/CDN cache
+  if (upstream.status === 304) {
+    return new Response(null, {
+      status: 304,
+      headers: {
+        'Cache-Control': 'public, max-age=0, s-maxage=604800, stale-while-revalidate=86400',
+      },
+    });
+  }
+
+  if (!upstream.ok) {
+    // if GitHub itself returns 404 → bubble it up
+    return new Response('Avatar not found', { status: 404 });
+  }
+
+  // Stream the body; copy key headers safely
+  const resHeaders = new Headers();
+  const ct = upstream.headers.get('content-type');
+  if (ct) resHeaders.set('Content-Type', ct);
+
+  const lm = upstream.headers.get('last-modified');
+  if (lm) resHeaders.set('Last-Modified', lm);
+
+  const et = upstream.headers.get('etag');
+  if (et) resHeaders.set('ETag', et);
+
+  // Your cache policy
+  resHeaders.set('Cache-Control', 'public, max-age=0, s-maxage=604800, stale-while-revalidate=86400');
+  // Optional CSP tightening:
+  // resHeaders.set("Cross-Origin-Resource-Policy", "same-site");
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: resHeaders,
+  });
+}

app/api/badge/[login]/route.tsx

@@ -1,4 +1,4 @@
-import { redirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
 import { NextRequest } from 'next/server';
 
 import { BadgeTemplateType } from '@/badge/badge.types';
@@ -46,7 +46,7 @@ export async function GET(req: NextRequest, { params }: Props) {
   const svg = await getRendererByTemplate(template)({ theme, login, rankingType });
 
   if (!svg) {
-    return redirect('/404');
+    return notFound();
   }
 
   return new Response(svg, {

app/api/badge/v2/[login]/route.tsx

@@ -1,4 +1,4 @@
-import { redirect } from 'next/navigation';
+import { notFound } from 'next/navigation';
 import { NextRequest } from 'next/server';
 
 import { BadgeV2ZodSchema } from '@/badge/badge.zod';
@@ -36,7 +36,7 @@ export async function GET(req: NextRequest, { params }: Props) {
   const svg = await renderInlineBadge({ login, params: validationResult.data });
 
   if (!svg) {
-    return redirect('/404');
+    return notFound();
   }
 
   return new Response(svg, {

app/app.consts.ts

@@ -34,3 +34,5 @@ export const RANK_DESCRIPTIONS = {
     notRankedMessage: `A profile needs at least ${MIN_VALUE} followers to be ranked.`,
   },
 };
+
+export const DEFAULT_LANGUAGE_COLOR = '#64748B';

app/badge/builder/[[...login]]/components/login-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Edit, Search } from 'lucide-react';
+import type { Route } from 'next';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FC } from 'react';
@@ -29,8 +30,13 @@ export const LoginForm: FC<LoginFormProps> = ({ githubLogin = '', githubId }) =>
   });
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    const url = `/badge/builder${githubId ? '' : `/${data.login}`}?${searchParams.toString()}`;
-    router.push(url);
+    const qs = searchParams.toString();
+
+    if (githubId) {
+      router.push(`/badge/builder?${qs}` as Route);
+    } else {
+      router.push(`/badge/builder/${data.login}?${qs}` as Route);
+    }
   }
 
   return (

app/badge/builder/[[...login]]/layout.tsx

@@ -9,7 +9,7 @@ export const metadata: Metadata = {
     'Generate custom GitHub badges with GitRanks. Show your global and country rankings, percentile, monthly changes, and progress toward the next tier.',
 };
 
-export default function BadgeLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+export default function BadgeLayout({ children }: LayoutProps<'/badge/builder/[[...login]]'>) {
   return (
     <>
       <Header />

app/badge/builder/[[...login]]/page.tsx

@@ -11,7 +11,7 @@ import { IntegrationCode } from './components/integration-code';
 import { LoginForm } from './components/login-form';
 import { Preview } from './components/preview';
 
-export default async function Badge({ params }: { params: Promise<{ login?: string[] }> }) {
+export default async function Badge({ params }: PageProps<'/badge/builder/[[...login]]'>) {
   cacheLife('hours');
 
   const { login } = await params;

app/badge/gallery/components/badge-example.tsx

@@ -1,3 +1,4 @@
+import type { Route } from 'next';
 import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { z } from 'zod';
@@ -49,7 +50,7 @@ function BadgeExample(props: Readonly<BadgeExampleProps>) {
   }, [parsed]);
 
   return (
-    <Link href={builderUrl} aria-label={parsed.label ?? 'Open badge builder'}>
+    <Link href={builderUrl as Route} aria-label={parsed.label ?? 'Open badge builder'}>
       <img src={src} alt={parsed.label ?? 'Badge example'} height={INLINE_BADGE_HEIGHT} decoding="async" />
     </Link>
   );

app/badge/gallery/layout.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
     'Browse the complete collection of GitRanks badges. See design examples, colors, and styles you can use to showcase your GitHub achievements.',
 };
 
-export default function BadgeGalleryLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+export default function BadgeGalleryLayout({ children }: LayoutProps<'/badge/gallery'>) {
   return (
     <>
       <Header />