Merge pull request #118 from deariary/fix/card-header-date-range

fix: replace username with date range in card header

Author: unhappychoice

README.md

@@ -98,7 +98,7 @@ Embed an animated news ticker in your GitHub Profile README. AI-generated headli
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://deariary.github.io/github-weekly-reporter/screenshots/card-dark.svg" />
   <source media="(prefers-color-scheme: light)" srcset="https://deariary.github.io/github-weekly-reporter/screenshots/card.svg" />
-  <img alt="Weekly News Ticker" src="https://deariary.github.io/github-weekly-reporter/screenshots/card.svg" />
+  <img alt="Weekly News Ticker" src="https://deariary.github.io/github-weekly-reporter/screenshots/card.svg" height="48" />
 </picture>
 
 Generated automatically as part of the `render` command. Add this to your profile README:
@@ -108,7 +108,7 @@ Generated automatically as part of the `render` command. Add this to your profil
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://{username}.github.io/{repo}/card-dark.svg" />
     <source media="(prefers-color-scheme: light)" srcset="https://{username}.github.io/{repo}/card.svg" />
-    <img alt="Weekly Report" src="https://{username}.github.io/{repo}/card.svg" />
+    <img alt="Weekly Report" src="https://{username}.github.io/{repo}/card.svg" height="48" />
   </picture>
 </a>
 ```

scripts/screenshots/card-dark.svg

@@ -47,10 +47,14 @@ vi.mock("../../renderer/rss.js", () => ({
   buildRSSFeed: (...args: unknown[]) => mockBuildRSSFeed(...args),
 }));
 
-// Mock week
-vi.mock("../../deployer/week.js", () => ({
-  getWeekId: () => ({ year: 2026, week: 14, path: "2026/W14" }),
-}));
+// Mock week (keep real isoWeekToMonday)
+vi.mock("../../deployer/week.js", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../deployer/week.js")>();
+  return {
+    ...actual,
+    getWeekId: () => ({ year: 2026, week: 14, path: "2026/W14" }),
+  };
+});
 
 const GITHUB_DATA_YAML = `
 username: testuser
@@ -167,6 +171,17 @@ describe("registerRender", () => {
 
     // Should generate index OG image
     expect(mockGenerateIndexOGImage).toHaveBeenCalled();
+
+    // Should write card SVGs with correct date range from weekId (2026 W14 = Mar 30 - Apr 5)
+    const cardCall = mockWriteFile.mock.calls.find(
+      (call: unknown[]) => typeof call[0] === "string" && (call[0] as string).endsWith("card.svg"),
+    );
+    expect(cardCall).toBeDefined();
+    const cardSvg = cardCall![1] as string;
+    expect(cardSvg).toContain("Week 14");
+    expect(cardSvg).toContain("Mar 30");
+    expect(cardSvg).toContain("Apr 5");
+    expect(cardSvg).toContain("2026");
   });
 
   it("exits when github-data.yaml is missing", async () => {

scripts/screenshots/card.svg

@@ -6,7 +6,7 @@ import { join } from "node:path";
 import { parse as parseYaml } from "yaml";
 import { renderReport } from "../../renderer/index.js";
 import { renderIndexPage, buildReportEntry, type ReportEntry } from "../../deployer/index-page.js";
-import { getWeekId } from "../../deployer/week.js";
+import { getWeekId, isoWeekToMonday } from "../../deployer/week.js";
 import { parseLocalDate } from "../../collector/date-range.js";
 import { generateOGImage, generateIndexOGImage } from "../../renderer/og-image.js";
 import { generateCard, generateDarkCard } from "../../renderer/card.js";
@@ -174,9 +174,16 @@ const run = async (options: RenderOptions): Promise<void> => {
   console.log(`OG image written to ${ogPath}`);
 
   // Generate animated SVG summary cards (light + dark)
+  // Compute Mon-Sun date range from ISO week number (independent of data file)
+  const fmtShort = (d: Date): string =>
+    d.toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
+  const monday = isoWeekToMonday(weekId.year, weekId.week);
+  const sunday = new Date(monday.getTime() + 6 * 86_400_000);
+  const dateRange = `${fmtShort(monday)} - ${fmtShort(sunday)}, ${weekId.year}`;
   const cardData = {
     username: githubData.username,
-    weekLabel: `${weekId.year} Week ${weekId.path.split("/")[1].replace("W", "")}`,
+    weekLabel: `Week ${weekId.path.split("/")[1].replace("W", "")}`,
+    dateRange,
     title: aiContent.title,
     summaries: aiContent.summaries,
     ticker: aiContent.ticker,

src/cli/commands/render.test.ts

@@ -200,7 +200,7 @@ ${opts.pagesUrl}
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="${opts.pagesUrl}/card-dark.svg" />
     <source media="(prefers-color-scheme: light)" srcset="${opts.pagesUrl}/card.svg" />
-    <img alt="Weekly Report" src="${opts.pagesUrl}/card.svg" />
+    <img alt="Weekly Report" src="${opts.pagesUrl}/card.svg" height="48" />
   </picture>
 </a>
 
@@ -211,7 +211,7 @@ Add this to your [GitHub Profile README](https://docs.github.com/en/account-and-
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="${opts.pagesUrl}/card-dark.svg" />
     <source media="(prefers-color-scheme: light)" srcset="${opts.pagesUrl}/card.svg" />
-    <img alt="Weekly Report" src="${opts.pagesUrl}/card.svg" />
+    <img alt="Weekly Report" src="${opts.pagesUrl}/card.svg" height="48" />
   </picture>
 </a>
 \`\`\`

src/cli/commands/render.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getWeekId, getCurrentWeekId } from "./week.js";
+import { getWeekId, getCurrentWeekId, isoWeekToMonday } from "./week.js";
 
 describe("getWeekId", () => {
   // -------------------------------------------------------------------
@@ -220,3 +220,63 @@ describe("getCurrentWeekId", () => {
     expect(result.path).toBe("2026/W01");
   });
 });
+
+describe("isoWeekToMonday", () => {
+  const dayOfWeek = (d: Date): string =>
+    d.toLocaleDateString("en-US", { weekday: "long", timeZone: "UTC" });
+  const fmt = (d: Date): string =>
+    d.toISOString().slice(0, 10);
+
+  it("returns Monday for 2026 W14 (Mar 30)", () => {
+    const mon = isoWeekToMonday(2026, 14);
+    expect(fmt(mon)).toBe("2026-03-30");
+    expect(dayOfWeek(mon)).toBe("Monday");
+  });
+
+  it("returns Monday for 2026 W1 (Dec 29, 2025)", () => {
+    // ISO 2026 W1 starts on Mon Dec 29 2025
+    const mon = isoWeekToMonday(2026, 1);
+    expect(fmt(mon)).toBe("2025-12-29");
+    expect(dayOfWeek(mon)).toBe("Monday");
+  });
+
+  it("returns Monday for 2025 W1 (Dec 30, 2024)", () => {
+    const mon = isoWeekToMonday(2025, 1);
+    expect(fmt(mon)).toBe("2024-12-30");
+    expect(dayOfWeek(mon)).toBe("Monday");
+  });
+
+  it("handles 2024 W1 (Jan 1, 2024 is Monday)", () => {
+    const mon = isoWeekToMonday(2024, 1);
+    expect(fmt(mon)).toBe("2024-01-01");
+    expect(dayOfWeek(mon)).toBe("Monday");
+  });
+
+  it("handles last week of year: 2026 W52", () => {
+    const mon = isoWeekToMonday(2026, 52);
+    expect(fmt(mon)).toBe("2026-12-21");
+    expect(dayOfWeek(mon)).toBe("Monday");
+  });
+
+  it("handles W53 in a long year (2020 has 53 weeks)", () => {
+    const mon = isoWeekToMonday(2020, 53);
+    expect(fmt(mon)).toBe("2020-12-28");
+    expect(dayOfWeek(mon)).toBe("Monday");
+  });
+
+  it("Sunday is always 6 days after Monday", () => {
+    const cases = [
+      { year: 2026, week: 1 },
+      { year: 2026, week: 14 },
+      { year: 2026, week: 52 },
+      { year: 2020, week: 53 },
+      { year: 2024, week: 1 },
+    ];
+    cases.forEach(({ year, week }) => {
+      const mon = isoWeekToMonday(year, week);
+      const sun = new Date(mon.getTime() + 6 * 86_400_000);
+      expect(dayOfWeek(mon)).toBe("Monday");
+      expect(dayOfWeek(sun)).toBe("Sunday");
+    });
+  });
+});

src/cli/commands/setup/workflows.ts

@@ -34,6 +34,14 @@ export const getWeekId = (
 
 // Current ISO week ID. Used by daily-fetch to store events for the
 // week that is still in progress.
+// Monday (00:00 UTC) of the given ISO week. Week 1 contains January 4.
+export const isoWeekToMonday = (year: number, week: number): Date => {
+  const jan4 = new Date(Date.UTC(year, 0, 4));
+  const dow = jan4.getUTCDay() || 7;
+  const w1Mon = new Date(jan4.getTime() - (dow - 1) * 86_400_000);
+  return new Date(w1Mon.getTime() + (week - 1) * 7 * 86_400_000);
+};
+
 export const getCurrentWeekId = (
   date: Date = new Date(),
   timezone: string = "UTC",

src/deployer/week.test.ts

@@ -3,7 +3,8 @@ import { generateCard, generateDarkCard } from "./card.js";
 
 const data = {
   username: "testuser",
-  weekLabel: "2026 Week 14",
+  weekLabel: "Week 14",
+  dateRange: "Mar 30 - Apr 5, 2026",
   title: "Auth refactor completed",
   summaries: [
     {
@@ -34,10 +35,10 @@ describe("generateCard", () => {
     expect(svg).toContain("WEEKLY NEWS");
   });
 
-  it("includes username and week label", () => {
+  it("includes week label and date range", () => {
     const svg = generateCard(data);
-    expect(svg).toContain("@testuser");
-    expect(svg).toContain("2026 Week 14");
+    expect(svg).toContain("Week 14");
+    expect(svg).toContain("Mar 30 - Apr 5, 2026");
   });
 
   it("includes summary headings with fallback labels", () => {
@@ -103,6 +104,6 @@ describe("generateDarkCard", () => {
   it("includes the same ticker content", () => {
     const svg = generateDarkCard(data);
     expect(svg).toContain("Commit Summary");
-    expect(svg).toContain("@testuser");
+    expect(svg).toContain("Week 14");
   });
 });

src/deployer/week.ts

@@ -7,6 +7,7 @@ import type { SummarySection, TickerItem } from "../types.js";
 export type CardData = {
   username: string;
   weekLabel: string;
+  dateRange: string; // e.g. "Mar 30 - Apr 5, 2026"
   title: string;
   summaries: SummarySection[];
   ticker?: TickerItem[];
@@ -47,7 +48,8 @@ const DARK: CardColors = {
 };
 
 const WIDTH = 900;
-const HEIGHT = 48;
+export const CARD_HEIGHT = 48;
+const HEIGHT = CARD_HEIGHT;
 const TICKER_H = 24;
 const REPEATS = 50;
 const SCROLL_PX_PER_SEC = 30;
@@ -136,11 +138,13 @@ const buildSVG = (data: CardData, colors: CardColors): string => {
   const labelY = (topH - labelH) / 2;
   const weekX = labelX + labelW + 6;
 
+  const dateX = weekX + data.weekLabel.length * 7 + 8;
+
   const topBar = [
     `<rect x="${labelX}" y="${labelY}" width="${labelW}" height="${labelH}" rx="2" fill="${colors.accentBg}"/>`,
     `<text x="${labelX + labelW / 2}" y="${midY}" font-family="${font}" text-anchor="middle" font-size="9" font-weight="800" fill="#fff" letter-spacing="0.08em">WEEKLY NEWS</text>`,
     `<text x="${weekX}" y="${midY}" font-family="${font}" font-size="11" font-weight="700" fill="${colors.text}">${escapeXml(data.weekLabel)}</text>`,
-    `<text x="${WIDTH}" y="${midY}" font-family="${font}" font-size="10" fill="${colors.textSecondary}" text-anchor="end">@${escapeXml(data.username)}</text>`,
+    `<text x="${dateX}" y="${midY}" font-family="${font}" font-size="10" fill="${colors.textSecondary}">${escapeXml(data.dateRange)}</text>`,
     `<line x1="0" y1="${topH}" x2="10000" y2="${topH}" stroke="${colors.border}" stroke-width="0.5"/>`,
   ].join("\n");