@shiinasaku/github-card 2.0.0 → 4.1.0

package/src/types.ts

@@ -37,4 +37,5 @@ export interface CardOptions {
   hide_border?: boolean;
   compact?: boolean;
   hide?: string[];
+  animate?: boolean;
 }

package/src/utils/colors.ts

@@ -0,0 +1,85 @@
+export const twColors: Record<string, string> = {
+  transparent: "transparent",
+  current: "currentColor",
+  white: "#ffffff",
+  black: "#000000",
+  "slate-50": "#f8fafc",
+  "slate-100": "#f1f5f9",
+  "slate-200": "#e2e8f0",
+  "slate-300": "#cbd5e1",
+  "slate-400": "#94a3b8",
+  "slate-500": "#64748b",
+  "slate-600": "#475569",
+  "slate-700": "#334155",
+  "slate-800": "#1e293b",
+  "slate-900": "#0f172a",
+  "slate-950": "#020617",
+  "neutral-800": "#262626",
+  "neutral-950": "#0a0a0a",
+  "zinc-100": "#f4f4f5",
+  "zinc-400": "#a1a1aa",
+  "zinc-800": "#27272a",
+  "zinc-900": "#18181b",
+  "stone-300": "#d6d3d1",
+  "stone-700": "#44403c",
+  "stone-800": "#292524",
+  "rose-200": "#fecdd3",
+  "rose-300": "#fda4af",
+  "rose-400": "#fb7185",
+  "rose-900": "#881337",
+  "rose-950": "#4c0519",
+  "pink-400": "#f472b6",
+  "pink-500": "#ec4899",
+  "fuchsia-400": "#e879f9",
+  "purple-400": "#c084fc",
+  "purple-900": "#581c87",
+  "purple-950": "#3b0764",
+  "indigo-300": "#a5b4fc",
+  "indigo-400": "#818cf8",
+  "indigo-500": "#6366f1",
+  "indigo-900": "#312e81",
+  "violet-300": "#c4b5fd",
+  "violet-400": "#a78bfa",
+  "blue-300": "#93c5fd",
+  "blue-400": "#60a5fa",
+  "blue-500": "#3b82f6",
+  "blue-600": "#2563eb",
+  "sky-400": "#38bdf8",
+  "sky-900": "#0c4a6e",
+  "sky-950": "#082f49",
+  "cyan-300": "#67e8f9",
+  "cyan-400": "#22d3ee",
+  "teal-400": "#2dd4bf",
+  "emerald-200": "#a7f3d0",
+  "emerald-300": "#6ee7b7",
+  "emerald-400": "#34d399",
+  "emerald-500": "#10b981",
+  "emerald-900": "#064e3b",
+  "emerald-950": "#022c22",
+  "green-400": "#4ade80",
+  "lime-300": "#bef264",
+  "lime-400": "#a3e635",
+  "yellow-300": "#fde047",
+  "yellow-400": "#facc15",
+  "amber-300": "#fcd34d",
+  "amber-400": "#fbbf24",
+  "amber-600": "#d97706",
+  "amber-700": "#b45309",
+  "amber-900": "#78350f",
+  "orange-50": "#fff7ed",
+  "orange-200": "#fed7aa",
+  "orange-400": "#fb923c",
+  "orange-500": "#f97316",
+};
+
+export function resolveTw(token: string, property: "fill" | "stroke"): string {
+  const value = token.trim();
+  // Raw hex, with or without "#": only valid SVG lengths (3/4/6/8)
+  const hex = value.startsWith("#") ? value.slice(1) : value;
+  if (/^(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(hex)) {
+    return `${property}="#${hex}"`;
+  }
+  // Tailwind-style token: fill-rose-400 / stroke-slate-200 / rose-400
+  const colorName = value.replace(/^fill-/, "").replace(/^stroke-/, "");
+  return `${property}="${twColors[colorName] ?? value}"`;
+}

package/src/utils/font.ts

@@ -1,19 +1,3 @@
-/**
- * Roboto variable font embedded as base64 WOFF2 for SVG @font-face.
- *
- * The subset (~47KB / ~63KB base64) covers:
- *   - ASCII printable (U+0020-007E)
- *   - Latin-1 Supplement (U+00A0-00FF)
- *   - Common typographic chars (dashes, quotes, ellipsis, bullets)
- *   - Variable weight axis (400-700)
- *
- * Loaded once at startup via Bun.file — zero per-request cost.
- */
-
-const fontPath = new URL("../../fonts/Roboto-subset.woff2", import.meta.url).pathname;
-const fontBytes = await Bun.file(fontPath).arrayBuffer();
-const fontBase64 = Buffer.from(fontBytes).toString("base64");
-
-export const FONT_FAMILY = "'Roboto', sans-serif";
-
-export const FONT_FACE = `@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url(data:font/woff2;base64,${fontBase64}) format('woff2')}`;
+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

package/src/utils/format.ts

@@ -1,7 +1,8 @@
 export function kFormat(num: number): string {
-  if (num >= 1000000) return (num / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  if (num >= 1000) return (num / 1000).toFixed(1).replace(/\.0$/, "") + "k";
-  return String(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));
 }
 
 export function escapeXml(str: string): string {
@@ -17,26 +18,25 @@ export function wrapText(input: string, maxLen: number, maxLines: number): strin
   const words = input.split(/\s+/).filter(Boolean);
   const lines: string[] = [];
   let current = "";
-  for (const w of words) {
-    const next = current ? `${current} ${w}` : w;
+
+  for (const word of words) {
+    const next = current ? `${current} ${word}` : word;
     if (next.length <= maxLen) {
       current = next;
       continue;
     }
     if (current) lines.push(current);
-    current = w;
-    if (lines.length >= maxLines - 1) break;
+    if (lines.length === maxLines) break;
+    current = word.length > maxLen ? word.slice(0, maxLen) : word;
   }
   if (current && lines.length < maxLines) lines.push(current);
-  if (lines.length === 0 && input) lines.push(input.slice(0, maxLen));
-  if (lines.length === maxLines && words.length > 0) {
-    const last = lines[lines.length - 1];
-    if (!last) return lines;
-    if (last.length > maxLen) {
-      lines[lines.length - 1] = last.slice(0, Math.max(0, maxLen - 1)) + "…";
-    } else if (words.join(" ").length > lines.join(" ").length) {
-      lines[lines.length - 1] = last.slice(0, Math.max(0, maxLen - 1)) + "…";
-    }
+
+  // Truncated? Mark the last line with an ellipsis.
+  const consumed = lines.join(" ").length;
+  if (lines.length > 0 && consumed < input.trim().length) {
+    const last = lines[lines.length - 1]!;
+    lines[lines.length - 1] =
+      (last.length >= maxLen ? last.slice(0, Math.max(0, maxLen - 1)) : last) + "…";
   }
   return lines;
 }

package/src/utils/github-client.ts

@@ -0,0 +1,193 @@
+export class GitHubError extends Error {
+  constructor(
+    message: string,
+    public httpStatus?: number,
+    public errorCode?: string,
+  ) {
+    super(message);
+    this.name = "GitHubError";
+  }
+}
+
+export class NotFoundError extends GitHubError {
+  constructor(message = "Resource not found") {
+    super(message, 404, "NOT_FOUND");
+    this.name = "NotFoundError";
+  }
+}
+
+export class RateLimitError extends GitHubError {
+  constructor(
+    message = "GitHub API rate limit exceeded",
+    public resetAt?: Date,
+  ) {
+    super(message, 429, "RATE_LIMITED");
+    this.name = "RateLimitError";
+  }
+}
+
+export class AuthError extends GitHubError {
+  constructor(message = "GitHub authentication failed") {
+    super(message, 401, "UNAUTHENTICATED");
+    this.name = "AuthError";
+  }
+}
+
+export class TimeoutError extends GitHubError {
+  constructor(message = "GitHub API request timed out") {
+    super(message, 408, "TIMEOUT");
+    this.name = "TimeoutError";
+  }
+}
+
+export interface GitHubClientOptions {
+  token?: string;
+  userAgent?: string;
+  timeoutMs?: number;
+  baseUrl?: string;
+}
+
+export interface RequestOptions extends Omit<RequestInit, "body"> {
+  variables?: Record<string, unknown>;
+  timeoutMs?: number;
+}
+
+/**
+ * A next-generation, generic GitHub GraphQL client.
+ * Designed to be robust, strongly typed, and publishable.
+ */
+export class GitHubClient {
+  private readonly token: string;
+  private readonly userAgent: string;
+  private readonly timeoutMs: number;
+  private readonly baseUrl: string;
+
+  constructor(options: GitHubClientOptions = {}) {
+    const token =
+      options.token || (typeof process !== "undefined" ? process.env?.GITHUB_TOKEN : "") || "";
+    if (!token) {
+      console.warn(
+        "GitHubClient initialized without a token. Requests requiring authentication will fail.",
+      );
+    }
+
+    this.token = token;
+    this.userAgent = options.userAgent || "nextgen-github-client/1.0";
+    this.timeoutMs = options.timeoutMs || 10000;
+    this.baseUrl = options.baseUrl || "https://api.github.com/graphql";
+  }
+
+  /**
+   * Classifies fetch or API errors into distinct custom error classes.
+   */
+  private classifyError(message: string, status: number, headers?: Headers): never {
+    const lower = message.toLowerCase();
+
+    if (status === 404 || lower.includes("not resolve to a user") || lower.includes("not found")) {
+      throw new NotFoundError(message);
+    }
+
+    if (
+      status === 429 ||
+      status === 403 ||
+      lower.includes("rate limit") ||
+      lower.includes("abuse")
+    ) {
+      const resetHeader = headers?.get("x-ratelimit-reset");
+      const resetAt = resetHeader ? new Date(parseInt(resetHeader, 10) * 1000) : undefined;
+      throw new RateLimitError(message, resetAt);
+    }
+
+    if (
+      status === 401 ||
+      lower.includes("bad credentials") ||
+      lower.includes("requires authentication")
+    ) {
+      throw new AuthError(message);
+    }
+
+    throw new GitHubError(message || `GitHub API error (${status})`, status);
+  }
+
+  /**
+   * Executes a GraphQL query against the GitHub API.
+   *
+   * @param query The GraphQL query string.
+   * @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> {
+    const { variables, timeoutMs = this.timeoutMs, signal: userSignal, ...fetchOptions } = options;
+
+    const headers = new Headers(fetchOptions.headers);
+    if (this.token && !headers.has("Authorization")) {
+      headers.set("Authorization", `bearer ${this.token}`);
+    }
+    if (!headers.has("Content-Type")) {
+      headers.set("Content-Type", "application/json");
+    }
+    if (!headers.has("User-Agent")) {
+      headers.set("User-Agent", this.userAgent);
+    }
+
+    const abortController = new AbortController();
+    const timeoutId =
+      timeoutMs > 0
+        ? setTimeout(() => abortController.abort(new TimeoutError()), timeoutMs)
+        : undefined;
+
+    // Link user-provided signal if present
+    const onAbort = userSignal ? () => abortController.abort(userSignal.reason) : undefined;
+    if (userSignal) {
+      userSignal.addEventListener("abort", onAbort!);
+      if (userSignal.aborted) abortController.abort(userSignal.reason);
+    }
+
+    let response: Response;
+
+    try {
+      response = await fetch(this.baseUrl, {
+        ...fetchOptions,
+        method: "POST",
+        headers,
+        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");
+      }
+      throw new GitHubError(`Network error: ${error.message || "Unknown error"}`);
+    } finally {
+      if (timeoutId) clearTimeout(timeoutId);
+      if (userSignal) {
+        userSignal.removeEventListener("abort", onAbort!);
+      }
+    }
+
+    if (!response.ok) {
+      const errorText = await response.text().catch(() => "");
+      this.classifyError(errorText || response.statusText, response.status, response.headers);
+    }
+
+    const body = (await response.json().catch(() => ({}))) as any;
+
+    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);
+    }
+
+    if (!body.data) {
+      throw new GitHubError(
+        "Invalid response: No data returned from GraphQL endpoint",
+        response.status,
+      );
+    }
+
+    return body.data as T;
+  }
+}
+
+// Export a default singleton instance for convenience
+export const githubClient = new GitHubClient();

package/src/utils/icons.ts

@@ -11,7 +11,8 @@ export function icon(name: keyof typeof icons, 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 colorStr = color.startsWith("#") ? color : `#${color}`;
   const fill =
-    name === "x" ? `stroke="#${color}" stroke-width="2" fill="none"` : `fill="#${color}"`;
+    name === "x" ? `stroke="${colorStr}" stroke-width="2" fill="none"` : `fill="${colorStr}"`;
   return `<svg width="${size}" height="${size}" viewBox="${viewBox}" ${fill} role="img">${path}</svg>`;
 }

package/src/utils/index.ts

@@ -3,3 +3,4 @@ export { kFormat, escapeXml, wrapText } from "./format";
 export { getLangColor } from "./languages";
 export { icons, icon } from "./icons";
 export { FONT_FACE, FONT_FAMILY } from "./font";
+export * from "./colors";

package/src/utils/themes.ts

@@ -7,25 +7,160 @@ export type Theme = {
 };
 
 export const themes: Record<string, Theme> = {
-  default: { bg: "fffefe", title: "2f80ed", text: "434d58", icon: "4c71f2", border: "e4e2e2" },
-  dark: { bg: "151515", title: "fff", text: "9f9f9f", icon: "79ff97", border: "2a2a2a" },
-  radical: { bg: "141321", title: "fe428e", text: "a9fef7", icon: "f8d847", border: "2a2a40" },
-  merko: { bg: "0a0f0b", title: "abd200", text: "68b587", icon: "b7d364", border: "1a2f1a" },
-  gruvbox: { bg: "282828", title: "fabd2f", text: "ebdbb2", icon: "fe8019", border: "3c3836" },
-  tokyonight: { bg: "1a1b27", title: "70a5fd", text: "38bdae", icon: "bf91f3", border: "2a2b3d" },
-  onedark: { bg: "282c34", title: "e4bf7a", text: "abb2bf", icon: "8eb573", border: "3e4451" },
-  cobalt: { bg: "193549", title: "e683d9", text: "75eeb2", icon: "0480ef", border: "2a4a6a" },
-  synthwave: { bg: "2b213a", title: "e2e9ec", text: "e5289e", icon: "ef8539", border: "3e2f5a" },
-  highcontrast: { bg: "000", title: "e7f216", text: "fff", icon: "00ffff", border: "333" },
-  dracula: { bg: "282a36", title: "ff6e96", text: "f8f8f2", icon: "bd93f9", border: "44475a" },
-  monokai: { bg: "272822", title: "f92672", text: "f8f8f2", icon: "a6e22e", border: "3e3d32" },
-  nord: { bg: "2e3440", title: "88c0d0", text: "d8dee9", icon: "81a1c1", border: "3b4252" },
-  github_dark: { bg: "0d1117", title: "58a6ff", text: "c9d1d9", icon: "1f6feb", border: "21262d" },
-  pearl: { bg: "f7f7f5", title: "1f2328", text: "3d444d", icon: "0969da", border: "e6e8eb" },
-  slate: { bg: "0b1220", title: "e2e8f0", text: "94a3b8", icon: "38bdf8", border: "1f2937" },
-  forest: { bg: "0f1b17", title: "b7f7d9", text: "86a995", icon: "34d399", border: "17332a" },
-  rose: { bg: "1a0f14", title: "ffd0dd", text: "e6b0c0", icon: "fb7185", border: "2b1a22" },
-  sand: { bg: "fbf7f0", title: "6b4e2e", text: "7a6754", icon: "d97706", border: "eadfce" },
+  default: {
+    bg: "fill-white",
+    title: "fill-blue-600",
+    text: "fill-slate-700",
+    icon: "fill-blue-500",
+    border: "stroke-slate-200",
+  },
+  dark: {
+    bg: "fill-zinc-900",
+    title: "fill-white",
+    text: "fill-zinc-400",
+    icon: "fill-emerald-400",
+    border: "stroke-zinc-800",
+  },
+  radical: {
+    bg: "fill-slate-900",
+    title: "fill-pink-500",
+    text: "fill-cyan-300",
+    icon: "fill-yellow-400",
+    border: "stroke-slate-800",
+  },
+  merko: {
+    bg: "fill-neutral-950",
+    title: "fill-lime-400",
+    text: "fill-emerald-400",
+    icon: "fill-lime-300",
+    border: "stroke-neutral-800",
+  },
+  gruvbox: {
+    bg: "fill-stone-800",
+    title: "fill-amber-400",
+    text: "fill-stone-300",
+    icon: "fill-orange-500",
+    border: "stroke-stone-700",
+  },
+  tokyonight: {
+    bg: "fill-slate-900",
+    title: "fill-blue-400",
+    text: "fill-teal-400",
+    icon: "fill-fuchsia-400",
+    border: "stroke-slate-800",
+  },
+  onedark: {
+    bg: "fill-slate-800",
+    title: "fill-amber-300",
+    text: "fill-slate-400",
+    icon: "fill-green-400",
+    border: "stroke-slate-700",
+  },
+  cobalt: {
+    bg: "fill-sky-950",
+    title: "fill-fuchsia-400",
+    text: "fill-emerald-300",
+    icon: "fill-blue-500",
+    border: "stroke-sky-900",
+  },
+  synthwave: {
+    bg: "fill-purple-950",
+    title: "fill-slate-200",
+    text: "fill-pink-500",
+    icon: "fill-orange-400",
+    border: "stroke-purple-900",
+  },
+  highcontrast: {
+    bg: "fill-black",
+    title: "fill-yellow-300",
+    text: "fill-white",
+    icon: "fill-cyan-400",
+    border: "stroke-zinc-800",
+  },
+  dracula: {
+    bg: "fill-slate-900",
+    title: "fill-pink-400",
+    text: "fill-slate-100",
+    icon: "fill-purple-400",
+    border: "stroke-slate-700",
+  },
+  monokai: {
+    bg: "fill-zinc-900",
+    title: "fill-pink-500",
+    text: "fill-zinc-100",
+    icon: "fill-lime-400",
+    border: "stroke-zinc-800",
+  },
+  nord: {
+    bg: "fill-slate-800",
+    title: "fill-cyan-400",
+    text: "fill-slate-300",
+    icon: "fill-blue-400",
+    border: "stroke-slate-700",
+  },
+  github_dark: {
+    bg: "fill-slate-900",
+    title: "fill-blue-400",
+    text: "fill-slate-300",
+    icon: "fill-blue-500",
+    border: "stroke-slate-800",
+  },
+  pearl: {
+    bg: "fill-slate-50",
+    title: "fill-slate-900",
+    text: "fill-slate-600",
+    icon: "fill-blue-600",
+    border: "stroke-slate-200",
+  },
+  slate: {
+    bg: "fill-slate-950",
+    title: "fill-slate-200",
+    text: "fill-slate-400",
+    icon: "fill-sky-400",
+    border: "stroke-slate-800",
+  },
+  forest: {
+    bg: "fill-emerald-950",
+    title: "fill-emerald-200",
+    text: "fill-emerald-400",
+    icon: "fill-emerald-500",
+    border: "stroke-emerald-900",
+  },
+  rose: {
+    bg: "fill-rose-950",
+    title: "fill-rose-200",
+    text: "fill-rose-300",
+    icon: "fill-rose-400",
+    border: "stroke-rose-900",
+  },
+  sand: {
+    bg: "fill-orange-50",
+    title: "fill-amber-900",
+    text: "fill-amber-700",
+    icon: "fill-amber-600",
+    border: "stroke-orange-200",
+  },
+  shiina: {
+    title: "fill-pink-400",
+    text: "fill-slate-100",
+    icon: "fill-sky-400",
+    bg: "#0B0C10",
+    border: "stroke-slate-800",
+  },
+  aurora: {
+    title: "fill-emerald-300",
+    text: "fill-slate-100",
+    icon: "fill-teal-400",
+    bg: "#020617",
+    border: "stroke-emerald-900",
+  },
+  oled: {
+    title: "fill-rose-400",
+    text: "fill-zinc-400",
+    icon: "fill-indigo-400",
+    bg: "#000000",
+    border: "stroke-zinc-900",
+  },
 };
 
 export function resolveColors(opts: {