2.3.29

.gitea/workflows/deploy.yml

@@ -256,6 +256,10 @@ jobs:
       # Analytics
       UMAMI_WEBSITE_ID:    ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
       UMAMI_API_ENDPOINT:  ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
+
+      # Notifications
+      GOTIFY_URL:          ${{ secrets.GOTIFY_URL }}
+      GOTIFY_TOKEN:        ${{ secrets.GOTIFY_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -309,6 +313,10 @@ jobs:
             echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
             echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
             echo ""
+            echo "# Notifications"
+            echo "GOTIFY_URL=$GOTIFY_URL"
+            echo "GOTIFY_TOKEN=$GOTIFY_TOKEN"
+            echo ""
             echo "TARGET=$TARGET"
             echo "SENTRY_ENVIRONMENT=$TARGET"
             echo "PROJECT_NAME=$PROJECT_NAME"

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -20,9 +20,12 @@ export default async function Image({
   }
 
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   return new ImageResponse(
     <OGImageTemplate
+      image={bgImage}
+      logo={logo}
       title={pageData.frontmatter.title}
       description={pageData.frontmatter.excerpt}
       label="Information"

app/[locale]/blog/[slug]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getPostBySlug } from '@/lib/blog';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 import { SITE_URL } from '@/lib/schema';
 
 export const size = OG_IMAGE_SIZE;
@@ -35,6 +35,7 @@ export default async function Image({
   }
 
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   // We don't have request.url here, but we can assume the domain from SITE_URL or config
   // For local images during dev, relative paths in <img> might not work in Satori
@@ -55,10 +56,11 @@ export default async function Image({
 
   return new ImageResponse(
     <OGImageTemplate
+      logo={logo}
       title={post.frontmatter.title}
       description={post.frontmatter.excerpt}
       label={post.frontmatter.category || 'Blog'}
-      image={base64Image || featuredImage}
+      image={base64Image || featuredImage || bgImage}
     />,
     {
       ...OG_IMAGE_SIZE,

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,9 +11,16 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Blog.meta' });
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   return new ImageResponse(
-    <OGImageTemplate title={t('title')} description={t('description')} label="Blog" />,
+    <OGImageTemplate
+      image={bgImage}
+      logo={logo}
+      title={t('title')}
+      description={t('description')}
+      label="Blog"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/[locale]/blog/page.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import { getAllPosts } from '@/lib/blog';
 import { Section, Container, Heading, Card, Badge, Button } from '@/components/ui';
 import Reveal from '@/components/Reveal';
-import { Metadata } from 'next';
+
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { SITE_URL } from '@/lib/schema';
 import { BlogPaginationKeyboardObserver } from '@/components/blog/BlogPaginationKeyboardObserver';

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,12 +11,19 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Contact' });
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   const title = t('meta.title') || t('title');
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label="Contact" />,
+    <OGImageTemplate
+      image={bgImage}
+      logo={logo}
+      title={title}
+      description={description}
+      label="Contact"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/[locale]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,9 +11,12 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   return new ImageResponse(
     <OGImageTemplate
+      image={bgImage}
+      logo={logo}
       title={t('title')}
       description={t('description')}
       label="Reliable Energy Infrastructure"

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,6 +11,7 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Products' });
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   const title = t.has('meta.title')
     ? t('meta.title')
@@ -20,7 +21,13 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const description = t('meta.description') || t('subtitle');
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label="Products" />,
+    <OGImageTemplate
+      image={bgImage}
+      logo={logo}
+      title={title}
+      description={description}
+      label="Products"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from 'next/og';
 import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
-import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
+import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';
 
 export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
@@ -11,12 +11,19 @@ export default async function Image({ params }: { params: Promise<{ locale: stri
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Team' });
   const fonts = await getOgFonts();
+  const { logo, bgImage } = getOgAssets();
 
   const title = t('meta.title') || t('hero.subtitle');
   const description = t('meta.description') || t('hero.title');
 
   return new ImageResponse(
-    <OGImageTemplate title={title} description={description} label="Our Team" />,
+    <OGImageTemplate
+      image={bgImage}
+      logo={logo}
+      title={title}
+      description={description}
+      label="Our Team"
+    />,
     {
       ...OG_IMAGE_SIZE,
       fonts,

app/actions/contact.ts

@@ -32,18 +32,24 @@ export async function sendContactFormAction(formData: FormData) {
   const productName = formData.get('productName') as string | null;
 
   if (!name || !email || !message) {
-    logger.warn('Missing required fields in contact form', {
-      name: !!name,
-      email: !!email,
-      message: !!message,
-    });
+    logger.warn(
+      {
+        name: !!name,
+        email: !!email,
+        message: !!message,
+      },
+      'Missing required fields in contact form',
+    );
     return { success: false, error: 'Missing required fields' };
   }
 
-  logger.info('Payload CMS saving skipped because it has been removed', {
-    type: productName ? 'product_quote' : 'contact',
-    email,
-  });
+  logger.info(
+    {
+      type: productName ? 'product_quote' : 'contact',
+      email,
+    },
+    'Payload CMS saving skipped because it has been removed',
+  );
 
   // 1.5. Simple Fail-Safe Backup to Disk
   // To ensure leads are never lost if email fails or Gotify is down, we append them to a local JSON Lines file.
@@ -61,14 +67,14 @@ export async function sendContactFormAction(formData: FormData) {
       productName,
       message,
     };
-    fs.appendFileSync(backupFile, JSON.stringify(leadData) + '\\n');
-    logger.info('Successfully saved lead to local backup file', { backupFile });
+    fs.appendFileSync(backupFile, JSON.stringify(leadData) + '\n');
+    logger.info({ backupFile }, 'Successfully saved lead to local backup file');
   } catch (backupError) {
-    logger.error('Failed to write to local leads backup', { error: String(backupError) });
+    logger.error({ error: String(backupError) }, 'Failed to write to local leads backup');
   }
 
   // 2. Send Emails
-  logger.info('Sending branded emails', { email, productName });
+  logger.info({ email, productName }, 'Sending branded emails');
 
   const notificationSubject = productName
     ? `Product Inquiry: ${productName}`
@@ -88,7 +94,7 @@ export async function sendContactFormAction(formData: FormData) {
     );
 
     if (!isTestSubmission) {
-      logger.info('Sending internal notification', { recipients: env.MAIL_RECIPIENTS });
+      logger.info({ recipients: env.MAIL_RECIPIENTS }, 'Sending internal notification');
       const notificationResult = await sendEmail({
         replyTo: email,
         subject: notificationSubject,
@@ -96,15 +102,21 @@ export async function sendContactFormAction(formData: FormData) {
       });
 
       if (notificationResult.success) {
-        logger.info('Notification email sent successfully', {
-          messageId: notificationResult.messageId,
-        });
+        logger.info(
+          {
+            messageId: notificationResult.messageId,
+          },
+          'Notification email sent successfully',
+        );
       } else {
-        logger.error('Notification email DELIVERY FAILED', {
-          error: notificationResult.error,
-          subject: notificationSubject,
-          recipients: env.MAIL_RECIPIENTS,
-        });
+        logger.error(
+          {
+            error: notificationResult.error,
+            subject: notificationSubject,
+            recipients: env.MAIL_RECIPIENTS,
+          },
+          'Notification email DELIVERY FAILED',
+        );
         services.errors.captureException(
           new Error(`Notification email failed: ${notificationResult.error}`),
           {
@@ -115,7 +127,7 @@ export async function sendContactFormAction(formData: FormData) {
         );
       }
     } else {
-      logger.info('Skipping notification email for test submission', { email });
+      logger.info({ email }, 'Skipping notification email for test submission');
     }
 
     // 2b. Send confirmation to Customer (branded as KLZ Cables)
@@ -128,7 +140,7 @@ export async function sendContactFormAction(formData: FormData) {
     );
 
     if (!isTestSubmission) {
-      logger.info('Sending customer confirmation', { to: email });
+      logger.info({ to: email }, 'Sending customer confirmation');
       const confirmationResult = await sendEmail({
         to: email,
         subject: confirmationSubject,
@@ -136,27 +148,33 @@ export async function sendContactFormAction(formData: FormData) {
       });
 
       if (confirmationResult.success) {
-        logger.info('Confirmation email sent successfully', {
-          messageId: confirmationResult.messageId,
-        });
+        logger.info(
+          {
+            messageId: confirmationResult.messageId,
+          },
+          'Confirmation email sent successfully',
+        );
       } else {
-        logger.error('Confirmation email DELIVERY FAILED', {
-          error: confirmationResult.error,
-          subject: confirmationSubject,
-          to: email,
-        });
+        logger.error(
+          {
+            error: confirmationResult.error,
+            subject: confirmationSubject,
+            to: email,
+          },
+          'Confirmation email DELIVERY FAILED',
+        );
         services.errors.captureException(
           new Error(`Confirmation email failed: ${confirmationResult.error}`),
           { action: 'sendContactFormAction_confirmation', email },
         );
       }
     } else {
-      logger.info('Skipping confirmation email for test submission', { email });
+      logger.info({ email }, 'Skipping confirmation email for test submission');
     }
 
     // Notify via Gotify (Internal)
     await services.notifications.notify({
-      title: `📩 ${notificationSubject}`,
+      title: `📩 [KLZ] ${notificationSubject}`,
       message: `New message from ${name} (${email}):\n\n${message}`,
       priority: 5,
     });
@@ -169,10 +187,13 @@ export async function sendContactFormAction(formData: FormData) {
     return { success: true };
   } catch (error) {
     const errorMsg = error instanceof Error ? error.message : String(error);
-    logger.error('Failed to send branded emails', {
-      error: errorMsg,
-      stack: error instanceof Error ? error.stack : undefined,
-    });
+    logger.error(
+      {
+        error: errorMsg,
+        stack: error instanceof Error ? error.stack : undefined,
+      },
+      'Failed to send branded emails',
+    );
 
     services.errors.captureException(error, { action: 'sendContactFormAction', email });
 

components/OGImageTemplate.tsx

@@ -5,6 +5,7 @@ interface OGImageTemplateProps {
   description?: string;
   label?: string;
   image?: string;
+  logo?: string;
   mode?: 'dark' | 'light' | 'image';
 }
 
@@ -13,6 +14,7 @@ export function OGImageTemplate({
   description,
   label,
   image,
+  logo,
   mode = 'dark',
 }: OGImageTemplateProps) {
   const primaryBlue = '#001a4d';
@@ -152,21 +154,26 @@ export function OGImageTemplate({
             height: '6px',
             backgroundColor: accentGreen,
             borderRadius: '3px',
-            marginRight: '24px',
+            marginRight: '32px',
           }}
         />
-        <div
-          style={{
-            fontSize: '24px',
-            fontWeight: 700,
-            color: 'white',
-            textTransform: 'uppercase',
-            letterSpacing: '0.15em',
-            display: 'flex',
-          }}
-        >
-          KLZ Cables
-        </div>
+        {logo ? (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img src={logo} alt="KLZ Cables" height="40" style={{ objectFit: 'contain' }} />
+        ) : (
+          <div
+            style={{
+              fontSize: '24px',
+              fontWeight: 700,
+              color: 'white',
+              textTransform: 'uppercase',
+              letterSpacing: '0.15em',
+              display: 'flex',
+            }}
+          >
+            KLZ Cables
+          </div>
+        )}
       </div>
 
       {/* Saturated Blue Brand Strip */}

lib/blog.ts

@@ -65,11 +65,8 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
     const fileContent = await fs.readFile(filePath, 'utf-8');
     const { data, content } = matter(fileContent);
 
-    // Fix MDX data props dropped by next-mdx-remote
-    // Payload serializes as data={{"items":...}} which Acorn treats as a Block statement.
-    const fixedContent = content.replace(/data=\{\{([\s\S]*?)\}\}/g, (match, p1) => {
-      return 'data="{' + p1.replace(/"/g, '&quot;') + '}"';
-    });
+    const { fixMdxDataProps } = await import('./mdx-utils');
+    const fixedContent = fixMdxDataProps(content);
 
     let parsedContent = fixedContent;
     try {

lib/mdx-utils.ts

@@ -0,0 +1,46 @@
+export function fixMdxDataProps(content: string): string {
+  let fixedContent = content;
+  let dataIndex = fixedContent.indexOf('data={{');
+
+  while (dataIndex !== -1) {
+    let openCount = 0;
+    let endIndex = -1;
+    const startObj = dataIndex + 6; // index of the first '{' in 'data={{'
+
+    for (let i = startObj; i < fixedContent.length; i++) {
+      if (fixedContent[i] === '{') {
+        openCount++;
+      } else if (fixedContent[i] === '}') {
+        openCount--;
+        if (openCount === 0) {
+          endIndex = i;
+          break;
+        }
+      }
+    }
+
+    if (endIndex !== -1) {
+      // jsonStr is the content INSIDE the outer curly braces
+      const jsonStr = fixedContent.substring(startObj + 1, endIndex);
+      const safeJsonStr = jsonStr.replace(/"/g, '&quot;');
+      const replacement = `data="{${safeJsonStr}}"`;
+
+      // We also need to consume the closing `}` of the `data={{`
+      const nextCharIndex = endIndex + 1;
+      const skipChars =
+        nextCharIndex < fixedContent.length && fixedContent[nextCharIndex] === '}' ? 2 : 1;
+
+      fixedContent =
+        fixedContent.substring(0, dataIndex) +
+        replacement +
+        fixedContent.substring(endIndex + skipChars);
+
+      dataIndex = fixedContent.indexOf('data={{', dataIndex + replacement.length);
+    } else {
+      // Malformed braces, prevent infinite loop
+      break;
+    }
+  }
+
+  return fixedContent;
+}

lib/og-helper.tsx

@@ -55,3 +55,36 @@ export const OG_IMAGE_SIZE = {
   width: 1200,
   height: 630,
 };
+
+/**
+ * Loads a local image and converts it to a base64 data URI for Satori
+ */
+export function getLocalImageBase64(filename: string): string | undefined {
+  try {
+    const filePath = join(process.cwd(), 'public', filename);
+    const buffer = readFileSync(filePath);
+    const ext = filename.split('.').pop()?.toLowerCase();
+    const mimeType =
+      ext === 'png'
+        ? 'image/png'
+        : ext === 'jpg' || ext === 'jpeg'
+          ? 'image/jpeg'
+          : 'image/svg+xml';
+    return `data:${mimeType};base64,${buffer.toString('base64')}`;
+  } catch (error) {
+    console.error(`[OG] Failed to load local image ${filename}:`, error);
+    return undefined;
+  }
+}
+
+/**
+ * Returns standard assets for OG images
+ */
+export function getOgAssets() {
+  return {
+    logo: getLocalImageBase64('logo-white.png'),
+    bgImage: getLocalImageBase64(
+      'media/aerial-view-of-electricity-station-surrounded-with-2023-11-27-05-33-40-utc-scaled.jpg',
+    ),
+  };
+}

lib/pages.ts

@@ -53,11 +53,8 @@ export async function getPageBySlug(slug: string, locale: string): Promise<PageD
     const fileContent = await fs.readFile(filePath, 'utf-8');
     const { data, content } = matter(fileContent);
 
-    // Fix MDX data props dropped by next-mdx-remote
-    // Payload serializes as data={{"items":...}} which Acorn treats as a Block statement.
-    const fixedContent = content.replace(/data=\{\{([\s\S]*?)\}\}/g, (match, p1) => {
-      return 'data="{' + p1.replace(/"/g, '&quot;') + '}"';
-    });
+    const { fixMdxDataProps } = await import('./mdx-utils');
+    const fixedContent = fixMdxDataProps(content);
 
     let parsedContent = fixedContent;
     try {

lib/products.ts

@@ -39,11 +39,8 @@ export async function getProductBySlug(slug: string, locale: string): Promise<Pr
     const fileContent = await fs.readFile(filePath, 'utf-8');
     const { data, content } = matter(fileContent);
 
-    // Fix MDX data props dropped by next-mdx-remote
-    // Payload serializes as data={{"items":...}} which Acorn treats as a Block statement.
-    const fixedContent = content.replace(/data=\{\{([\s\S]*?)\}\}/g, (match, p1) => {
-      return 'data="{' + p1.replace(/"/g, '&quot;') + '}"';
-    });
+    const { fixMdxDataProps } = await import('./mdx-utils');
+    const fixedContent = fixMdxDataProps(content);
 
     let parsedContent = fixedContent;
     try {

package.json

@@ -116,7 +116,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.3.26",
+  "version": "2.3.29",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

sentry.edge.config.ts

@@ -12,4 +12,5 @@ Sentry.init({
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
+  ignoreErrors: ['failed to pipe response'],
 });

sentry.server.config.ts

@@ -12,4 +12,5 @@ Sentry.init({
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
+  ignoreErrors: ['failed to pipe response'],
 });

tests/mdx-regex.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { fixMdxDataProps } from '../lib/mdx-utils';
+
+describe('MDX Data Props Fixer', () => {
+  it('should correctly parse MDX with nested JSON containing }}', () => {
+    // This string simulates the exact structure that causes the bug in n2x2y.mdx
+    const mdxInput = `<Block type="productTabs" data={{"content":{"root":{"children":[]}},"id":"123"}} />`;
+
+    const result = fixMdxDataProps(mdxInput);
+
+    // The expected output should have the entire JSON object enclosed in data="{...}"
+    // and NO trailing characters left over from the regex truncating early.
+    const expected = `<Block type="productTabs" data="{&quot;content&quot;:{&quot;root&quot;:{&quot;children&quot;:[]}},&quot;id&quot;:&quot;123&quot;}" />`;
+
+    expect(result).toBe(expected);
+  });
+});