@urmzd/github-insights 2.0.0

package/src/components/section.test.tsx

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import {
+  renderDivider,
+  renderSection,
+  renderSectionHeader,
+  renderSubHeader,
+} from "./section.js";
+
+void Fragment;
+
+describe("renderSectionHeader", () => {
+  it("returns { svg, height }", () => {
+    const result = renderSectionHeader("Title", "Subtitle", 0);
+    expect(typeof result.svg).toBe("string");
+    expect(typeof result.height).toBe("number");
+  });
+
+  it("height is 42 with subtitle", () => {
+    expect(renderSectionHeader("T", "S", 0).height).toBe(42);
+  });
+
+  it("height is 24 without subtitle", () => {
+    expect(renderSectionHeader("T", undefined, 0).height).toBe(24);
+  });
+
+  it("svg contains uppercased title", () => {
+    const result = renderSectionHeader("Languages", "By bytes", 0);
+    expect(result.svg).toContain("LANGUAGES");
+  });
+});
+
+describe("renderSubHeader", () => {
+  it("returns height 14", () => {
+    expect(renderSubHeader("WEB FRAMEWORKS", 0).height).toBe(14);
+  });
+
+  it("svg contains text", () => {
+    expect(renderSubHeader("DATABASES", 0).svg).toContain("DATABASES");
+  });
+});
+
+describe("renderDivider", () => {
+  it("returns height 1", () => {
+    expect(renderDivider(100).height).toBe(1);
+  });
+
+  it("returns a line element", () => {
+    expect(renderDivider(100).svg).toContain("<line");
+  });
+});
+
+describe("renderSection", () => {
+  it("returns { svg, height } with render function", () => {
+    const result = renderSection("Title", "Sub", (y) => ({
+      svg: `<text y="${y}">body</text>`,
+      height: 50,
+    }));
+    expect(result.svg).toContain("TITLE");
+    expect(result.svg).toContain("body");
+    expect(result.height).toBeGreaterThan(0);
+  });
+
+  it("returns { svg, height } with items array", () => {
+    const items = [{ name: "Go", value: 10 }];
+    const result = renderSection("Tech", "Detected", items);
+    expect(result.svg).toContain("Go");
+  });
+});

package/src/components/section.tsx

@@ -0,0 +1,79 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { LAYOUT, THEME } from "../theme.js";
+import type { BarItem, RenderResult } from "../types.js";
+import { renderBarChart } from "./bar-chart.js";
+
+export function renderSectionHeader(
+  title: string,
+  subtitle: string | undefined,
+  y: number,
+): RenderResult {
+  const svg = (
+    <>
+      <text x={LAYOUT.padX} y={y + 16} className="t t-h">
+        {escapeXml(title.toUpperCase())}
+      </text>
+      {subtitle ? (
+        <text x={LAYOUT.padX} y={y + 32} className="t t-sub">
+          {escapeXml(subtitle)}
+        </text>
+      ) : (
+        ""
+      )}
+    </>
+  );
+  return { svg, height: subtitle ? 42 : 24 };
+}
+
+export function renderSubHeader(text: string, y: number): RenderResult {
+  const svg = (
+    <text x={LAYOUT.padX} y={y + 11} className="t t-subhdr">
+      {escapeXml(text.toUpperCase())}
+    </text>
+  );
+  return { svg, height: 14 };
+}
+
+export function renderDivider(y: number): RenderResult {
+  const svg = (
+    <line
+      x1={LAYOUT.padX}
+      y1={y}
+      x2={LAYOUT.padX + 760}
+      y2={y}
+      stroke={THEME.border}
+      stroke-opacity="0.6"
+      stroke-width="1"
+    />
+  );
+  return { svg, height: 1 };
+}
+
+export function renderSection(
+  title: string,
+  subtitle: string,
+  itemsOrRenderBody: ((y: number) => RenderResult) | BarItem[],
+  options: Record<string, unknown> = {},
+): RenderResult {
+  let y = LAYOUT.padY;
+  let svg = "";
+
+  const header = renderSectionHeader(title, subtitle, y);
+  svg += header.svg;
+  y += header.height;
+
+  if (typeof itemsOrRenderBody === "function") {
+    const body = itemsOrRenderBody(y);
+    svg += body.svg;
+    y += body.height + LAYOUT.padY;
+  } else {
+    const bars = renderBarChart(itemsOrRenderBody, y, options);
+    svg += bars.svg;
+    y += bars.height + LAYOUT.padY;
+  }
+
+  return { svg, height: y };
+}
+
+void Fragment;

package/src/components/stat-cards.test.tsx

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import type { StatItem } from "../types.js";
+import { renderStatCards } from "./stat-cards.js";
+
+void Fragment;
+
+describe("renderStatCards", () => {
+  const stats: StatItem[] = [
+    { label: "COMMITS", value: "500" },
+    { label: "PRS", value: "42" },
+  ];
+
+  it("returns { svg, height }", () => {
+    const result = renderStatCards(stats, 0);
+    expect(result).toHaveProperty("svg");
+    expect(result).toHaveProperty("height");
+  });
+
+  it("height is card height (72)", () => {
+    const result = renderStatCards(stats, 0);
+    expect(result.height).toBe(72);
+  });
+
+  it("svg contains labels and values", () => {
+    const result = renderStatCards(stats, 0);
+    expect(result.svg).toContain("COMMITS");
+    expect(result.svg).toContain("500");
+    expect(result.svg).toContain("PRS");
+    expect(result.svg).toContain("42");
+  });
+});

package/src/components/stat-cards.tsx

@@ -0,0 +1,57 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { RenderResult, StatItem } from "../types.js";
+
+export function renderStatCards(stats: StatItem[], y: number): RenderResult {
+  const { padX } = LAYOUT;
+  const cardW = 140;
+  const cardH = 72;
+  const gap = 15;
+  const colors = [
+    BAR_COLORS[0],
+    BAR_COLORS[1],
+    BAR_COLORS[2],
+    BAR_COLORS[4],
+    BAR_COLORS[5],
+  ];
+
+  const svg = (
+    <>
+      {stats.map((stat, i) => {
+        const cx = padX + i * (cardW + gap);
+        const color = colors[i % colors.length];
+
+        return (
+          <>
+            <rect
+              x={cx}
+              y={y}
+              width={cardW}
+              height={cardH}
+              rx="8"
+              fill={THEME.cardBg}
+              stroke={THEME.border}
+              stroke-width="1"
+            />
+            <circle cx={cx + 14} cy={y + 16} r="4" fill={color} />
+            <text x={cx + 24} y={y + 20} className="t t-stat-label">
+              {escapeXml(stat.label)}
+            </text>
+            <text
+              x={cx + cardW / 2}
+              y={y + 52}
+              fill={color}
+              className="t t-stat-value"
+              text-anchor="middle"
+            >
+              {escapeXml(String(stat.value))}
+            </text>
+          </>
+        );
+      })}
+    </>
+  );
+
+  return { svg, height: cardH };
+}

package/src/components/style-defs.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { Fragment, h } from "../jsx-factory.js";
+import { StyleDefs } from "./style-defs.js";
+
+void Fragment;
+
+describe("StyleDefs", () => {
+  it("returns a string containing <defs> and <style>", () => {
+    const result = StyleDefs();
+    expect(result).toContain("<defs>");
+    expect(result).toContain("<style>");
+  });
+
+  it("contains expected CSS classes", () => {
+    const result = StyleDefs();
+    expect(result).toContain(".t-h");
+    expect(result).toContain(".t-label");
+    expect(result).toContain(".t-value");
+    expect(result).toContain(".t-pill");
+  });
+
+  it("contains font-family declaration", () => {
+    const result = StyleDefs();
+    expect(result).toContain("font-family:");
+  });
+});

package/src/components/style-defs.tsx

@@ -0,0 +1,27 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { FONT, THEME } from "../theme.js";
+
+export function StyleDefs(): string {
+  return (
+    <defs>
+      <style>
+        {`
+  .t { font-family: ${FONT}; }
+  .t-h { font-size: 13px; fill: ${THEME.text}; letter-spacing: 1.5px; font-weight: 600; }
+  .t-sub { font-size: 11px; fill: ${THEME.muted}; }
+  .t-label { font-size: 12px; fill: ${THEME.secondary}; }
+  .t-value { font-size: 11px; fill: ${THEME.muted}; }
+  .t-subhdr { font-size: 11px; fill: ${THEME.secondary}; letter-spacing: 1px; font-weight: 600; }
+  .t-stat-label { font-size: 10px; fill: ${THEME.secondary}; font-weight: 600; }
+  .t-stat-value { font-size: 22px; font-weight: 700; }
+  .t-card-title { font-size: 12px; fill: ${THEME.link}; font-weight: 700; }
+  .t-card-detail { font-size: 11px; fill: ${THEME.secondary}; }
+  .t-pill { font-size: 11px; font-weight: 600; }
+  .t-bullet { font-size: 12px; fill: ${THEME.text}; }
+`}
+      </style>
+    </defs>
+  );
+}
+
+void Fragment;

package/src/components/tech-highlights.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import type { TechHighlight } from "../types.js";
+import { renderTechHighlights } from "./tech-highlights.js";
+
+describe("renderTechHighlights", () => {
+  it("renders category names in uppercase", () => {
+    const highlights: TechHighlight[] = [
+      { category: "Frontend", items: ["React", "Vue"], score: 85 },
+      { category: "Backend", items: ["Express", "Django"], score: 70 },
+    ];
+    const { svg } = renderTechHighlights(highlights, 0);
+    expect(svg).toContain("FRONTEND");
+    expect(svg).toContain("BACKEND");
+  });
+
+  it("renders skill items joined with middle dot", () => {
+    const highlights: TechHighlight[] = [
+      {
+        category: "Languages",
+        items: ["TypeScript", "Python", "Go"],
+        score: 90,
+      },
+    ];
+    const { svg } = renderTechHighlights(highlights, 0);
+    expect(svg).toContain("TypeScript");
+    expect(svg).toContain("Python");
+    expect(svg).toContain("Go");
+    expect(svg).toContain("\u00B7");
+  });
+
+  it("renders score percentages", () => {
+    const highlights: TechHighlight[] = [
+      { category: "Web Dev", items: ["React", "Astro"], score: 85 },
+      { category: "DevOps", items: ["Docker"], score: 60 },
+    ];
+    const { svg } = renderTechHighlights(highlights, 0);
+    expect(svg).toContain("85%");
+    expect(svg).toContain("60%");
+  });
+
+  it("returns height > 0 for non-empty input", () => {
+    const highlights: TechHighlight[] = [
+      { category: "Tools", items: ["Docker", "Kubernetes"], score: 75 },
+    ];
+    const { height } = renderTechHighlights(highlights, 0);
+    expect(height).toBeGreaterThan(0);
+  });
+
+  it("returns empty result for empty input", () => {
+    const result = renderTechHighlights([], 0);
+    expect(result).toEqual({ svg: "", height: 0 });
+  });
+
+  it("clamps out-of-range scores", () => {
+    const highlights: TechHighlight[] = [
+      { category: "Over", items: ["A"], score: 150 },
+      { category: "Under", items: ["B"], score: -10 },
+    ];
+    const { svg } = renderTechHighlights(highlights, 0);
+    expect(svg).toContain("100%");
+    expect(svg).toContain("0%");
+  });
+});

package/src/components/tech-highlights.tsx

@@ -0,0 +1,109 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml, truncate, wrapText } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT } from "../theme.js";
+import type { RenderResult, TechHighlight } from "../types.js";
+
+export function renderTechHighlights(
+  highlights: TechHighlight[],
+  y: number,
+): RenderResult {
+  if (highlights.length === 0) return { svg: "", height: 0 };
+
+  const { padX, barHeight, barMaxWidth } = LAYOUT;
+  const labelMaxChars = 60;
+  const skillMaxChars = 120;
+  const skillLineHeight = 16;
+  const labelLineHeight = 26;
+  const scoreX = padX + barMaxWidth + 10;
+  const skillY = 16;
+  const rowGap = 14;
+
+  let svg = "";
+  let height = 0;
+
+  for (let hi = 0; hi < highlights.length; hi++) {
+    const group = highlights[hi];
+    const color = BAR_COLORS[hi % BAR_COLORS.length];
+    const score = Math.max(0, Math.min(100, group.score));
+    const fillWidth = (score / 100) * barMaxWidth;
+
+    const baseY = y + height;
+
+    // Category label (uppercase, left-aligned, on its own line)
+    svg += (
+      <text x={padX} y={baseY + 14} className="t t-subhdr">
+        {escapeXml(truncate(group.category.toUpperCase(), labelMaxChars))}
+      </text>
+    );
+
+    // Bar track (full width, low opacity)
+    svg += (
+      <rect
+        x={padX}
+        y={baseY + labelLineHeight}
+        width={barMaxWidth}
+        height={barHeight}
+        rx={4}
+        fill={color}
+        fill-opacity="0.15"
+      />
+    );
+
+    // Bar fill (proportional to score)
+    if (fillWidth > 0) {
+      svg += (
+        <rect
+          x={padX}
+          y={baseY + labelLineHeight}
+          width={fillWidth}
+          height={barHeight}
+          rx={4}
+          fill={color}
+          fill-opacity="0.85"
+        />
+      );
+    }
+
+    // Score label (right of bar)
+    svg += (
+      <text
+        x={scoreX}
+        y={baseY + labelLineHeight + barHeight / 2 + 4}
+        className="t t-value"
+      >
+        {`${score}%`}
+      </text>
+    );
+
+    // Skill items text (below bar, muted, wrapped to avoid overflow)
+    const skillText = group.items
+      .map((item) => truncate(item, 30))
+      .join(" \u00B7 ");
+
+    const skillLines = wrapText(skillText, skillMaxChars);
+    for (let li = 0; li < skillLines.length; li++) {
+      svg += (
+        <text
+          x={padX}
+          y={
+            baseY + labelLineHeight + barHeight + skillY + li * skillLineHeight
+          }
+          className="t t-card-detail"
+        >
+          {escapeXml(skillLines[li])}
+        </text>
+      );
+    }
+
+    height +=
+      labelLineHeight +
+      barHeight +
+      skillY +
+      (skillLines.length - 1) * skillLineHeight +
+      rowGap;
+  }
+
+  return { svg, height };
+}
+
+void Fragment;

package/src/config.test.ts

@@ -0,0 +1,127 @@
+import { describe, expect, it } from "vitest";
+import { parseUserConfig } from "./config.js";
+
+describe("parseUserConfig", () => {
+  it("parses both fields", () => {
+    const raw = `title: "Senior Backend Engineer"\ndesired_title: "Staff Engineer"`;
+    expect(parseUserConfig(raw)).toEqual({
+      title: "Senior Backend Engineer",
+      desired_title: "Staff Engineer",
+    });
+  });
+
+  it("parses title only", () => {
+    const raw = `title: "Software Engineer"`;
+    expect(parseUserConfig(raw)).toEqual({ title: "Software Engineer" });
+  });
+
+  it("returns empty config for empty string", () => {
+    expect(parseUserConfig("")).toEqual({});
+  });
+
+  it("trims whitespace-only values", () => {
+    const raw = `title: "  "\ndesired_title: "Staff Engineer"`;
+    expect(parseUserConfig(raw)).toEqual({ desired_title: "Staff Engineer" });
+  });
+
+  it("trims surrounding whitespace from values", () => {
+    const raw = `title: "  Senior Engineer  "`;
+    expect(parseUserConfig(raw)).toEqual({ title: "Senior Engineer" });
+  });
+
+  it("ignores unknown fields", () => {
+    const raw = `title: "SWE"\nfoo: "bar"\nbaz: 42`;
+    expect(parseUserConfig(raw)).toEqual({ title: "SWE" });
+  });
+
+  it("throws on invalid YAML", () => {
+    expect(() => parseUserConfig("title: [invalid")).toThrow();
+  });
+
+  it("parses name", () => {
+    const raw = `name: "Urmzd Maharramoff"`;
+    expect(parseUserConfig(raw)).toEqual({ name: "Urmzd Maharramoff" });
+  });
+
+  it("parses pronunciation", () => {
+    const raw = `pronunciation: "/ˈʊrm.zəd/"`;
+    expect(parseUserConfig(raw)).toEqual({ pronunciation: "/ˈʊrm.zəd/" });
+  });
+
+  it("parses bio", () => {
+    const raw = `bio: "Building tools for developers"`;
+    expect(parseUserConfig(raw)).toEqual({
+      bio: "Building tools for developers",
+    });
+  });
+
+  it("parses preamble", () => {
+    const raw = `preamble: "PREAMBLE.md"`;
+    expect(parseUserConfig(raw)).toEqual({ preamble: "PREAMBLE.md" });
+  });
+
+  it("skips whitespace-only name", () => {
+    const raw = `name: "   "`;
+    expect(parseUserConfig(raw)).toEqual({});
+  });
+
+  it("parses template field", () => {
+    const raw = `template: "modern"`;
+    expect(parseUserConfig(raw)).toEqual({ template: "modern" });
+  });
+
+  it("normalizes template to lowercase", () => {
+    const raw = `template: "Modern"`;
+    expect(parseUserConfig(raw)).toEqual({ template: "modern" });
+  });
+
+  it("ignores unknown template values", () => {
+    const raw = `template: "fancy"`;
+    expect(parseUserConfig(raw)).toEqual({});
+  });
+
+  it("parses sections array", () => {
+    const raw = `sections:\n  - pulse\n  - languages`;
+    expect(parseUserConfig(raw)).toEqual({
+      sections: ["pulse", "languages"],
+    });
+  });
+
+  it("filters out non-string sections entries", () => {
+    const raw = `sections:\n  - pulse\n  - 42\n  - languages`;
+    expect(parseUserConfig(raw)).toEqual({
+      sections: ["pulse", "languages"],
+    });
+  });
+
+  it("ignores empty sections array", () => {
+    const raw = `sections: []`;
+    expect(parseUserConfig(raw)).toEqual({});
+  });
+
+  it("parses all fields together", () => {
+    const raw = [
+      `name: "Urmzd Maharramoff"`,
+      `pronunciation: "/ˈʊrm.zəd/"`,
+      `title: "Senior Backend Engineer"`,
+      `desired_title: "Staff Engineer"`,
+      `bio: "Building tools for developers"`,
+      `preamble: "PREAMBLE.md"`,
+    ].join("\n");
+    expect(parseUserConfig(raw)).toEqual({
+      name: "Urmzd Maharramoff",
+      pronunciation: "/ˈʊrm.zəd/",
+      title: "Senior Backend Engineer",
+      desired_title: "Staff Engineer",
+      bio: "Building tools for developers",
+      preamble: "PREAMBLE.md",
+    });
+  });
+
+  it("parses TOML format when specified", () => {
+    const raw = `title = "Senior Backend Engineer"`;
+    expect(parseUserConfig(raw, "toml")).toEqual({
+      title: "Senior Backend Engineer",
+    });
+  });
+});

package/src/config.ts

@@ -0,0 +1,103 @@
+import { existsSync, readFileSync } from "node:fs";
+import * as toml from "smol-toml";
+import * as yaml from "yaml";
+import type { TemplateName, UserConfig } from "./types.js";
+
+const VALID_TEMPLATES = new Set<string>(["classic", "modern", "minimal"]);
+
+function extractConfig(parsed: Record<string, unknown>): UserConfig {
+  const config: UserConfig = {};
+
+  if (typeof parsed.title === "string" && parsed.title.trim()) {
+    config.title = parsed.title.trim();
+  }
+  if (typeof parsed.desired_title === "string" && parsed.desired_title.trim()) {
+    config.desired_title = parsed.desired_title.trim();
+  }
+  if (typeof parsed.name === "string" && parsed.name.trim()) {
+    config.name = parsed.name.trim();
+  }
+  if (
+    typeof parsed.pronunciation === "string" &&
+    parsed.pronunciation.trim()
+  ) {
+    config.pronunciation = parsed.pronunciation.trim();
+  }
+  if (typeof parsed.bio === "string" && parsed.bio.trim()) {
+    config.bio = parsed.bio.trim();
+  }
+  if (typeof parsed.preamble === "string" && parsed.preamble.trim()) {
+    config.preamble = parsed.preamble.trim();
+  }
+  if (typeof parsed.template === "string" && parsed.template.trim()) {
+    const t = parsed.template.trim().toLowerCase();
+    if (VALID_TEMPLATES.has(t)) {
+      config.template = t as TemplateName;
+    } else {
+      console.warn(
+        `Unknown template "${t}", falling back to "classic". Valid: ${[...VALID_TEMPLATES].join(", ")}`,
+      );
+    }
+  }
+  if (Array.isArray(parsed.sections)) {
+    const sections = parsed.sections
+      .filter((s): s is string => typeof s === "string" && s.trim().length > 0)
+      .map((s) => s.trim().toLowerCase());
+    if (sections.length > 0) {
+      config.sections = sections;
+    }
+  }
+
+  return config;
+}
+
+export function parseUserConfig(raw: string, format: "yaml" | "toml" = "yaml"): UserConfig {
+  const parsed =
+    format === "toml"
+      ? toml.parse(raw)
+      : (yaml.parse(raw) as Record<string, unknown>) ?? {};
+  return extractConfig(parsed);
+}
+
+export function loadUserConfig(configPath?: string): UserConfig {
+  const resolved = configPath
+    ? { path: configPath, format: detectFormat(configPath) }
+    : resolveConfigPath();
+  try {
+    const raw = readFileSync(resolved.path, "utf-8");
+    return parseUserConfig(raw, resolved.format);
+  } catch (err: unknown) {
+    if (
+      err instanceof Error &&
+      "code" in err &&
+      (err as NodeJS.ErrnoException).code === "ENOENT"
+    ) {
+      return {};
+    }
+    const msg = err instanceof Error ? err.message : String(err);
+    console.warn(
+      `Warning: failed to parse config file "${resolved.path}": ${msg}`,
+    );
+    return {};
+  }
+}
+
+function detectFormat(path: string): "yaml" | "toml" {
+  return path.endsWith(".toml") ? "toml" : "yaml";
+}
+
+function resolveConfigPath(): { path: string; format: "yaml" | "toml" } {
+  if (existsSync("github-insights.yml")) {
+    return { path: "github-insights.yml", format: "yaml" };
+  }
+  if (existsSync("github-insights.yaml")) {
+    return { path: "github-insights.yaml", format: "yaml" };
+  }
+  if (existsSync(".github-metrics.toml")) {
+    console.warn(
+      'Warning: ".github-metrics.toml" is deprecated. Please rename it to "github-insights.yml".',
+    );
+    return { path: ".github-metrics.toml", format: "toml" };
+  }
+  return { path: "github-insights.yml", format: "yaml" };
+}