mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(share): replace text watermark with LogoBlack in ComponentShareButton
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 8s
Details
Build & Deploy / 🏗️ Build (push) Failing after 16s
Details
Build & Deploy / 🧪 QA (push) Failing after 2m1s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 18:01:58 +01:00
parent e20e7cb1d0
commit 79838d7955
2 changed files with 95 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
apps/web/src/components/ComponentShareButton.tsx
View File

@@ -6,6 +6,7 @@ import { ShareModal } from "./ShareModal";
import { useAnalytics } from "./analytics/useAnalytics";
import * as htmlToImage from "html-to-image";
import QRCode from "qrcode";
import LogoBlack from "../assets/logo/Logo-Black-Transparent.svg";
interface ComponentShareButtonProps {
targetId: string;
@@ -65,48 +66,67 @@ export const ComponentShareButton: React.FC<ComponentShareButtonProps> = ({
ctx.fillRect(x, y, wWidth, wHeight);
}
// Draw text
// Draw text and logo
ctx.shadowColor = "transparent";
ctx.textAlign = "right";
ctx.textBaseline = "middle";
// "mintel."
ctx.font = "900 36px sans-serif";
const textX = x + wWidth - wHeight - 12; // Right of text, left of QR code
const mintelText = "mintel";
const dotText = ".";
const dotWidth = ctx.measureText(dotText).width;
const mintelWidth = ctx.measureText(mintelText).width;
(async () => {
try {
const qrImg = new Image();
qrImg.src = qrCodeSrc;
await new Promise(r => { qrImg.onload = r; qrImg.onerror = r; });
ctx.fillStyle = "#0ea5e9";
ctx.fillText(dotText, textX, y + 40);
ctx.fillStyle = "#0f172a";
ctx.fillText(mintelText, textX - dotWidth, y + 40);
const logoSrc = typeof LogoBlack === 'string' ? LogoBlack : (LogoBlack as any).src;
const logoImg = new Image();
logoImg.src = logoSrc;
await new Promise(r => { logoImg.onload = r; logoImg.onerror = r; });
// "Artikel lesen"
ctx.font = "600 20px sans-serif";
ctx.fillStyle = "#64748b";
ctx.fillText("Zum Artikel", textX, y + 76);
if (logoImg.width > 0) {
// Calculate logo dimensions
const logoHeight = 32;
const logoWidth = logoImg.width * (logoHeight / logoImg.height);
const logoX = x + 24;
const logoY = y + (wHeight - logoHeight) / 2;
// Draw solid line separator
ctx.beginPath();
ctx.moveTo(textX + 6, y + 20);
ctx.lineTo(textX + 6, y + wHeight - 20);
ctx.strokeStyle = "#e2e8f0";
ctx.lineWidth = 2;
ctx.stroke();
// Draw Logo
ctx.drawImage(logoImg, logoX, logoY, logoWidth, logoHeight);
// Draw QR Code
const qrImg = new Image();
qrImg.onload = () => {
const qrSize = wHeight - 24; // padding 12*2 inside pill
const qrX = x + wWidth - qrSize - 12;
const qrY = y + 12;
ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize);
resolve(canvas.toDataURL("image/png"));
};
qrImg.onerror = () => resolve(base64Img); // Error fallback
qrImg.src = qrCodeSrc;
// Draw "Zum Artikel" text right of the logo
ctx.font = "600 20px sans-serif";
ctx.fillStyle = "#64748b";
ctx.textAlign = "left";
ctx.fillText("Zum Artikel", logoX + logoWidth + 24, y + wHeight / 2 + 2);
} else {
// Fallback if logo fails to load for some reason
ctx.font = "900 36px sans-serif";
ctx.fillStyle = "#0f172a";
ctx.textAlign = "left";
ctx.fillText("mintel.", x + 24, y + wHeight / 2 + 4);
}
// Draw solid line separator before QR
const qrSize = wHeight - 24; // padding 12*2 inside pill
const qrX = x + wWidth - qrSize - 12;
const qrY = y + 12;
const sepX = qrX - 12;
ctx.beginPath();
ctx.moveTo(sepX, y + 20);
ctx.lineTo(sepX, y + wHeight - 20);
ctx.strokeStyle = "#e2e8f0";
ctx.lineWidth = 2;
ctx.stroke();
// Draw QR Code
if (qrImg.width > 0) {
ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize);
}
resolve(canvas.toDataURL("image/png"));
} catch (e) {
resolve(base64Img); // Error fallback
}
})();
};
img.onerror = () => resolve(base64Img); // Error fallback
img.src = base64Img;