From b1ed7518b1d9364d5a8e59c194d7d4170a32bc49 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sun, 29 Mar 2026 01:07:21 +0100
Subject: [PATCH] fix: code block filename not showing, consistent code block
 styling

---
 app/integrations/[slug]/page.tsx | 19 ++++++++-----------
 components/IntegrationGuide.tsx  |  4 ++--
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/integrations/[slug]/page.tsx b/app/integrations/[slug]/page.tsx
index 62dc7e8..822493d 100644
--- a/app/integrations/[slug]/page.tsx
+++ b/app/integrations/[slug]/page.tsx
@@ -17,26 +17,23 @@ import { getIntegrationGuide } from '@/lib/integration-content'
 import { IntegrationGuide } from '@/components/IntegrationGuide'
 
 // * ─── MDX Components ────────────────────────────────────────────
-// Maps markdown code fences to CodeBlock. The `filename` meta is passed
-// as a prop via rehype-mdx-code-props (e.g. ```tsx filename="app.tsx").
+// rehype-mdx-code-props passes meta (e.g. filename="app.tsx") as props
+// on the <pre> element. We intercept <pre> to extract filename and render CodeBlock.
 const mdxComponents = {
-  pre: ({ children }: { children: React.ReactNode }) => children,
-  code: ({ children, className, filename, ...props }: {
-    children: React.ReactNode
-    className?: string
+  pre: ({ children, filename, ...props }: {
+    children: React.ReactElement
     filename?: string
     [key: string]: unknown
   }) => {
-    // Block code (inside <pre>) has className like "language-tsx"
-    if (className?.startsWith('language-') || filename) {
+    const code = children?.props?.children
+    if (typeof code === 'string') {
       return (
         <CodeBlock filename={filename || 'code'}>
-          {String(children).replace(/\n$/, '')}
+          {code.replace(/\n$/, '')}
         </CodeBlock>
       )
     }
-    // Inline code
-    return <code className={className} {...props}>{children}</code>
+    return <pre {...props}>{children}</pre>
   },
 }
 
diff --git a/components/IntegrationGuide.tsx b/components/IntegrationGuide.tsx
index 22f0f5c..516e49f 100644
--- a/components/IntegrationGuide.tsx
+++ b/components/IntegrationGuide.tsx
@@ -7,7 +7,7 @@
  */
 
 import Link from 'next/link'
-import { ArrowLeftIcon, ArrowRightIcon } from '@ciphera-net/ui'
+import { ArrowLeftIcon, ArrowRightIcon, CodeBlock } from '@ciphera-net/ui'
 import { type ReactNode } from 'react'
 import { type Integration, getIntegration, categoryLabels } from '@/lib/integrations'
 
@@ -92,7 +92,7 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
             Detect rage clicks and dead clicks by adding the frustration tracking
             add-on after the core script:
           </p>
-          <pre><code>{`<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>`}</code></pre>
+          <CodeBlock filename="index.html">{`<script defer src="https://pulse.ciphera.net/script.frustration.js"></script>`}</CodeBlock>
           <p>
             No extra configuration needed. Add <code>data-no-rage</code> or{' '}
             <code>data-no-dead</code> to disable individual signals.