From 79838d7955c3b4b38663c58a0021b9e67d6890a6 Mon Sep 17 00:00:00 2001 From: Marc Mintel Date: Sun, 22 Feb 2026 18:01:58 +0100 Subject: [PATCH] fix(share): replace text watermark with LogoBlack in ComponentShareButton --- .../blog/build-first-digital-architecture.mdx | 79 ++++++++-------- .../src/components/ComponentShareButton.tsx | 90 +++++++++++-------- 2 files changed, 95 insertions(+), 74 deletions(-) diff --git a/apps/web/content/blog/build-first-digital-architecture.mdx b/apps/web/content/blog/build-first-digital-architecture.mdx index 71239bc..ffdc279 100644 --- a/apps/web/content/blog/build-first-digital-architecture.mdx +++ b/apps/web/content/blog/build-first-digital-architecture.mdx @@ -18,6 +18,7 @@ tags: ["architecture", "business", "roi"] Ich zeige Ihnen heute, warum Bauen die moderne Form der ökonomischen Effizienz ist, wie Sie technologische Schulden vermeiden und sich durch digitales Eigentum (IP) einen uneinholbaren Wettbewerbsvorteil sichern. +

TL;DR

@@ -27,12 +28,13 @@ tags: ["architecture", "business", "roi"] Wachstums-Hebel: Custom-Lösungen erzielen laut Deloitte ein um 15 % höheres Umsatzwachstum. - Effizienz: Unternehmen berichten von bis zu 20 % Zeitersparnis bei optimierten Kernprozessen. + Effizienz: Unternehmen berichten von 20-30 % Steigerung der Prozesseffizienz durch Process Mining und Customizing (KPMG). Souveränität: Wer den Code besitzt, kontrolliert Roadmap, Datenhoheit und Skalierbarkeit. +

Inhaltsverzeichnis

@@ -46,15 +48,15 @@ tags: ["architecture", "business", "roi"]

Die Sackgasse der Generic-Software

- Standard-Software ist darauf ausgelegt, dem kleinsten gemeinsamen Nenner zu gefallen. Man bekommt ein schnelles Resultat, läuft aber sofort gegen eine Wand, wenn man Prozesse wirklich optimieren will. Während die Initialkosten niedrig wirken, steigen die Lizenzkosten bei wachsender Nutzung oft linear an, ohne dass die Wertschöpfung im gleichen Maße wächst. + Standard-Software ist darauf ausgelegt, dem kleinsten gemeinsamen Nenner zu gefallen. Man bekommt ein schnelles Resultat, läuft aber sofort gegen eine Wand, wenn man Prozesse wirklich optimieren will. Während die Initialkosten niedrig wirken, steigen die Lizenzkosten bei wachsender Nutzung oft linear an, ohne dass die Wertschöpfung im gleichen Maße wächst. [Baukasten-Systeme bedrohen Ihre Unabhängigkeit](/blog/builder-systems-threaten-independence), indem sie Sie in ein Korsett aus vorgegebenen Workflows zwängen.
- +
- Ihre Wettbewerber nutzen wahrscheinlich exakt die gleiche Software wie Sie. Wo bleibt da der technologische Vorsprung? Wer nur mietet, wird niemals Marktführer, da die Innovationsgeschwindigkeit vom Drittanbieter diktiert wird. Zudem [bedrohen Baukasten-Systeme Ihre Unabhängigkeit](/blog/builder-systems-threaten-independence), indem sie Sie in ein Korsett aus vorgegebenen Workflows zwängen. + Ihre Wettbewerber nutzen wahrscheinlich exakt die gleiche Software wie Sie. Wo bleibt da der technologische Vorsprung? Wer nur mietet, wird niemals Marktführer, da die Innovationsgeschwindigkeit vom Drittanbieter diktiert wird. Deloitte berichtet, dass Unternehmen, die auf maßgeschneiderte Software setzen, einen deutlichen Umsatzschub gegenüber jenen erzielen, die sich rein auf Off-the-shelf-Produkte verlassen. @@ -62,15 +64,16 @@ tags: ["architecture", "business", "roi"]

Bauen bedeutet heute: Strategisches Kombinieren

- "Bauen" heißt heute nicht mehr, jedes Rad neu zu erfinden. Es bedeutet [Clean Code](/blog/clean-code-for-business-value) und die Nutzung moderner Headless-Architekturen. Wir nutzen spezialisierte Microservices, um Ihr individuelles System zu komponieren – präzise, schnell und ohne Ballast. Wer hier auf [professionelles Hosting](/blog/professional-hosting-operations) setzt, schafft ein stabiles Fundament. + "Bauen" heißt heute nicht mehr, jedes Rad neu zu erfinden. Es bedeutet [Clean Code](/blog/clean-code-for-business-value) und die Nutzung moderner Architekturen. Wer hier auf [professionelles Hosting](/blog/professional-hosting-operations) setzt, schafft ein stabiles Fundament. Wir nutzen spezialisierte Microservices, um Ihr individuelles System zu komponieren – präzise, schnell und ohne Ballast. @@ -80,71 +83,69 @@ tags: ["architecture", "business", "roi"]

Der wirtschaftliche Case von 'Build-First'

- Die Investition in Individualsoftware wird oft als Risiko wahrgenommen. Die nackten Zahlen der führenden Beratungsgesellschaften zeichnen jedoch ein anderes Bild. Unternehmen, die in maßgeschneiderte Systeme investieren, erzielen signifikante Vorteile bei Umsatz und Effizienz. + Die Investition in Individualsoftware wird oft als Risiko wahrgenommen. Die nackten Zahlen der führenden Beratungsgesellschaften zeichnen jedoch ein anderes Bild. Laut McKinsey können Organisationen, die fortschrittliche Analytics in Custom-Lösungen nutzen, eine Steigerung des EBITDA um 20 % verzeichnen. PwC ergänzt, dass die Implementierung digitaler Operationen zu Effizienzgewinnen von 15-20 % führt. - Maßgeschneiderte Software amortisiert sich oft bereits nach 12–24 Monaten. Ein wesentlicher Grund dafür ist die Reduktion von Fehlerraten durch bessere Prozessausrichtung. Eine Deloitte-Studie zeigt zudem, dass [langsame Ladezeiten Kunden kosten](/blog/slow-loading-costs-customers) – ein Problem, das Individualsoftware durch radikale Performance-Optimierung (z.B. [Google PageSpeed Guide](/blog/google-pagespeed-guide-warum-ladezeit-ihr-wichtigster-b2b-umsatzhebel-ist)) elegant löst. + Maßgeschneiderte Software amortisiert sich oft bereits nach 12–24 Monaten. Ein wesentlicher Grund dafür ist die Reduktion von Fehlerraten durch bessere Prozessausrichtung. [Langsame Ladezeiten kosten Kunden](/blog/slow-loading-costs-customers) – ein Problem, das Individualsoftware durch radikale Performance-Optimierung (z.B. [Google PageSpeed Guide](/blog/google-pagespeed-guide-warum-ladezeit-ihr-wichtigster-b2b-umsatzhebel-ist)) elegant löst.
- +
+ + +

Digitales Eigentum als strategischer Hebel

+ + + Wer den Code besitzt, besitzt die Zukunft seines Unternehmens. In Krisenzeiten oder bei strategischen Neuausrichtungen ist technische Unabhängigkeit ein entscheidender Faktor. [Warum Ihre Agentur für kleine Änderungen Wochen braucht](/blog/why-agencies-are-slow), liegt oft am mangelnden Zugriff auf die Kern-Logik gemieteter Systeme oder überladener Strukturen wie [WordPress-Plugins](/blog/hidden-costs-of-wordpress-plugins). + +
-

Digitales Eigentum als strategischer Hebel

- - Wer den Code besitzt, besitzt die Zukunft seines Unternehmens. In Krisenzeiten oder bei strategischen Neuausrichtungen ist technische Unabhängigkeit ein entscheidender Faktor. [Warum Ihre Agentur für kleine Änderungen Wochen braucht](/blog/why-agencies-are-slow), liegt oft am mangelnden Zugriff auf die Kern-Logik gemieteter Systeme oder überladener CMS-Strukturen wie [WordPress-Plugins](/blog/hidden-costs-of-wordpress-plugins). - - - - Ich erzeuge Architekturen, die konsequent auf Ownership setzen. Das bedeutet auch: Schutz vor globalen Ausfällen von Drittanbietern und eine drastisch reduzierte Angriffsfläche durch einen [systemischen DSGVO-Ansatz](/blog/gdpr-conformity-system-approach). + Ich erzeuge Architekturen, die konsequent auf Ownership setzen. Das bedeutet auch: Schutz vor globalen Ausfällen von Drittanbietern und eine drastisch reduzierte Angriffsfläche durch einen [systemischen DSGVO-Ansatz](/blog/gdpr-conformity-system-approach). Laut der Aberdeen Group sind Best-in-Class Unternehmen zu 52 % wahrscheinlicher dazu geneigt, ihre Kernprozesse vollständig zu automatisieren – eine Flexibilität, die nur Eigenentwicklungen bieten. - - Laut Infosys reporten Organisationen, die KI-getriebene Custom-Lösungen implementieren, eine durchschnittliche Produktivitätssteigerung von 11,8 %. Dies ist nur möglich, wenn die Software-Architektur tief in die eigenen Datenstrukturen integriert ist – ein Level an Synergie, das Standard-SaaS selten erreicht. - -

Der Haken an der Sache (Ehrliche Analyse)

- Keine Strategie ist ohne Nachteile. Build-First erfordert Mut und ein höheres Commitment des Managements in der frühen Phase. Wer kurzfristige Budget-Ziele über langfristige Marktführerschaft stellt, wird mit einer Eigenentwicklung zunächst hadern. + Keine Strategie ist ohne Nachteile. Build-First erfordert Mut und ein höheres Commitment des Managements in der frühen Phase. Gartner prognostiziert, dass Organisationen durch Hyperautomatisierung bis 2024 ihre Betriebskosten um 30 % senken können – doch der Weg dorthin erfordert initiale Investitionen in die Architektur.
- +

Fazit: Hören Sie auf zu mieten, fangen Sie an zu bauen

@@ -162,22 +163,22 @@ tags: ["architecture", "business", "roi"] - Qualität und Marktführerschaft sind keine Zufallsprodukte, sondern eine bewusste Entscheidung für den Bau eigener Werte. Gemäß Deloitte berichten Unternehmen mit maßgeschneiderter Software von 12 % höherer Kundenzufriedenheit. Verwandeln Sie Ihre IT von einem unvermeidbaren Kostenfaktor in einen strategischen Vermögenswert. + Qualität und Marktführerschaft sind keine Zufallsprodukte, sondern eine bewusste Entscheidung für den Bau eigener Werte. Gemäß Deloitte resultiert die strategische Adoption von Custom Solutions in einem ca. 15 %igen Umsatzvorteil. Verwandeln Sie Ihre IT von einem unvermeidbaren Kostenfaktor in einen strategischen Vermögenswert, der Ihr Unternehmen über Jahrzehnte trägt.

Wann lohnt sich 'Build' gegenüber 'Buy' finanziell?

- Es lohnt sich, wenn die SaaS-Lizenzkosten bei Skalierung die Entwicklungskosten binnen 24–36 Monaten übersteigen. Ebenso, wenn Standardsoftware Ihre Kernprozesse nicht mehr zu 100 % abbilden kann und manuelle Workarounds entstehen. + Es lohnt sich, wenn die SaaS-Lizenzkosten bei Skalierung die Entwicklungskosten binnen 24–36 Monaten übersteigen. Ebenso, wenn Standardsoftware Ihre Kernprozesse nicht mehr zu 100 % abbilden kann. -

Ist das Risiko des Scheiterns bei Eigenentwicklungen nicht zu hoch?

+

Wie wirkt sich Custom Software auf die Marge aus?

- Durch modernste Frameworks und einen modularen MVP-Ansatz wird das Risiko minimiert. Man baut heute in kleinen, validierbaren Zyklen statt in monolithischen Großprojekten, was die Erfolgswahrscheinlichkeit massiv erhöht. + Durch die Automatisierung von Kernprozessen (bis zu 52 % höhere Wahrscheinlichkeit bei Top-Unternehmen) sinken die operativen Kosten dauerhaft, was die EBITDA-Marge laut McKinsey um bis zu 20 % steigern kann. -

Gibt es hybride Ansätze für B2B-Unternehmen?

+

Was passiert mit der Wartung bei Eigenentwicklungen?

- Absolut. Man kann Commodities (wie E-Mail-Versand) mieten, aber die wettbewerbsdifferenzierenden Kernfunktionen (wie Konfiguratoren oder Logistik-Logik) zwingend selbst bauen, um die Kontrolle zu behalten. + In einer modernen Headless-Architektur ist die Wartung oft geringer als bei monolithischen Systemen, da Komponenten unabhängig voneinander aktualisiert werden können, ohne das Gesamtsystem zu gefährden. \ No newline at end of file diff --git a/apps/web/src/components/ComponentShareButton.tsx b/apps/web/src/components/ComponentShareButton.tsx index 3919544..08844fc 100644 --- a/apps/web/src/components/ComponentShareButton.tsx +++ b/apps/web/src/components/ComponentShareButton.tsx @@ -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 = ({ 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;