Skip to content

Commit d10ba6e

Browse files
fezcodefezcode
committed
feat(apps): replace matrix theme with nature theme in github thumbnail generator
1 parent 9a32103 commit d10ba6e

File tree

4 files changed

+121
-90
lines changed

4 files changed

+121
-90
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const THEME_OPTIONS = [
4040
{ value: 'gta', label: 'GRAND_THEFT_AUTO' },
4141
{ value: 'rich', label: 'LUXURY_GOLD' },
4242
{ value: 'abstract', label: 'ABSTRACT_SHAPES' },
43-
{ value: 'matrix', label: 'THE_MATRIX' },
43+
{ value: 'nature', label: 'NATURE_VIBES' },
4444
];
4545

4646
const GithubThumbnailGeneratorPage = () => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { crtAmber } from './themes/crtAmber';
2020
import { gta } from './themes/gta';
2121
import { rich } from './themes/rich';
2222
import { abstract } from './themes/abstract';
23-
import { matrix } from './themes/matrix';
23+
import { nature } from './themes/nature';
2424

2525
export const themeRenderers = {
2626
modern,
@@ -45,5 +45,5 @@ export const themeRenderers = {
4545
gta,
4646
rich,
4747
abstract,
48-
matrix,
48+
nature,
4949
};

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

Lines changed: 0 additions & 87 deletions
This file was deleted.

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import { wrapText } from '../utils';
2+
3+
export const nature = (ctx, width, height, scale, data) => {
4+
const { repoOwner, repoName, description, language, stars, forks } = data;
5+
// NATURE Style
6+
7+
// Background: Soft gradient (Sky to Earth)
8+
const grad = ctx.createLinearGradient(0, 0, 0, height);
9+
grad.addColorStop(0, '#e0f7fa'); // Light Sky Blue
10+
grad.addColorStop(1, '#f1f8e9'); // Light Greenish
11+
ctx.fillStyle = grad;
12+
ctx.fillRect(0, 0, width, height);
13+
14+
// Sun
15+
ctx.fillStyle = '#fff9c4'; // Pale yellow sun
16+
ctx.beginPath();
17+
ctx.arc(width * 0.85, height * 0.2, 120 * scale, 0, Math.PI * 2);
18+
ctx.fill();
19+
20+
// Hills (Bezier curves)
21+
ctx.fillStyle = '#a5d6a7'; // Light Green
22+
ctx.beginPath();
23+
ctx.moveTo(0, height);
24+
ctx.lineTo(0, height * 0.7);
25+
ctx.bezierCurveTo(width * 0.3, height * 0.6, width * 0.6, height * 0.8, width, height * 0.65);
26+
ctx.lineTo(width, height);
27+
ctx.fill();
28+
29+
ctx.fillStyle = '#81c784'; // Medium Green
30+
ctx.beginPath();
31+
ctx.moveTo(0, height);
32+
ctx.lineTo(0, height * 0.85);
33+
ctx.bezierCurveTo(width * 0.2, height * 0.75, width * 0.5, height * 0.9, width, height * 0.8);
34+
ctx.lineTo(width, height);
35+
ctx.fill();
36+
37+
// Procedural Trees (Simple Triangles/Circles)
38+
const drawTree = (x, y, size) => {
39+
// Trunk
40+
ctx.fillStyle = '#8d6e63'; // Brown
41+
ctx.fillRect(x - size/4, y, size/2, size);
42+
43+
// Leaves
44+
ctx.fillStyle = '#4caf50'; // Leaf Green
45+
ctx.beginPath();
46+
ctx.moveTo(x, y - size * 1.5);
47+
ctx.lineTo(x + size, y + size * 0.2);
48+
ctx.lineTo(x - size, y + size * 0.2);
49+
ctx.fill();
50+
51+
ctx.beginPath();
52+
ctx.moveTo(x, y - size * 2.5);
53+
ctx.lineTo(x + size * 0.8, y - size * 0.5);
54+
ctx.lineTo(x - size * 0.8, y - size * 0.5);
55+
ctx.fill();
56+
};
57+
58+
// Draw a few trees
59+
drawTree(100 * scale, height * 0.75, 40 * scale);
60+
drawTree(180 * scale, height * 0.78, 50 * scale);
61+
drawTree(width - 150 * scale, height * 0.7, 60 * scale);
62+
63+
// Content Frame (Wood/Paper look)
64+
const framePadding = 80 * scale;
65+
const boxX = framePadding;
66+
const boxY = framePadding;
67+
const boxW = width - framePadding * 2;
68+
const boxH = height - framePadding * 2;
69+
70+
ctx.save();
71+
ctx.shadowColor = 'rgba(0,0,0,0.1)';
72+
ctx.shadowBlur = 20 * scale;
73+
ctx.shadowOffsetY = 10 * scale;
74+
75+
ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
76+
ctx.beginPath();
77+
ctx.roundRect(boxX, boxY, boxW, boxH, 20 * scale);
78+
ctx.fill();
79+
ctx.restore();
80+
81+
// Decorative border on the card
82+
ctx.strokeStyle = '#a1887f';
83+
ctx.lineWidth = 2 * scale;
84+
ctx.strokeRect(boxX + 10*scale, boxY + 10*scale, boxW - 20*scale, boxH - 20*scale);
85+
86+
// Text Content
87+
ctx.textAlign = 'center';
88+
89+
// Icon/Emoji at top
90+
ctx.font = `${60 * scale}px serif`;
91+
ctx.fillText('🌿', width/2, boxY + 70 * scale);
92+
93+
// Title
94+
ctx.fillStyle = '#33691e'; // Dark Green
95+
ctx.font = `bold ${80 * scale}px "Georgia", "Times New Roman", serif`;
96+
ctx.fillText(repoName, width/2, boxY + 160 * scale);
97+
98+
// Owner
99+
ctx.fillStyle = '#5d4037'; // Brown
100+
ctx.font = `italic ${30 * scale}px "Georgia", serif`;
101+
ctx.fillText(`cultivated by ${repoOwner}`, width/2, boxY + 210 * scale);
102+
103+
// Description
104+
ctx.fillStyle = '#4e342e';
105+
ctx.font = `normal ${28 * scale}px "Helvetica Neue", sans-serif`;
106+
wrapText(ctx, description, width/2, boxY + 280 * scale, boxW - 100 * scale, 40 * scale);
107+
108+
// Bottom Stats (Leaves/Flowers)
109+
const statY = boxY + boxH - 60 * scale;
110+
ctx.font = `bold ${24 * scale}px "Courier New", monospace`;
111+
ctx.fillStyle = '#558b2f';
112+
113+
let stats = `${language}`;
114+
if (stars) stats += ` • ${stars} ☼`; // Sun symbol for stars
115+
if (forks) stats += ` • ${forks} ⑂`;
116+
117+
ctx.fillText(stats, width/2, statY);
118+
};

0 commit comments

Comments
 (0)