feat(docs): added footer for page navigation, i18n for docs (#1339)

* update infra and remove railway

* feat(docs): added footer for page navigation, i18n for docs

* Revert "update infra and remove railway"

This reverts commit abfa2f8d51.

* added SEO-related stuff

* fix image sizes

* add missing pages

* remove extraneous comments

.github/workflows/i18n.yml

@@ -0,0 +1,126 @@
+name: 'Auto-translate Documentation'
+
+on:
+  push:
+    branches: [ main ]
+    paths: 
+      - 'apps/docs/content/docs/en/**'
+      - 'apps/docs/i18n.json'
+  pull_request:
+    branches: [ main ]
+    paths: 
+      - 'apps/docs/content/docs/en/**'
+      - 'apps/docs/i18n.json'
+  workflow_dispatch: # Allow manual triggers
+
+jobs:
+  translate:
+    runs-on: ubuntu-latest
+    if: github.actor != 'github-actions[bot]' # Prevent infinite loops
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
+      
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      
+      - name: Run Lingo.dev translations
+        env:
+          LINGODOTDEV_API_KEY: ${{ secrets.LINGODOTDEV_API_KEY }}
+        run: |
+          cd apps/docs
+          bunx lingo.dev@latest i18n
+      
+      - name: Check for translation changes
+        id: changes
+        run: |
+          cd apps/docs
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          
+          if [ -n "$(git status --porcelain content/docs)" ]; then
+            echo "changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "changes=false" >> $GITHUB_OUTPUT
+          fi
+      
+      - name: Commit and push translation updates
+        if: steps.changes.outputs.changes == 'true'
+        run: |
+          cd apps/docs
+          git add content/docs/es/ content/docs/fr/ content/docs/zh/ i18n.lock
+          git commit -m "feat: update translations"
+          git push origin ${{ github.ref_name }}
+      
+      - name: Create Pull Request (for feature branches)
+        if: steps.changes.outputs.changes == 'true' && github.event_name == 'pull_request'
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commit-message: "feat: update translations"
+          title: "🌐 Auto-update translations"
+          body: |
+            ## Summary
+            Automated translation updates for documentation.
+            
+            - Updated translations for modified English content
+            - Generated using Lingo.dev AI translation
+            - Maintains consistency with source documentation
+            
+            ## Test Plan
+            - [ ] Verify translated content accuracy
+            - [ ] Check that all links and references work correctly
+            - [ ] Ensure formatting and structure are preserved
+          branch: auto-translations
+          base: ${{ github.base_ref }}
+          labels: |
+            i18n
+            auto-generated
+
+  verify-translations:
+    needs: translate
+    runs-on: ubuntu-latest
+    if: always() # Run even if translation fails
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      
+      - name: Install dependencies
+        run: |
+          cd apps/docs
+          bun install
+      
+      - name: Build documentation to verify translations
+        run: |
+          cd apps/docs
+          bun run build
+      
+      - name: Report translation status
+        run: |
+          cd apps/docs
+          echo "## Translation Status Report" >> $GITHUB_STEP_SUMMARY
+          
+          en_count=$(find content/docs/en -name "*.mdx" | wc -l)
+          es_count=$(find content/docs/es -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          fr_count=$(find content/docs/fr -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          zh_count=$(find content/docs/zh -name "*.mdx" 2>/dev/null | wc -l || echo 0)
+          
+          es_percentage=$((es_count * 100 / en_count))
+          fr_percentage=$((fr_count * 100 / en_count))
+          zh_percentage=$((zh_count * 100 / en_count))
+          
+          echo "- **🇪🇸 Spanish**: $es_count/$en_count files ($es_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇫🇷 French**: $fr_count/$en_count files ($fr_percentage%)" >> $GITHUB_STEP_SUMMARY
+          echo "- **🇨🇳 Chinese**: $zh_count/$en_count files ($zh_percentage%)" >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -68,4 +68,5 @@ start-collector.sh
 .vscode
 
 ## Helm Chart Tests
-helm/sim/test
+helm/sim/test
+i18n.cache

apps/docs/app/(docs)/[[...slug]]/layout.tsx

@@ -1,5 +0,0 @@
-import type { ReactNode } from 'react'
-
-export default function SlugLayout({ children }: { children: ReactNode }) {
-  return children
-}

apps/docs/app/(docs)/[[...slug]]/page.tsx

@@ -1,58 +0,0 @@
-import defaultMdxComponents from 'fumadocs-ui/mdx'
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
-import { notFound } from 'next/navigation'
-import { source } from '@/lib/source'
-
-export const dynamic = 'force-dynamic'
-
-export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
-  const params = await props.params
-  const page = source.getPage(params.slug)
-  if (!page) notFound()
-
-  const MDX = page.data.body
-
-  return (
-    <DocsPage
-      toc={page.data.toc}
-      full={page.data.full}
-      tableOfContent={{
-        style: 'clerk',
-        enabled: true,
-        header: <div className='mb-2 font-medium text-sm'>On this page</div>,
-        single: false,
-      }}
-      article={{
-        className: 'scroll-smooth max-sm:pb-16',
-      }}
-      tableOfContentPopover={{
-        style: 'clerk',
-        enabled: true,
-      }}
-      footer={{
-        enabled: false,
-      }}
-    >
-      <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsDescription>{page.data.description}</DocsDescription>
-      <DocsBody>
-        <MDX components={defaultMdxComponents} />
-      </DocsBody>
-    </DocsPage>
-  )
-}
-
-export async function generateStaticParams() {
-  return source.generateParams()
-}
-
-export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
-  const params = await props.params
-  const page = source.getPage(params.slug)
-  if (!page) notFound()
-
-  return {
-    title: page.data.title,
-    description: page.data.description,
-  }
-}

apps/docs/app/(docs)/layout.tsx

@@ -1,58 +0,0 @@
-import type { ReactNode } from 'react'
-import { DocsLayout } from 'fumadocs-ui/layouts/docs'
-import { ExternalLink, GithubIcon } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { source } from '@/lib/source'
-
-const GitHubLink = () => (
-  <div className='fixed right-4 bottom-4 z-50'>
-    <Link
-      href='https://github.com/simstudioai/sim'
-      target='_blank'
-      rel='noopener noreferrer'
-      className='flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background transition-colors hover:bg-muted'
-    >
-      <GithubIcon className='h-4 w-4' />
-    </Link>
-  </div>
-)
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <>
-      <DocsLayout
-        tree={source.pageTree}
-        nav={{
-          title: (
-            <div className='flex items-center'>
-              <Image
-                src='/static/logo.png'
-                alt='Sim'
-                width={60}
-                height={24}
-                className='h-6 w-auto'
-              />
-            </div>
-          ),
-        }}
-        links={[
-          {
-            text: 'Visit Sim',
-            url: 'https://sim.ai',
-            icon: <ExternalLink className='h-4 w-4' />,
-          },
-        ]}
-        sidebar={{
-          defaultOpenLevel: 0,
-          collapsible: true,
-          footer: null,
-          banner: null,
-        }}
-      >
-        {children}
-      </DocsLayout>
-      <GitHubLink />
-    </>
-  )
-}

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -0,0 +1,161 @@
+import { findNeighbour } from 'fumadocs-core/server'
+import defaultMdxComponents from 'fumadocs-ui/mdx'
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { StructuredData } from '@/components/structured-data'
+import { source } from '@/lib/source'
+
+export const dynamic = 'force-dynamic'
+
+export default async function Page(props: { params: Promise<{ slug?: string[]; lang: string }> }) {
+  const params = await props.params
+  const page = source.getPage(params.slug, params.lang)
+  if (!page) notFound()
+
+  const MDX = page.data.body
+  const baseUrl = 'https://docs.sim.ai'
+
+  const pageTreeRecord = source.pageTree as Record<string, any>
+  const pageTree =
+    pageTreeRecord[params.lang] ?? pageTreeRecord.en ?? Object.values(pageTreeRecord)[0]
+  const neighbours = pageTree ? findNeighbour(pageTree, page.url) : null
+
+  const CustomFooter = () => (
+    <div className='mt-12 flex items-center justify-between border-border border-t py-8'>
+      {neighbours?.previous ? (
+        <Link
+          href={neighbours.previous.url}
+          className='group flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground'
+        >
+          <ChevronLeft className='group-hover:-translate-x-1 h-4 w-4 transition-transform' />
+          <span className='font-medium'>{neighbours.previous.name}</span>
+        </Link>
+      ) : (
+        <div />
+      )}
+
+      {neighbours?.next ? (
+        <Link
+          href={neighbours.next.url}
+          className='group flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground'
+        >
+          <span className='font-medium'>{neighbours.next.name}</span>
+          <ChevronRight className='h-4 w-4 transition-transform group-hover:translate-x-1' />
+        </Link>
+      ) : (
+        <div />
+      )}
+    </div>
+  )
+
+  return (
+    <>
+      <StructuredData
+        title={page.data.title}
+        description={page.data.description || ''}
+        url={`${baseUrl}${page.url}`}
+        lang={params.lang}
+      />
+      <DocsPage
+        toc={page.data.toc}
+        full={page.data.full}
+        tableOfContent={{
+          style: 'clerk',
+          enabled: true,
+          header: <div className='mb-2 font-medium text-sm'>On this page</div>,
+          single: false,
+        }}
+        article={{
+          className: 'scroll-smooth max-sm:pb-16',
+        }}
+        tableOfContentPopover={{
+          style: 'clerk',
+          enabled: true,
+        }}
+        footer={{
+          enabled: true,
+          component: <CustomFooter />,
+        }}
+      >
+        <DocsTitle>{page.data.title}</DocsTitle>
+        <DocsDescription>{page.data.description}</DocsDescription>
+        <DocsBody>
+          <MDX components={defaultMdxComponents} />
+        </DocsBody>
+      </DocsPage>
+    </>
+  )
+}
+
+export async function generateStaticParams() {
+  return source.generateParams()
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[]; lang: string }>
+}) {
+  const params = await props.params
+  const page = source.getPage(params.slug, params.lang)
+  if (!page) notFound()
+
+  const baseUrl = 'https://docs.sim.ai'
+  const fullUrl = `${baseUrl}${page.url}`
+
+  return {
+    title: page.data.title,
+    description:
+      page.data.description || 'Sim visual workflow builder for AI applications documentation',
+    keywords: [
+      'AI workflow builder',
+      'visual workflow editor',
+      'AI automation',
+      'workflow automation',
+      'AI agents',
+      'no-code AI',
+      'drag and drop workflows',
+      page.data.title?.toLowerCase().split(' '),
+    ]
+      .flat()
+      .filter(Boolean),
+    authors: [{ name: 'Sim Team' }],
+    category: 'Developer Tools',
+    openGraph: {
+      title: page.data.title,
+      description:
+        page.data.description || 'Sim visual workflow builder for AI applications documentation',
+      url: fullUrl,
+      siteName: 'Sim Documentation',
+      type: 'article',
+      locale: params.lang,
+      alternateLocale: ['en', 'fr', 'zh'].filter((lang) => lang !== params.lang),
+    },
+    twitter: {
+      card: 'summary',
+      title: page.data.title,
+      description:
+        page.data.description || 'Sim visual workflow builder for AI applications documentation',
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+    canonical: fullUrl,
+    alternates: {
+      canonical: fullUrl,
+      languages: {
+        en: `${baseUrl}/en${page.url.replace(`/${params.lang}`, '')}`,
+        fr: `${baseUrl}/fr${page.url.replace(`/${params.lang}`, '')}`,
+        zh: `${baseUrl}/zh${page.url.replace(`/${params.lang}`, '')}`,
+      },
+    },
+  }
+}

apps/docs/app/[lang]/layout.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react'
+import { defineI18nUI } from 'fumadocs-ui/i18n'
+import { DocsLayout } from 'fumadocs-ui/layouts/docs'
+import { RootProvider } from 'fumadocs-ui/provider'
+import { ExternalLink, GithubIcon } from 'lucide-react'
+import { Inter } from 'next/font/google'
+import Image from 'next/image'
+import Link from 'next/link'
+import { LanguageDropdown } from '@/components/ui/language-dropdown'
+import { i18n } from '@/lib/i18n'
+import { source } from '@/lib/source'
+import '../global.css'
+import { Analytics } from '@vercel/analytics/next'
+
+const inter = Inter({
+  subsets: ['latin'],
+})
+
+const { provider } = defineI18nUI(i18n, {
+  translations: {
+    en: {
+      displayName: 'English',
+    },
+    es: {
+      displayName: 'Español',
+    },
+    fr: {
+      displayName: 'Français',
+    },
+    zh: {
+      displayName: '简体中文',
+    },
+  },
+})
+
+const GitHubLink = () => (
+  <div className='fixed right-4 bottom-4 z-50'>
+    <Link
+      href='https://github.com/simstudioai/sim'
+      target='_blank'
+      rel='noopener noreferrer'
+      className='flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background transition-colors hover:bg-muted'
+    >
+      <GithubIcon className='h-4 w-4' />
+    </Link>
+  </div>
+)
+
+type LayoutProps = {
+  children: ReactNode
+  params: Promise<{ lang: string }>
+}
+
+export default async function Layout({ children, params }: LayoutProps) {
+  const { lang } = await params
+
+  return (
+    <html lang={lang} className={inter.className} suppressHydrationWarning>
+      <body className='flex min-h-screen flex-col'>
+        <RootProvider i18n={provider(lang)}>
+          <DocsLayout
+            tree={source.pageTree[lang]}
+            nav={{
+              title: (
+                <div className='flex items-center gap-3'>
+                  <Image
+                    src='/static/logo.png'
+                    alt='Sim'
+                    width={60}
+                    height={24}
+                    className='h-6 w-auto'
+                  />
+                  <LanguageDropdown />
+                </div>
+              ),
+            }}
+            links={[
+              {
+                text: 'Visit Sim',
+                url: 'https://sim.ai',
+                icon: <ExternalLink className='h-4 w-4' />,
+              },
+            ]}
+            sidebar={{
+              defaultOpenLevel: 0,
+              collapsible: true,
+              footer: null,
+              banner: null,
+            }}
+          >
+            {children}
+          </DocsLayout>
+          <GitHubLink />
+          <Analytics />
+        </RootProvider>
+      </body>
+    </html>
+  )
+}

apps/docs/app/layout.tsx

@@ -1,30 +1,32 @@
 import type { ReactNode } from 'react'
-import { RootProvider } from 'fumadocs-ui/provider'
-import { Inter } from 'next/font/google'
-import './global.css'
-import { Analytics } from '@vercel/analytics/next'
 
-const inter = Inter({
-  subsets: ['latin'],
-})
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <html lang='en' className={inter.className} suppressHydrationWarning>
-      <body className='flex min-h-screen flex-col'>
-        <RootProvider>
-          {children}
-          <Analytics />
-        </RootProvider>
-      </body>
-    </html>
-  )
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return children
 }
 
 export const metadata = {
-  title: 'Sim',
+  metadataBase: new URL('https://docs.sim.ai'),
+  title: {
+    default: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    template: '%s',
+  },
   description:
-    'Build agents in seconds with a drag and drop workflow builder. Access comprehensive documentation to help you create efficient workflows and maximize your automation capabilities.',
+    'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+  keywords: [
+    'AI workflow builder',
+    'visual workflow editor',
+    'AI automation',
+    'workflow automation',
+    'AI agents',
+    'no-code AI',
+    'drag and drop workflows',
+    'AI integrations',
+    'workflow canvas',
+    'AI development platform',
+  ],
+  authors: [{ name: 'Sim Team', url: 'https://sim.ai' }],
+  category: 'Developer Tools',
+  classification: 'Developer Documentation',
   manifest: '/favicon/site.webmanifest',
   icons: {
     icon: [
@@ -39,4 +41,40 @@ export const metadata = {
     statusBarStyle: 'default',
     title: 'Sim Docs',
   },
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    alternateLocale: ['fr_FR', 'zh_CN'],
+    url: 'https://docs.sim.ai',
+    siteName: 'Sim Documentation',
+    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    description:
+      'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    description:
+      'Comprehensive documentation for Sim - the visual workflow builder for AI applications.',
+    creator: '@sim_ai',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+  alternates: {
+    canonical: 'https://docs.sim.ai',
+    languages: {
+      en: '/en',
+      fr: '/fr',
+      zh: '/zh',
+    },
+  },
 }

apps/docs/app/llms.txt/route.ts

@@ -1,7 +1,6 @@
 import { getLLMText } from '@/lib/llms'
 import { source } from '@/lib/source'
 
-// cached forever
 export const revalidate = false
 
 export async function GET() {

apps/docs/app/robots.txt/route.ts

@@ -0,0 +1,58 @@
+export const revalidate = false
+
+export async function GET() {
+  const baseUrl = 'https://docs.sim.ai'
+
+  const robotsTxt = `# Robots.txt for Sim Documentation
+# Generated on ${new Date().toISOString()}
+
+User-agent: *
+Allow: /
+
+# Allow all well-behaved crawlers
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+# AI and LLM crawlers
+User-agent: GPTBot
+Allow: /
+
+User-agent: ChatGPT-User
+Allow: /
+
+User-agent: CCBot
+Allow: /
+
+User-agent: anthropic-ai
+Allow: /
+
+User-agent: Claude-Web
+Allow: /
+
+# Disallow admin and internal paths (if any exist)
+Disallow: /.next/
+Disallow: /api/internal/
+Disallow: /_next/static/
+Disallow: /admin/
+
+# Allow but don't prioritize these
+Allow: /api/search
+Allow: /llms.txt
+Allow: /llms.mdx/
+
+# Sitemaps
+Sitemap: ${baseUrl}/sitemap.xml
+
+# Additional resources for AI indexing
+# See https://github.com/AnswerDotAI/llms-txt for more info
+# LLM-friendly content available at: ${baseUrl}/llms.txt`
+
+  return new Response(robotsTxt, {
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+  })
+}

apps/docs/app/sitemap.xml/route.ts

@@ -0,0 +1,54 @@
+import { i18n } from '@/lib/i18n'
+import { source } from '@/lib/source'
+
+export const revalidate = false
+
+export async function GET() {
+  const baseUrl = 'https://docs.sim.ai'
+
+  const allPages = source.getPages()
+
+  const urls = allPages
+    .flatMap((page) => {
+      const urlWithoutLang = page.url.replace(/^\/[a-z]{2}\//, '/')
+
+      return i18n.languages.map((lang) => {
+        const url =
+          lang === i18n.defaultLanguage
+            ? `${baseUrl}${urlWithoutLang}`
+            : `${baseUrl}/${lang}${urlWithoutLang}`
+
+        return `  <url>
+    <loc>${url}</loc>
+    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>${urlWithoutLang === '/introduction' ? '1.0' : '0.8'}</priority>
+    ${i18n.languages.length > 1 ? generateAlternateLinks(baseUrl, urlWithoutLang) : ''}
+  </url>`
+      })
+    })
+    .join('\n')
+
+  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+${urls}
+</urlset>`
+
+  return new Response(sitemap, {
+    headers: {
+      'Content-Type': 'application/xml',
+    },
+  })
+}
+
+function generateAlternateLinks(baseUrl: string, urlWithoutLang: string): string {
+  return i18n.languages
+    .map((lang) => {
+      const url =
+        lang === i18n.defaultLanguage
+          ? `${baseUrl}${urlWithoutLang}`
+          : `${baseUrl}/${lang}${urlWithoutLang}`
+      return `    <xhtml:link rel="alternate" hreflang="${lang}" href="${url}" />`
+    })
+    .join('\n')
+}

apps/docs/components/structured-data.tsx

@@ -0,0 +1,174 @@
+import Script from 'next/script'
+
+interface StructuredDataProps {
+  title: string
+  description: string
+  url: string
+  lang: string
+  dateModified?: string
+  breadcrumb?: Array<{ name: string; url: string }>
+}
+
+export function StructuredData({
+  title,
+  description,
+  url,
+  lang,
+  dateModified,
+  breadcrumb,
+}: StructuredDataProps) {
+  const baseUrl = 'https://docs.sim.ai'
+
+  const articleStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'TechArticle',
+    headline: title,
+    description: description,
+    url: url,
+    datePublished: dateModified || new Date().toISOString(),
+    dateModified: dateModified || new Date().toISOString(),
+    author: {
+      '@type': 'Organization',
+      name: 'Sim Team',
+      url: baseUrl,
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Sim',
+      url: baseUrl,
+      logo: {
+        '@type': 'ImageObject',
+        url: `${baseUrl}/static/logo.png`,
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': url,
+    },
+    inLanguage: lang,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: 'Sim Documentation',
+      url: baseUrl,
+    },
+    potentialAction: {
+      '@type': 'ReadAction',
+      target: url,
+    },
+  }
+
+  const breadcrumbStructuredData = breadcrumb && {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumb.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.name,
+      item: item.url,
+    })),
+  }
+
+  const websiteStructuredData = url === baseUrl && {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: 'Sim Documentation',
+    url: baseUrl,
+    description:
+      'Comprehensive documentation for Sim visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+    publisher: {
+      '@type': 'Organization',
+      name: 'Sim',
+      url: baseUrl,
+    },
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        '@type': 'EntryPoint',
+        urlTemplate: `${baseUrl}/search?q={search_term_string}`,
+      },
+      'query-input': 'required name=search_term_string',
+    },
+    inLanguage: ['en', 'fr', 'zh'],
+  }
+
+  const faqStructuredData = title.toLowerCase().includes('faq') && {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: [],
+  }
+
+  const softwareStructuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: 'Sim',
+    applicationCategory: 'DeveloperApplication',
+    operatingSystem: 'Any',
+    description:
+      'Visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+    url: baseUrl,
+    author: {
+      '@type': 'Organization',
+      name: 'Sim Team',
+    },
+    offers: {
+      '@type': 'Offer',
+      category: 'Developer Tools',
+    },
+    featureList: [
+      'Visual workflow builder with drag-and-drop interface',
+      'AI agent creation and automation',
+      '80+ built-in integrations',
+      'Real-time team collaboration',
+      'Multiple deployment options',
+      'Custom integrations via MCP protocol',
+    ],
+  }
+
+  return (
+    <>
+      <Script
+        id='article-structured-data'
+        type='application/ld+json'
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(articleStructuredData),
+        }}
+      />
+      {breadcrumbStructuredData && (
+        <Script
+          id='breadcrumb-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(breadcrumbStructuredData),
+          }}
+        />
+      )}
+      {websiteStructuredData && (
+        <Script
+          id='website-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(websiteStructuredData),
+          }}
+        />
+      )}
+      {faqStructuredData && (
+        <Script
+          id='faq-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(faqStructuredData),
+          }}
+        />
+      )}
+      {url === baseUrl && (
+        <Script
+          id='software-structured-data'
+          type='application/ld+json'
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(softwareStructuredData),
+          }}
+        />
+      )}
+    </>
+  )
+}

apps/docs/components/ui/image.tsx

@@ -11,7 +11,7 @@ interface ImageProps extends Omit<NextImageProps, 'className'> {
 }
 
 export function Image({
-  className = 'w-full rounded-xl border border-border shadow-sm overflow-hidden',
+  className = 'w-full',
   enableLightbox = true,
   alt = '',
   src,
@@ -29,7 +29,7 @@ export function Image({
     <>
       <NextImage
         className={cn(
-          'object-cover',
+          'overflow-hidden rounded-xl border border-border object-cover shadow-sm',
           enableLightbox && 'cursor-pointer transition-opacity hover:opacity-90',
           className
         )}

apps/docs/components/ui/language-dropdown.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
+import { useParams, usePathname } from 'next/navigation'
+
+const languages = {
+  en: { name: 'English', flag: '🇺🇸' },
+  es: { name: 'Español', flag: '🇪🇸' },
+  fr: { name: 'Français', flag: '🇫🇷' },
+  zh: { name: '简体中文', flag: '🇨🇳' },
+}
+
+export function LanguageDropdown() {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+  const params = useParams()
+
+  const [currentLang, setCurrentLang] = useState(() => {
+    const langFromParams = params?.lang as string
+    return langFromParams && Object.keys(languages).includes(langFromParams) ? langFromParams : 'en'
+  })
+
+  useEffect(() => {
+    const langFromParams = params?.lang as string
+
+    if (langFromParams && Object.keys(languages).includes(langFromParams)) {
+      if (langFromParams !== currentLang) {
+        setCurrentLang(langFromParams)
+      }
+    } else {
+      if (currentLang !== 'en') {
+        setCurrentLang('en')
+      }
+    }
+  }, [params, currentLang])
+
+  const handleLanguageChange = (locale: string) => {
+    if (locale === currentLang) {
+      setIsOpen(false)
+      return
+    }
+
+    setIsOpen(false)
+
+    const segments = pathname.split('/').filter(Boolean)
+
+    if (segments[0] && Object.keys(languages).includes(segments[0])) {
+      segments.shift()
+    }
+
+    let newPath = ''
+    if (locale === 'en') {
+      newPath = segments.length > 0 ? `/${segments.join('/')}` : '/introduction'
+    } else {
+      newPath = `/${locale}${segments.length > 0 ? `/${segments.join('/')}` : '/introduction'}`
+    }
+
+    window.location.href = newPath
+  }
+
+  return (
+    <div className='relative'>
+      <button
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          setIsOpen(!isOpen)
+        }}
+        className='flex items-center gap-2 rounded-xl border border-border/20 bg-muted/50 px-3 py-2 text-sm backdrop-blur-sm transition-colors hover:bg-muted'
+      >
+        <span className='text-base'>{languages[currentLang as keyof typeof languages]?.flag}</span>
+        <span className='font-medium text-foreground'>
+          {languages[currentLang as keyof typeof languages]?.name}
+        </span>
+        <ChevronDown
+          className={`h-3 w-3 text-muted-foreground transition-transform ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {isOpen && (
+        <>
+          <div className='fixed inset-0 z-10' onClick={() => setIsOpen(false)} />
+          <div className='absolute top-full left-0 z-20 mt-1 w-48 rounded-lg border border-border/50 bg-background/95 shadow-xl backdrop-blur-md'>
+            {Object.entries(languages).map(([code, lang]) => (
+              <button
+                key={code}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  handleLanguageChange(code)
+                }}
+                className={`flex w-full items-center gap-3 px-3 py-2.5 text-sm transition-colors first:rounded-t-lg last:rounded-b-lg hover:bg-muted/80 ${
+                  currentLang === code ? 'bg-muted/60 font-medium text-primary' : 'text-foreground'
+                }`}
+              >
+                <span className='text-base'>{lang.flag}</span>
+                <span>{lang.name}</span>
+                {currentLang === code && <Check className='ml-auto h-4 w-4 text-primary' />}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

apps/docs/content/docs/blocks/meta.json

@@ -1,16 +0,0 @@
-{
-  "title": "Blocks",
-  "pages": [
-    "agent",
-    "api",
-    "condition",
-    "evaluator",
-    "function",
-    "loop",
-    "parallel",
-    "response",
-    "router",
-    "workflow"
-  ],
-  "defaultOpen": false
-}

apps/docs/content/docs/connections/meta.json

@@ -1,5 +0,0 @@
-{
-  "title": "Connections",
-  "pages": ["basics", "tags", "data-structure"],
-  "defaultOpen": false
-}

apps/docs/content/docs/copilot/meta.json

@@ -1,5 +0,0 @@
-{
-  "title": "Copilot",
-  "pages": ["index"],
-  "defaultOpen": false
-}

apps/docs/content/docs/en/index.mdx

@@ -0,0 +1,60 @@
+---
+title: Documentation
+---
+
+import { Card, Cards } from 'fumadocs-ui/components/card'
+
+# Sim Documentation
+
+Welcome to Sim, a visual workflow builder for AI applications. Build powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas.
+
+## Quick Start
+
+<Cards>
+  <Card title="Introduction" href="/introduction">
+    Learn what you can build with Sim
+  </Card>
+  <Card title="Getting Started" href="/getting-started">
+    Create your first workflow in 10 minutes
+  </Card>
+  <Card title="Workflow Blocks" href="/blocks">
+    Learn about the building blocks
+  </Card>
+  <Card title="Tools & Integrations" href="/tools">
+    Explore 80+ built-in integrations
+  </Card>
+</Cards>
+
+## Core Concepts
+
+<Cards>
+  <Card title="Connections" href="/connections">
+    Understand how data flows between blocks
+  </Card>
+  <Card title="Variables" href="/variables">
+    Work with workflow and environment variables
+  </Card>
+  <Card title="Execution" href="/execution">
+    Monitor workflow runs and manage costs
+  </Card>
+  <Card title="Triggers" href="/triggers">
+    Start workflows via API, webhooks, or schedules
+  </Card>
+</Cards>
+
+## Advanced Features
+
+<Cards>
+  <Card title="Team Management" href="/permissions/roles-and-permissions">
+    Set up workspace roles and permissions
+  </Card>
+  <Card title="YAML Configuration" href="/yaml">
+    Define workflows as code
+  </Card>
+  <Card title="MCP Integration" href="/mcp">
+    Connect external services with Model Context Protocol
+  </Card>
+  <Card title="SDKs" href="/sdks">
+    Integrate Sim into your applications
+  </Card>
+</Cards>

apps/docs/content/docs/en/introduction/index.mdx

@@ -70,16 +70,16 @@ Need something custom? Use our [MCP integration](/mcp) to connect any external s
 Ready to build your first AI workflow?
 
 <Cards>
-  <Card title="Getting Started" href="/docs/getting-started">
+  <Card title="Getting Started" href="/getting-started">
     Create your first workflow in 10 minutes
   </Card>
-  <Card title="Workflow Blocks" href="/docs/blocks">
+  <Card title="Workflow Blocks" href="/blocks">
     Learn about the building blocks
   </Card>
-  <Card title="Tools & Integrations" href="/docs/tools">
+  <Card title="Tools & Integrations" href="/tools">
     Explore 60+ built-in integrations
   </Card>
-  <Card title="Team Permissions" href="/docs/permissions">
+  <Card title="Team Permissions" href="/permissions/roles-and-permissions">
     Set up workspace roles and permissions
   </Card>
 </Cards>

apps/docs/content/docs/en/knowledgebase/index.mdx

@@ -30,7 +30,7 @@ Sim supports PDF, Word (DOC/DOCX), plain text (TXT), Markdown (MD), HTML, Excel
 
 Once your documents are processed, you can view and edit the individual chunks. This gives you full control over how your content is organized and searched.
 
-<Image src="/static/knowledgebase.png" alt="Document chunks view showing processed content" width={800} height={500} />
+<Image src="/static/knowledgebase/knowledgebase.png" alt="Document chunks view showing processed content" width={800} height={500} />
 
 ### Chunk Configuration
 - **Default chunk size**: 1,024 characters
@@ -58,7 +58,7 @@ When configured with Azure or [Mistral OCR](https://docs.mistral.ai/ocr/):
 
 Once your documents are processed, you can use them in your AI workflows through the Knowledge block. This enables Retrieval-Augmented Generation (RAG), allowing your AI agents to access and reason over your document content to provide more accurate, contextual responses.
 
-<Image src="/static/knowledgebase-2.png" alt="Using Knowledge Block in Workflows" width={800} height={500} />
+<Image src="/static/knowledgebase/knowledgebase-2.png" alt="Using Knowledge Block in Workflows" width={800} height={500} />
 
 ### Knowledge Block Features
 - **Semantic search**: Find relevant content using natural language queries