feat(contributions): add an open source section with upstream pull requests

Author: Endika

src/components/ContributionList.astro

@@ -0,0 +1,26 @@
+---
+import type { Contribution } from "../lib/contributions";
+import { formatStars, pullRequestUrl, sortContributions } from "../lib/contributions";
+
+interface Props {
+  contributions: Contribution[];
+}
+
+const items = sortContributions(Astro.props.contributions);
+---
+<h2 class="cat">{"// open source"} <span class="count">· {items.length}</span></h2>
+<div class="grid">
+  {items.map((item) => (
+    <a class="card" href={pullRequestUrl(item)} data-state={item.state} rel="noopener">
+      <div class="head">
+        <span class="icon">{item.emoji}</span>
+        <span class="title">{item.repo}</span>
+      </div>
+      <p class="desc" data-en={item.desc.en} data-es={item.desc.es}>{item.desc.en}</p>
+      <div class="meta">
+        <span class="chip">{formatStars(item.stars)}★</span>
+        <span class="status">#{item.pr} · {item.state}</span>
+      </div>
+    </a>
+  ))}
+</div>

src/data/contributions.ts

@@ -0,0 +1,59 @@
+import type { Contribution } from "../lib/contributions";
+
+export const contributions: Contribution[] = [
+  {
+    repo: "vitessio/vitess",
+    emoji: "🐬",
+    stars: 21000,
+    pr: 20700,
+    desc: {
+      en: "A sharded query with EXISTS inside a CASE silently dropped half of its WHERE clause and returned the wrong rows.",
+      es: "Una consulta con EXISTS dentro de un CASE perdía silenciosamente la mitad de su WHERE y devolvía filas incorrectas.",
+    },
+    state: "open",
+  },
+  {
+    repo: "vitessio/vitess",
+    emoji: "🐬",
+    stars: 21000,
+    pr: 20701,
+    desc: {
+      en: "An outer join against a reference table returned every preserved row once per shard instead of once.",
+      es: "Un outer join contra una tabla de referencia devolvía cada fila preservada una vez por shard en lugar de una sola vez.",
+    },
+    state: "open",
+  },
+  {
+    repo: "tobymao/sqlglot",
+    emoji: "🧩",
+    stars: 8000,
+    pr: 7969,
+    desc: {
+      en: "DuckDB was modelled as returning NULL on division by zero, but it follows IEEE 754 and returns inf, so transpiled queries diverged.",
+      es: "DuckDB estaba modelado como si devolviera NULL al dividir por cero, pero sigue IEEE 754 y devuelve inf, así que las consultas transpiladas divergían.",
+    },
+    state: "open",
+  },
+  {
+    repo: "fonttools/fonttools",
+    emoji: "🔠",
+    stars: 4600,
+    pr: 4137,
+    desc: {
+      en: "Instancing a variable font left the BASE table untouched, so instances kept the default baselines and a dangling variation store.",
+      es: "Al instanciar una fuente variable la tabla BASE quedaba intacta, así que las instancias conservaban las líneas base por defecto y un almacén de variaciones huérfano.",
+    },
+    state: "open",
+  },
+  {
+    repo: "MatthewKuKanich/FindMyFlipper",
+    emoji: "📍",
+    stars: 2170,
+    pr: 144,
+    desc: {
+      en: "An infinite 2FA loop blocked report fetching: the anisette device identity was partly overwritten with random UUIDs. Behind seven reported issues.",
+      es: "Un bucle infinito de 2FA impedía descargar los informes: la identidad de dispositivo de anisette se sobrescribía en parte con UUID aleatorios. Detrás de siete issues reportados.",
+    },
+    state: "open",
+  },
+];

src/lib/contributions.ts

@@ -0,0 +1,23 @@
+export type ContributionState = "open" | "merged" | "closed";
+
+export interface Contribution {
+  repo: string;
+  emoji: string;
+  stars: number;
+  pr: number;
+  desc: { en: string; es: string };
+  state: ContributionState;
+}
+
+export function pullRequestUrl(contribution: Contribution): string {
+  return `https://github.com/${contribution.repo}/pull/${contribution.pr}`;
+}
+
+export function formatStars(stars: number): string {
+  return stars >= 1000 ? `${Math.round(stars / 100) / 10}k` : String(stars);
+}
+
+/** Biggest repositories first, then by pull request number, so the order is stable. */
+export function sortContributions(contributions: Contribution[]): Contribution[] {
+  return [...contributions].sort((a, b) => b.stars - a.stars || a.pr - b.pr);
+}

src/pages/index.astro

@@ -1,8 +1,10 @@
 ---
+import ContributionList from "../components/ContributionList.astro";
 import Footer from "../components/Footer.astro";
 import Hero from "../components/Hero.astro";
 import ProjectGrid from "../components/ProjectGrid.astro";
 import TopBar from "../components/TopBar.astro";
+import { contributions } from "../data/contributions";
 import { categoryOrder, projects } from "../data/projects";
 import Base from "../layouts/Base.astro";
 import { groupByCategory } from "../lib/projects";
@@ -13,5 +15,6 @@ const groups = groupByCategory(projects, categoryOrder);
   <TopBar />
   <Hero />
   <ProjectGrid groups={groups} />
+  <ContributionList contributions={contributions} />
   <Footer />
 </Base>

src/styles/global.css

@@ -13,6 +13,8 @@ html[data-theme="light"] {
   --repo-accent: #8a8a8a;
   --chip-bg: #e7e4da;
   --rule: #cfcabb;
+  --state-merged: #6f42c1;
+  --state-closed: #cf222e;
 }
 
 /* Dark theme */
@@ -26,6 +28,8 @@ html[data-theme="dark"] {
   --repo-accent: #5a6b5f;
   --chip-bg: #1d2620;
   --rule: #2a342d;
+  --state-merged: #a371f7;
+  --state-closed: #f85149;
 }
 
 * {
@@ -198,6 +202,18 @@ body {
 .card[data-type="repo"] .status {
   color: var(--repo-accent);
 }
+.card[data-state="merged"] {
+  border-left-color: var(--state-merged);
+}
+.card[data-state="merged"] .status {
+  color: var(--state-merged);
+}
+.card[data-state="closed"] {
+  border-left-color: var(--state-closed);
+}
+.card[data-state="closed"] .status {
+  color: var(--state-closed);
+}
 
 /* Footer */
 .foot {

tests/contributions.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import {
+  type Contribution,
+  formatStars,
+  pullRequestUrl,
+  sortContributions,
+} from "../src/lib/contributions";
+
+const c = (repo: string, stars: number, pr: number): Contribution => ({
+  repo,
+  emoji: "🔧",
+  stars,
+  pr,
+  desc: { en: repo, es: repo },
+  state: "open",
+});
+
+describe("pullRequestUrl", () => {
+  it("builds the pull request url from the repo and number", () => {
+    expect(pullRequestUrl(c("vitessio/vitess", 21000, 20700))).toBe(
+      "https://github.com/vitessio/vitess/pull/20700",
+    );
+  });
+});
+
+describe("formatStars", () => {
+  it("abbreviates thousands with one decimal", () => {
+    expect(formatStars(21000)).toBe("21k");
+    expect(formatStars(2170)).toBe("2.2k");
+    expect(formatStars(1000)).toBe("1k");
+  });
+
+  it("leaves counts below a thousand untouched", () => {
+    expect(formatStars(610)).toBe("610");
+  });
+});
+
+describe("sortContributions", () => {
+  it("puts bigger repos first and breaks ties by pull request number", () => {
+    const sorted = sortContributions([
+      c("small/repo", 2170, 144),
+      c("big/repo", 21000, 20701),
+      c("big/repo", 21000, 20700),
+    ]);
+    expect(sorted.map((x) => x.pr)).toEqual([20700, 20701, 144]);
+  });
+
+  it("does not mutate the input", () => {
+    const input = [c("small/repo", 100, 2), c("big/repo", 900, 1)];
+    sortContributions(input);
+    expect(input.map((x) => x.repo)).toEqual(["small/repo", "big/repo"]);
+  });
+});