v0.3.52: docs updates, deployment version tables, workspace-level api keys, knowledgebase improvements

Author: icecrasher321

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

@@ -1,6 +1,6 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx'
 import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page'
 import { notFound } from 'next/navigation'
-import mdxComponents from '@/components/mdx-components'
 import { source } from '@/lib/source'
 
 export const dynamic = 'force-dynamic'
@@ -36,7 +36,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
-        <MDX components={mdxComponents} />
+        <MDX components={defaultMdxComponents} />
       </DocsBody>
     </DocsPage>
   )

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

@@ -1,6 +1,7 @@
 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'
 
@@ -23,7 +24,17 @@ export default function Layout({ children }: { children: ReactNode }) {
       <DocsLayout
         tree={source.pageTree}
         nav={{
-          title: <div className='flex items-center font-medium'>Sim</div>,
+          title: (
+            <div className='flex items-center'>
+              <Image
+                src='/static/logo.png'
+                alt='Sim'
+                width={60}
+                height={24}
+                className='h-6 w-auto'
+              />
+            </div>
+          ),
         }}
         links={[
           {
@@ -33,9 +44,10 @@ export default function Layout({ children }: { children: ReactNode }) {
           },
         ]}
         sidebar={{
-          defaultOpenLevel: 1,
+          defaultOpenLevel: 0,
           collapsible: true,
           footer: null,
+          banner: null,
         }}
       >
         {children}

apps/docs/app/global.css

@@ -6,6 +6,150 @@
   --color-fd-primary: #802fff; /* Purple from control-bar component */
 }
 
+/* Target any potential border classes */
+* {
+  --fd-border-sidebar: transparent !important;
+}
+
+/* Override any CSS custom properties for borders */
+:root {
+  --fd-border: transparent !important;
+  --fd-border-sidebar: transparent !important;
+}
+
+/* Sidebar improvements for cleaner design */
+[data-sidebar] {
+  --fd-sidebar-width: 280px;
+  background-color: rgb(255 255 255);
+  padding-top: 16px;
+}
+
+/* Clean sidebar container */
+[data-sidebar] > div {
+  padding: 0 16px;
+}
+
+/* Section headers/separators styling */
+[data-sidebar] .text-sm.font-medium.text-muted-foreground,
+[data-sidebar] [data-separator] {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 20px;
+  margin-bottom: 6px;
+  padding-left: 12px;
+  padding-right: 12px;
+  color: rgb(115 115 115);
+  border: none;
+  background: none;
+}
+
+/* First separator should have less top margin */
+[data-sidebar] [data-separator]:first-of-type {
+  margin-top: 12px;
+}
+
+/* Clean sidebar item styling */
+[data-sidebar] a {
+  padding: 8px 12px;
+  margin: 1px 0;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  transition: all 0.15s ease;
+  display: block;
+  color: rgb(71 85 105);
+  text-decoration: none;
+}
+
+[data-sidebar] a[data-active="true"] {
+  background-color: rgba(128, 47, 255, 0.08);
+  color: var(--color-fd-primary);
+  font-weight: 500;
+}
+
+[data-sidebar] a:hover:not([data-active="true"]) {
+  background-color: rgb(248 250 252);
+  color: rgb(51 65 85);
+}
+
+/* Improve spacing between sidebar items */
+[data-sidebar] nav > * + * {
+  margin-top: 2px;
+}
+
+/* Section group styling */
+[data-sidebar] [data-folder] {
+  margin-bottom: 4px;
+}
+
+[data-sidebar] [data-folder] > div:first-child {
+  font-weight: 500;
+  font-size: 13px;
+  color: rgb(15 23 42);
+  padding: 6px 12px;
+  margin-bottom: 4px;
+}
+
+/* Clean up folder toggle buttons */
+[data-sidebar] button[data-folder-toggle] {
+  padding: 4px 8px 4px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(51 65 85);
+}
+
+[data-sidebar] button[data-folder-toggle]:hover {
+  background-color: rgb(248 250 252);
+}
+
+/* Nested item indentation */
+[data-sidebar] [data-folder] a {
+  padding-left: 24px;
+  font-size: 14px;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  [data-sidebar] {
+    background-color: rgb(2 8 23);
+  }
+
+  [data-sidebar] a {
+    color: rgb(148 163 184);
+  }
+
+  [data-sidebar] a:hover:not([data-active="true"]) {
+    background-color: rgb(30 41 59);
+    color: rgb(226 232 240);
+  }
+
+  [data-sidebar] a[data-active="true"] {
+    background-color: rgba(128, 47, 255, 0.15);
+    color: var(--color-fd-primary);
+  }
+
+  [data-sidebar] .text-sm.font-medium.text-muted-foreground,
+  [data-sidebar] [data-separator] {
+    color: rgb(148 163 184);
+  }
+
+  [data-sidebar] [data-folder] > div:first-child {
+    color: rgb(226 232 240);
+  }
+
+  [data-sidebar] button[data-folder-toggle] {
+    color: rgb(148 163 184);
+  }
+
+  [data-sidebar] button[data-folder-toggle]:hover {
+    background-color: rgb(30 41 59);
+  }
+}
+
 /* Custom text highlighting styles */
 .text-highlight {
   color: var(--color-fd-primary);
@@ -16,6 +160,23 @@
   color: var(--color-fd-primary);
 }
 
+/* Add bottom spacing to prevent abrupt page endings */
+[data-content] {
+  padding-bottom: 4rem;
+}
+
+/* Alternative fallback for different Fumadocs versions */
+main article,
+.docs-page main {
+  padding-bottom: 4rem;
+}
+
+/* Remove any unwanted borders/outlines from video elements */
+video {
+  outline: none !important;
+  border-style: solid !important;
+}
+
 /* Tailwind v4 content sources */
 @source '../app/**/*.{js,ts,jsx,tsx,mdx}';
 @source '../components/**/*.{js,ts,jsx,tsx,mdx}';