improvement: metadata and docs

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

@@ -3,10 +3,9 @@ import Link from 'next/link'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { GithubIcon, ExternalLink } from 'lucide-react'
 import { source } from '@/lib/source'
-import { AgentIcon } from '@/components/icons'
 
 const GitHubLink = () => (
-  <div className="fixed bottom-4 left-4 z-50">
+  <div className="fixed bottom-4 right-4 z-50">
     <Link
       href="https://github.com/simstudioai/sim"
       target="_blank"
@@ -25,10 +24,7 @@ export default function Layout({ children }: { children: ReactNode }) {
         tree={source.pageTree}
         nav={{
           title: (
-            <div className="flex items-center gap-2">
-              <AgentIcon className="h-4 w-4 text-[#8b5cf6]" />
-              Sim Studio
-            </div>
+            <div className="flex items-center font-medium">Sim Studio</div>
           ),
         }}
         links={[
@@ -36,12 +32,17 @@ export default function Layout({ children }: { children: ReactNode }) {
             text: 'Visit Sim Studio',
             url: 'https://simstudio.ai',
             icon: <ExternalLink className="h-4 w-4" />,
-          }
+          },
         ]}
+        sidebar={{
+          defaultOpenLevel: 1,
+          collapsible: true,
+          footer: null,
+        }}
       >
         {children}
       </DocsLayout>
       <GitHubLink />
     </>
   )
-}
+}

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

@@ -1,11 +1,18 @@
 import { notFound } from 'next/navigation'
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from 'fumadocs-ui/page'
 import { source } from '@/lib/source'
 import mdxComponents from '@/components/mdx-components'
 
 export const dynamic = 'force-static'
 
-export default async function Page(props: { params: Promise<{ slug?: string[] }> }) {
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
   const params = await props.params
   const page = source.getPage(params.slug)
   if (!page) notFound()
@@ -13,8 +20,8 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
   const MDX = page.data.body
 
   return (
-    <DocsPage 
-      toc={page.data.toc} 
+    <DocsPage
+      toc={page.data.toc}
       full={page.data.full}
       tableOfContent={{
         style: 'clerk',
@@ -29,6 +36,9 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
         style: 'clerk',
         enabled: true,
       }}
+      footer={{
+        enabled: false,
+      }}
     >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
@@ -43,7 +53,9 @@ export async function generateStaticParams() {
   return source.generateParams()
 }
 
-export async function generateMetadata(props: { params: Promise<{ slug?: string[] }> }) {
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>
+}) {
   const params = await props.params
   const page = source.getPage(params.slug)
   if (!page) notFound()

docs/app/global.css

@@ -2,6 +2,17 @@
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
 :root {
-    --color-fd-primary: #8b5cf6; /* or your desired purple hue */
+    --color-fd-primary: #802FFF; /* Purple from control-bar component */
 }
+
+/* Custom text highlighting styles */
+.text-highlight {
+    color: var(--color-fd-primary);
+}
+
+/* Override marker color for highlighted lists */
+.highlight-markers li::marker {
+    color: var(--color-fd-primary);
+}
+
 @source '../node_modules/fumadocs-ui/dist/**/*.js';

docs/app/layout.tsx

@@ -19,7 +19,8 @@ export default function Layout({ children }: { children: ReactNode }) {
 
 export const metadata = {
   title: 'Sim Studio',
-  description: 'Drag and drop agents to create workflows. Powered by Simplicity',
+  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.',
   manifest: '/favicon/site.webmanifest',
   icons: {
     icon: [