chore: import upstream snapshot with attribution

apps/sim/lib/content/mdx.tsx

@@ -0,0 +1,154 @@
+import clsx from 'clsx'
+import type { MDXRemoteProps } from 'next-mdx-remote/rsc'
+import { CodeBlock } from '@/lib/content/code'
+import { ContentImage } from '@/app/(landing)/components/content-image'
+
+export const mdxComponents: MDXRemoteProps['components'] = {
+  img: (props: any) => (
+    <ContentImage
+      src={props.src}
+      alt={props.alt || ''}
+      width={props.width ? Number(props.width) : 800}
+      height={props.height ? Number(props.height) : 450}
+      className={props.className}
+    />
+  ),
+  h2: ({ children, className, ...props }: any) => (
+    <h2
+      {...props}
+      style={{ fontSize: '30px', marginTop: '3rem', marginBottom: '1.5rem' }}
+      className={clsx('font-medium text-[var(--text-primary)] leading-tight', className)}
+    >
+      {children}
+    </h2>
+  ),
+  h3: ({ children, className, ...props }: any) => (
+    <h3
+      {...props}
+      style={{ fontSize: '24px', marginTop: '1.5rem', marginBottom: '0.75rem' }}
+      className={clsx('font-medium text-[var(--text-primary)] leading-tight', className)}
+    >
+      {children}
+    </h3>
+  ),
+  h4: ({ children, className, ...props }: any) => (
+    <h4
+      {...props}
+      style={{ fontSize: '19px', marginTop: '1.5rem', marginBottom: '0.75rem' }}
+      className={clsx('font-medium text-[var(--text-primary)] leading-tight', className)}
+    >
+      {children}
+    </h4>
+  ),
+  p: (props: any) => (
+    <p
+      {...props}
+      style={{ fontSize: '19px', marginBottom: '1.5rem', fontWeight: '400' }}
+      className={clsx('text-[var(--text-body)] leading-relaxed', props.className)}
+    />
+  ),
+  ul: (props: any) => (
+    <ul
+      {...props}
+      style={{ fontSize: '19px', marginBottom: '1rem', fontWeight: '400' }}
+      className={clsx(
+        'list-outside list-disc pl-6 text-[var(--text-body)] leading-relaxed',
+        props.className
+      )}
+    />
+  ),
+  ol: (props: any) => (
+    <ol
+      {...props}
+      style={{ fontSize: '19px', marginBottom: '1rem', fontWeight: '400' }}
+      className={clsx(
+        'list-outside list-decimal pl-6 text-[var(--text-body)] leading-relaxed',
+        props.className
+      )}
+    />
+  ),
+  li: (props: any) => <li {...props} className={clsx('mb-1', props.className)} />,
+  strong: (props: any) => (
+    <strong
+      {...props}
+      className={clsx('font-semibold text-[var(--text-primary)]', props.className)}
+    />
+  ),
+  em: (props: any) => (
+    <em {...props} className={clsx('text-[var(--text-muted)] italic', props.className)} />
+  ),
+  a: (props: any) => {
+    const isAnchorLink = props.className?.includes('anchor')
+    if (isAnchorLink) {
+      return <a {...props} className={clsx('text-inherit no-underline', props.className)} />
+    }
+    return (
+      <a
+        {...props}
+        className={clsx(
+          'font-medium text-[var(--text-primary)] underline hover:text-[var(--text-primary)]',
+          props.className
+        )}
+      />
+    )
+  },
+  figure: (props: any) => (
+    <figure {...props} className={clsx('my-8 overflow-hidden rounded-lg', props.className)} />
+  ),
+  hr: (props: any) => (
+    <hr
+      {...props}
+      className={clsx('my-8 border-[var(--border)]', props.className)}
+      style={{ marginBottom: '1.5rem' }}
+    />
+  ),
+  pre: (props: any) => {
+    const child = props.children
+    const isCodeBlock = child && typeof child === 'object' && child.props
+
+    if (isCodeBlock) {
+      const codeContent = child.props.children || ''
+      const className = child.props.className || ''
+      const language = className.replace('language-', '') || 'javascript'
+
+      const languageMap: Record<string, 'javascript' | 'json' | 'python'> = {
+        js: 'javascript',
+        jsx: 'javascript',
+        ts: 'javascript',
+        tsx: 'javascript',
+        typescript: 'javascript',
+        javascript: 'javascript',
+        json: 'json',
+        python: 'python',
+        py: 'python',
+      }
+
+      const mappedLanguage = languageMap[language.toLowerCase()] || 'javascript'
+
+      return (
+        <div className='not-prose my-6'>
+          <CodeBlock
+            code={typeof codeContent === 'string' ? codeContent.trim() : String(codeContent)}
+            language={mappedLanguage}
+          />
+        </div>
+      )
+    }
+    return <pre {...props} className={clsx('my-4 overflow-x-auto rounded-lg', props.className)} />
+  },
+  code: (props: any) => {
+    if (!props.className) {
+      return (
+        <code
+          {...props}
+          className={clsx(
+            'rounded bg-[var(--surface-hover)] px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-[var(--text-primary)]',
+            props.className
+          )}
+          style={{ fontWeight: 400 }}
+        />
+      )
+    }
+    return <code {...props} />
+  },
+}