chore(release): bump version to 2.2.6

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

@@ -8,6 +8,20 @@ export const size = OG_IMAGE_SIZE;
 export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
+async function fetchImageAsBase64(url: string) {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return undefined;
+    const arrayBuffer = await res.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const contentType = res.headers.get('content-type') || 'image/jpeg';
+    return `data:${contentType};base64,${buffer.toString('base64')}`;
+  } catch (error) {
+    console.error('Failed to fetch OG image:', url, error);
+    return undefined;
+  }
+}
+
 export default async function Image({
   params,
 }: {
@@ -32,12 +46,19 @@ export default async function Image({
       : `${SITE_URL}${post.frontmatter.featuredImage}`
     : undefined;
 
+  // Fetch image explicitly and convert to base64 because Satori sometimes struggles
+  // fetching remote URLs directly inside ImageResponse correctly in various environments.
+  let base64Image: string | undefined = undefined;
+  if (featuredImage) {
+    base64Image = await fetchImageAsBase64(featuredImage);
+  }
+
   return new ImageResponse(
     <OGImageTemplate
       title={post.frontmatter.title}
       description={post.frontmatter.excerpt}
       label={post.frontmatter.category || 'Blog'}
-      image={featuredImage}
+      image={base64Image || featuredImage}
     />,
     {
       ...OG_IMAGE_SIZE,

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

@@ -1,12 +1,18 @@
 import { notFound, redirect } from 'next/navigation';
 import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
-import { getPostBySlug, getAdjacentPosts, getReadingTime } from '@/lib/blog';
+import {
+  getPostBySlug,
+  getAdjacentPosts,
+  getReadingTime,
+  extractLexicalHeadings,
+} 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';
 import { Heading } from '@/components/ui';
 import { setRequestLocale } from 'next-intl/server';
 import BlogEngagementTracker from '@/components/analytics/BlogEngagementTracker';
@@ -67,6 +73,10 @@ export default async function BlogPost({ params }: BlogPostProps) {
 
   const { prev, next, isPrevRandom, isNextRandom } = await getAdjacentPosts(post.slug, locale);
 
+  // Convert Lexical content into a plain string to estimate reading time roughly
+  // Extract headings for TOC
+  const headings = extractLexicalHeadings(post.content?.root || post.content);
+
   // Convert Lexical content into a plain string to estimate reading time roughly
   const rawTextContent = JSON.stringify(post.content);
 
@@ -232,10 +242,10 @@ export default async function BlogPost({ params }: BlogPostProps) {
             </div>
           </div>
 
-          {/* Right Column: Sticky Sidebar - Temporarily Hidden without ToC */}
+          {/* Right Column: Sticky Sidebar - TOC */}
           <aside className="sticky-narrative-sidebar hidden lg:block">
-            <div className="space-y-12">
-              {/* Future Payload Table of Contents Implementation */}
+            <div className="space-y-12 lg:sticky lg:top-32">
+              <TableOfContents headings={headings} locale={locale} />
             </div>
           </aside>
         </div>

app/[locale]/layout.tsx

@@ -91,6 +91,7 @@ export default async function Layout(props: {
     'Home',
     'Error',
     'StandardPage',
+    'Brochure',
   ];
   const clientMessages: Record<string, any> = {};
   for (const key of clientKeys) {

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

@@ -2,11 +2,12 @@ import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
 import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
+import ExcelDownload from '@/components/ExcelDownload';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
 import DatasheetDownload from '@/components/DatasheetDownload';
 import { Badge, Card, Container, Heading, Section } from '@/components/ui';
-import { getDatasheetPath } from '@/lib/datasheets';
+import { getDatasheetPath, getExcelDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/products';
 import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
 import { Metadata } from 'next';
@@ -278,6 +279,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
   }
 
   const datasheetPath = getDatasheetPath(productSlug, locale);
+  const excelPath = getExcelDatasheetPath(productSlug, locale);
   const isFallback = (product.frontmatter as any).isFallback;
   const categorySlug = slug[0];
   const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale);
@@ -343,6 +345,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
       productName={product.frontmatter.title}
       productImage={product.frontmatter.images?.[0]}
       datasheetPath={datasheetPath}
+      excelPath={excelPath}
     />
   );
 
@@ -496,7 +499,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
                   </h2>
                   <div className="h-1.5 w-24 bg-accent rounded-full" />
                 </div>
-                <DatasheetDownload datasheetPath={datasheetPath} />
+                <div className="flex flex-col gap-4 max-w-2xl">
+                  <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />
+                  {excelPath && <ExcelDownload excelPath={excelPath} className="mt-0" />}
+                </div>
               </div>
             )}
 

app/actions/brochure.ts

@@ -0,0 +1,78 @@
+'use server';
+
+import { getServerAppServices } from '@/lib/services/create-services.server';
+
+export async function requestBrochureAction(formData: FormData) {
+    const services = getServerAppServices();
+    const logger = services.logger.child({ action: 'requestBrochureAction' });
+
+    const { headers } = await import('next/headers');
+    const requestHeaders = await headers();
+
+    if ('setServerContext' in services.analytics) {
+        (services.analytics as any).setServerContext({
+            userAgent: requestHeaders.get('user-agent') || undefined,
+            language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
+            referrer: requestHeaders.get('referer') || undefined,
+            ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
+        });
+    }
+
+    services.analytics.track('brochure-request-attempt');
+
+    const email = formData.get('email') as string;
+    const locale = (formData.get('locale') as string) || 'en';
+
+    if (!email) {
+        logger.warn('Missing email in brochure request');
+        return { success: false, error: 'Missing email address' };
+    }
+
+    // Basic email validation
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        return { success: false, error: 'Invalid email address' };
+    }
+
+    // 1. Save to CMS
+    try {
+        const { getPayload } = await import('payload');
+        const configPromise = (await import('@payload-config')).default;
+        const payload = await getPayload({ config: configPromise });
+
+        await payload.create({
+            collection: 'form-submissions',
+            data: {
+                name: email.split('@')[0],
+                email,
+                message: `Brochure download request (${locale})`,
+                type: 'brochure_download' as any,
+            },
+        });
+
+        logger.info('Successfully saved brochure request to Payload CMS', { email });
+    } catch (error) {
+        logger.error('Failed to store brochure request in Payload CMS', { error });
+        services.errors.captureException(error, { action: 'payload_store_brochure_request' });
+    }
+
+    // 2. Notify via Gotify
+    try {
+        await services.notifications.notify({
+            title: '📑 Brochure Download Request',
+            message: `New brochure download request from ${email} (${locale})`,
+            priority: 3,
+        });
+    } catch (error) {
+        logger.error('Failed to send notification', { error });
+    }
+
+    // 3. Track success
+    services.analytics.track('brochure-request-success', {
+        locale,
+    });
+
+    // Return the brochure URL
+    const brochureUrl = `/brochure/klz-product-catalog-${locale}.pdf`;
+
+    return { success: true, brochureUrl };
+}