From d538d7b9ec2fe6fe98291749071da793f43e28c7 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Fri, 20 Feb 2026 18:54:09 +0100
Subject: [PATCH] fix(blog): ensure target environment vars are parsed for
 accurate strict filtering in prod, and integrate face detection gravity for
 blog thumbnails

---
 app/[locale]/blog/[slug]/page.tsx | 15 +++++++++++----
 app/[locale]/blog/page.tsx        |  4 ++--
 lib/env.ts                        |  2 ++
 lib/imgproxy-loader.ts            | 21 +++++++++++++++++++--
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/app/[locale]/blog/[slug]/page.tsx b/app/[locale]/blog/[slug]/page.tsx
index a7be5101..b3a729cb 100644
--- a/app/[locale]/blog/[slug]/page.tsx
+++ b/app/[locale]/blog/[slug]/page.tsx
@@ -5,6 +5,7 @@ import { MDXRemote } from 'next-mdx-remote/rsc';
 import { getPostBySlug, getAdjacentPosts, getReadingTime, getHeadings } from '@/lib/blog';
 import { Metadata } from 'next';
 import Link from 'next/link';
+import Image from 'next/image';
 import PostNavigation from '@/components/blog/PostNavigation';
 import PowerCTA from '@/components/blog/PowerCTA';
 import TableOfContents from '@/components/blog/TableOfContents';
@@ -77,10 +78,16 @@ export default async function BlogPost({ params }: BlogPostProps) {
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">
-          <div
-            className="absolute inset-0 bg-cover bg-center transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100"
-            style={{ backgroundImage: `url(${post.frontmatter.featuredImage})` }}
-          />
+          <div className="absolute inset-0 transition-transform duration-[3s] ease-out scale-110 group-hover:scale-100">
+            <Image
+              src={`${post.frontmatter.featuredImage}?gravity=obj:face`}
+              alt={post.frontmatter.title}
+              fill
+              priority
+              className="object-cover"
+              sizes="100vw"
+            />
+          </div>
           <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/40 to-transparent" />
 
           {/* Title overlay on image */}
diff --git a/app/[locale]/blog/page.tsx b/app/[locale]/blog/page.tsx
index 75813546..ffaad997 100644
--- a/app/[locale]/blog/page.tsx
+++ b/app/[locale]/blog/page.tsx
@@ -62,7 +62,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
           {featuredPost && featuredPost.frontmatter.featuredImage && (
             <>
               <Image
-                src={featuredPost.frontmatter.featuredImage}
+                src={`${featuredPost.frontmatter.featuredImage}?gravity=obj:face`}
                 alt={featuredPost.frontmatter.title}
                 fill
                 className="absolute inset-0 w-full h-full object-cover scale-105 animate-slow-zoom opacity-40 md:opacity-60"
@@ -160,7 +160,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                     {post.frontmatter.featuredImage && (
                       <div className="relative h-48 md:h-72 overflow-hidden">
                         <Image
-                          src={post.frontmatter.featuredImage}
+                          src={`${post.frontmatter.featuredImage}?gravity=obj:face`}
                           alt={post.frontmatter.title}
                           fill
                           className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
diff --git a/lib/env.ts b/lib/env.ts
index 47567130..832f51d5 100644
--- a/lib/env.ts
+++ b/lib/env.ts
@@ -20,6 +20,8 @@ const booleanSchema = z.preprocess((val) => {
 const envExtension = {
   // Project specific overrides or additions
   AUTH_COOKIE_NAME: z.string().default('klz_gatekeeper_session'),
+  TARGET: z.string().optional(),
+  NEXT_PUBLIC_TARGET: z.string().optional(),
 
   // Gatekeeper specifics not in base
   GATEKEEPER_URL: z.string().url().default('http://gatekeeper:3000'),
diff --git a/lib/imgproxy-loader.ts b/lib/imgproxy-loader.ts
index cddefc52..041f58e4 100644
--- a/lib/imgproxy-loader.ts
+++ b/lib/imgproxy-loader.ts
@@ -23,11 +23,28 @@ export default function imgproxyLoader({
     return src;
   }
 
+  // Check if src contains custom gravity query parameter
+  let gravity = 'sm'; // Use smart gravity (content-aware) by default
+  let cleanSrc = src;
+
+  try {
+    // Dummy base needed for relative URLs
+    const url = new URL(src, 'http://localhost');
+    const customGravity = url.searchParams.get('gravity');
+    if (customGravity) {
+      gravity = customGravity;
+      url.searchParams.delete('gravity');
+      cleanSrc = src.startsWith('http') ? url.href : url.pathname + url.search;
+    }
+  } catch (e) {
+    // Fallback if parsing fails
+  }
+
   // We use the width provided by Next.js for responsive images
   // Height is set to 0 to maintain aspect ratio
-  return getImgproxyUrl(src, {
+  return getImgproxyUrl(cleanSrc, {
     width,
     resizing_type: 'fit',
-    gravity: 'sm', // Use smart gravity (content-aware) instead of face detection (requires ML)
+    gravity,
   });
 }