headreel 1.1.0 → 1.2.0

package/README.md

@@ -87,7 +87,7 @@ The Action and the command use the same settings.
 | `handle`         | `--handle`             | empty                           | A handle, for styles that show one.                                                                               |
 | `options`        | `--option <key=value>` | empty                           | Style options. Action: one `key: value` on each line. Command: repeat the flag, for example `--option beacons=5`. |
 | `output`         | `--out`                | `headreel.gif`                  | The path of the banner.                                                                                           |
-| `token`          | `--token`              | `github.token`                  | The token that reads your contribution data.                                                                      |
+| `token`          | `--token`              | `github.token`                  | The token that reads your GitHub data.                                                                            |
 | `publish_mode`   | -                      | `commit`                        | `commit` adds a commit on every update. `branch` keeps one commit on its own branch, replaced on every update.    |
 | `commit_to`      | -                      | checked-out branch / `headreel` | The branch that gets the banner. The default is `headreel` in `branch` mode.                                      |
 | `commit_message` | -                      | `chore: update headreel banner` | The commit message.                                                                                               |
@@ -105,7 +105,19 @@ Empty settings do not show on the banner. Your name comes from your GitHub profi
 | --------- | ------- | -------------------------------------------------- |
 | `beacons` | `8`     | The number of busiest days with a beacon, 0 to 10. |
 
-Set an option with `options: 'beacons: 5'` in the Action, or `--option beacons=5` in the command.
+### Repo Galaxy
+
+`repo-galaxy`: your most starred repositories orbit a sun. A bigger planet has more stars, and its color is the repository's main language. Repositories you pushed to recently orbit closer to the sun.
+
+![Repo Galaxy banner](https://raw.githubusercontent.com/arifszn/headreel/main/docs/samples/repo-galaxy.gif)
+
+| Option          | Default | Description                                                           |
+| --------------- | ------- | --------------------------------------------------------------------- |
+| `max_repos`     | `20`    | The number of repositories to show, 5 to 30.                          |
+| `include_forks` | `false` | Show forked repositories too.                                         |
+| `labels`        | `top3`  | `top3` names the three most starred repositories. `none` hides names. |
+
+Set an option with `options: 'beacons: 5'` in the Action, or `--option beacons=5` in the command. For more than one option in the Action, put each on its own line.
 
 ## Troubleshooting
 

package/dist/core/data/repos.js

@@ -0,0 +1,87 @@
+import { z } from 'zod';
+/** Most repos any style shows; each list below fetches this many. */
+export const MAX_REPOS = 30;
+const REPO_FIELDS = /* GraphQL */ `
+  nodes {
+    name
+    isFork
+    stargazerCount
+    pushedAt
+    primaryLanguage {
+      name
+      color
+    }
+  }
+`;
+// Two lists in one query: top own repos, and top repos including forks. Their
+// union holds the top MAX_REPOS for either `include_forks` setting.
+const QUERY = /* GraphQL */ `
+  query Repos($login: String!, $first: Int!) {
+    user(login: $login) {
+      own: repositories(
+        first: $first
+        ownerAffiliations: OWNER
+        privacy: PUBLIC
+        isFork: false
+        orderBy: { field: STARGAZERS, direction: DESC }
+      ) {
+        ${REPO_FIELDS}
+      }
+      all: repositories(
+        first: $first
+        ownerAffiliations: OWNER
+        privacy: PUBLIC
+        orderBy: { field: STARGAZERS, direction: DESC }
+      ) {
+        ${REPO_FIELDS}
+      }
+    }
+  }
+`;
+const repoSchema = z.object({
+    name: z.string().min(1),
+    fork: z.boolean(),
+    stars: z.number().int().min(0),
+    /** Primary language; `color` is the linguist color, null when it has none. */
+    language: z
+        .object({
+        name: z.string().min(1),
+        color: z
+            .string()
+            .regex(/^#[0-9a-fA-F]{6}$/)
+            .nullable(),
+    })
+        .nullable(),
+    /** Last push, YYYY-MM-DD. */
+    pushedAt: z.iso.date(),
+});
+export const reposSchema = z.object({
+    /** Fetch date, YYYY-MM-DD (UTC). Repo ages are measured from here, so renders stay stable. */
+    asOf: z.iso.date(),
+    /** Most starred first, ties by name. */
+    repos: z.array(repoSchema),
+});
+/** Stars descending, then name, so ties never depend on API order. */
+export function compareRepos(a, b) {
+    return b.stars - a.stars || a.name.localeCompare(b.name);
+}
+export async function fetchRepos(client, login, now) {
+    const { user } = await client(QUERY, { login, first: MAX_REPOS });
+    const byName = new Map();
+    for (const n of [...user.own.nodes, ...user.all.nodes]) {
+        byName.set(n.name, {
+            name: n.name,
+            fork: n.isFork,
+            stars: n.stargazerCount,
+            language: n.primaryLanguage
+                ? { name: n.primaryLanguage.name, color: n.primaryLanguage.color }
+                : null,
+            // A repo never pushed to has no pushedAt; it counts as the oldest.
+            pushedAt: (n.pushedAt ?? '1970-01-01').slice(0, 10),
+        });
+    }
+    return {
+        asOf: now.toISOString().slice(0, 10),
+        repos: [...byName.values()].sort(compareRepos),
+    };
+}

package/dist/core/pipeline.js

@@ -16,7 +16,13 @@ export async function renderBanner(style, input) {
     const options = parseOptions(style, input.options);
     registerFonts();
     const rng = createRng(hashSeed(`${input.login}:${style.id}`));
-    const sketch = style.createSketch({ data: input.data, options, identity: input.identity, rng });
+    const sketch = style.createSketch({
+        login: input.login,
+        data: input.data,
+        options,
+        identity: input.identity,
+        rng,
+    });
     const frames = await renderFrames(sketch, { ...CANVAS, frames: style.frames });
     return encodeGif(frames, { ...CANVAS, fps: style.fps });
 }

package/dist/styles/contribution-city/index.js

@@ -6,7 +6,7 @@ export const contributionCity = {
     id: 'contribution-city',
     fps: 25,
     frames: 150,
-    data: { schema: contributionsSchema, fetch: fetchContributions },
+    data: { name: 'contributions', schema: contributionsSchema, fetch: fetchContributions },
     options,
     createSketch({ data, options, identity, rng }) {
         return createCitySketch(buildCity(data, rng, options.beacons), identity, rng);

package/dist/styles/index.js

@@ -1,5 +1,7 @@
 import { contributionCity } from './contribution-city/index.js';
+import { repoGalaxy } from './repo-galaxy/index.js';
 /** Built-in styles, keyed by id. */
 export const styles = {
     [contributionCity.id]: contributionCity,
+    [repoGalaxy.id]: repoGalaxy,
 };

package/dist/styles/repo-galaxy/galaxy.js

@@ -0,0 +1,149 @@
+import { compareRepos } from '../../core/data/repos.js';
+export const LAYOUT = {
+    width: 1280,
+    height: 400,
+    /** Sun, center of every orbit. */
+    cx: 872,
+    cy: 206,
+    /** Tilt of the orbital plane on screen, radians. */
+    tilt: -0.1,
+    /** Orbit ellipse height / width: how far the plane leans away from the viewer. */
+    aspect: 0.3,
+    /** Planet radius range, px, before depth scaling. */
+    minR: 3,
+    maxR: 13,
+    stars: 220,
+    dust: 2400,
+    grain: 2600,
+};
+/**
+ * Orbits by time since the last push: recent work circles close to the sun.
+ * `revs` are whole revolutions per loop, so every orbit closes seamlessly.
+ */
+export const RINGS = [
+    { label: '30 DAYS', maxDays: 30, rx: 132, revs: 3 },
+    { label: '6 MONTHS', maxDays: 183, rx: 206, revs: 2 },
+    { label: '2 YEARS', maxDays: 730, rx: 282, revs: 1 },
+    { label: 'OLDER', maxDays: Infinity, rx: 360, revs: 1 },
+];
+/** Planets without a language, and languages without a linguist color. */
+const NEUTRAL = [154, 163, 181];
+const DAY_MS = 86_400_000;
+/** Linguist colors include near-black ones; lift them so every planet reads on the night sky. */
+export function planetColor(hex) {
+    if (!hex)
+        return NEUTRAL;
+    const n = Number.parseInt(hex.slice(1), 16);
+    const rgb = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    const [h, s, l] = rgbToHsl(rgb);
+    return hslToRgb(h, Math.min(s, 0.85), Math.max(l, 0.52));
+}
+export function ringFor(pushedAt, asOf) {
+    const days = (Date.parse(`${asOf}T00:00:00Z`) - Date.parse(`${pushedAt}T00:00:00Z`)) / DAY_MS;
+    return RINGS.findIndex((r) => days <= r.maxDays);
+}
+export function selectRepos(data, options) {
+    return data.repos
+        .filter((r) => options.include_forks || !r.fork)
+        .sort(compareRepos)
+        .slice(0, options.max_repos);
+}
+export function buildGalaxy(data, rng, options) {
+    const repos = selectRepos(data, options);
+    const maxStars = Math.max(0, ...repos.map((r) => r.stars));
+    const scale = Math.log1p(maxStars);
+    const planets = repos.map((repo, rank) => ({
+        name: repo.name,
+        stars: repo.stars,
+        rank,
+        ring: ringFor(repo.pushedAt, data.asOf),
+        r: scale > 0
+            ? LAYOUT.minR + (LAYOUT.maxR - LAYOUT.minR) * (Math.log1p(repo.stars) / scale)
+            : LAYOUT.minR + 0.5,
+        color: planetColor(repo.language?.color),
+        angle: 0,
+        // A repo without stars is not among the most starred, whatever its rank.
+        label: options.labels === 'top3' && rank < 3 && repo.stars > 0,
+    }));
+    // Spread each ring's planets evenly from a seeded start, with a little jitter.
+    RINGS.forEach((_, ring) => {
+        const members = planets.filter((p) => p.ring === ring);
+        const start = rng() * Math.PI * 2;
+        const step = (Math.PI * 2) / Math.max(1, members.length);
+        members.forEach((p, i) => {
+            p.angle = start + i * step + (rng() - 0.5) * step * 0.3;
+        });
+    });
+    const languages = new Map();
+    for (const repo of repos) {
+        if (!repo.language)
+            continue;
+        const entry = languages.get(repo.language.name) ?? {
+            name: repo.language.name,
+            color: planetColor(repo.language.color),
+            count: 0,
+        };
+        entry.count++;
+        languages.set(entry.name, entry);
+    }
+    const stars = Array.from({ length: LAYOUT.stars }, () => ({
+        x: rng() * LAYOUT.width,
+        y: rng() * LAYOUT.height,
+        s: rng() < 0.07 ? 2 : 1,
+        a: 30 + rng() * 140,
+        cycles: 1 + Math.floor(rng() * 3),
+        off: rng(),
+    }));
+    // A faint band of dust crossing behind the orbits, bottom left to top right.
+    const dust = Array.from({ length: LAYOUT.dust }, () => {
+        const t = rng();
+        const spread = (rng() + rng() + rng() - 1.5) * 70;
+        return {
+            x: 380 + t * 960 + spread * 0.4,
+            y: 430 - t * 470 + spread,
+            a: 6 + rng() * 26,
+            warm: rng() < 0.35,
+        };
+    });
+    return {
+        planets,
+        totalStars: repos.reduce((sum, r) => sum + r.stars, 0),
+        languages: [...languages.values()]
+            .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name))
+            .slice(0, 3),
+        stars,
+        dust,
+    };
+}
+function rgbToHsl([r, g, b]) {
+    const [rn, gn, bn] = [r / 255, g / 255, b / 255];
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    if (max === min)
+        return [0, 0, l];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = max === rn
+        ? (gn - bn) / d + (gn < bn ? 6 : 0)
+        : max === gn
+            ? (bn - rn) / d + 2
+            : (rn - gn) / d + 4;
+    return [h / 6, s, l];
+}
+function hslToRgb(h, s, l) {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const channel = (t) => {
+        const k = (t + 1) % 1;
+        const v = k < 1 / 6
+            ? p + (q - p) * 6 * k
+            : k < 1 / 2
+                ? q
+                : k < 2 / 3
+                    ? p + (q - p) * (2 / 3 - k) * 6
+                    : p;
+        return Math.round(v * 255);
+    };
+    return [channel(h + 1 / 3), channel(h), channel(h - 1 / 3)];
+}

package/dist/styles/repo-galaxy/index.js

@@ -0,0 +1,14 @@
+import { fetchRepos, reposSchema } from '../../core/data/repos.js';
+import { buildGalaxy } from './galaxy.js';
+import { options } from './options.js';
+import { createGalaxySketch } from './sketch.js';
+export const repoGalaxy = {
+    id: 'repo-galaxy',
+    fps: 25,
+    frames: 300,
+    data: { name: 'repos', schema: reposSchema, fetch: fetchRepos },
+    options,
+    createSketch({ login, data, options, identity, rng }) {
+        return createGalaxySketch(buildGalaxy(data, rng, options), identity, login, rng);
+    },
+};

package/dist/styles/repo-galaxy/options.js

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+import { MAX_REPOS } from '../../core/data/repos.js';
+export const options = z
+    .object({
+    /** Number of repositories shown, most starred first. */
+    max_repos: z.coerce.number().int().min(5).max(MAX_REPOS).default(20),
+    /** Include forked repositories. */
+    include_forks: z.stringbool().default(false),
+    /** Name the three most starred repositories. */
+    labels: z.enum(['top3', 'none']).default('top3'),
+})
+    .strict();

package/dist/styles/repo-galaxy/sketch.js

@@ -0,0 +1,407 @@
+import { LAYOUT, RINGS } from './galaxy.js';
+const PALETTE = {
+    skyTop: '#060914',
+    skyMid: '#0d1228',
+    skyFloor: '#0a0d1c',
+    /** Shadow side of planets. */
+    night: [6, 9, 20],
+    brass: [217, 178, 111],
+    sun: [255, 243, 214],
+    ink: '#f2ede3',
+    muted: '#8e93a8',
+};
+const SANS = 'Space Grotesk';
+const MONO = 'JetBrains Mono';
+const TEXT_X = 48;
+const PROMPT = '~/repos';
+/**
+ * Rays around the sun, long and short in turn. They rotate by one long-short
+ * pair (two spacings) per loop, so the loop closes.
+ */
+const RAYS = 12;
+/** Trail length along the orbit, px. */
+const TRAIL = 110;
+/** Where orbit names sit: the far side, left of the sun's crown. */
+const RING_LABEL_ANGLE = -Math.PI / 2 - 0.42;
+const { width: W, height: H, cx: CX, cy: CY, tilt: TILT, aspect: ASPECT } = LAYOUT;
+const COS_T = Math.cos(TILT);
+const SIN_T = Math.sin(TILT);
+/** 0..1, periodic in `phase`, so every animated value loops seamlessly. */
+function wave(phase, cycles, off) {
+    return 0.5 + 0.5 * Math.sin(Math.PI * 2 * (phase * cycles + off));
+}
+/** Screen position of angle `a` on an orbit of half-width `rx`. */
+function project(rx, a) {
+    const x = rx * Math.cos(a);
+    const y = rx * ASPECT * Math.sin(a);
+    return { x: CX + x * COS_T - y * SIN_T, y: CY + x * SIN_T + y * COS_T };
+}
+/** -1 at the far side of the plane, 1 at the near side. */
+const depthOf = (a) => Math.sin(a);
+function rgba([r, g, b], a) {
+    return `rgba(${r},${g},${b},${a.toFixed(3)})`;
+}
+/** 1234 -> "1.2k" */
+function compact(n) {
+    if (n < 1000)
+        return String(n);
+    const k = n / 1000;
+    return `${k >= 100 ? Math.round(k) : Number(k.toFixed(1))}k`;
+}
+/** "https://www.example.com/" -> "www.example.com" */
+function displayUrl(url) {
+    return url.replace(/^[a-z]+:\/\//i, '').replace(/\/+$/, '');
+}
+function truncate(text, max) {
+    return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+export function createGalaxySketch(galaxy, identity, login, rng) {
+    const grainSeed = Math.floor(rng() * 2 ** 31);
+    let sky;
+    let grain;
+    function renderSky(p) {
+        const g = p.createGraphics(W, H);
+        g.pixelDensity(1);
+        const ctx = g.drawingContext;
+        const grad = ctx.createLinearGradient(0, 0, 0, H);
+        grad.addColorStop(0, PALETTE.skyTop);
+        grad.addColorStop(0.7, PALETTE.skyMid);
+        grad.addColorStop(1, PALETTE.skyFloor);
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, W, H);
+        // Cool haze on the far right, warm light around the sun.
+        const haze = ctx.createRadialGradient(1180, 60, 0, 1180, 60, 520);
+        haze.addColorStop(0, 'rgba(111,120,220,0.10)');
+        haze.addColorStop(1, 'rgba(111,120,220,0)');
+        ctx.fillStyle = haze;
+        ctx.fillRect(0, 0, W, H);
+        const warm = ctx.createRadialGradient(CX, CY, 0, CX, CY, 420);
+        warm.addColorStop(0, 'rgba(217,178,111,0.20)');
+        warm.addColorStop(0.35, 'rgba(217,178,111,0.06)');
+        warm.addColorStop(1, 'rgba(217,178,111,0)');
+        ctx.fillStyle = warm;
+        ctx.fillRect(0, 0, W, H);
+        for (const d of galaxy.dust) {
+            ctx.fillStyle = d.warm ? `rgba(240,214,170,${d.a / 255})` : `rgba(190,200,255,${d.a / 255})`;
+            ctx.fillRect(d.x, d.y, 1, 1);
+        }
+        return g;
+    }
+    function renderGrain(p) {
+        const g = p.createGraphics(W, H);
+        g.pixelDensity(1);
+        g.noStroke();
+        let s = grainSeed;
+        const next = () => {
+            s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
+            return s / 4294967296;
+        };
+        for (let i = 0; i < LAYOUT.grain; i++) {
+            g.fill(255, 4 + next() * 8);
+            g.rect(next() * W, next() * H, 1, 1);
+        }
+        return g;
+    }
+    function drawStars(p, phase) {
+        p.noStroke();
+        for (const s of galaxy.stars) {
+            p.fill(226, 232, 250, s.a * (0.3 + 0.7 * wave(phase, s.cycles, s.off)));
+            p.rect(s.x, s.y, s.s, s.s);
+        }
+    }
+    /** One half of every orbit: the far half (behind the sun) or the near half. */
+    function drawOrbits(ctx, near) {
+        const [start, end] = near ? [0, Math.PI] : [Math.PI, Math.PI * 2];
+        ctx.lineWidth = 0.8;
+        RINGS.forEach((ring, i) => {
+            const outer = i === RINGS.length - 1;
+            ctx.strokeStyle = rgba(PALETTE.brass, (near ? 0.42 : 0.2) + (outer ? 0.08 : 0));
+            ctx.setLineDash(outer ? [] : [1, 4]);
+            ctx.beginPath();
+            ctx.ellipse(CX, CY, ring.rx, ring.rx * ASPECT, TILT, start, end);
+            ctx.stroke();
+        });
+        ctx.setLineDash([]);
+        // Dial on the outer orbit: a tick every 6 degrees, a long one every 30.
+        const rx = RINGS[RINGS.length - 1].rx;
+        ctx.strokeStyle = rgba(PALETTE.brass, near ? 0.5 : 0.24);
+        ctx.lineWidth = 0.7;
+        ctx.beginPath();
+        for (let k = 0; k < 60; k++) {
+            const a = (k / 60) * Math.PI * 2;
+            if (depthOf(a) >= 0 !== near)
+                continue;
+            const inner = project(rx + 3, a);
+            const outerPt = project(rx + (k % 5 === 0 ? 11 : 6), a);
+            ctx.moveTo(inner.x, inner.y);
+            ctx.lineTo(outerPt.x, outerPt.y);
+        }
+        ctx.stroke();
+    }
+    function drawRingLabels(p) {
+        const ctx = p.drawingContext;
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(9);
+        p.noStroke();
+        ctx.letterSpacing = '1.5px';
+        p.textAlign(p.CENTER, p.BASELINE);
+        for (const ring of RINGS) {
+            const at = project(ring.rx, RING_LABEL_ANGLE);
+            p.fill(217, 178, 111, 130);
+            p.text(ring.label, at.x, at.y - 5);
+        }
+        ctx.letterSpacing = '0px';
+    }
+    function place(planet, phase) {
+        const ring = RINGS[planet.ring];
+        const a = planet.angle + Math.PI * 2 * ring.revs * phase;
+        const { x, y } = project(ring.rx, a);
+        const depth = depthOf(a);
+        return { planet, a, x, y, depth, r: planet.r * (1 + 0.16 * depth) };
+    }
+    function drawTrail(ctx, pl, light) {
+        const rx = RINGS[pl.planet.ring].rx;
+        const span = TRAIL / rx;
+        const steps = 24;
+        ctx.lineCap = 'round';
+        let prev = project(rx, pl.a);
+        for (let k = 1; k <= steps; k++) {
+            const pt = project(rx, pl.a - (span * k) / steps);
+            const fade = 1 - k / steps;
+            ctx.strokeStyle = rgba(pl.planet.color, 0.45 * fade * fade * light);
+            ctx.lineWidth = Math.max(0.6, pl.r * 0.55 * fade);
+            ctx.beginPath();
+            ctx.moveTo(prev.x, prev.y);
+            ctx.lineTo(pt.x, pt.y);
+            ctx.stroke();
+            prev = pt;
+        }
+    }
+    /** A lit sphere: bright toward the sun, shadowed on the far side. */
+    function drawPlanet(ctx, pl) {
+        const { x, y, r, planet } = pl;
+        const light = 0.62 + 0.38 * ((pl.depth + 1) / 2);
+        drawTrail(ctx, pl, light);
+        // A soft glow on the larger planets only; small ones stay crisp.
+        if (r >= 7) {
+            const halo = ctx.createRadialGradient(x, y, r * 0.8, x, y, r * 2);
+            halo.addColorStop(0, rgba(planet.color, 0.2 * light));
+            halo.addColorStop(1, rgba(planet.color, 0));
+            ctx.fillStyle = halo;
+            ctx.fillRect(x - r * 2, y - r * 2, r * 4, r * 4);
+        }
+        const ring = planet.rank === 0 && planet.stars > 0;
+        if (ring)
+            drawPlanetRing(ctx, pl, false, light);
+        // Direction from the sun, for the shadow side.
+        const dx = x - CX;
+        const dy = y - CY;
+        const len = Math.hypot(dx, dy) || 1;
+        const ux = dx / len;
+        const uy = dy / len;
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.fillStyle = rgba(planet.color, light);
+        ctx.fill();
+        ctx.clip();
+        ctx.fillStyle = rgba(PALETTE.night, 0.62);
+        ctx.beginPath();
+        ctx.arc(x + ux * r * 0.95, y + uy * r * 0.95, r * 1.08, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.fillStyle = `rgba(255,255,255,${(0.35 * light).toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(x - ux * r * 0.45, y - uy * r * 0.45, r * 0.32, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+        if (ring)
+            drawPlanetRing(ctx, pl, true, light);
+    }
+    /** The most starred repo wears a ring, split so the planet sits inside it. */
+    function drawPlanetRing(ctx, pl, near, light) {
+        const [start, end] = near ? [0, Math.PI] : [Math.PI, Math.PI * 2];
+        ctx.lineCap = 'butt';
+        for (const [scale, width, alpha] of [
+            [2.05, 1.6, 0.75],
+            [1.6, 0.8, 0.45],
+        ]) {
+            ctx.strokeStyle = rgba(PALETTE.brass, alpha * light);
+            ctx.lineWidth = width;
+            ctx.beginPath();
+            ctx.ellipse(pl.x, pl.y, pl.r * scale, pl.r * scale * 0.32, -0.32, start, end);
+            ctx.stroke();
+        }
+    }
+    function drawSun(p, phase) {
+        const ctx = p.drawingContext;
+        const pulse = wave(phase, 1, 0);
+        const corona = ctx.createRadialGradient(CX, CY, 8, CX, CY, 64 + pulse * 10);
+        corona.addColorStop(0, rgba(PALETTE.sun, 0.55));
+        corona.addColorStop(0.3, rgba(PALETTE.brass, 0.22));
+        corona.addColorStop(1, rgba(PALETTE.brass, 0));
+        ctx.fillStyle = corona;
+        ctx.fillRect(CX - 80, CY - 80, 160, 160);
+        ctx.strokeStyle = rgba(PALETTE.brass, 0.4);
+        ctx.lineWidth = 0.8;
+        ctx.beginPath();
+        const turn = (phase * Math.PI * 4) / RAYS;
+        for (let k = 0; k < RAYS; k++) {
+            const a = turn + (k / RAYS) * Math.PI * 2;
+            const len = k % 2 === 0 ? 20 : 11;
+            ctx.moveTo(CX + Math.cos(a) * 22, CY + Math.sin(a) * 22);
+            ctx.lineTo(CX + Math.cos(a) * (22 + len), CY + Math.sin(a) * (22 + len));
+        }
+        ctx.stroke();
+        const core = ctx.createRadialGradient(CX - 4, CY - 4, 1, CX, CY, 15);
+        core.addColorStop(0, '#ffffff');
+        core.addColorStop(0.6, rgba(PALETTE.sun, 1));
+        core.addColorStop(1, rgba([246, 206, 140], 1));
+        ctx.fillStyle = core;
+        ctx.beginPath();
+        ctx.arc(CX, CY, 15, 0, Math.PI * 2);
+        ctx.fill();
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(10);
+        p.textAlign(p.CENTER, p.BASELINE);
+        p.noStroke();
+        p.fill(217, 178, 111, 200);
+        p.text(`@${login}`, CX, CY + 34);
+    }
+    function drawStarGlyph(ctx, x, y, r) {
+        ctx.beginPath();
+        for (let k = 0; k < 10; k++) {
+            const a = -Math.PI / 2 + (k * Math.PI) / 5;
+            const rr = k % 2 === 0 ? r : r * 0.45;
+            ctx.lineTo(x + Math.cos(a) * rr, y + Math.sin(a) * rr);
+        }
+        ctx.closePath();
+        ctx.fill();
+    }
+    /**
+     * Callout centered above the planet, clamped to the canvas. Its position is
+     * a continuous function of the planet's, so it never jumps between frames.
+     */
+    function drawLabel(p, pl) {
+        const ctx = p.drawingContext;
+        const light = 0.55 + 0.45 * ((pl.depth + 1) / 2);
+        const name = truncate(pl.planet.name, 22);
+        const count = compact(pl.planet.stars);
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(11);
+        const nameW = p.textWidth(name);
+        const width = nameW + 17 + p.textWidth(count);
+        const ey = pl.y - pl.r - 16;
+        const tx = Math.min(Math.max(pl.x - width / 2, 20), W - 20 - width);
+        ctx.strokeStyle = rgba(PALETTE.brass, 0.6 * light);
+        ctx.lineWidth = 0.8;
+        ctx.beginPath();
+        ctx.moveTo(pl.x, pl.y - pl.r - 2);
+        ctx.lineTo(pl.x, ey + 8);
+        ctx.stroke();
+        // A dark tag behind the text keeps it legible when it crosses the sun.
+        ctx.fillStyle = rgba(PALETTE.night, 0.7 * light);
+        ctx.beginPath();
+        ctx.roundRect(tx - 4, ey - 8, width + 8, 16, 3);
+        ctx.fill();
+        p.textAlign(p.LEFT, p.BASELINE);
+        p.noStroke();
+        p.fill(242, 237, 227, 235 * light);
+        p.text(name, tx, ey + 4);
+        const sx = tx + nameW + 10;
+        ctx.fillStyle = rgba(PALETTE.brass, light);
+        drawStarGlyph(ctx, sx, ey + 0.5, 4.2);
+        p.fill(217, 178, 111, 255 * light);
+        p.text(count, sx + 7, ey + 4);
+    }
+    function drawText(p, phase) {
+        const x = TEXT_X;
+        const ctx = p.drawingContext;
+        const brass = PALETTE.brass;
+        p.noStroke();
+        p.textAlign(p.LEFT, p.BASELINE);
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(13);
+        p.fill(...brass);
+        p.text(PROMPT, x, 58);
+        if (wave(phase, 3, 0) > 0.5) {
+            p.rect(x + p.textWidth(PROMPT) + 4, 47, 7, 13);
+        }
+        p.textFont(SANS);
+        p.textStyle(p.BOLD);
+        p.textSize(50);
+        ctx.letterSpacing = '3px';
+        p.fill(PALETTE.ink);
+        p.text(identity.name.toUpperCase(), x, 116);
+        ctx.letterSpacing = '0px';
+        if (identity.tagline) {
+            p.textStyle(p.NORMAL);
+            p.textSize(17);
+            p.fill(...brass);
+            p.text(identity.tagline, x, 146);
+        }
+        const count = galaxy.planets.length;
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(11);
+        p.fill(PALETTE.muted);
+        p.text(count === 1 ? '1 REPOSITORY' : `${count} REPOSITORIES`, x, 206);
+        p.textFont(SANS);
+        p.textStyle(p.BOLD);
+        p.textSize(34);
+        p.fill(PALETTE.ink);
+        p.text(galaxy.totalStars.toLocaleString('en-US'), x, 244);
+        p.textFont(MONO);
+        p.textStyle(p.NORMAL);
+        p.textSize(11);
+        p.fill(PALETTE.muted);
+        p.text(galaxy.totalStars === 1 ? 'star' : 'stars', x, 262);
+        if (count === 0) {
+            p.text('no public repositories yet', x, 296);
+        }
+        let lx = x;
+        for (const lang of galaxy.languages) {
+            const label = truncate(lang.name, 14);
+            p.fill(...lang.color);
+            p.circle(lx + 4, 292, 7);
+            p.fill(PALETTE.muted);
+            p.text(label, lx + 14, 296);
+            lx += 14 + p.textWidth(label) + 18;
+        }
+        if (identity.website) {
+            p.textSize(12);
+            p.fill(...brass);
+            p.text(`↗ ${displayUrl(identity.website)}`, x, 350);
+        }
+    }
+    return {
+        setup(p) {
+            sky = renderSky(p);
+            grain = renderGrain(p);
+        },
+        draw(p, _frame, phase) {
+            const ctx = p.drawingContext;
+            const placed = galaxy.planets.map((pl) => place(pl, phase)).sort((a, b) => a.depth - b.depth);
+            p.image(sky, 0, 0);
+            drawStars(p, phase);
+            drawOrbits(ctx, false);
+            drawRingLabels(p);
+            for (const pl of placed)
+                if (pl.depth < 0)
+                    drawPlanet(ctx, pl);
+            drawSun(p, phase);
+            drawOrbits(ctx, true);
+            for (const pl of placed)
+                if (pl.depth >= 0)
+                    drawPlanet(ctx, pl);
+            for (const pl of placed)
+                if (pl.planet.label)
+                    drawLabel(p, pl);
+            drawText(p, phase);
+            p.image(grain, 0, 0);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "headreel",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Animated GitHub profile banner made from your GitHub activity, with a GitHub Action or CLI.",
   "keywords": [
     "github",