Skip to content

Commit f29257a

Browse files
fezcodefezcode
committed
feat: new github thumbnails
1 parent b7b6102 commit f29257a

File tree

1 file changed

+59
-59
lines changed

1 file changed

+59
-59
lines changed

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

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -228,12 +228,13 @@ export const topographic = (ctx, width, height, scale, data) => {
228228
ctx.restore();
229229

230230
// --- Title block (top-left, like a survey legend) ---
231-
const titleBlockW = 420 * scale;
232-
const titleBlockH = 200 * scale;
231+
const tbPad = 24 * scale;
232+
const titleBlockW = 520 * scale;
233+
const titleBlockH = 260 * scale;
233234

234235
ctx.save();
235236
ctx.fillStyle = '#000000';
236-
ctx.globalAlpha = 0.6;
237+
ctx.globalAlpha = 0.65;
237238
ctx.fillRect(padding, padding, titleBlockW, titleBlockH);
238239
ctx.restore();
239240

@@ -249,98 +250,101 @@ export const topographic = (ctx, width, height, scale, data) => {
249250
ctx.textAlign = 'left';
250251
ctx.fillStyle = secondaryColor;
251252
ctx.globalAlpha = 0.5;
252-
ctx.font = `500 ${11 * scale}px "JetBrains Mono", monospace`;
253-
ctx.fillText('GEOLOGICAL SURVEY — OPEN SOURCE REGISTRY', padding + 16 * scale, padding + 22 * scale);
253+
ctx.font = `500 ${12 * scale}px "JetBrains Mono", monospace`;
254+
ctx.fillText('GEOLOGICAL SURVEY — OPEN SOURCE REGISTRY', padding + tbPad, padding + 28 * scale);
254255
ctx.globalAlpha = 1;
255256

256257
// Thin separator
257258
ctx.fillStyle = primaryColor;
258259
ctx.globalAlpha = 0.3;
259-
ctx.fillRect(padding + 16 * scale, padding + 30 * scale, titleBlockW - 32 * scale, 1 * scale);
260+
ctx.fillRect(padding + tbPad, padding + 40 * scale, titleBlockW - tbPad * 2, 1 * scale);
260261
ctx.globalAlpha = 1;
261262

262263
// Owner
263264
ctx.fillStyle = primaryColor;
264-
ctx.font = `600 ${16 * scale}px "JetBrains Mono", monospace`;
265-
ctx.fillText(repoOwner, padding + 16 * scale, padding + 54 * scale);
265+
ctx.font = `600 ${18 * scale}px "JetBrains Mono", monospace`;
266+
ctx.fillText(repoOwner, padding + tbPad, padding + 68 * scale);
266267

267268
// Repo name — main title
268269
ctx.fillStyle = '#ffffff';
269-
ctx.font = `800 ${48 * scale}px "Inter", sans-serif`;
270+
ctx.font = `800 ${52 * scale}px "Inter", sans-serif`;
270271
// Scale down if needed
271-
let tFontSize = 48;
272-
while (ctx.measureText(repoName).width > titleBlockW - 32 * scale && tFontSize > 24) {
272+
let tFontSize = 52;
273+
while (ctx.measureText(repoName).width > titleBlockW - tbPad * 2 && tFontSize > 28) {
273274
tFontSize -= 2;
274275
ctx.font = `800 ${tFontSize * scale}px "Inter", sans-serif`;
275276
}
276-
ctx.fillText(repoName, padding + 16 * scale, padding + 104 * scale);
277+
ctx.fillText(repoName, padding + tbPad, padding + 124 * scale);
277278

278279
// Language & datum info
279280
ctx.fillStyle = secondaryColor;
280-
ctx.font = `400 ${13 * scale}px "JetBrains Mono", monospace`;
281-
ctx.fillText(`DATUM: ${language.toUpperCase()} | PROJECTION: OPEN-SRC`, padding + 16 * scale, padding + 130 * scale);
281+
ctx.font = `400 ${14 * scale}px "JetBrains Mono", monospace`;
282+
ctx.fillText(`DATUM: ${language.toUpperCase()} | PROJECTION: OPEN-SRC`, padding + tbPad, padding + 156 * scale);
282283

283284
// Color legend
284-
const legendY = padding + 155 * scale;
285-
ctx.fillStyle = 'rgba(255,255,255,0.3)';
286-
ctx.font = `400 ${10 * scale}px "JetBrains Mono", monospace`;
287-
ctx.fillText('LEGEND:', padding + 16 * scale, legendY);
285+
const legendY = padding + 195 * scale;
286+
ctx.fillStyle = 'rgba(255,255,255,0.35)';
287+
ctx.font = `500 ${11 * scale}px "JetBrains Mono", monospace`;
288+
ctx.fillText('LEGEND:', padding + tbPad, legendY);
288289

289-
const swatchS = 12 * scale;
290+
const swatchS = 14 * scale;
290291
const swatches = [
291292
{ color: bgColor, label: 'BASE' },
292293
{ color: primaryColor, label: 'CONTOUR' },
293294
{ color: secondaryColor, label: 'MARKER' },
294295
];
295-
let swX = padding + 70 * scale;
296+
let swX = padding + tbPad + 75 * scale;
296297
swatches.forEach(({ color, label }) => {
297298
ctx.fillStyle = color;
298-
ctx.fillRect(swX, legendY - 9 * scale, swatchS, swatchS);
299+
ctx.fillRect(swX, legendY - 10 * scale, swatchS, swatchS);
299300
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
300301
ctx.lineWidth = 1 * scale;
301-
ctx.strokeRect(swX, legendY - 9 * scale, swatchS, swatchS);
302-
ctx.fillStyle = 'rgba(255,255,255,0.3)';
303-
ctx.font = `400 ${10 * scale}px "JetBrains Mono", monospace`;
304-
ctx.fillText(label, swX + swatchS + 4 * scale, legendY);
305-
swX += ctx.measureText(label).width + swatchS + 20 * scale;
302+
ctx.strokeRect(swX, legendY - 10 * scale, swatchS, swatchS);
303+
ctx.fillStyle = 'rgba(255,255,255,0.35)';
304+
ctx.font = `500 ${11 * scale}px "JetBrains Mono", monospace`;
305+
ctx.fillText(label, swX + swatchS + 6 * scale, legendY);
306+
swX += ctx.measureText(label).width + swatchS + 24 * scale;
306307
});
307308

308309
// --- Description block (bottom-left) ---
309-
const descBlockY = height - padding - 120 * scale;
310-
const descBlockW = width * 0.45;
310+
const descPad = 20 * scale;
311+
const descBlockH = 130 * scale;
312+
const descBlockW = width * 0.5;
313+
const descBlockY = height - padding - descBlockH;
311314

312315
ctx.save();
313316
ctx.fillStyle = '#000000';
314-
ctx.globalAlpha = 0.45;
315-
ctx.fillRect(padding, descBlockY, descBlockW, 100 * scale);
317+
ctx.globalAlpha = 0.5;
318+
ctx.fillRect(padding, descBlockY, descBlockW, descBlockH);
316319
ctx.restore();
317320

318321
ctx.save();
319322
ctx.strokeStyle = primaryColor;
320323
ctx.globalAlpha = 0.2;
321324
ctx.lineWidth = 1 * scale;
322325
ctx.setLineDash([3 * scale, 3 * scale]);
323-
ctx.strokeRect(padding, descBlockY, descBlockW, 100 * scale);
326+
ctx.strokeRect(padding, descBlockY, descBlockW, descBlockH);
324327
ctx.setLineDash([]);
325328
ctx.restore();
326329

327-
ctx.fillStyle = 'rgba(255,255,255,0.15)';
328-
ctx.font = `500 ${10 * scale}px "JetBrains Mono", monospace`;
329-
ctx.fillText('FIELD NOTES', padding + 12 * scale, descBlockY + 18 * scale);
330+
ctx.fillStyle = 'rgba(255,255,255,0.18)';
331+
ctx.font = `500 ${11 * scale}px "JetBrains Mono", monospace`;
332+
ctx.fillText('FIELD NOTES', padding + descPad, descBlockY + 24 * scale);
330333

331334
ctx.fillStyle = 'rgba(255,255,255,0.55)';
332-
ctx.font = `300 ${18 * scale}px "Inter", sans-serif`;
333-
wrapText(ctx, description, padding + 12 * scale, descBlockY + 42 * scale, descBlockW - 24 * scale, 26 * scale);
335+
ctx.font = `300 ${19 * scale}px "Inter", sans-serif`;
336+
wrapText(ctx, description, padding + descPad, descBlockY + 52 * scale, descBlockW - descPad * 2, 28 * scale);
334337

335338
// --- Stats panel (bottom-right) ---
336-
const statPanelW = 200 * scale;
337-
const statPanelH = 100 * scale;
339+
const metPad = 20 * scale;
340+
const statPanelW = 240 * scale;
341+
const statPanelH = 130 * scale;
338342
const statPanelX = width - padding - statPanelW;
339-
const statPanelY = height - padding - statPanelH - 20 * scale;
343+
const statPanelY = height - padding - statPanelH;
340344

341345
ctx.save();
342346
ctx.fillStyle = '#000000';
343-
ctx.globalAlpha = 0.45;
347+
ctx.globalAlpha = 0.5;
344348
ctx.fillRect(statPanelX, statPanelY, statPanelW, statPanelH);
345349
ctx.restore();
346350

@@ -351,35 +355,31 @@ export const topographic = (ctx, width, height, scale, data) => {
351355
ctx.strokeRect(statPanelX, statPanelY, statPanelW, statPanelH);
352356
ctx.restore();
353357

354-
ctx.fillStyle = 'rgba(255,255,255,0.15)';
355-
ctx.font = `500 ${10 * scale}px "JetBrains Mono", monospace`;
358+
ctx.fillStyle = 'rgba(255,255,255,0.18)';
359+
ctx.font = `500 ${11 * scale}px "JetBrains Mono", monospace`;
356360
ctx.textAlign = 'left';
357-
ctx.fillText('SURVEY METRICS', statPanelX + 12 * scale, statPanelY + 18 * scale);
361+
ctx.fillText('SURVEY METRICS', statPanelX + metPad, statPanelY + 24 * scale);
358362

359-
let metricY = statPanelY + 42 * scale;
363+
let metricY = statPanelY + 58 * scale;
360364
if (stars) {
361365
ctx.fillStyle = primaryColor;
362-
ctx.font = `800 ${28 * scale}px "Inter", sans-serif`;
363-
ctx.fillText(stars, statPanelX + 12 * scale, metricY);
364-
ctx.fillStyle = 'rgba(255,255,255,0.3)';
365-
ctx.font = `400 ${12 * scale}px "JetBrains Mono", monospace`;
366+
ctx.font = `800 ${30 * scale}px "Inter", sans-serif`;
367+
ctx.fillText(stars, statPanelX + metPad, metricY);
366368
const starsW = ctx.measureText(stars).width;
367-
ctx.font = `800 ${28 * scale}px "Inter", sans-serif`;
368-
ctx.font = `400 ${12 * scale}px "JetBrains Mono", monospace`;
369-
ctx.fillText('STARS', statPanelX + 12 * scale + starsW + 8 * scale, metricY);
370-
metricY += 34 * scale;
369+
ctx.fillStyle = 'rgba(255,255,255,0.3)';
370+
ctx.font = `400 ${13 * scale}px "JetBrains Mono", monospace`;
371+
ctx.fillText('STARS', statPanelX + metPad + starsW + 10 * scale, metricY);
372+
metricY += 36 * scale;
371373
}
372374

373375
if (forks) {
374376
ctx.fillStyle = secondaryColor;
375-
ctx.font = `800 ${28 * scale}px "Inter", sans-serif`;
376-
ctx.fillText(forks, statPanelX + 12 * scale, metricY);
377-
ctx.fillStyle = 'rgba(255,255,255,0.3)';
378-
ctx.font = `400 ${12 * scale}px "JetBrains Mono", monospace`;
377+
ctx.font = `800 ${30 * scale}px "Inter", sans-serif`;
378+
ctx.fillText(forks, statPanelX + metPad, metricY);
379379
const forksW = ctx.measureText(forks).width;
380-
ctx.font = `800 ${28 * scale}px "Inter", sans-serif`;
381-
ctx.font = `400 ${12 * scale}px "JetBrains Mono", monospace`;
382-
ctx.fillText('FORKS', statPanelX + 12 * scale + forksW + 8 * scale, metricY);
380+
ctx.fillStyle = 'rgba(255,255,255,0.3)';
381+
ctx.font = `400 ${13 * scale}px "JetBrains Mono", monospace`;
382+
ctx.fillText('FORKS', statPanelX + metPad + forksW + 10 * scale, metricY);
383383
}
384384

385385
// --- Pattern / grid status indicator ---

0 commit comments

Comments
 (0)