2025.03.28 medium badge

Author: maslianok

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

@@ -0,0 +1,38 @@
+import { redirect } from 'next/navigation';
+import { NextRequest } from 'next/server';
+import { BadgeTemplateType, BadgeType } from '@/badge/badge.types';
+import { renderSmallBadge } from '@/badge/templates/small/small.render';
+import { renderMediumBadge } from '@/badge/templates/medium/medium.render';
+
+type Props = { params: Promise<{ login: string }> };
+
+const getRendererByTemplate = (template: BadgeTemplateType) => {
+  switch (template) {
+    case 'small':
+      return renderSmallBadge;
+    default:
+      return renderMediumBadge;
+  }
+};
+
+export async function GET(req: NextRequest, { params }: Props) {
+  const theme = 'light';
+  const { login } = await params;
+
+  const searchParams = req.nextUrl.searchParams;
+  const type = searchParams.get('type') as BadgeType;
+  const template = searchParams.get('template') as BadgeTemplateType;
+
+  const svg = await getRendererByTemplate(template)({ theme, login, type });
+
+  if (!svg) {
+    return redirect('/404');
+  }
+
+  return new Response(svg, {
+    headers: {
+      'Content-Type': 'image/svg+xml',
+      'Cache-Control': 'max-age=300, public',
+    },
+  });
+}

app/api/widget/[login]/[widgetType]/route.tsx

@@ -90,7 +90,7 @@ export default async function GlobalRanking({
                 </td>
                 <td>{user?.login}</td>
                 <td>{user?.location}</td>
-                <td>{user?.[rankPropName]}</td>
+                <td>{user?.[rankPropName]?.toLocaleString('en-US')}</td>
               </tr>
             );
           })}

app/by/[type]/page.tsx

@@ -0,0 +1 @@
+export const GITHUB_TOTAL_USERS = 100_000_000;

badge/badge.consts.ts

@@ -0,0 +1,13 @@
+export type ThemeType = 'light' | 'dark';
+
+export type BadgeType = 'stars' | 'contributions' | 'followers';
+
+export type BadgeTemplateType = 'small' | 'medium';
+
+export type DeltaSentimentType = 'positive' | 'negative';
+
+export type BadgeServiceProps = {
+  theme: ThemeType;
+  login: string;
+  type: BadgeType;
+};

badge/badge.types.ts

@@ -0,0 +1,2 @@
+export const MEDIUM_BADGE_WIDTH = 320;
+export const MEDIUM_BADGE_HEIGHT = 160;

…in]/[widgetType]/rank-by-login.query.gql badge/queries/rank-by-login.query.gqlapp/api/widget/[login]/[widgetType]/rank-by-login.query.gql renamed to badge/queries/rank-by-login.query.gql app/api/widget/[login]/[widgetType]/rank-by-login.query.gql renamed to badge/queries/rank-by-login.query.gql

@@ -0,0 +1,29 @@
+import satori from 'satori';
+
+import { graphqlRequest } from '@/lib/graphql-request';
+import { RankByLoginDocument } from '@/types/generated/graphql';
+import { BadgeMedium } from './medium';
+import { getSatoriConfig } from '@/badge/utils/get-satori-config';
+import { BadgeServiceProps } from '@/badge/badge.types';
+import { MEDIUM_BADGE_HEIGHT, MEDIUM_BADGE_WIDTH } from './medium.consts';
+
+export async function renderMediumBadge({ theme, login, type }: BadgeServiceProps) {
+  const { rankByLogin } = await graphqlRequest(RankByLoginDocument, { login });
+
+  if (!rankByLogin) {
+    return;
+  }
+
+  return satori(
+    <BadgeMedium theme={theme} type={type} data={rankByLogin} />,
+    await getSatoriConfig({
+      fontOptions: [
+        { style: 'normal', weight: 400 },
+        { style: 'normal', weight: 600 },
+        { style: 'normal', weight: 700 },
+      ],
+      width: MEDIUM_BADGE_WIDTH,
+      height: MEDIUM_BADGE_HEIGHT,
+    }),
+  );
+}

badge/templates/medium/medium.consts.tsx

@@ -0,0 +1,41 @@
+import { MEDIUM_BADGE_HEIGHT, MEDIUM_BADGE_WIDTH } from './medium.consts';
+
+export const containerStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: 16,
+  padding: 16,
+  fontFamily: 'Inter',
+  width: MEDIUM_BADGE_WIDTH,
+  height: MEDIUM_BADGE_HEIGHT,
+  borderRadius: 8,
+} as const;
+
+export const rankStyles = {
+  display: 'flex',
+  flexGrow: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: 24,
+  fontWeight: 700,
+} as const;
+
+export const metaItemStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  alignItems: 'center',
+  justifyContent: 'center',
+} as const;
+
+export const subtitleStyles = { display: 'flex', fontSize: 10, fontWeight: 400 };
+
+export const rankDeltaStyles = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: 14,
+  fontWeight: 600,
+} as const;

badge/templates/medium/medium.render.tsx

@@ -0,0 +1,74 @@
+import { FC } from 'react';
+import { BadgeIcon } from '@/components/badge-icon/badge-icon';
+import { figmaVariables } from '@/badge/utils/figma-variables-mapping';
+import { BadgeMediumProps } from './medium.types';
+import { getRankByType } from '@/badge/utils/get-rank-by-type';
+import { getTitleByType } from '@/badge/utils/get-title-by-type';
+import { BadgeType } from '@/badge/badge.types';
+import { containerStyles, metaItemStyles, rankDeltaStyles, rankStyles, subtitleStyles } from './medium.styles';
+import { getUsersBehindMe } from '@/badge/utils/users-behind-me';
+
+const getSubtitleByType = (type: BadgeType) => {
+  switch (type) {
+    case 'stars':
+      return 'based on stars from repos owned by the user';
+    case 'contributions':
+      return 'based on stars from repos the user contributed to';
+    case 'followers':
+      return 'based on the number of followers the user has';
+  }
+};
+
+export const BadgeMedium: FC<BadgeMediumProps> = ({ theme, type, data }) => {
+  const { colors } = figmaVariables[theme];
+
+  const { rank, delta = 0, value, sentiment } = getRankByType(data, type);
+  const title = getTitleByType(type);
+  const subtitle = getSubtitleByType(type);
+
+  if (!rank || !sentiment) {
+    return null;
+  }
+
+  const entityName = type === 'followers' ? 'followers' : 'stars';
+
+  return (
+    <div
+      style={{
+        ...containerStyles,
+        color: colors.text.primary,
+        backgroundColor: colors.surface.primary,
+      }}
+    >
+      <div style={{ display: 'flex', gap: 12 }}>
+        <BadgeIcon type={type} size={32} />
+        <div style={{ display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'center' }}>
+          <div style={{ fontSize: 16, fontWeight: 600 }}>{title}</div>
+          <div style={subtitleStyles}>{subtitle}</div>
+        </div>
+      </div>
+
+      <div style={rankStyles}>{rank.toLocaleString('en-US')}</div>
+
+      <div style={{ display: 'flex', width: '100%' }}>
+        <div style={{ ...metaItemStyles, borderRight: `1px solid ${colors.text.primary}` }}>
+          <div style={subtitleStyles}>better than</div>
+          <div style={{ fontSize: 14, fontWeight: 600 }}>{getUsersBehindMe(rank)}</div>
+        </div>
+        <div style={{ ...metaItemStyles, borderRight: `1px solid ${colors.text.primary}` }}>
+          <div style={subtitleStyles}>this month</div>
+          <div style={{ ...rankDeltaStyles, color: delta ? colors.text[sentiment] : colors.text.primary }}>
+            {delta > 0 ? '+' : ''}
+            {delta.toLocaleString('en-US')}
+          </div>
+        </div>
+        <div style={metaItemStyles}>
+          <div style={subtitleStyles}>total {entityName}</div>
+          <div style={{ display: 'flex', fontSize: 14, fontWeight: 600 }}>
+            {(!value ? 0 : value).toLocaleString('en-US')}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};