pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): add technology badges on the previews

Browse Source
This commit is contained in:
Stevan
2025-11-27 18:37:59 +01:00
parent 9db5bec372
commit b05e98ea1e
10 changed files with 67 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/Projects/TopScreen/Previews.vue
View File

@@ -13,6 +13,53 @@ const getBounds = () => ({
endIndex: Math.min(store.currentProject + 1 + 1, store.projects.length),
});
const TECH_BADGES: Record<string, { label: string; color: string }> = {
nuxt: { label: "Nuxt", color: "#00DC82" },
typescript: { label: "TypeScript", color: "#3178C6" },
rust: { label: "Rust", color: "#CE422B" },
html: { label: "HTML", color: "#E34C26" },
go: { label: "Go", color: "#00ADD8" },
node: { label: "Node", color: "#339933" },
stenciljs: { label: "Stencil", color: "#5851FF" },
jira: { label: "Jira", color: "#0052CC" },
confluence: { label: "Confluence", color: "#2DA2E5" },
vba: { label: "VBA", color: "#5D2B90" },
};
const BADGE_PADDING = 2;
const BADGE_SPACING = 2;
const BADGE_MARGIN = 1;
const BADGE_HEIGHT = 11;
const drawTechBadges = (
ctx: CanvasRenderingContext2D,
technologies: string[],
x: number,
y: number,
): void => {
ctx.font = "7px NDS7";
let currentX = x;
for (let i = technologies.length - 1; i >= 0; i--) {
const badge = TECH_BADGES[technologies[i]?.toLowerCase() ?? ""];
if (!badge) throw new Error(`Unknown technology: ${technologies[i]}`);
const { actualBoundingBoxRight: textWidth } = ctx.measureText(badge.label);
const badgeWidth = textWidth + BADGE_PADDING * 2;
currentX -= badgeWidth;
ctx.fillStyle = badge.color;
ctx.fillRect(currentX, y, badgeWidth, BADGE_HEIGHT);
ctx.fillStyle = "#FFFFFF";
ctx.textBaseline = "top";
ctx.fillText(badge.label, currentX + BADGE_PADDING, y + 2);
currentX -= BADGE_SPACING;
}
};
useRender((ctx) => {
const project = store.projects[store.currentProject];
if (!project) return;
@@ -39,6 +86,7 @@ useRender((ctx) => {
ctx.fillStyle = "#000000";
ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
ctx.save();
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 2;
@@ -46,6 +94,15 @@ useRender((ctx) => {
ctx.drawImage(preview, 0, 0);
ctx.restore();
const project = store.projects[i]!;
if (project.technologies && project.technologies.length > 0) {
const badgeY = preview.height - BADGE_HEIGHT - BADGE_MARGIN;
const badgeX = preview.width - BADGE_MARGIN;
drawTechBadges(ctx, project.technologies, badgeX, badgeY);
}
ctx.restore();
}
});