docs: updated docs with new base url, content, styles

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

@@ -26,7 +26,7 @@ export default function Layout({ children }: { children: ReactNode }) {
         nav={{
           title: (
             <div className="flex items-center gap-2">
-              <AgentIcon className="h-4 w-4" />
+              <AgentIcon className="h-4 w-4 text-[#8b5cf6]" />
               Sim Studio
             </div>
           ),

docs/app/global.css

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
-
+:root {
+    --color-fd-primary: #8b5cf6; /* or your desired purple hue */
+}
 @source '../node_modules/fumadocs-ui/dist/**/*.js';

docs/app/layout.config.tsx

@@ -18,11 +18,4 @@ export const baseOptions: BaseLayoutProps = {
       </>
     ),
   },
-  links: [
-    {
-      text: 'Documentation',
-      url: '/docs',
-      active: 'nested-url',
-    },
-  ],
 }

docs/components/ui/block-types.tsx

@@ -19,6 +19,15 @@ const BlockFeature = ({
   totalItems: number
   itemsPerRow: number
 }) => {
+  const blockColor = {
+    '--block-color': title === 'Agent' ? '#8b5cf6' : 
+                    title === 'API' ? '#3b82f6' : 
+                    title === 'Condition' ? '#f59e0b' :
+                    title === 'Function' ? '#10b981' :
+                    title === 'Router' ? '#6366f1' :
+                    title === 'Evaluator' ? '#ef4444' : '#8b5cf6'
+  } as React.CSSProperties
+  
   const content = (
     <>
       {index < itemsPerRow && (
@@ -27,9 +36,13 @@ const BlockFeature = ({
       {index >= itemsPerRow && (
         <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
       )}
-      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">{icon}</div>
+      <div className="mb-4 relative z-10 px-10 text-neutral-500 group-hover/feature:text-[color:var(--block-color,#8b5cf6)] dark:text-neutral-400 dark:group-hover/feature:text-[color:var(--block-color,#a78bfa)] transition-colors duration-200"
+        style={blockColor}
+      >
+        {icon}
+      </div>
       <div className="text-lg font-bold mb-2 relative z-10 px-10">
-        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-purple-500 transition-all duration-200 origin-center" />
+        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-[color:var(--block-color,#8b5cf6)] transition-all duration-200 origin-center" style={blockColor} />
         <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
           {title}
         </span>
@@ -65,42 +78,42 @@ export function BlockTypes() {
       description:
         'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.',
       icon: <AgentIcon className="w-6 h-6" />,
-      href: '/docs/blocks/agent',
+      href: '/blocks/agent',
     },
     {
       title: 'API',
       description:
         'Connect to any external API with support for all standard HTTP methods and customizable request parameters.',
       icon: <ApiIcon className="w-6 h-6" />,
-      href: '/docs/blocks/api',
+      href: '/blocks/api',
     },
     {
       title: 'Condition',
       description:
         'Add a condition to the workflow to branch the execution path based on a boolean expression.',
       icon: <ConditionalIcon className="w-6 h-6" />,
-      href: '/docs/blocks/condition',
+      href: '/blocks/condition',
     },
     {
       title: 'Function',
       description:
         'Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic.',
       icon: <CodeIcon className="w-6 h-6" />,
-      href: '/docs/blocks/function',
+      href: '/blocks/function',
     },
     {
       title: 'Router',
       description:
         'Intelligently direct workflow execution to different paths based on input analysis.',
       icon: <ConnectIcon className="w-6 h-6" />,
-      href: '/docs/blocks/router',
+      href: '/blocks/router',
     },
     {
       title: 'Evaluator',
       description:
         'Assess content using customizable evaluation metrics and scoring criteria across multiple dimensions.',
       icon: <ChartBarIcon className="w-6 h-6" />,
-      href: '/docs/blocks/evaluator',
+      href: '/blocks/evaluator',
     },
   ]
 

docs/content/docs/blocks/condition.mdx

@@ -30,30 +30,30 @@ The Condition block serves as a decision point in your workflow, enabling:
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
   <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
     <h3 className="font-medium text-lg mb-2">Branching Logic</h3>
-    <p className="text-sm text-gray-600 dark:text-gray-400">
+    <div className="text-sm text-gray-600 dark:text-gray-400">
       Create different execution paths based on specific conditions
-    </p>
+    </div>
   </div>
   
   <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
     <h3 className="font-medium text-lg mb-2">Rule-Based Routing</h3>
-    <p className="text-sm text-gray-600 dark:text-gray-400">
+    <div className="text-sm text-gray-600 dark:text-gray-400">
       Route workflows deterministically without needing an LLM
-    </p>
+    </div>
   </div>
   
   <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
     <h3 className="font-medium text-lg mb-2">Data-Driven Decisions</h3>
-    <p className="text-sm text-gray-600 dark:text-gray-400">
+    <div className="text-sm text-gray-600 dark:text-gray-400">
       Create workflow paths based on structured data values
-    </p>
+    </div>
   </div>
   
   <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
     <h3 className="font-medium text-lg mb-2">If-Then-Else Logic</h3>
-    <p className="text-sm text-gray-600 dark:text-gray-400">
+    <div className="text-sm text-gray-600 dark:text-gray-400">
       Implement conditional programming paradigms in your workflows
-    </p>
+    </div>
   </div>
 </div>
 

docs/content/docs/blocks/evaluator.mdx

@@ -10,9 +10,13 @@ import { ThemeImage } from '@/components/ui/theme-image'
 
 The Evaluator block allows you to assess the quality of content using customizable evaluation metrics. This is particularly useful for evaluating AI-generated text, ensuring outputs meet specific criteria, and building quality-control mechanisms into your workflows.
 
-<Callout type="note">
+<ThemeImage 
-  The Evaluator block images will be added soon. Currently, the block uses standard evaluation metrics to assess content quality.
+  lightSrc="/static/light/evaluator-light.png" 
-</Callout>
+  darkSrc="/static/dark/evaluator-dark.png" 
+  alt="Evaluator Block" 
+  width={300} 
+  height={175} 
+/>
 
 ## Overview
 

docs/content/docs/connections/tags.mdx

@@ -38,9 +38,9 @@ There are two primary ways to use connection tags in your workflows:
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
   <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
     <h3 className="font-medium text-lg mb-2">Drag and Drop</h3>
-    <p className="text-sm text-gray-600 dark:text-gray-400">
+    <div className="text-sm text-gray-600 dark:text-gray-400">
       Click on a connection tag and drag it into input fields of destination blocks. A dropdown will appear showing available values.
-    </p>
+    </div>
     <ol className="mt-2 text-sm text-gray-600 dark:text-gray-400 list-decimal pl-5">
       <li>Hover over a connection tag to see available data</li>
       <li>Click and drag the tag to an input field</li>
@@ -51,9 +51,9 @@ There are two primary ways to use connection tags in your workflows:
   
   <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
     <h3 className="font-medium text-lg mb-2">Angle Bracket Syntax</h3>
-    <p className="text-sm text-gray-600 dark:text-gray-400">
+    <div className="text-sm text-gray-600 dark:text-gray-400">
       Type <code>&lt;&gt;</code> in input fields to see a dropdown of available connection values from previous blocks.
-    </p>
+    </div>
     <ol className="mt-2 text-sm text-gray-600 dark:text-gray-400 list-decimal pl-5">
       <li>Click in any input field where you want to use connected data</li>
       <li>Type <code>&lt;&gt;</code> to trigger the connection dropdown</li>

docs/content/docs/execution/loops.mdx

@@ -148,9 +148,9 @@ Loops enable powerful workflow patterns:
 
 <div className="p-4 border rounded-md mb-4">
   <h4 className="font-medium">Example: Content Refinement</h4>
-  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+  <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
     Create a loop where an Agent block generates content, an Evaluator block assesses it, and a Function block decides whether to continue refining.
-  </p>
+  </div>
   <ol className="text-sm list-decimal pl-5">
     <li>Agent generates initial content</li>
     <li>Evaluator scores the content</li>
@@ -164,9 +164,9 @@ Loops enable powerful workflow patterns:
 
 <div className="p-4 border rounded-md mb-4">
   <h4 className="font-medium">Example: Data Processing Pipeline</h4>
-  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+  <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
     Process a collection of items one at a time through a series of blocks.
-  </p>
+  </div>
   <ol className="text-sm list-decimal pl-5">
     <li>Function block extracts the next item from a collection</li>
     <li>Processing blocks operate on the single item</li>
@@ -179,9 +179,9 @@ Loops enable powerful workflow patterns:
 
 <div className="p-4 border rounded-md mb-4">
   <h4 className="font-medium">Example: Multi-step Reasoning</h4>
-  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+  <div className="text-sm text-gray-600 dark:text-gray-400 mb-2">
     Implement a recursive approach to complex problem solving.
-  </p>
+  </div>
   <ol className="text-sm list-decimal pl-5">
     <li>Agent analyzes the current problem state</li>
     <li>Function block implements a step in the solution</li>

docs/content/docs/meta.json

@@ -1,4 +1,5 @@
 {
   "title": "Sim Studio Documentation",
-  "pages": ["introduction", "getting-started", "blocks", "variables", "tools", "connections", "execution"]
+  "pages": ["introduction", "getting-started", "blocks", "variables", "tools", "connections", "execution"],
+  "defaultOpen": true
 }

docs/lib/source.ts

@@ -4,6 +4,6 @@ import { docs } from '@/.source'
 // `loader()` also assign a URL to your pages
 // See https://fumadocs.vercel.app/docs/headless/source-api for more info
 export const source = loader({
-  baseUrl: '/docs',
+  baseUrl: '/',
   source: docs.toFumadocsSource(),
 })

docs/next.config.ts

@@ -9,12 +9,7 @@ const config = {
     return [
       {
         source: "/",
-        destination: "/docs/introduction",
+        destination: "/introduction",
-        permanent: true,
-      },
-      {
-        source: "/docs",
-        destination: "/docs/introduction",
         permanent: true,
       },
     ];

sim/app/(landing)/components/nav-client.tsx

@@ -91,7 +91,7 @@ export default function NavClient({ children }: { children: React.ReactNode }) {
             )
           )}
           <a
-            href={`${process.env.NEXT_PUBLIC_DOCS_URL}/docs`}
+            href={`${process.env.NEXT_PUBLIC_DOCS_URL}`}
             className="text-white/80 hover:text-white/100 text-xl p-2 rounded-md hover:scale-[1.04] transition-colors transition-transform duration-200"
             rel="noopener noreferrer"
           >