Commit 36634bb

import { wrapText } from '../utils';

export const bauhaus = (ctx, width, height, scale, data) => {

const { repoOwner, repoName, description, language, stars } = data;

// BAUHAUS_GEO

ctx.fillStyle = '#f0f0f0';

ctx.fillRect(0, 0, width, height);

// Geometric Composition

ctx.fillStyle = '#D93025'; // Red

ctx.beginPath();

ctx.arc(width * 0.2, height * 0.3, 150 * scale, 0, Math.PI * 2);

ctx.fill();

ctx.fillStyle = '#F4B400'; // Yellow

ctx.fillRect(width * 0.6, height * 0.1, 400 * scale, 200 * scale);

ctx.fillStyle = '#1A73E8'; // Blue

ctx.beginPath();

ctx.moveTo(width * 0.8, height);

ctx.lineTo(width, height * 0.6);

ctx.lineTo(width, height);

ctx.fill();

// Diagonal Black Bar

ctx.fillStyle = '#000';

ctx.save();

ctx.translate(width/2, height/2);

ctx.rotate(-Math.PI / 12);

ctx.fillRect(-width, 0, width*2, 20 * scale);

ctx.restore();

const font = '"Futura", "Helvetica Neue", "Arial", sans-serif';

// Typography

ctx.fillStyle = '#000';

ctx.textAlign = 'left';

ctx.font = `900 ${120 * scale}px ${font}`;

ctx.fillText(repoName, 60 * scale, height * 0.65);

ctx.font = `bold ${40 * scale}px ${font}`;

ctx.fillText(repoOwner.toUpperCase(), 60 * scale, height * 0.5);

// Description in a block

ctx.fillStyle = '#333';

ctx.font = `normal ${30 * scale}px ${font}`;

wrapText(ctx, description, 60 * scale, height * 0.75, width * 0.6, 40 * scale);

// Side stats vertical

ctx.save();

ctx.translate(width - 60 * scale, 60 * scale);

ctx.rotate(Math.PI / 2);

ctx.textAlign = 'left';

ctx.font = `bold ${24 * scale}px ${font}`;

ctx.fillText(`${language.toUpperCase()} // STARS: ${stars || 0}`, 0, 0);

ctx.restore();

import { wrapText } from '../utils';

export const blueprint = (ctx, width, height, scale, data) => {

const { repoOwner, repoName, description, stars, supportUrl } = data;

// Improved Blueprint CAD Style

const blueBg = '#004ecb'; // Deeper, more authentic blueprint blue

ctx.fillStyle = blueBg;

ctx.fillRect(0, 0, width, height);

const padding = 60 * scale;

// Grid (Subtle)

ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';

ctx.lineWidth = 1 * scale;

const gridSize = 40 * scale;

ctx.beginPath();

for (let x = 0; x < width; x += gridSize) ctx.rect(x, 0, 1, height);

for (let y = 0; y < height; y += gridSize) ctx.rect(0, y, width, 1);

ctx.stroke();

// Major Grid Lines

ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';

ctx.lineWidth = 2 * scale;

ctx.beginPath();

for (let x = 0; x < width; x += gridSize * 4) ctx.rect(x, 0, 1, height);

for (let y = 0; y < height; y += gridSize * 4) ctx.rect(0, y, width, 1);

ctx.stroke();

// Main Frame

ctx.strokeStyle = 'white';

ctx.lineWidth = 6 * scale;

ctx.strokeRect(padding, padding, width - (padding * 2), height - (padding * 2));

// Title Block (Bottom Left)

const blockW = 500 * scale;

const blockH = 180 * scale;

const blockX = padding; // Move to left

const blockY = height - padding - blockH;

ctx.lineWidth = 3 * scale;

ctx.fillStyle = 'white';

ctx.strokeRect(blockX, blockY, blockW, blockH);

// Internal lines of Title Block

const rowH = blockH / 4;

ctx.beginPath();

for(let i=1; i<4; i++) {

ctx.moveTo(blockX, blockY + (i*rowH));

ctx.lineTo(blockX + blockW, blockY + (i*rowH));

}

ctx.moveTo(blockX + (blockW * 0.3), blockY);

ctx.lineTo(blockX + (blockW * 0.3), blockY + blockH);

ctx.stroke();

// Text in Block

ctx.font = `bold ${14 * scale}px "Courier New", monospace`;

ctx.textAlign = 'left';

ctx.textBaseline = 'middle';

const labels = ['PROJECT', 'AUTHOR', 'URL', 'STARS'];

const values = [repoName.substring(0, 20).toUpperCase(), repoOwner.toUpperCase(), (supportUrl || '').toUpperCase(), stars || '0'];

labels.forEach((label, i) => {

ctx.fillText(label, blockX + 10 * scale, blockY + (i * rowH) + (rowH/2));

ctx.fillText(values[i], blockX + (blockW * 0.3) + 10 * scale, blockY + (i * rowH) + (rowH/2));

});

// Main Drawing Area Content

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

// Center Lines

ctx.setLineDash([20 * scale, 10 * scale, 5 * scale, 10 * scale]);

ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';

ctx.lineWidth = 1 * scale;

ctx.beginPath();

ctx.moveTo(width/2, padding); ctx.lineTo(width/2, height - padding); // Vert

ctx.moveTo(padding, height/2); ctx.lineTo(width - padding, height/2); // Horiz

ctx.stroke();

ctx.setLineDash([]);

// Project Name (Main) - Moved Up

ctx.font = `bold ${100 * scale}px "Courier New", monospace`;

ctx.fillStyle = 'white';

ctx.fillText(repoName.toUpperCase(), width/2, height/2 - 80 * scale);

// Measurement Lines

const textW = ctx.measureText(repoName.toUpperCase()).width;

const lineY = height/2; // adjusted

ctx.beginPath();

ctx.moveTo(width/2 - textW/2, lineY);

ctx.lineTo(width/2 + textW/2, lineY);

ctx.strokeStyle = 'white';

ctx.lineWidth = 2 * scale;

ctx.stroke();

// Arrows

ctx.beginPath();

ctx.moveTo(width/2 - textW/2 + 20*scale, lineY - 10*scale); ctx.lineTo(width/2 - textW/2, lineY); ctx.lineTo(width/2 - textW/2 + 20*scale, lineY + 10*scale);

ctx.moveTo(width/2 + textW/2 - 20*scale, lineY - 10*scale); ctx.lineTo(width/2 + textW/2, lineY); ctx.lineTo(width/2 + textW/2 - 20*scale, lineY + 10*scale);

ctx.fill();

// Description - Bottom Right

ctx.textAlign = 'left';

ctx.textBaseline = 'top';

ctx.font = `${24 * scale}px "Courier New", monospace`;

ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';

const descX = width/2 + 40 * scale;

const descY = height/2 + 40 * scale;

const descW = width/2 - padding - 80 * scale;

// Label for description

ctx.fillText("NOTES:", descX, descY);

// Wrap text below "NOTES:"

wrapText(ctx, description.toUpperCase(), descX, descY + 40 * scale, descW, 35 * scale);

import { wrapText } from '../utils';

export const brutalist = (ctx, width, height, scale, data) => {

const { primaryColor, secondaryColor, repoOwner, repoName, description, language, stars, forks, supportUrl } = data;

// Brutalist Header Bar

ctx.fillStyle = primaryColor;

ctx.fillRect(0, 0, width, 20 * scale);

const padding = 60 * scale;

const borderW = 4 * scale;

// Main Border

ctx.strokeStyle = '#ffffff';

ctx.lineWidth = borderW;

ctx.strokeRect(padding, padding, width - padding * 2, height - padding * 2);

// Decorative Corners

const cornerSize = 20 * scale;

ctx.fillStyle = '#ffffff';

ctx.fillRect(padding - borderW/2, padding - borderW/2, cornerSize, cornerSize); // TL

ctx.fillRect(width - padding - cornerSize + borderW/2, padding - borderW/2, cornerSize, cornerSize); // TR

ctx.fillRect(padding - borderW/2, height - padding - cornerSize + borderW/2, cornerSize, cornerSize); // BL

ctx.fillRect(width - padding - cornerSize + borderW/2, height - padding - cornerSize + borderW/2, cornerSize, cornerSize); // BR

// Content

ctx.fillStyle = '#ffffff';

ctx.font = `bold ${40 * scale}px "Courier New", monospace`;

ctx.fillText(`USER: ${repoOwner.toUpperCase()}`, padding + 40 * scale, padding + 80 * scale);

ctx.fillStyle = primaryColor;

ctx.font = `900 ${100 * scale}px "Impact", sans-serif`;

ctx.fillText(repoName.toUpperCase(), padding + 35 * scale, padding + 200 * scale);

ctx.fillStyle = '#ffffff';

ctx.font = `${30 * scale}px "Courier New", monospace`;

wrapText(ctx, description, padding + 40 * scale, padding + 300 * scale, width - padding * 3, 40 * scale);

// Footer Info

ctx.fillStyle = secondaryColor;

ctx.fillRect(padding, height - padding - 80 * scale, width - padding * 2, 80 * scale);

ctx.fillStyle = '#000000';

ctx.font = `bold ${30 * scale}px "Courier New", monospace`;

ctx.textBaseline = 'middle';

ctx.textAlign = 'left';

ctx.fillText(`LANG: ${language.toUpperCase()}`, padding + 40 * scale, height - padding - 40 * scale);

ctx.textAlign = 'right';

let statsText = '';

if (stars) statsText += `★ ${stars} `;

if (forks) statsText += `⑂ ${forks}`;

const rightPadding = padding + 40 * scale;

if (supportUrl) {

ctx.font = `${24 * scale}px "Courier New", monospace`;

ctx.fillText(supportUrl.toUpperCase(), width - rightPadding, height - padding - 40 * scale);

const urlWidth = ctx.measureText(supportUrl.toUpperCase()).width;

ctx.font = `bold ${30 * scale}px "Courier New", monospace`;

if (statsText) {

ctx.fillText(statsText, width - rightPadding - urlWidth - 60 * scale, height - padding - 40 * scale);

}

} else {

ctx.fillText(statsText, width - rightPadding, height - padding - 40 * scale);

}

import { wrapText } from '../utils';

export const clay = (ctx, width, height, scale, data) => {

const { repoOwner, repoName, description, language, stars, forks, supportUrl } = data;

// PLAYFUL CLAY Style

ctx.fillStyle = '#f0f4f8'; // Light blue-ish grey

ctx.fillRect(0, 0, width, height);

const cardColor = '#ffffff';

const padding = 60 * scale;

// Main Container (Claymorphism: rounded, inner shadow, outer shadow)

const drawClayRect = (x, y, w, h, radius) => {

ctx.save();

// Outer Shadow

ctx.shadowColor = '#b8c2cc';

ctx.shadowBlur = 30 * scale;

ctx.shadowOffsetY = 20 * scale;

ctx.fillStyle = cardColor;

ctx.beginPath();

ctx.roundRect(x, y, w, h, radius);

ctx.fill();

// Inner Highlight (simulated with clipping)

ctx.shadowColor = 'transparent';

ctx.clip();

ctx.strokeStyle = 'rgba(255,255,255,0.8)';

ctx.lineWidth = 10 * scale;

ctx.stroke();

ctx.restore();

};

// Large Card

drawClayRect(padding, padding, width - padding*2, height - padding*2, 60 * scale);

// Content

ctx.textAlign = 'center';

ctx.fillStyle = '#334e68'; // Dark blue-grey text

// Round Font

const roundFont = '"Nunito", "Quicksand", "Arial Rounded MT Bold", sans-serif';

ctx.font = `800 ${90 * scale}px ${roundFont}`;

ctx.fillText(repoName, width/2, height * 0.35);

// Owner & URL Group

const ownerText = `by ${repoOwner}`;

ctx.font = `600 ${30 * scale}px ${roundFont}`;

const ownerWidth = ctx.measureText(ownerText).width;

let totalGroupWidth = ownerWidth;

if (supportUrl) {

ctx.font = `600 ${20 * scale}px ${roundFont}`;

totalGroupWidth += ctx.measureText(supportUrl).width + 30 * scale;

}

const groupX = (width - totalGroupWidth) / 2;

ctx.textAlign = 'left';

ctx.fillStyle = '#829ab1';

ctx.font = `600 ${30 * scale}px ${roundFont}`;

ctx.fillText(ownerText, groupX, height * 0.45);

if (supportUrl) {

ctx.fillStyle = '#bcccdc';

ctx.font = `600 ${20 * scale}px ${roundFont}`;

ctx.fillText(supportUrl, groupX + ownerWidth + 30 * scale, height * 0.45);

}

// Description

ctx.textAlign = 'center';

ctx.fillStyle = '#486581';

ctx.font = `500 ${32 * scale}px ${roundFont}`;

wrapText(ctx, description, width/2, height * 0.55, width * 0.7, 45 * scale);

// Floating Pills for stats

const pillW = 200 * scale;

const pillH = 80 * scale;

const pillY = height * 0.75;

const drawClayPill = (x, text, color) => {

ctx.save();

ctx.shadowColor = color + '66'; // semi transparent

ctx.shadowBlur = 20 * scale;

ctx.shadowOffsetY = 10 * scale;

ctx.fillStyle = color;

ctx.beginPath();

ctx.roundRect(x - pillW/2, pillY, pillW, pillH, 40 * scale);

ctx.fill();

ctx.fillStyle = 'white';

ctx.font = `bold ${24 * scale}px ${roundFont}`;

ctx.fillText(text, x, pillY + pillH/2 + 8*scale);

ctx.restore();

};

let pillX = width / 2;

if (stars) {

drawClayPill(pillX - 250*scale, `${stars} ★`, '#f6ad55'); // Orange

}

drawClayPill(pillX, language, '#63b3ed'); // Blue

if (forks) {

drawClayPill(pillX + 250*scale, `${forks} ⑂`, '#68d391'); // Green

}