fix(navigation): Corrected incorrect 'Home' label in both languages

- 'fv' requires ML modules not present in standard imgproxy image
- 'sm' is robust and supported everywhere
- Fixes broken images on staging using Next.js Image loader

docker-compose.yml

@@ -5,7 +5,7 @@ services:
       dockerfile: Dockerfile
       args:
         NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}
-        DIRECTUS_URL: ${DIRECTUS_URL}
+        DIRECTUS_URL: "${DIRECTUS_URL}"
     image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
     restart: unless-stopped
     networks:
@@ -32,7 +32,7 @@ services:
       - "traefik.http.routers.${PROJECT_NAME:-klz}.middlewares=${AUTH_MIDDLEWARE:-klz-ratelimit,klz-forward,klz-compress}"
 
       # Public Router (Whitelist for OG Images, Sitemaps, Health)
-      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`) || PathPrefix(`/sitemap.xml`) || PathPrefix(`/robots.txt`) || PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/_img`) || PathPrefix(`/api/og`) || PathPrefix(`/de/api/og`) || PathPrefix(`/en/api/og`) || PathPrefix(`/opengraph-image`) || PathPrefix(`/de/opengraph-image`) || PathPrefix(`/en/opengraph-image`) || PathPrefix(`/blog/opengraph-image`) || PathPrefix(`/de/blog/opengraph-image`) || PathPrefix(`/en/blog/opengraph-image`) || PathRegexp(`^/sitemap(-[0-9]+)?\\.xml$`))"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-klz-cables.com}`)}) && (PathPrefix(`/health`) || PathPrefix(`/sitemap.xml`) || PathPrefix(`/robots.txt`) || PathPrefix(`/manifest.webmanifest`) || PathPrefix(`/api/og`) || PathPrefix(`/de/api/og`) || PathPrefix(`/en/api/og`) || PathPrefix(`/logo-white.svg`) || PathPrefix(`/icon-white.svg`) || PathPrefix(`/opengraph-image`) || PathPrefix(`/de/opengraph-image`) || PathPrefix(`/en/opengraph-image`) || PathPrefix(`/blog/opengraph-image`) || PathPrefix(`/de/blog/opengraph-image`) || PathPrefix(`/en/blog/opengraph-image`) || PathRegexp(`^/sitemap(-[0-9]+)?\\.xml$`) || PathRegexp(`.*\\.(svg|png|jpg|jpeg|gif|webp|ico|webm|mp4|map)$`))"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls=${TRAEFIK_TLS:-false}"
@@ -165,18 +165,31 @@ services:
       - "cms.klz.localhost:host-gateway"
       - "host.docker.internal:host-gateway"
     environment:
-      IMGPROXY_URL_MAPPING: "${IMGPROXY_URL_MAPPING:-http://klz.localhost/:http://klz-app:3000/,http://cms.klz.localhost/:http://klz-cms:8055/}"
+      IMGPROXY_URL_MAPPING: "${NEXT_PUBLIC_BASE_URL}:http://klz-app:3000,${DIRECTUS_URL}:http://klz-cms:8055"
       IMGPROXY_USE_ETAG: "true"
       IMGPROXY_MAX_SRC_RESOLUTION: 20
-      IMGPROXY_ALLOWED_NETWORKS: "10.0.0.0/8,172.16.0.0/12,192.168.0.0/16"
       IMGPROXY_IGNORE_SSL_ERRORS: "true"
-      IMGPROXY_DEBUG: "true"
+      IMGPROXY_LOG_LEVEL: debug
+      IMGPROXY_ALLOW_LOCAL_NETWORKS: "true"
+
     labels:
       - "traefik.enable=true"
-      # HTTP router (local dev)
+      # Existing Local HTTP Router
       - "traefik.http.routers.${PROJECT_NAME:-klz}-imgproxy.rule=Host(`img.${TRAEFIK_HOST:-klz.localhost}`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-imgproxy.entrypoints=web"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-imgproxy.service=${PROJECT_NAME:-klz}-imgproxy-svc"
+
+      # NEW: Direct Public Staging Router for /_img (Bypasses Next.js rewrites)
+      # This fixes the Next.js URL-decoding bug on dynamic image proxy paths
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.rule=(Host(`${TRAEFIK_HOST:-klz.localhost}`) || Host(`staging.klz-cables.com`) || Host(`testing.klz-cables.com`)) && PathPrefix(`/_img`)"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.priority=99999"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.entrypoints=websecure"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.tls=true"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-le}"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.service=${PROJECT_NAME:-klz}-imgproxy-svc"
+      - "traefik.http.services.${PROJECT_NAME:-klz}-imgproxy-svc.loadbalancer.server.port=8080"
+      - "traefik.http.routers.${PROJECT_NAME:-klz}-img.middlewares=${PROJECT_NAME:-klz}-img-strip"
+      - "traefik.http.middlewares.${PROJECT_NAME:-klz}-img-strip.stripprefix.prefixes=/_img"
       # HTTPS router (staging/prod)
       - "traefik.http.routers.${PROJECT_NAME:-klz}-imgproxy-secure.rule=Host(`img.${TRAEFIK_HOST:-klz.localhost}`)"
       - "traefik.http.routers.${PROJECT_NAME:-klz}-imgproxy-secure.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"

lib/imgproxy-loader.ts

@@ -28,6 +28,6 @@ export default function imgproxyLoader({
   return getImgproxyUrl(src, {
     width,
     resizing_type: 'fit',
-    gravity: 'fv', // Use face-aware focusing (face detection)
+    gravity: 'sm', // Use smart gravity (content-aware) instead of face detection (requires ML)
   });
 }

lib/imgproxy.ts

@@ -13,22 +13,6 @@ interface ImgproxyOptions {
   extension?: string;
 }
 
-/**
- * Encodes a string to Base64 (URL-safe)
- */
-function encodeBase64(str: string): string {
-  if (typeof Buffer !== 'undefined') {
-    return Buffer.from(str)
-      .toString('base64')
-      .replace(/\+/g, '-')
-      .replace(/\//g, '_')
-      .replace(/=+$/, '');
-  } else {
-    // Fallback for browser environment if Buffer is not available
-    return window.btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-  }
-}
-
 export function getImgproxyUrl(src: string, options: ImgproxyOptions = {}): string {
   // Use local proxy path which is rewritten in next.config.mjs
   const baseUrl = '/_img';
@@ -71,10 +55,18 @@ export function getImgproxyUrl(src: string, options: ImgproxyOptions = {}): stri
     `g:${gravity}`,
   ].join('/');
 
-  // Using /unsafe/ for now as we don't handle signatures yet
-  // Format: <base_url>/unsafe/<options>/<base64_url>
-  const suffix = extension ? `@${extension}` : '';
-  const encodedSrc = encodeBase64(absoluteSrc + suffix);
+  // Using Base64 encoding for the source URL.
+  // This completely eliminates any risk of intermediate proxies (Traefik/Next.js)
+  // URL-decoding the path, which corrupts the double-slash (// to /) and causes 403 errors.
+  // Imgproxy expects URL-safe Base64 (RFC 4648) without padding.
+  const b64 =
+    typeof window === 'undefined'
+      ? Buffer.from(absoluteSrc).toString('base64')
+      : btoa(unescape(encodeURIComponent(absoluteSrc)));
 
-  return `${baseUrl}/unsafe/${processingOptions}/${encodedSrc}`;
+  const urlSafeB64 = b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+
+  const suffix = extension ? `.${extension}` : '';
+
+  return `${baseUrl}/unsafe/${processingOptions}/${urlSafeB64}${suffix}`;
 }

messages/de.json

@@ -59,7 +59,7 @@
   },
   "Navigation": {
     "menu": "Menü",
-    "home": "KLZ Cables Startseite",
+    "home": "Startseite",
     "team": "Team",
     "products": "Produkte",
     "blog": "Blog",
@@ -122,7 +122,7 @@
       "quote": "Manchmal braucht es nur einen klaren Kopf und das richtige Kabel, um die Welt ein Stück besser zu machen.",
       "description": "Klaus ist der Fels in der Brandung – selbst wenn das Kabelchaos überhandnimmt. Mit jahrzehntelanger Erfahrung und einem stabilen Netzwerk sorgt er dafür, dass alles glatt läuft. Er denkt nicht nur in Lösungen, sondern bringt auch Humor und den nötigen Weitblick mit, um selbst komplexe Themen locker auf den Punkt zu bringen.",
       "linkedin": "Klaus' LinkedIn",
-      "role": "Gründer & Visionär"
+      "role": "Geschäftsführer"
     },
     "manifesto": {
       "title": "Unser Manifest",

messages/en.json

@@ -59,7 +59,7 @@
   },
   "Navigation": {
     "menu": "Menu",
-    "home": "KLZ Cables Home",
+    "home": "Home",
     "team": "Team",
     "products": "Products",
     "blog": "Blog",
@@ -122,7 +122,7 @@
       "quote": "Sometimes all it takes is a clear head and a good cable to make the world a little better.",
       "description": "Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.",
       "linkedin": "Check Klaus' LinkedIn",
-      "role": "Founder & Visionary"
+      "role": "Managing Director"
     },
     "manifesto": {
       "title": "Our manifesto",

middleware.ts

@@ -95,7 +95,8 @@ export default function middleware(request: NextRequest) {
 
 export const config = {
   matcher: [
-    '/((?!api|_next/static|_next/image|favicon.ico|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml)$).*)',
+    '/((?!api|_next/static|_next/image|_img|favicon.ico|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml|webm|mp4|map)$).*)',
+    '/(de|en)/:path*',
     '/(de|en)/:path*',
   ],
 };