Skip to content

Commit 17fbb07

Browse files
fezcodefezcode
committed
feat(thumbnail): add 9 object-metaphor styles
Nine new GitHub thumbnail styles that map repo fields into real-world objects: Nutrition Facts label, Trading Card (holo TCG), Patent Drawing, Wanted Poster, Polaroid, Seed Packet, Now Playing (music player), Transit Roundel, and Stock Ticker. Each honors the primary/secondary/bg color pickers, gates on field presence so cleared values don't render, and derives synthetic details deterministically from a repo-name seed.
1 parent fa77e0f commit 17fbb07

11 files changed

Lines changed: 3363 additions & 0 deletions

‎src/pages/apps/github-thumbnail/GithubThumbnailGeneratorPage.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,15 @@ const THEME_OPTIONS = [
113113
{ value: 'boardingPass', label: 'Boarding Pass' },
114114
{ value: 'periodicElement', label: 'Periodic Element' },
115115
{ value: 'thermalReceipt', label: 'Thermal Receipt' },
116+
{ value: 'nutritionFacts', label: 'Nutrition Facts' },
117+
{ value: 'tradingCard', label: 'Trading Card' },
118+
{ value: 'patentDrawing', label: 'Patent Drawing' },
119+
{ value: 'wantedPoster', label: 'Wanted Poster' },
120+
{ value: 'polaroid', label: 'Polaroid' },
121+
{ value: 'seedPacket', label: 'Seed Packet' },
122+
{ value: 'spotifyNowPlaying', label: 'Now Playing' },
123+
{ value: 'transitRoundel', label: 'Transit Roundel' },
124+
{ value: 'stockTicker', label: 'Stock Ticker' },
116125
];
117126

118127
const PALETTE_BANK = [

‎src/pages/apps/github-thumbnail/themes.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,15 @@ import { markdownEditor } from './themes/markdownEditor';
8585
import { boardingPass } from './themes/boardingPass';
8686
import { periodicElement } from './themes/periodicElement';
8787
import { thermalReceipt } from './themes/thermalReceipt';
88+
import { nutritionFacts } from './themes/nutritionFacts';
89+
import { tradingCard } from './themes/tradingCard';
90+
import { patentDrawing } from './themes/patentDrawing';
91+
import { wantedPoster } from './themes/wantedPoster';
92+
import { polaroid } from './themes/polaroid';
93+
import { seedPacket } from './themes/seedPacket';
94+
import { spotifyNowPlaying } from './themes/spotifyNowPlaying';
95+
import { transitRoundel } from './themes/transitRoundel';
96+
import { stockTicker } from './themes/stockTicker';
8897

8998
export const themeRenderers = {
9099
modern,
@@ -171,4 +180,13 @@ export const themeRenderers = {
171180
boardingPass,
172181
periodicElement,
173182
thermalReceipt,
183+
nutritionFacts,
184+
tradingCard,
185+
patentDrawing,
186+
wantedPoster,
187+
polaroid,
188+
seedPacket,
189+
spotifyNowPlaying,
190+
transitRoundel,
191+
stockTicker,
174192
};

‎src/pages/apps/github-thumbnail/themes/nutritionFacts.js‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
import { wrapText } from '../utils';
2+
3+
export const nutritionFacts = (ctx, width, height, scale, data) => {
4+
const {
5+
primaryColor = '#2563eb',
6+
secondaryColor = '#16a34a',
7+
bgColor = '#f1efe6',
8+
repoOwner = '',
9+
repoName = '',
10+
description = '',
11+
language = '',
12+
stars = '',
13+
forks = '',
14+
supportUrl = '',
15+
} = data || {};
16+
17+
// The FDA label uses a Helvetica-like sans; branding mixes sans + serif.
18+
const sans = 'system-ui, -apple-system, "Segoe UI", sans-serif';
19+
const mono = '"JetBrains Mono", "Courier New", ui-monospace, monospace';
20+
const serif = 'Georgia, "Times New Roman", serif';
21+
22+
const seed = seedFrom(repoName || 'repo');
23+
// Deterministic 0..100% daily values for each itemized row.
24+
const pct = (n) => Math.round(mulberry(seed + n) * 100);
25+
const owner = repoOwner || '';
26+
27+
// ---------------------------------------------------------------- Ground
28+
const grad = ctx.createLinearGradient(0, 0, width, height);
29+
grad.addColorStop(0, lighten(bgColor, 0.03));
30+
grad.addColorStop(1, mix(bgColor, primaryColor, 0.06));
31+
ctx.fillStyle = grad;
32+
ctx.fillRect(0, 0, width, height);
33+
34+
// Subtle diagonal hatch tint for texture (very low alpha).
35+
ctx.save();
36+
ctx.globalAlpha = 0.04;
37+
ctx.strokeStyle = readableOn(bgColor) === '#ffffff' ? '#ffffff' : '#000000';
38+
ctx.lineWidth = 1 * scale;
39+
for (let x = -height; x < width; x += 26 * scale) {
40+
ctx.beginPath();
41+
ctx.moveTo(x, 0);
42+
ctx.lineTo(x + height, height);
43+
ctx.stroke();
44+
}
45+
ctx.restore();
46+
47+
// ============================================================ THE LABEL
48+
const labelX = 70 * scale;
49+
const labelY = 70 * scale;
50+
const labelW = width * 0.46 - 70 * scale;
51+
const labelH = height - 140 * scale;
52+
const labelR = 14 * scale;
53+
54+
// Drop shadow under the panel.
55+
ctx.save();
56+
ctx.shadowColor = 'rgba(0,0,0,0.30)';
57+
ctx.shadowBlur = 34 * scale;
58+
ctx.shadowOffsetY = 16 * scale;
59+
ctx.fillStyle = '#ffffff';
60+
roundRectPath(ctx, labelX, labelY, labelW, labelH, labelR);
61+
ctx.fill();
62+
ctx.restore();
63+
64+
// White panel + thick black border (authentic ~6px rule).
65+
ctx.fillStyle = '#ffffff';
66+
roundRectPath(ctx, labelX, labelY, labelW, labelH, labelR);
67+
ctx.fill();
68+
ctx.lineWidth = 6 * scale;
69+
ctx.strokeStyle = '#000000';
70+
roundRectPath(ctx, labelX, labelY, labelW, labelH, labelR);
71+
ctx.stroke();
72+
73+
const padX = 22 * scale;
74+
const innerX = labelX + padX;
75+
const innerR = labelX + labelW - padX;
76+
const innerW = innerR - innerX;
77+
let cy = labelY + 20 * scale;
78+
79+
// Pure black/white inside for authenticity.
80+
ctx.fillStyle = '#000000';
81+
82+
// --- Title ---
83+
ctx.textAlign = 'left';
84+
ctx.textBaseline = 'top';
85+
ctx.font = `900 ${44 * scale}px ${sans}`;
86+
ctx.fillText('Nutrition Facts', innerX, cy);
87+
cy += 54 * scale;
88+
89+
// Thin rule.
90+
rule(ctx, innerX, innerR, cy, 1 * scale);
91+
cy += 9 * scale;
92+
93+
// --- Serving size ---
94+
ctx.font = `400 ${15 * scale}px ${sans}`;
95+
ctx.fillText('Serving size', innerX, cy);
96+
ctx.textAlign = 'right';
97+
ctx.font = `700 ${15 * scale}px ${sans}`;
98+
ctx.fillText('1 repository (1 repo)', innerR, cy);
99+
ctx.textAlign = 'left';
100+
cy += 24 * scale;
101+
102+
// THICK black bar.
103+
rule(ctx, innerX, innerR, cy, 9 * scale);
104+
cy += 18 * scale;
105+
106+
// --- Amount per serving + hero figure (Stars, else Commits) ---
107+
ctx.font = `700 ${12 * scale}px ${sans}`;
108+
ctx.fillText('Amount per serving', innerX, cy);
109+
cy += 18 * scale;
110+
111+
const heroLabel = has(stars) ? 'Stars' : 'Commits';
112+
const heroValue = has(stars)
113+
? String(stars)
114+
: String(1000 + Math.floor(mulberry(seed + 7) * 9000));
115+
ctx.font = `900 ${34 * scale}px ${sans}`;
116+
ctx.fillText(heroLabel, innerX, cy);
117+
ctx.textAlign = 'right';
118+
ctx.fillText(truncate(ctx, heroValue, innerW * 0.45, `900 ${34 * scale}px ${sans}`), innerR, cy);
119+
ctx.textAlign = 'left';
120+
cy += 42 * scale;
121+
122+
// Thin rule + % Daily Value header.
123+
rule(ctx, innerX, innerR, cy, 4 * scale);
124+
cy += 8 * scale;
125+
ctx.textAlign = 'right';
126+
ctx.font = `700 ${15 * scale}px ${sans}`;
127+
ctx.fillText('% Daily Value*', innerR, cy);
128+
ctx.textAlign = 'left';
129+
cy += 22 * scale;
130+
131+
// --- Itemized rows ---
132+
const rows = [];
133+
if (has(forks)) rows.push(['Forks', String(forks), pct(11)]);
134+
rows.push(['Issues', '', pct(12)]);
135+
rows.push(['Commits', '', pct(13)]);
136+
rows.push(['Pull Requests', '', pct(14)]);
137+
138+
rows.forEach((row, i) => {
139+
if (i > 0) {
140+
rule(ctx, innerX, innerR, cy, 1 * scale);
141+
cy += 9 * scale;
142+
}
143+
const [name, value, p] = row;
144+
ctx.textAlign = 'left';
145+
ctx.font = `700 ${17 * scale}px ${sans}`;
146+
let label = name;
147+
if (has(value)) label += ` ${value}`;
148+
ctx.fillText(truncate(ctx, label, innerW * 0.6, `700 ${17 * scale}px ${sans}`), innerX, cy);
149+
ctx.textAlign = 'right';
150+
ctx.font = `700 ${17 * scale}px ${sans}`;
151+
ctx.fillText(`${p}%`, innerR, cy);
152+
ctx.textAlign = 'left';
153+
cy += 24 * scale;
154+
});
155+
156+
// THICK bar.
157+
rule(ctx, innerX, innerR, cy, 9 * scale);
158+
cy += 16 * scale;
159+
160+
// --- Language row (only if present) ---
161+
if (has(language)) {
162+
ctx.textAlign = 'left';
163+
ctx.font = `400 ${16 * scale}px ${sans}`;
164+
ctx.fillText('Language', innerX, cy);
165+
ctx.textAlign = 'right';
166+
ctx.font = `700 ${16 * scale}px ${sans}`;
167+
ctx.fillText(truncate(ctx, language, innerW * 0.5, `700 ${16 * scale}px ${sans}`), innerR, cy);
168+
ctx.textAlign = 'left';
169+
cy += 22 * scale;
170+
rule(ctx, innerX, innerR, cy, 1 * scale);
171+
cy += 9 * scale;
172+
}
173+
174+
// --- Footnote ---
175+
ctx.font = `400 ${11 * scale}px ${sans}`;
176+
ctx.fillStyle = '#000000';
177+
ctx.textBaseline = 'top';
178+
wrapText(
179+
ctx,
180+
'* % Daily Value based on a 2,000-commit daily diet.',
181+
innerX,
182+
cy,
183+
innerW,
184+
14 * scale,
185+
);
186+
cy += 30 * scale;
187+
if (has(supportUrl)) {
188+
ctx.font = `400 ${11 * scale}px ${mono}`;
189+
ctx.fillText(truncate(ctx, supportUrl, innerW, `400 ${11 * scale}px ${mono}`), innerX, cy);
190+
}
191+
192+
// ========================================================== RIGHT SIDE
193+
const rx = width * 0.46 + 20 * scale;
194+
const rRight = width - 70 * scale;
195+
const rW = rRight - rx;
196+
let ry = height * 0.30;
197+
198+
const onBg = readableOn(bgColor);
199+
const headingColor = lum(primaryColor) > 60 || readableOn(bgColor) === '#111111'
200+
? primaryColor
201+
: mix(primaryColor, onBg, 0.15);
202+
203+
// repoName big bold heading.
204+
ctx.textAlign = 'left';
205+
ctx.textBaseline = 'alphabetic';
206+
ctx.fillStyle = headingColor;
207+
ctx.font = `800 ${64 * scale}px ${sans}`;
208+
const nameText = truncate(ctx, repoName || 'repository', rW, `800 ${64 * scale}px ${sans}`);
209+
ctx.fillText(nameText, rx, ry);
210+
const nameW = ctx.measureText(nameText).width;
211+
212+
// Accent underline in primaryColor.
213+
ctx.fillStyle = primaryColor;
214+
ctx.fillRect(rx, ry + 18 * scale, Math.min(nameW, rW), 6 * scale);
215+
ry += 60 * scale;
216+
217+
// Description wrapped (2–3 lines, muted).
218+
if (has(description)) {
219+
ctx.fillStyle = hexA(onBg, 0.72);
220+
ctx.font = `400 ${22 * scale}px ${serif}`;
221+
const desc = truncate(ctx, description, rW * 2.4, `400 ${22 * scale}px ${serif}`);
222+
ctx.textBaseline = 'top';
223+
wrapText(ctx, desc, rx, ry, rW, 30 * scale);
224+
ry += 96 * scale;
225+
}
226+
227+
// @owner line.
228+
if (has(owner)) {
229+
ctx.fillStyle = hexA(onBg, 0.85);
230+
ctx.font = `600 ${20 * scale}px ${mono}`;
231+
ctx.textBaseline = 'alphabetic';
232+
ctx.fillText(truncate(ctx, `@${owner}`, rW, `600 ${20 * scale}px ${mono}`), rx, ry);
233+
ry += 44 * scale;
234+
}
235+
236+
// Playful organic badge using secondaryColor.
237+
const badgeText = 'GITHUB ORGANIC · NON-GMO CODE';
238+
ctx.font = `800 ${13 * scale}px ${sans}`;
239+
const btW = ctx.measureText(badgeText).width;
240+
const bPadX = 16 * scale;
241+
const bH = 34 * scale;
242+
const bW = Math.min(btW + bPadX * 2, rW);
243+
ctx.save();
244+
roundRectPath(ctx, rx, ry, bW, bH, bH / 2);
245+
ctx.lineWidth = 2.5 * scale;
246+
ctx.strokeStyle = secondaryColor;
247+
ctx.stroke();
248+
ctx.fillStyle = hexA(secondaryColor, 0.14);
249+
ctx.fill();
250+
ctx.restore();
251+
ctx.fillStyle = secondaryColor;
252+
ctx.textAlign = 'left';
253+
ctx.textBaseline = 'middle';
254+
ctx.fillText(
255+
truncate(ctx, badgeText, bW - bPadX * 2, `800 ${13 * scale}px ${sans}`),
256+
rx + bPadX,
257+
ry + bH / 2 + 1 * scale,
258+
);
259+
260+
// Reset text state for the next theme.
261+
ctx.textAlign = 'left';
262+
ctx.textBaseline = 'alphabetic';
263+
};
264+
265+
// ---------------- helpers (hoisted) ----------------
266+
function rule(ctx, x1, x2, y, thickness) {
267+
ctx.fillStyle = '#000000';
268+
ctx.fillRect(x1, y, x2 - x1, thickness);
269+
}
270+
271+
function parseHex(hex){const h=(hex||'#000').replace('#','');const f=h.length===3?h.split('').map(c=>c+c).join(''):h;return{r:parseInt(f.slice(0,2),16)||0,g:parseInt(f.slice(2,4),16)||0,b:parseInt(f.slice(4,6),16)||0};}
272+
function rgbToHex(r,g,b){const h=n=>Math.max(0,Math.min(255,Math.round(n))).toString(16).padStart(2,'0');return '#'+h(r)+h(g)+h(b);}
273+
function mix(a,b,t){const x=parseHex(a),y=parseHex(b);return rgbToHex(x.r+(y.r-x.r)*t,x.g+(y.g-x.g)*t,x.b+(y.b-x.b)*t);}
274+
function lighten(hex,a){const{r,g,b}=parseHex(hex);return rgbToHex(r+255*a,g+255*a,b+255*a);}
275+
function hexA(hex,al){const{r,g,b}=parseHex(hex);return `rgba(${r}, ${g}, ${b}, ${al})`;}
276+
function lum(hex){const{r,g,b}=parseHex(hex);return 0.2126*r+0.7152*g+0.0722*b;}
277+
function readableOn(hex){const{r,g,b}=parseHex(hex);return (0.299*r+0.587*g+0.114*b)>150?'#111111':'#ffffff';}
278+
function seedFrom(str){let s=0;for(const c of (str||'x'))s=(s*31+c.charCodeAt(0))|0;return Math.abs(s)||1;}
279+
function mulberry(seed){let t=(seed*1831565813)|0;t=(t+0x6D2B79F5)|0;let r=Math.imul(t^(t>>>15),1|t);r^=r+Math.imul(r^(r>>>7),61|r);return ((r^(r>>>14))>>>0)/4294967296;}
280+
function has(v){return v!==undefined&&v!==null&&String(v).trim()!=='';}
281+
function truncate(ctx,text,maxW,font){ctx.font=font;if(ctx.measureText(text).width<=maxW)return text;let t=text;while(t.length>1&&ctx.measureText(t+'…').width>maxW)t=t.slice(0,-1);return t+'…';}
282+
function roundRectPath(ctx,x,y,w,h,r){const rr=Math.min(r,w/2,h/2);ctx.beginPath();ctx.moveTo(x+rr,y);ctx.arcTo(x+w,y,x+w,y+h,rr);ctx.arcTo(x+w,y+h,x,y+h,rr);ctx.arcTo(x,y+h,x,y,rr);ctx.arcTo(x,y,x+w,y,rr);ctx.closePath();}

0 commit comments

Comments
 (0)