Skip to content

Commit 8759dab

Browse files
fezcodefezcode
committed
fix: adjust existing github thumbnail themes to use primary/secondary colors
1 parent c28897c commit 8759dab

File tree

5 files changed

+29
-25
lines changed

5 files changed

+29
-25
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { wrapText } from '../utils';
22

33
export const blueprint = (ctx, width, height, scale, data) => {
4-
const { repoOwner, repoName, description, stars, supportUrl } = data;
4+
const { primaryColor, repoOwner, repoName, description, stars, supportUrl } = data;
55
// Improved Blueprint CAD Style
6-
const blueBg = '#004ecb'; // Deeper, more authentic blueprint blue
7-
ctx.fillStyle = blueBg;
6+
ctx.fillStyle = primaryColor; // Use selected primary color for background
87
ctx.fillRect(0, 0, width, height);
98

109
const padding = 60 * scale;

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,27 @@ export const japanese = (ctx, width, height, scale, data) => {
1111
} = data;
1212
// JAPANESE POP Style
1313

14-
// Dynamic background pattern (Halftone / Stripes) ctx.fillStyle = secondaryColor; // Bg base
14+
// Dynamic background pattern (Sunburst)
1515
ctx.fillStyle = secondaryColor;
1616
ctx.fillRect(0, 0, width, height);
1717

18-
// Sunburst or Stripes
18+
// Sunburst rays
1919
ctx.save();
2020
ctx.translate(width / 2, height / 2);
2121
ctx.fillStyle = primaryColor;
22-
for (let i = 0; i < 12; i++) {
23-
ctx.rotate(Math.PI / 6);
24-
ctx.fillRect(0, 0, width, height);
22+
const rays = 16;
23+
for (let i = 0; i < rays; i++) {
24+
ctx.beginPath();
25+
ctx.moveTo(0, 0);
26+
ctx.arc(0, 0, width, (i * 2 * Math.PI) / rays, ((i * 2 + 1) * Math.PI) / rays);
27+
ctx.lineTo(0, 0);
28+
ctx.fill();
2529
}
2630
ctx.restore();
2731

2832
// Center Circle (Sun)
2933
ctx.beginPath();
30-
ctx.arc(width / 2, height / 2, 300 * scale, 0, Math.PI * 2);
34+
ctx.arc(width / 2, height / 2, 220 * scale, 0, Math.PI * 2);
3135
ctx.fillStyle = '#ffffff';
3236
ctx.fill();
3337

@@ -36,10 +40,10 @@ export const japanese = (ctx, width, height, scale, data) => {
3640
ctx.textBaseline = 'middle';
3741

3842
// Repo Name (Bold, Stroke)
39-
ctx.font = `900 ${120 * scale}px "Arial Black", sans-serif`;
43+
ctx.font = `900 ${100 * scale}px "Arial Black", sans-serif`;
4044
ctx.fillStyle = '#000';
4145
ctx.strokeStyle = '#fff';
42-
ctx.lineWidth = 8 * scale;
46+
ctx.lineWidth = 10 * scale;
4347

4448
ctx.strokeText(repoName.toUpperCase(), width / 2, height / 2);
4549
ctx.fillText(repoName.toUpperCase(), width / 2, height / 2);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ export const neon = (ctx, width, height, scale, data) => {
3535
ctx.font = `900 ${100 * scale}px "Arial Black", sans-serif`;
3636
ctx.textAlign = 'left';
3737

38-
ctx.fillStyle = 'red';
38+
ctx.fillStyle = secondaryColor;
3939
ctx.fillText(
4040
repoName.toUpperCase(),
4141
padding - 4 * scale,
4242
padding + 100 * scale,
4343
);
44-
ctx.fillStyle = 'cyan';
44+
ctx.fillStyle = primaryColor;
4545
ctx.fillText(
4646
repoName.toUpperCase(),
4747
padding + 4 * scale,

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { wrapText } from '../utils';
22

33
export const popart = (ctx, width, height, scale, data) => {
4-
const { repoOwner, repoName, description, stars } = data;
4+
const { primaryColor, secondaryColor, repoOwner, repoName, description, stars } = data;
55
// POP_ART_COMIC
6-
ctx.fillStyle = '#FFE600'; // Bright Yellow
6+
ctx.fillStyle = primaryColor; // Primary background
77
ctx.fillRect(0, 0, width, height);
88

9-
// Halftone Pattern (Red dots)
10-
ctx.fillStyle = '#FF0000';
9+
// Halftone Pattern (Secondary color dots)
10+
ctx.fillStyle = secondaryColor;
1111
const dotSize = 4 * scale;
1212
const spacing = 12 * scale;
1313
for (let x = 0; x < width; x += spacing) {
@@ -58,7 +58,7 @@ export const popart = (ctx, width, height, scale, data) => {
5858
// Shadow effect
5959
ctx.fillStyle = '#000';
6060
ctx.fillText(repoName.toUpperCase(), 80 * scale, height - 120 * scale);
61-
ctx.fillStyle = '#0099ff';
61+
ctx.fillStyle = secondaryColor;
6262
ctx.fillText(repoName.toUpperCase(), 70 * scale, height - 130 * scale);
6363

6464
// Speech Bubble for description

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { wrapText } from '../utils';
33
export const swiss = (ctx, width, height, scale, data) => {
44
const {
55
primaryColor,
6+
secondaryColor,
67
repoOwner,
78
repoName,
89
description,
@@ -12,7 +13,7 @@ export const swiss = (ctx, width, height, scale, data) => {
1213
supportUrl,
1314
} = data;
1415
// SWISS GRID Style
15-
ctx.fillStyle = '#f1f1f1'; // Off-white background
16+
ctx.fillStyle = secondaryColor; // Background base
1617
ctx.fillRect(0, 0, width, height);
1718

1819
// Bold Asymmetry
@@ -24,7 +25,7 @@ export const swiss = (ctx, width, height, scale, data) => {
2425

2526
// Grid Lines
2627
ctx.strokeStyle = '#000';
27-
ctx.lineWidth = 2 * scale;
28+
ctx.lineWidth = 4 * scale;
2829
ctx.beginPath();
2930
ctx.moveTo(col1, 0);
3031
ctx.lineTo(col1, height); // Vertical split
@@ -39,24 +40,24 @@ export const swiss = (ctx, width, height, scale, data) => {
3940
ctx.stroke();
4041

4142
// Typography - Helvetica style (Arial/Inter fallback)
42-
const fontStack = '"Helvetica Neue", "Arial", sans-serif';
43+
const fontStack = '"Inter", "Helvetica Neue", "Arial", sans-serif';
4344
const padding = 40 * scale;
4445

4546
// 1. Top Right: Project Info
4647
ctx.fillStyle = '#000';
47-
ctx.font = `bold ${30 * scale}px ${fontStack}`;
48+
ctx.font = `bold ${32 * scale}px ${fontStack}`;
4849
ctx.textAlign = 'left';
4950
ctx.fillText(
5051
repoOwner.toUpperCase(),
5152
col1 + padding,
52-
row1 - padding - 30 * scale,
53+
row1 - padding - 35 * scale,
5354
);
5455

5556
// 2. Center Right: Description & Name
5657
// Repo Name huge
5758
ctx.fillStyle = '#000';
58-
ctx.font = `900 ${100 * scale}px ${fontStack}`;
59-
ctx.fillText(repoName, col1 + padding, row1 + 120 * scale);
59+
ctx.font = `900 ${110 * scale}px ${fontStack}`;
60+
ctx.fillText(repoName, col1 + padding, row1 + 130 * scale);
6061

6162
// Description
6263
ctx.font = `normal ${32 * scale}px ${fontStack}`;

0 commit comments

Comments
 (0)