chore: support for mermaid diagrams

Author: adithyaakrishna

apps/sim/app/(landing)/studio/[slug]/prose-studio.css

@@ -69,7 +69,6 @@
   border: 1px solid #2a2a2a;
   border-radius: 5px;
   padding: 1.5rem;
-  margin: 2rem 0;
   overflow-x: auto;
   font-size: 0.875rem;
   line-height: 1.7;
@@ -149,6 +148,77 @@
   font-size: 0.875rem;
 }
 
+/* ── PrismJS syntax highlighting tokens ──
+ * Custom theme matching Sim design language.
+ * Colors aligned with the brand palette:
+ * - Keywords/imports: #FA4EDF (pink)
+ * - Strings: #FFCC02 (yellow)
+ * - Functions/methods: #82aaff (periwinkle)
+ * - Types/classes: #2ABBF8 (cyan)
+ * - Numbers/booleans: #00F701 (green)
+ * - Comments: #666
+ * - Operators/punctuation: #999
+ */
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #666666;
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: #999999;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #2abbf8;
+}
+
+.token.boolean,
+.token.number {
+  color: #00f701;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #ffcc02;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #999999;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #fa4edf;
+}
+
+.token.function,
+.token.class-name {
+  color: #82aaff;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #2abbf8;
+}
+
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .prose-studio a {

apps/sim/app/(landing)/studio/hero.tsx

@@ -10,7 +10,7 @@ export function StudioHero() {
           backgroundSize: '32px 32px',
         }}
       />
-      <div className='relative z-10 mx-auto max-w-5xl px-4 lg:px-4'>
+      <div className='relative z-10 mx-auto max-w-5xl'>
         <div className='flex flex-col items-start'>
           <div className='mb-6 inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-widest text-[#999]'>
             <span className='inline-block h-2 w-2 flex-shrink-0 bg-[#2ABBF8]' aria-hidden='true' />

apps/sim/app/(landing)/studio/page.tsx

@@ -54,7 +54,7 @@ export default async function StudioIndex({
         dangerouslySetInnerHTML={{ __html: JSON.stringify(studioJsonLd) }}
       />
       {pageNum === 1 && !tag && <StudioHero />}
-      <div className='mx-auto w-full max-w-5xl px-4 py-12 lg:px-4'>
+      <div className='mx-auto w-full max-w-5xl py-12'>
         {activeCategory && (
           <div className='mb-8 flex items-center gap-3'>
             <span className='font-mono text-[10px] uppercase tracking-widest text-[#666]'>

apps/sim/lib/blog/code.tsx

@@ -1,21 +1,118 @@
 'use client'
 
-import { Code } from '@/components/emcn'
+import { useCallback, useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { highlight, languages } from 'prismjs'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-markdown'
 
 interface CodeBlockProps {
   code: string
-  language: 'javascript' | 'json' | 'python'
+  language: string
+  filename?: string
 }
 
-export function CodeBlock({ code, language }: CodeBlockProps) {
+const LANG_MAP: Record<string, string> = {
+  js: 'javascript',
+  jsx: 'javascript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  typescript: 'typescript',
+  javascript: 'javascript',
+  json: 'json',
+  python: 'python',
+  py: 'python',
+  bash: 'bash',
+  sh: 'bash',
+  shell: 'bash',
+  css: 'css',
+  yaml: 'yaml',
+  yml: 'yaml',
+  md: 'markdown',
+  markdown: 'markdown',
+  markup: 'markup',
+  html: 'markup',
+  xml: 'markup',
+  php: 'php',
+  rust: 'rust',
+  go: 'go',
+  java: 'java',
+  kotlin: 'kotlin',
+  scala: 'scala',
+  swift: 'swift',
+  dart: 'dart',
+}
+
+const LANG_LABEL: Record<string, string> = {
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  json: 'JSON',
+  python: 'Python',
+  bash: 'Bash',
+  css: 'CSS',
+  yaml: 'YAML',
+  markdown: 'Markdown',
+}
+
+export function CodeBlock({ code, language, filename }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const lang = LANG_MAP[language.toLowerCase()] || 'javascript'
+  const grammar = languages[lang] || languages.javascript
+  const highlighted = highlight(code, grammar, lang)
+  const label = filename || LANG_LABEL[lang] || language
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      /* clipboard unavailable */
+    }
+  }, [code])
+
   return (
-    <div className='dark w-full overflow-hidden rounded-md border border-[#2a2a2a] bg-[#1F1F1F] text-sm'>
-      <Code.Viewer
-        code={code}
-        showGutter
-        language={language}
-        className='[&_pre]:!pb-0 m-0 rounded-none border-0 bg-transparent'
-      />
+    <div
+      className='my-8 overflow-hidden border border-[#2A2A2A] bg-[#111111]'
+      style={{ borderRadius: '5px' }}
+    >
+      <div className='flex items-center justify-between border-b border-[#2A2A2A] bg-[#232323] px-4 py-2'>
+        <div className='flex items-center gap-2'>
+          <span className='inline-block h-2 w-2 bg-[#00F701]' aria-hidden='true' />
+          <span className='inline-block h-2 w-2 bg-[#2ABBF8]' aria-hidden='true' />
+          <span className='inline-block h-2 w-2 bg-[#FA4EDF]' aria-hidden='true' />
+        </div>
+        <span className='font-mono text-[10px] uppercase tracking-widest text-[#ECECEC]'>
+          {label}
+        </span>
+        <button
+          type='button'
+          onClick={handleCopy}
+          className='flex items-center text-[#666] transition-colors hover:text-[#ECECEC]'
+          aria-label={copied ? 'Copied' : 'Copy code'}
+        >
+          {copied ? (
+            <Check className='h-3.5 w-3.5 text-[#00F701]' aria-hidden='true' />
+          ) : (
+            <Copy className='h-3.5 w-3.5' aria-hidden='true' />
+          )}
+        </button>
+      </div>
+      <div className='overflow-x-auto p-4'>
+        <pre className='m-0 border-0 bg-transparent p-0 text-[13px] leading-relaxed'>
+          <code
+            className='font-mono text-[#d4d4d8]'
+            dangerouslySetInnerHTML={{ __html: highlighted }}
+          />
+        </pre>
+      </div>
     </div>
   )
 }

apps/sim/lib/blog/mdx.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import Image from 'next/image'
 import type { MDXRemoteProps } from 'next-mdx-remote/rsc'
 import { CodeBlock } from '@/lib/blog/code'
+import { MermaidDiagram } from '@/lib/blog/mermaid'
 
 export const mdxComponents: MDXRemoteProps['components'] = {
   img: (props: any) => (
@@ -102,27 +103,18 @@ export const mdxComponents: MDXRemoteProps['components'] = {
       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 code = typeof codeContent === 'string' ? codeContent.trim() : String(codeContent)
+      if (language.toLowerCase() === 'mermaid') {
+        return (
+          <div className='not-prose my-6'>
+            <MermaidDiagram chart={code} />
+          </div>
+        )
       }
 
-      const mappedLanguage = languageMap[language.toLowerCase()] || 'javascript'
-
       return (
         <div className='not-prose my-6'>
-          <CodeBlock
-            code={typeof codeContent === 'string' ? codeContent.trim() : String(codeContent)}
-            language={mappedLanguage}
-          />
+          <CodeBlock code={code} language={language} />
         </div>
       )
     }