@shiinasaku/github-card 4.1.0 → 4.2.0

package/src/github.ts

@@ -11,13 +11,13 @@ import {
 export { NotFoundError, RateLimitError, AuthError, UpstreamError };
 
 const githubClient = new GitHubClient({
-  token: Bun.env.GITHUB_TOKEN || process.env?.GITHUB_TOKEN || "",
+  token: Bun.env.GITHUB_TOKEN ?? "",
   userAgent: "github-card",
 });
 
 const CACHE_FRESH_MS = 30 * 60 * 1000;
 const CACHE_STALE_MS = 30 * 60 * 1000;
-const CACHE_VERSION = 7;
+const CACHE_VERSION = 8;
 const REDIS_TTL_SECONDS = Math.ceil((CACHE_FRESH_MS + CACHE_STALE_MS) / 1000);
 const FETCH_TIMEOUT_MS = 6000;
 const AVATAR_TIMEOUT_MS = 4000;
@@ -123,8 +123,8 @@ export function getCacheMetrics() {
     fresh,
     stale,
     expired,
-    ttlFreshSeconds: 1800,
-    ttlStaleSeconds: 1800,
+    ttlFreshSeconds: CACHE_FRESH_MS / 1000,
+    ttlStaleSeconds: CACHE_STALE_MS / 1000,
   };
 }
 
@@ -145,6 +145,44 @@ type FetchOptions = {
   forceRefresh?: boolean;
 };
 
+type RepoNode = {
+  nameWithOwner: string;
+  stargazers: { totalCount: number };
+  owner?: { login: string; __typename: string } | null;
+  languages?: { edges: LangEdge[] | null } | null;
+};
+
+type PageInfo = { hasNextPage: boolean; endCursor: string | null };
+type RepoConnection = { pageInfo: PageInfo; nodes: RepoNode[] | null };
+
+type ProfileUser = {
+  login: string;
+  name: string | null;
+  avatarUrl: string;
+  bio: string | null;
+  pronouns: string | null;
+  twitterUsername: string | null;
+  openPRs: { totalCount: number };
+  closedPRs: { totalCount: number };
+  mergedPRs: { totalCount: number };
+  openIssues: { totalCount: number };
+  closedIssues: { totalCount: number };
+  contributionsCollection: {
+    totalCommitContributions: number;
+    commitContributionsByRepository?: ContributionEntry[] | null;
+    pullRequestContributionsByRepository?: ContributionEntry[] | null;
+    issueContributionsByRepository?: ContributionEntry[] | null;
+  };
+};
+
+type OrgProfile = {
+  login: string;
+  name: string | null;
+  avatarUrl: string;
+  description: string | null;
+  twitterUsername: string | null;
+};
+
 const QUERY_PROFILE = `
 query fullProfile($login: String!, $from: DateTime!, $to: DateTime!, $isOrg: Boolean!) {
   user(login: $login) {
@@ -205,21 +243,23 @@ query paginateOrg($login: String!, $cursor: String, $pageSize: Int!, $fetchLangs
 }
 `;
 
-async function postGraphQL(query: string, variables: Record<string, unknown>) {
-  return githubClient.request(query, {
+async function postGraphQL<T>(query: string, variables: Record<string, unknown>): Promise<T> {
+  return githubClient.request<T>(query, {
     variables,
     timeoutMs: FETCH_TIMEOUT_MS,
   });
 }
 
 type LangMap = Map<string, { size: number; color: string }>;
-function accLangs(edges: any[], map: LangMap) {
-  if (!edges) return;
-  for (const e of edges) {
-    if (!e?.node?.name || !e.size) continue;
-    const cur = map.get(e.node.name);
-    if (cur) cur.size += e.size;
-    else map.set(e.node.name, { size: e.size, color: e.node.color || "#ccc" });
+type LangEdge = { size: number; node: { name: string; color: string | null } };
+
+function accLangs(edges: LangEdge[] | null | undefined, map: LangMap): void {
+  if (!edges?.length) return;
+  for (const edge of edges) {
+    if (!edge?.node?.name || !edge.size) continue;
+    const existing = map.get(edge.node.name);
+    if (existing) existing.size += edge.size;
+    else map.set(edge.node.name, { size: edge.size, color: edge.node.color ?? "#ccc" });
   }
 }
 
@@ -244,15 +284,24 @@ async function fetchAvatarAsBase64(url: string | null | undefined): Promise<stri
   }
 }
 
-function sumContributions(entries: any[], orgsSet: Set<string> | null) {
-  let tot = 0;
-  for (const e of entries || []) {
-    const owner = e?.repository?.owner;
+type ContributionEntry = {
+  repository?: { owner?: { login?: string; __typename?: string } | null } | null;
+  contributions?: { totalCount?: number } | null;
+};
+
+function sumContributions(
+  entries: ContributionEntry[] | null | undefined,
+  orgsSet: Set<string> | null,
+): number {
+  if (!entries?.length) return 0;
+  let total = 0;
+  for (const entry of entries) {
+    const owner = entry?.repository?.owner;
     if (owner?.__typename !== "Organization" || !owner?.login) continue;
     if (orgsSet && !orgsSet.has(owner.login.toLowerCase())) continue;
-    tot += e?.contributions?.totalCount || 0;
+    total += entry?.contributions?.totalCount ?? 0;
   }
-  return tot;
+  return total;
 }
 
 async function directFetch(username: string, opts: FetchOptions): Promise<ProfileData> {
@@ -268,10 +317,10 @@ async function directFetch(username: string, opts: FetchOptions): Promise<Profil
   const from = new Date(Date.UTC(now.getUTCFullYear(), 0, 1)).toISOString();
   const to = now.toISOString();
 
-  let user: any = null;
+  let user: ProfileUser | OrgProfile | null = null;
   let isOrgAccount = false;
   try {
-    const data = await postGraphQL(QUERY_PROFILE, {
+    const data = await postGraphQL<{ user: ProfileUser | null }>(QUERY_PROFILE, {
       login: username,
       from,
       to,
@@ -281,7 +330,7 @@ async function directFetch(username: string, opts: FetchOptions): Promise<Profil
     if (!user) throw new NotFoundError();
   } catch (err) {
     if (err instanceof NotFoundError) {
-      const data = await postGraphQL(QUERY_ORG, {
+      const data = await postGraphQL<{ organization: OrgProfile | null }>(QUERY_ORG, {
         login: username,
       });
       user = data.organization;
@@ -295,35 +344,40 @@ async function directFetch(username: string, opts: FetchOptions): Promise<Profil
   let stars = 0;
   let reposCount = 0;
 
-  const processNode = (n: any, scopeCheck: boolean) => {
-    if (!n || !n.nameWithOwner || seenRepos.has(n.nameWithOwner)) return;
+  const processNode = (node: RepoNode, scopeCheck: boolean): void => {
+    if (!node?.nameWithOwner || seenRepos.has(node.nameWithOwner)) return;
     if (
       scopeCheck &&
-      n.owner?.__typename === "Organization" &&
+      node.owner?.__typename === "Organization" &&
       orgsSet &&
-      !orgsSet.has(n.owner.login.toLowerCase())
+      !orgsSet.has(node.owner.login.toLowerCase())
     )
       return;
-    seenRepos.add(n.nameWithOwner);
-    stars += n.stargazers?.totalCount || 0;
+    seenRepos.add(node.nameWithOwner);
+    stars += node.stargazers?.totalCount ?? 0;
     reposCount++;
-    if (fetchLangs) accLangs(n.languages?.edges, langMap);
+    if (fetchLangs) accLangs(node.languages?.edges ?? null, langMap);
   };
 
-  const getConnection = (data: any, query: string) =>
+  type PaginateData = {
+    user?: { repositories?: RepoConnection; repositoriesContributedTo?: RepoConnection } | null;
+    organization?: { repositories: RepoConnection } | null;
+  };
+
+  const getConnection = (data: PaginateData, query: string): RepoConnection | undefined =>
     data.user
       ? query.includes("repositoriesContributedTo")
-        ? data.user.repositoriesContributedTo
-        : data.user.repositories
+        ? (data.user.repositoriesContributedTo ?? undefined)
+        : (data.user.repositories ?? undefined)
       : data.organization?.repositories;
 
-  const traversePages = async (query: string, scopeCheck: boolean) => {
+  const traversePages = async (query: string, scopeCheck: boolean): Promise<void> => {
     let cursor: string | null = null;
     let page = 0;
     let hasNext = true;
 
     while (hasNext && page++ < MAX_PAGES) {
-      const data = await postGraphQL(query, {
+      const data = await postGraphQL<PaginateData>(query, {
         login: username,
         cursor,
         pageSize: REPO_PAGE_SIZE,
@@ -331,9 +385,9 @@ async function directFetch(username: string, opts: FetchOptions): Promise<Profil
         affiliations,
       });
       const nextConn = getConnection(data, query);
-      for (const n of nextConn?.nodes || []) processNode(n, scopeCheck);
-      hasNext = nextConn?.pageInfo?.hasNextPage;
-      cursor = nextConn?.pageInfo?.endCursor;
+      for (const node of nextConn?.nodes ?? []) processNode(node, scopeCheck);
+      hasNext = nextConn?.pageInfo?.hasNextPage ?? false;
+      cursor = nextConn?.pageInfo?.endCursor ?? null;
       if (hasNext && !cursor) break;
     }
   };
@@ -353,18 +407,19 @@ async function directFetch(username: string, opts: FetchOptions): Promise<Profil
   let issues = 0;
 
   if (!isOrgAccount) {
-    const c = user.contributionsCollection;
+    const profile = user as ProfileUser;
+    const c = profile.contributionsCollection;
     if (opts.scope === "org") {
       commits = sumContributions(c?.commitContributionsByRepository, orgsSet);
       prs = sumContributions(c?.pullRequestContributionsByRepository, orgsSet);
       issues = sumContributions(c?.issueContributionsByRepository, orgsSet);
     } else {
-      commits = c?.totalCommitContributions || 0;
+      commits = c?.totalCommitContributions ?? 0;
       prs =
-        (user.openPRs?.totalCount || 0) +
-        (user.closedPRs?.totalCount || 0) +
-        (user.mergedPRs?.totalCount || 0);
-      issues = (user.openIssues?.totalCount || 0) + (user.closedIssues?.totalCount || 0);
+        (profile.openPRs?.totalCount ?? 0) +
+        (profile.closedPRs?.totalCount ?? 0) +
+        (profile.mergedPRs?.totalCount ?? 0);
+      issues = (profile.openIssues?.totalCount ?? 0) + (profile.closedIssues?.totalCount ?? 0);
     }
   }
 
@@ -373,14 +428,17 @@ async function directFetch(username: string, opts: FetchOptions): Promise<Profil
     .sort((a, b) => b.size - a.size)
     .slice(0, opts.langCount || 5);
 
+  const profileUser = !isOrgAccount ? (user as ProfileUser) : null;
+  const orgUser = isOrgAccount ? (user as OrgProfile) : null;
+
   return {
     user: {
-      login: user.login,
-      name: user.name,
+      login: user!.login,
+      name: user!.name,
       avatarUrl: avatarDataUrl,
-      bio: user.bio || user.description,
-      pronouns: user.pronouns,
-      twitter: user.twitterUsername,
+      bio: isOrgAccount ? (orgUser?.description ?? null) : (profileUser?.bio ?? null),
+      pronouns: isOrgAccount ? null : (profileUser?.pronouns ?? null),
+      twitter: user!.twitterUsername ?? null,
     },
     stats: { stars, repos: reposCount, prs, issues, commits },
     languages,
@@ -394,7 +452,7 @@ export async function getProfileData(
   const norm = normalizeUsername(username);
   const orgs = normalizeOrgFilters(opts.orgs);
   const cacheKey = Bun.hash(
-    `v${CACHE_VERSION}:${norm}:${opts.scope || "personal"}:${opts.affiliations || "affiliated"}:${opts.includeLanguages !== false}:${opts.langCount || 5}:${orgs.join("|")}`,
+    `v${CACHE_VERSION}:${norm}:${opts.scope || "personal"}:${opts.affiliations || "owner"}:${opts.includeLanguages !== false}:${opts.langCount || 5}:${orgs.join("|")}`,
   ).toString(36);
 
   if (!opts.forceRefresh) {

package/src/index.ts

@@ -17,6 +17,7 @@ import { themes } from "./utils";
 const USERNAME_PATTERN = "^[a-zA-Z0-9-]{1,39}$";
 const CACHE_CONTROL_HEADER = "public, max-age=0, s-maxage=1800, stale-while-revalidate=1800";
 const EDGE_CACHE_CONTROL_HEADER = "public, s-maxage=1800, stale-while-revalidate=1800";
+const DEFAULT_AFFILIATIONS = "owner" as const;
 const appStartedAt = Date.now();
 
 const CardQuerySchema = t.Object({
@@ -104,7 +105,7 @@ async function buildCardSvg(username: string, query: CardQuery): Promise<string>
   const orgs = parseOrgs(query.orgs);
   const fields = parseFieldSet(query.fields);
   const includeLanguages = shouldIncludeLanguages(fields);
-  const affiliations = query.affiliations ?? "affiliated";
+  const affiliations = (query.affiliations ?? DEFAULT_AFFILIATIONS) as "owner" | "affiliated";
 
   const data = await getProfileData(username, {
     includeLanguages,
@@ -142,8 +143,8 @@ function renderUserThemesSvg(
       const y = gap + row * (cellH + gap) + labelH;
       // Inline the card as a nested <svg> element (GitHub camo-safe, unlike data-URI <image>)
       const cardSvg = renderCard(user, stats, langs, { ...cardOpts, theme: name }).replace(
-        "<svg ",
-        `<svg x="${x}" y="${y}" `,
+        /^<svg\b/,
+        `<svg x="${x}" y="${y}"`,
       );
 
       return `<text x="${x + 4}" y="${y - 8}" fill="#e2e8f0" font-size="13" font-family="Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial" font-weight="700">${name}</text>${cardSvg}`;
@@ -215,7 +216,7 @@ const app = new Elysia({ name: "github-card" })
       documentation: {
         info: {
           title: "GitHub Profile Card API",
-          version: "4.0.0",
+          version: "4.2.0",
           description:
             "Generate GitHub profile SVG/PNG cards for README, web embeds, and social previews.",
         },
@@ -254,7 +255,7 @@ const app = new Elysia({ name: "github-card" })
       message: "GitHub Profile Card API",
       usage: "GET /card/:username",
       themes: Object.keys(themes).join(", "),
-      affiliations: "affiliated (default), owner",
+      affiliations: "owner (default), affiliated",
       organizationSupport: "Use /card/:organization-login",
     }),
     {
@@ -273,7 +274,7 @@ const app = new Elysia({ name: "github-card" })
         includeLanguages,
         langCount: q.lang_count ?? 5,
         scope,
-        affiliations: q.affiliations ?? "affiliated",
+        affiliations: (q.affiliations ?? DEFAULT_AFFILIATIONS) as "owner" | "affiliated",
         orgs,
       });
 

package/src/lib.ts

@@ -15,7 +15,7 @@ export type { UserProfile, UserStats, LanguageStat, ProfileData, CardOptions } f
 export { themes, resolveColors, type Theme } from "./utils/themes";
 
 // Utilities
-export { kFormat, escapeXml, wrapText } from "./utils/format";
+export { kFormat, escapeXml, wrapText, measureText } from "./utils/format";
 export { icons, icon } from "./utils/icons";
 export { getLangColor } from "./utils/languages";
 export { FONT_FACE, FONT_FAMILY } from "./utils/font";

package/src/utils/font.ts

@@ -1,3 +1,5 @@
+/** System font stack — no shipped font, respects the user's OS. */
 export const FONT_FAMILY =
-  'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
-export const FONT_FACE = ""; // Kept for API backwards compatibility
+  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+/** @deprecated No shipped font — kept for API backwards compatibility. */
+export const FONT_FACE = "";

package/src/utils/format.ts

@@ -1,8 +1,46 @@
 export function kFormat(num: number): string {
+  const sign = num < 0 ? "-" : "";
+  const abs = Math.abs(num);
   const trim = (v: number) => v.toFixed(1).replace(/\.0$/, "");
-  if (num >= 999_950) return trim(num / 1_000_000) + "M";
-  if (num >= 999.95) return trim(num / 1_000) + "k";
-  return String(Math.round(num));
+  if (abs >= 999_950_000) return sign + trim(abs / 1_000_000_000) + "B";
+  if (abs >= 999_950) return sign + trim(abs / 1_000_000) + "M";
+  if (abs >= 999.95) return sign + trim(abs / 1_000) + "k";
+  return sign + String(Math.round(abs));
+}
+
+/**
+ * Approximate rendered width of a string in SVG user units for the default
+ * sans-serif stack. Widths are per-character averages tuned to the card's
+ * font sizes and weights, so layout can reserve enough space without relying
+ * on browser text measurement (which is unavailable server-side).
+ */
+export function measureText(text: string, size: number, weight = 400): number {
+  if (!text) return 0;
+  const factor = size / 16;
+  const weightFactor = weight >= 700 ? 1.08 : weight >= 600 ? 1.04 : 1;
+  let width = 0;
+  for (const ch of text) {
+    const code = ch.codePointAt(0)!;
+    let w: number;
+    if (ch === " ") w = 0.28;
+    else if (ch === "." || ch === "," || ch === ":" || ch === ";") w = 0.3;
+    else if (ch === "i" || ch === "l" || ch === "I" || ch === "t" || ch === "j" || ch === "|")
+      w = 0.3;
+    else if (ch === "m" || ch === "w" || ch === "W" || ch === "M" || ch === "@") w = 0.95;
+    else if (code >= 0x1100 && code <= 0x11ff)
+      w = 1.0; // Hangul
+    else if (code >= 0x4e00 && code <= 0x9fff)
+      w = 1.0; // CJK
+    else if (code >= 0x3040 && code <= 0x30ff)
+      w = 1.0; // Kana
+    else if (code >= 0xac00 && code <= 0xd7af)
+      w = 1.0; // Hangul syllables
+    else if (code > 0x7f)
+      w = 0.72; // other non-ASCII (emoji, accents)
+    else w = 0.58; // default latin
+    width += w;
+  }
+  return width * factor * weightFactor;
 }
 
 export function escapeXml(str: string): string {

package/src/utils/github-client.ts

@@ -116,7 +116,7 @@ export class GitHubClient {
    * @param options Request options including variables and fetch options.
    * @returns Strongly typed response data.
    */
-  public async request<T = any>(query: string, options: RequestOptions = {}): Promise<T> {
+  public async request<T = unknown>(query: string, options: RequestOptions = {}): Promise<T> {
     const { variables, timeoutMs = this.timeoutMs, signal: userSignal, ...fetchOptions } = options;
 
     const headers = new Headers(fetchOptions.headers);
@@ -153,11 +153,13 @@ export class GitHubClient {
         body: JSON.stringify({ query, variables }),
         signal: abortController.signal,
       });
-    } catch (error: any) {
-      if (error.name === "AbortError" || error instanceof TimeoutError) {
-        throw new TimeoutError(error.message || "Request timed out");
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      const name = error instanceof Error ? error.name : "";
+      if (name === "AbortError" || error instanceof TimeoutError) {
+        throw new TimeoutError(message || "Request timed out");
       }
-      throw new GitHubError(`Network error: ${error.message || "Unknown error"}`);
+      throw new GitHubError(`Network error: ${message || "Unknown error"}`);
     } finally {
       if (timeoutId) clearTimeout(timeoutId);
       if (userSignal) {
@@ -170,12 +172,15 @@ export class GitHubClient {
       this.classifyError(errorText || response.statusText, response.status, response.headers);
     }
 
-    const body = (await response.json().catch(() => ({}))) as any;
+    const body = (await response.json().catch(() => ({}))) as {
+      data?: T;
+      errors?: { message: string }[];
+    };
 
     if (body.errors && body.errors.length > 0) {
-      // Throw the first error specifically, but could be enhanced to aggregate
       const firstError = body.errors[0];
-      this.classifyError(firstError.message, response.status, response.headers);
+      const message = firstError?.message ?? "GraphQL error";
+      this.classifyError(message, response.status, response.headers);
     }
 
     if (!body.data) {

package/src/utils/icons.ts

@@ -1,18 +1,35 @@
 export const icons = {
-  star: `<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>`,
+  star: `<path d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176z"/>`,
   commit: `<path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"/>`,
-  pr: `<path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"/>`,
-  issue: `<path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"/>`,
-  repo: `<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
+  pr: `<path d="M4 18a2 2 0 1 0 4 0a2 2 0 1 0-4 0M4 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m12 12a2 2 0 1 0 4 0a2 2 0 1 0-4 0M6 8v8"/><path d="M11 6h5a2 2 0 0 1 2 2v8"/><path d="m14 9l-3-3l3-3"/>`,
+  issue: `<path d="M15.314 2a2 2 0 0 1 1.414.586l4.686 4.686A2 2 0 0 1 22 8.686v6.628a2 2 0 0 1-.586 1.414l-4.686 4.686a2 2 0 0 1-1.414.586H8.686a2 2 0 0 1-1.414-.586l-4.686-4.686A2 2 0 0 1 2 15.314V8.686a2 2 0 0 1 .586-1.414l4.686-4.686A2 2 0 0 1 8.686 2zm0 2H8.686L4 8.686v6.628L8.686 20h6.628L20 15.314V8.686zM12 15a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-9a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1"/>`,
+  repo: `<path d="M6 19.623c-.69-.195-1.232-.491-1.682-.941C3 17.364 3 15.242 3 11s0-6.364 1.318-7.682S7.758 2 12 2s6.364 0 7.682 1.318S21 6.758 21 11s0 6.364-1.318 7.682c-.45.45-.993.746-1.682.941"/><path d="M12 20.193c-.414 0-.748.32-1.414.958c-.647.619-.97.929-1.242.831a.5.5 0 0 1-.096-.046C9 21.779 9 21.31 9 20.376v-3.125c0-1.532 0-2.299.44-2.775C9.878 14 10.585 14 12 14s2.121 0 2.56.476s.44 1.243.44 2.775v3.125c0 .935 0 1.403-.248 1.56a.5.5 0 0 1-.096.046c-.272.098-.595-.212-1.242-.831c-.666-.639-1-.958-1.414-.958M8 10h8M8 6h4"/>`,
   x: `<path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />`,
 };
 
-export function icon(name: keyof typeof icons, color: string, size = 16): string {
+type IconName = keyof typeof icons;
+
+const iconMeta: Record<
+  IconName,
+  { viewBox: string; kind: "fill" | "stroke"; strokeWidth?: string }
+> = {
+  star: { viewBox: "0 0 24 24", kind: "fill" },
+  commit: { viewBox: "0 0 16 16", kind: "fill" },
+  pr: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "2" },
+  issue: { viewBox: "0 0 24 24", kind: "fill" },
+  repo: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "1.5" },
+  x: { viewBox: "0 0 24 24", kind: "stroke", strokeWidth: "2" },
+};
+
+export function icon(name: IconName, color: string, size = 16): string {
   const path = icons[name];
   if (!path) return "";
-  const viewBox = name === "x" ? "0 0 24 24" : "0 0 16 16";
+  const meta = iconMeta[name];
+  const viewBox = meta?.viewBox ?? "0 0 16 16";
   const colorStr = color.startsWith("#") ? color : `#${color}`;
-  const fill =
-    name === "x" ? `stroke="${colorStr}" stroke-width="2" fill="none"` : `fill="${colorStr}"`;
-  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${fill} role="img">${path}</svg>`;
+  const attrs =
+    meta?.kind === "stroke"
+      ? `fill="none" stroke="${colorStr}" stroke-width="${meta.strokeWidth ?? "1.8"}" stroke-linecap="round" stroke-linejoin="round"`
+      : `fill="${colorStr}"`;
+  return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${attrs} role="img">${path}</svg>`;
 }

package/src/utils/index.ts

@@ -1,5 +1,5 @@
 export { resolveColors, themes, type Theme } from "./themes";
-export { kFormat, escapeXml, wrapText } from "./format";
+export { kFormat, escapeXml, wrapText, measureText } from "./format";
 export { getLangColor } from "./languages";
 export { icons, icon } from "./icons";
 export { FONT_FACE, FONT_FAMILY } from "./font";