2.2.30-rc.0

feat(og): adapt OG images to E-TIB branding and fix ArrayBuffer font parsing
fix: useSuspense bailout for TransitionProvider
2026-06-22 09:12:50 +02:00 · 2026-06-22 09:12:50 +02:00 · 2026-06-22 00:23:53 +02:00 · 2026-06-22 00:20:35 +02:00 · 2026-06-22 00:12:09 +02:00
11 changed files with 5378 additions and 50 deletions
--- a/.gitea/workflows/deploy.yml
+++ b/.gitea/workflows/deploy.yml
@@ -400,10 +400,19 @@ jobs:
          scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
          
          ssh root@alpha.mintel.me "docker system prune -f"
-          ssh root@alpha.mintel.me "docker rm -f \$(docker ps -a -q --filter name=${SLUG}-etib-) 2>/dev/null || true"
+
+          # ── Deterministic cleanup: stop the EXACT compose project we're about to redeploy ──
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' down --remove-orphans 2>/dev/null || true"
+
+          # ── Safety net: kill ANY container whose Traefik host rule matches our target domain ──
+          # This catches ghost containers from prior deployments that used a different project name
+          # (e.g. 'e-tibcom' vs 'etib-production' due to Docker Compose defaulting to dir name)
+          ssh root@alpha.mintel.me "docker ps -q --filter label=traefik.http.routers.${PROJECT_NAME}.rule 2>/dev/null | xargs -r docker rm -f 2>/dev/null || true"
+          ssh root@alpha.mintel.me "docker ps --format '{{.Names}}' | grep -E '^e-tibcom-' | xargs -r docker rm -f 2>/dev/null || true"
+
          ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' pull"
-          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' pull"
+          ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${PROJECT_NAME}' --env-file '$ENV_FILE' up -d --remove-orphans"
          ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"

  # ──────────────────────────────────────────────────────────────────────────────
--- a/app/[locale]/contact/page.tsx
+++ b/app/[locale]/contact/page.tsx
@@ -57,7 +57,7 @@ export async function generateStaticParams() {
 }

 export default async function ContactPage({ params }: ContactPageProps) {
-  console.log('--- RENDERING CONTACT PAGE FOR LOCALE ---');
+
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: 'Contact' });
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -10,7 +10,7 @@ import { getMessages } from 'next-intl/server';
 import '../../styles/globals.css';
 import { SITE_URL } from '@/lib/schema';
 import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
-import AnnotatorClientWrapper from '@/components/AnnotatorClientWrapper';
+
 import { setRequestLocale } from 'next-intl/server';
 import { Inter } from 'next/font/google';
 import { mapFileSlugToTranslated } from '@/lib/slugs';
@@ -175,9 +175,7 @@ export default async function Layout(props: {

  // Read directly from process.env — bypasses all abstraction to guarantee correctness
  const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
-
-  const cookieStore = await cookies();
-  const hasSeenLoader = cookieStore.has('etib_initial_loader_v5');
+  const hasSeenLoader = true; // Disabled to allow static generation and instant LCP (Lighthouse 100)

  return (
    <html
@@ -212,8 +210,7 @@ export default async function Layout(props: {
            <Footer companyInfo={companyInfo} />
            <JsonLd />
            <AnalyticsShell />
-            {/* Annotator vorübergehend deaktiviert auf Staging laut Anforderung */}
-            {/* process.env.TARGET !== 'production' && <AnnotatorClientWrapper /> */}
+
            {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
          </TransitionProvider>
        </NextIntlClientProvider>
--- a/app/[locale]/opengraph-image.tsx
+++ b/app/[locale]/opengraph-image.tsx
@@ -16,7 +16,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
    <OGImageTemplate
      title={t('title')}
      description={t('description')}
-      label="Reliable Energy Infrastructure"
+      label="Kabelnetzbau & Infrastruktur"
    />,
    {
      ...OG_IMAGE_SIZE,
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -4,17 +4,16 @@ import { notFound } from 'next/navigation';
 import { getMdxContent } from '@/lib/mdx';
 import { MDXRemote } from 'next-mdx-remote/rsc';

-export const dynamic = 'force-dynamic';

 import nextDynamic from 'next/dynamic';

-const HomeHero = nextDynamic(() => import('@/components/blocks/HeroVideo').then(mod => mod.HeroVideo), { ssr: true });
+import { HeroVideo as HomeHero } from '@/components/blocks/HeroVideo';
 const HomeSubCompanyTiles = nextDynamic(() => import('@/components/blocks/SubCompanyTiles').then(mod => mod.SubCompanyTiles));
 const HomeCompetenceBentoGrid = nextDynamic(() => import('@/components/blocks/CompetenceBentoGrid').then(mod => mod.CompetenceBentoGrid));
 const HomeReferencesSlider = nextDynamic(() => import('@/components/blocks/ReferencesSlider').then(mod => mod.ReferencesSlider));
 const FaqBlock = nextDynamic(() => import('@/components/blocks/FaqBlock').then(mod => mod.FaqBlock));
 const CertificatesBlock = nextDynamic(() => import('@/components/blocks/CertificatesBlock').then(mod => mod.CertificatesBlock));
-const HeroSection = nextDynamic(() => import('@/components/blocks/HeroSection').then(mod => mod.HeroSection), { ssr: true });
+import { HeroSection } from '@/components/blocks/HeroSection';
 import JsonLd from '@/components/JsonLd';

 import { Button } from '@/components/ui/Button';
--- a/components/OGImageTemplate.tsx
+++ b/components/OGImageTemplate.tsx
@@ -15,9 +15,8 @@ export function OGImageTemplate({
  image,
  mode = 'dark',
 }: OGImageTemplateProps) {
-  const primaryBlue = '#001a4d';
-  const accentGreen = '#10a379';
-  const saturatedBlue = '#011dff';
+  const backgroundDark = '#1a1a1a';
+  const primaryGreen = '#0e7a5c';

  const containerStyle: React.CSSProperties = {
    height: '100%',
@@ -26,7 +25,7 @@ export function OGImageTemplate({
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
-    backgroundColor: mode === 'light' ? '#ffffff' : primaryBlue,
+    backgroundColor: mode === 'light' ? '#ffffff' : backgroundDark,
    padding: '80px',
    position: 'relative',
    fontFamily: 'Inter',
@@ -65,7 +64,7 @@ export function OGImageTemplate({
              left: 0,
              right: 0,
              bottom: 0,
-              background: 'linear-gradient(to right, rgba(0,26,77,0.95), rgba(0,26,77,0.6))',
+              background: 'linear-gradient(to right, rgba(26,26,26,0.95), rgba(26,26,26,0.6))',
            }}
          />
        </div>
@@ -80,7 +79,7 @@ export function OGImageTemplate({
          width: '600px',
          height: '600px',
          borderRadius: '300px',
-          backgroundColor: `${accentGreen}15`,
+          backgroundColor: `${primaryGreen}15`,
          display: 'flex',
        }}
      />
@@ -92,7 +91,7 @@ export function OGImageTemplate({
            style={{
              fontSize: '24px',
              fontWeight: 700,
-              color: accentGreen,
+              color: primaryGreen,
              textTransform: 'uppercase',
              letterSpacing: '0.3em',
              marginBottom: '32px',
@@ -150,7 +149,7 @@ export function OGImageTemplate({
          style={{
            width: '80px',
            height: '6px',
-            backgroundColor: accentGreen,
+            backgroundColor: primaryGreen,
            borderRadius: '3px',
            marginRight: '24px',
          }}
@@ -165,11 +164,11 @@ export function OGImageTemplate({
            display: 'flex',
          }}
        >
-          KLZ Cables
+          E-TIB GmbH
        </div>
      </div>

-      {/* Saturated Blue Brand Strip */}
+      {/* Primary Green Brand Strip */}
      <div
        style={{
          position: 'absolute',
@@ -177,7 +176,7 @@ export function OGImageTemplate({
          right: 0,
          width: '12px',
          height: '100%',
-          backgroundColor: saturatedBlue,
+          backgroundColor: primaryGreen,
        }}
      />
    </div>
--- a/components/providers/TransitionProvider.tsx
+++ b/components/providers/TransitionProvider.tsx
@@ -15,8 +15,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();

  // We use a ref to track transition state without triggering the route change effect when it turns true
  const isTransitioningRef = React.useRef(isTransitioning);
@@ -24,18 +22,6 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
    isTransitioningRef.current = isTransitioning;
  }, [isTransitioning]);

-  // Watch for route changes to complete the transition
-  useEffect(() => {
-    if (isTransitioningRef.current) {
-      // The route has actually changed in the browser, or at least the RSC payload arrived
-      const timer = setTimeout(() => {
-        setIsTransitioning(false);
-        setTimeout(() => setTransitionMessage(null), 300);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [pathname, searchParams]); // Run when pathname or search parameters change
-
  const startTransition = useCallback((href: string, message: string | null = null) => {
    // Wenn wir bereits navigieren, nichts tun
    if (isTransitioning) return;
@@ -75,11 +61,35 @@ export function TransitionProvider({ children }: { children: ReactNode }) {

  return (
    <TransitionContext.Provider value={{ isTransitioning, transitionMessage, startTransition }}>
+      <React.Suspense fallback={null}>
+        <TransitionRouteWatcher 
+          isTransitioningRef={isTransitioningRef}
+          setIsTransitioning={setIsTransitioning}
+          setTransitionMessage={setTransitionMessage}
+        />
+      </React.Suspense>
      {children}
    </TransitionContext.Provider>
  );
 }

+function TransitionRouteWatcher({ isTransitioningRef, setIsTransitioning, setTransitionMessage }: any) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (isTransitioningRef.current) {
+      const timer = setTimeout(() => {
+        setIsTransitioning(false);
+        setTimeout(() => setTransitionMessage(null), 300);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [pathname, searchParams, setIsTransitioning, setTransitionMessage, isTransitioningRef]);
+
+  return null;
+}
+
 export function useTransition() {
  const context = useContext(TransitionContext);
  if (!context) {
--- a/lh-report.json
+++ b/lh-report.json
--- a/lib/og-helper.tsx
+++ b/lib/og-helper.tsx
@@ -11,10 +11,21 @@ export async function getOgFonts() {

  try {
    console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
-    const boldFont = readFileSync(boldFontPath);
-    const regularFont = readFileSync(regularFontPath);
+    const boldFontBuffer = readFileSync(boldFontPath);
+    const regularFontBuffer = readFileSync(regularFontPath);
+    
+    // Satori strictly requires an ArrayBuffer.
+    const boldFont = boldFontBuffer.buffer.slice(
+      boldFontBuffer.byteOffset,
+      boldFontBuffer.byteOffset + boldFontBuffer.byteLength,
+    );
+    const regularFont = regularFontBuffer.buffer.slice(
+      regularFontBuffer.byteOffset,
+      regularFontBuffer.byteOffset + regularFontBuffer.byteLength,
+    );
+
    console.log(
-      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+      `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
    );

    return [
--- a/package.json
+++ b/package.json
@@ -138,7 +138,7 @@
    "prepare": "husky",
    "preinstall": "npx only-allow pnpm"
  },
-  "version": "2.2.29",
+  "version": "2.2.30-rc.0",
  "pnpm": {
    "onlyBuiltDependencies": [
      "@parcel/watcher",
--- a/scripts/audit-local.sh
+++ b/scripts/audit-local.sh
@@ -9,8 +9,8 @@ echo "🚀 Starting High-Fidelity Local Audit..."

 # 1. Environment and Infrastructure
 export DOCKER_HOST="unix:///Users/marcmintel/.docker/run/docker.sock"
-export IMGPROXY_URL="http://klz-imgproxy:8080"
-export NEXT_URL="http://klz.localhost"
+export IMGPROXY_URL="http://etib-imgproxy:8080"
+export NEXT_URL="http://etib.localhost"
 export NEXT_PUBLIC_CI=true
 export CI=true

@@ -20,14 +20,14 @@ docker volume create klz_db_data 2>/dev/null || true
 # 2. Start infra services (DB, CMS, Gatekeeper)
 echo "📦 Starting infrastructure services..."
 # Using --remove-orphans to ensure a clean state
-docker-compose up -d --remove-orphans klz-db klz-gatekeeper
+docker-compose up -d --remove-orphans etib-db etib-gatekeeper

-# 3. Build and Start klz-app in Production Mode
-echo "🏗️  Building and starting klz-app (Production)..."
+# 3. Build and Start etib-app in Production Mode
+echo "🏗️  Building and starting etib-app (Production)..."
 # We bypass the dev override by explicitly using the base compose file
 NEXT_PUBLIC_BASE_URL=$NEXT_URL \
 NEXT_PUBLIC_CI=true \
-docker-compose -f docker-compose.yml up -d --build klz-app
+docker-compose -f docker-compose.yml up -d --build etib-app

 # 4. Wait for application to be ready
 echo "⏳ Waiting for application to be healthy..."
@@ -54,4 +54,4 @@ echo "♿ Executing WCAG Audit..."
 NEXT_PUBLIC_BASE_URL=$NEXT_URL PAGESPEED_LIMIT=10 pnpm run check:wcag "$NEXT_URL"

 echo "✨ Audit completed! Summary above."
-echo "💡 You can stop the production app with: docker-compose stop klz-app"
+echo "💡 You can stop the production app with: docker-compose stop etib-app"
Author	SHA1	Message	Date
Marc Mintel	e5891e8214	2.2.30-rc.0 All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 38s Details Build & Deploy / 🧪 QA (push) Successful in 1m39s Details Build & Deploy / 🏗️ Build (push) Successful in 3m20s Details Build & Deploy / 🚀 Deploy (push) Successful in 37s Details Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 1m10s Details Build & Deploy / 🔔 Notify (push) Successful in 4s Details	2026-06-22 09:12:50 +02:00
Marc Mintel	4e4e44a5fd	feat(og): adapt OG images to E-TIB branding and fix ArrayBuffer font parsing	2026-06-22 09:12:50 +02:00
Marc Mintel	3e37c37863	fix: useSuspense bailout for TransitionProvider All checks were successful Build & Deploy / 🔍 Prepare (push) Successful in 38s Details Build & Deploy / 🧪 QA (push) Successful in 1m43s Details Build & Deploy / 🏗️ Build (push) Successful in 3m18s Details Build & Deploy / 🚀 Deploy (push) Successful in 39s Details Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped Details Build & Deploy / 🔔 Notify (push) Successful in 3s Details	2026-06-22 00:23:53 +02:00
Marc Mintel	40ec588d52	perf: lighthouse 100 optimization and UI cleanup Some checks failed Build & Deploy / 🔍 Prepare (push) Successful in 37s Details Build & Deploy / 🧪 QA (push) Successful in 1m46s Details Build & Deploy / 🚀 Deploy (push) Has been cancelled Details Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled Details Build & Deploy / 🔔 Notify (push) Has been cancelled Details Build & Deploy / 🏗️ Build (push) Has been cancelled Details	2026-06-22 00:20:35 +02:00
Marc Mintel	b2c38fca7d	refactor: improve deployment cleanup logic using explicit project-based teardown and label-based ghost container removal	2026-06-22 00:12:09 +02:00