chore: ignore public/uploads and remove images from tracking

.env

@@ -35,4 +35,5 @@ GATEKEEPER_PASSWORD=klz2026
 COOKIE_DOMAIN=localhost
 INFRA_DIRECTUS_URL=http://localhost:8059
 INFRA_DIRECTUS_TOKEN=59fb8f4c1a51b18fe28ad947f713914e
-GATEKEEPER_ORIGIN=http://klz.localhost
+GATEKEEPER_ORIGIN=http://klz.localhost
+OPENROUTER_API_KEY=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

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .next
 .DS_Store
+public/uploads
 
 # Lighthouse CI
 .lighthouseci/

app/[locale]/blog/[slug]/page.tsx

@@ -76,7 +76,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
           <div className="absolute inset-0 transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100">
             <Image
-              src={post.frontmatter.featuredImage}
+              src={`${post.frontmatter.featuredImage}?ar=16:9`}
               alt={post.frontmatter.title}
               fill
               priority

app/[locale]/error.tsx

@@ -16,12 +16,18 @@ export default function Error({
   const t = useTranslations('Error');
 
   useEffect(() => {
+    // Treat "Failed to find Server Action" as a deployment sync issue and reload
+    if (error?.message?.includes('Failed to find Server Action')) {
+      window.location.reload();
+      return;
+    }
+
     const services = getAppServices();
     services.errors.captureException(error);
     services.logger.error('Application error caught by boundary', {
-      message: error.message,
-      stack: error.stack,
-      digest: error.digest
+      message: error?.message || 'Unknown error',
+      stack: error?.stack,
+      digest: error?.digest,
     });
   }, [error]);
 
@@ -36,19 +42,14 @@ export default function Error({
         <Heading level={1} className="text-6xl md:text-8xl font-bold mb-2 text-saturated">
           500
         </Heading>
-        <Scribble 
-          variant="underline" 
-          className="w-full h-6 -bottom-2 left-0 text-saturated/40" 
-        />
+        <Scribble variant="underline" className="w-full h-6 -bottom-2 left-0 text-saturated/40" />
       </div>
 
       <Heading level={2} className="text-2xl md:text-3xl font-bold mb-4">
         {t('title')}
       </Heading>
-      
-      <p className="text-white/60 mb-10 max-w-md text-lg">
-        {t('description')}
-      </p>
+
+      <p className="text-white/60 mb-10 max-w-md text-lg">{t('description')}</p>
 
       <div className="flex flex-col sm:flex-row gap-4">
         <Button onClick={() => reset()} variant="saturated" size="lg">

app/[locale]/products/[...slug]/page.tsx

@@ -223,7 +223,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
                   className="hover:text-accent transition-colors"
                 >
-                  {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
+                  {t.has('breadcrumb') ? t('breadcrumb') : 'Products'}
                 </Link>
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
@@ -384,7 +384,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                 href={`/${locale}/${await mapFileSlugToTranslated('products', locale)}`}
                 className="hover:text-accent transition-colors"
               >
-                {t.has('breadcrumb') ? t('breadcrumb') : t('title').replace(/<[^>]*>/g, '')}
+                {t.has('breadcrumb') ? t('breadcrumb') : 'Products'}
               </Link>
               <span className="mx-4 opacity-20">/</span>
               <Link

app/[locale]/products/opengraph-image.tsx

@@ -12,7 +12,11 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const t = await getTranslations({ locale, namespace: 'Products' });
   const fonts = await getOgFonts();
 
-  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
+  const title = t.has('meta.title')
+    ? t('meta.title')
+    : t.has('breadcrumb')
+      ? t('breadcrumb')
+      : 'Products';
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(

app/[locale]/products/page.tsx

@@ -17,7 +17,11 @@ interface ProductsPageProps {
 export async function generateMetadata({ params }: ProductsPageProps): Promise<Metadata> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
-  const title = t('meta.title') || t('breadcrumb') || t('title').replace(/<[^>]*>/g, '');
+  const title = t.has('meta.title')
+    ? t('meta.title')
+    : t.has('breadcrumb')
+      ? t('breadcrumb')
+      : 'Products';
   const description = t('meta.description') || t('subtitle');
   return {
     title,

components/blog/PostNavigation.tsx

@@ -31,7 +31,7 @@ export default function PostNavigation({
           {prev.frontmatter.featuredImage ? (
             <div
               className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
-              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage})` }}
+              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage}?ar=16:9)` }}
             />
           ) : (
             <div className="absolute inset-0 bg-neutral-100" />
@@ -82,7 +82,7 @@ export default function PostNavigation({
           {next.frontmatter.featuredImage ? (
             <div
               className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
-              style={{ backgroundImage: `url(${next.frontmatter.featuredImage})` }}
+              style={{ backgroundImage: `url(${next.frontmatter.featuredImage}?ar=16:9)` }}
             />
           ) : (
             <div className="absolute inset-0 bg-neutral-100" />

components/home/ProductCategories.tsx

@@ -43,7 +43,11 @@ export default function ProductCategories() {
 
   return (
     <Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
-      {t('title') && <h2 className="sr-only">{t('title')}</h2>}
+      {t.has('title') && (
+        <h2 className="sr-only">
+          {t.rich('title', { green: (chunks: any) => <span>{chunks}</span> })}
+        </h2>
+      )}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
         {categories.map((category, idx) => (
           <Link

components/home/RecentPosts.tsx

@@ -43,7 +43,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                   {post.frontmatter.featuredImage && (
                     <div className="relative h-64 overflow-hidden">
                       <Image
-                        src={post.frontmatter.featuredImage}
+                        src={`${post.frontmatter.featuredImage}?ar=16:9`}
                         alt={post.frontmatter.title}
                         fill
                         className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"

docker-compose.yml

@@ -155,7 +155,7 @@ services:
       - default
 
   klz-imgproxy:
-    image: darthsim/imgproxy:latest
+    image: registry.infra.mintel.me/mintel/image-processor:latest
     restart: unless-stopped
     networks:
       - default
@@ -165,12 +165,10 @@ services:
       - "cms.klz.localhost:host-gateway"
       - "host.docker.internal:host-gateway"
     environment:
+      OPENROUTER_API_KEY: ${OPENROUTER_API_KEY}
+      # IMGPROXY_URL_MAPPING is not used by our new service yet, but we can keep it for future parity if we add it back
       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_IGNORE_SSL_ERRORS: "true"
       IMGPROXY_LOG_LEVEL: debug
-      IMGPROXY_ALLOW_LOCAL_NETWORKS: "true"
 
     labels:
       - "traefik.enable=true"

lib/imgproxy-loader.ts

@@ -23,17 +23,37 @@ export default function imgproxyLoader({
     return src;
   }
 
-  // Check if src contains custom gravity query parameter
+  // Check if src contains custom gravity or aspect ratio query parameters
   let gravity = 'sm'; // Use smart gravity (content-aware) by default
   let cleanSrc = src;
+  let calculatedHeight = 0;
+  let resizingType: 'fit' | 'fill' = 'fit';
 
   try {
     // Dummy base needed for relative URLs
     const url = new URL(src, 'http://localhost');
     const customGravity = url.searchParams.get('gravity');
+    const aspectRatio = url.searchParams.get('ar'); // e.g. "16:9"
+
     if (customGravity) {
       gravity = customGravity;
       url.searchParams.delete('gravity');
+    }
+
+    if (aspectRatio) {
+      const parts = aspectRatio.split(':');
+      if (parts.length === 2) {
+        const arW = parseFloat(parts[0]);
+        const arH = parseFloat(parts[1]);
+        if (!isNaN(arW) && !isNaN(arH) && arW > 0) {
+          calculatedHeight = Math.round(width * (arH / arW));
+          resizingType = 'fill'; // Must use fill to allow imgproxy to crop
+        }
+      }
+      url.searchParams.delete('ar');
+    }
+
+    if (customGravity || aspectRatio) {
       cleanSrc = src.startsWith('http') ? url.href : url.pathname + url.search;
     }
   } catch (e) {
@@ -41,10 +61,11 @@ export default function imgproxyLoader({
   }
 
   // We use the width provided by Next.js for responsive images
-  // Height is set to 0 to maintain aspect ratio
+  // Height is calculated from aspect ratio if provided, otherwise 0 to maintain aspect ratio
   return getImgproxyUrl(cleanSrc, {
     width,
-    resizing_type: 'fit',
+    height: calculatedHeight,
+    resizing_type: resizingType,
     gravity,
   });
 }

lib/imgproxy.ts

@@ -39,34 +39,21 @@ export function getImgproxyUrl(src: string, options: ImgproxyOptions = {}): stri
     // Also handle direct container names if needed
   }
 
-  const {
-    width = 0,
-    height = 0,
-    resizing_type = 'fit',
-    gravity = 'sm', // Default to smart gravity
-    enlarge = false,
-    extension = '',
-  } = options;
+  const { width = 0, height = 0, enlarge = false, extension = '' } = options;
 
-  // Processing options
-  // Format: /rs:<type>:<width>:<height>:<enlarge>/g:<gravity>
-  const processingOptions = [
-    `rs:${resizing_type}:${width}:${height}:${enlarge ? 1 : 0}`,
-    `g:${gravity}`,
-  ].join('/');
+  let quality = 80;
+  if (extension) quality = 90;
 
-  // 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)));
+  // Re-map imgproxy URL to our new parameter structure
+  // e.g. /process?url=...&w=...&h=...&q=...&format=...
+  const queryParams = new URLSearchParams({
+    url: absoluteSrc,
+  });
 
-  const urlSafeB64 = b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+  if (width > 0) queryParams.set('w', width.toString());
+  if (height > 0) queryParams.set('h', height.toString());
+  if (extension) queryParams.set('format', extension.replace('.', ''));
+  if (quality) queryParams.set('q', quality.toString());
 
-  const suffix = extension ? `.${extension}` : '';
-
-  return `${baseUrl}/unsafe/${processingOptions}/${urlSafeB64}${suffix}`;
+  return `${baseUrl}/process?${queryParams.toString()}`;
 }

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

scripts/check-links.sh

@@ -4,7 +4,33 @@ set -e
 # Auto-provision Lychee Rust Binary if missing
 if [ ! -f ./lychee ]; then
   echo "📥 Downloading Lychee Link Checker (v0.15.1)..."
-  curl -sSLo lychee.tar.gz https://github.com/lycheeverse/lychee/releases/download/v0.15.1/lychee-v0.15.1-x86_64-unknown-linux-gnu.tar.gz
+
+  OS="$(uname -s | tr '[:upper:]' '[:lower:]')"
+  ARCH="$(uname -m)"
+  VERSION="lychee-v0.23.0"
+
+  if [ "$ARCH" = "x86_64" ] || [ "$ARCH" = "amd64" ]; then
+    ARCH_MAPPED="x86_64"
+  elif [ "$ARCH" = "aarch64" ] || [ "$ARCH" = "arm64" ]; then
+    ARCH_MAPPED="aarch64"
+  else
+    echo "❌ Unsupported architecture: $ARCH"
+    exit 1
+  fi
+
+  if [ "$OS" = "darwin" ]; then
+    TARGET="arm64-macos"
+  elif [ "$OS" = "linux" ]; then
+    TARGET="${ARCH_MAPPED}-unknown-linux-gnu"
+  else
+    echo "❌ Unsupported OS: $OS"
+    exit 1
+  fi
+
+  DOWNLOAD_URL="https://github.com/lycheeverse/lychee/releases/download/${VERSION}/lychee-${TARGET}.tar.gz"
+  echo "Downloading from $DOWNLOAD_URL"
+
+  curl -sSLo lychee.tar.gz "$DOWNLOAD_URL"
   tar -xzf lychee.tar.gz lychee
   rm lychee.tar.gz
   chmod +x ./lychee
@@ -19,8 +45,10 @@ echo "🚀 Starting Deep Link Assessment (Lychee)..."
   --exclude "127.0.0.1" \
   --exclude "mintel\.me" \
   --exclude "example\.com" \
-  --exclude-mail \
-  --accept 200,204,401,403 \
-  "./content/**/*.mdx" "./content/**/*.md" "./app/**/*.tsx" "./components/**/*.tsx"
+  --exclude "linkedin\.com" \
+  --exclude "fonts\." \
+  --base-url "http://127.0.0.1" \
+  --accept 200,204,308,401,403,999 \
+  "./data/**/*.mdx" "./data/**/*.md" "./app/**/*.tsx" "./components/**/*.tsx"
 
 echo "✅ All project source links are alive and healthy!"