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>
   },
 }
 

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.