feat(docs): added page nav buttons, static search, TOC footer (#1787)

* feat(docs): added page nav buttons, static search, TOC footer

* back to dynamic search since indexes are too large, added caching hour over hour

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

@@ -4,6 +4,8 @@ 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 { PageNavigationArrows } from '@/components/docs-layout/page-navigation-arrows'
+import { TOCFooter } from '@/components/docs-layout/toc-footer'
 import { StructuredData } from '@/components/structured-data'
 import { CodeBlock } from '@/components/ui/code-block'
 import { CopyPageButton } from '@/components/ui/copy-page-button'
@@ -174,10 +176,14 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
       <DocsPage
         toc={page.data.toc}
         full={page.data.full}
+        breadcrumb={{
+          enabled: false,
+        }}
         tableOfContent={{
           style: 'clerk',
           enabled: true,
           header: <div className='mb-2 font-medium text-sm'>On this page</div>,
+          footer: <TOCFooter />,
           single: false,
         }}
         article={{
@@ -193,7 +199,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
         }}
       >
         <div className='relative'>
-          <div className='absolute top-1 right-0'>
+          <div className='absolute top-1 right-0 flex items-center gap-2'>
             <CopyPageButton
               content={`# ${page.data.title}
 
@@ -201,6 +207,7 @@ ${page.data.description || ''}
 
 ${page.data.content || ''}`}
             />
+            <PageNavigationArrows previous={neighbours?.previous} next={neighbours?.next} />
           </div>
           <DocsTitle>{page.data.title}</DocsTitle>
           <DocsDescription>{page.data.description}</DocsDescription>

apps/docs/app/api/search/route.ts

@@ -1,4 +1,16 @@
 import { createFromSource } from 'fumadocs-core/search/server'
 import { source } from '@/lib/source'
 
-export const { GET } = createFromSource(source)
+export const revalidate = 3600 // Revalidate every hour
+
+export const { GET } = createFromSource(source, {
+  localeMap: {
+    en: { language: 'english' },
+    es: { language: 'spanish' },
+    fr: { language: 'french' },
+    de: { language: 'german' },
+    // ja and zh are not supported by the stemmer library, so we'll skip language config for them
+    ja: {},
+    zh: {},
+  },
+})

apps/docs/app/global.css

@@ -243,8 +243,8 @@ aside#nd-sidebar {
 :root:not(.dark) #nd-sidebar a.text-purple-600,
 :root:not(.dark) #nd-sidebar a[class*="bg-purple"],
 :root:not(.dark) #nd-sidebar a[class*="text-purple"] {
-  background-color: rgba(0, 0, 0, 0.1) !important;
-  color: rgba(0, 0, 0, 1) !important;
+  background-color: rgba(0, 0, 0, 0.07) !important;
+  color: rgba(0, 0, 0, 0.9) !important;
 }
 
 /* Dark mode hover state */
@@ -256,7 +256,7 @@ aside#nd-sidebar {
 /* Light mode hover state */
 :root:not(.dark) #nd-sidebar a:hover:not([data-active="true"]),
 :root:not(.dark) #nd-sidebar button:hover:not([data-active="true"]) {
-  background-color: rgba(0, 0, 0, 0.06) !important;
+  background-color: rgba(0, 0, 0, 0.03) !important;
 }
 
 /* Dark mode - ensure active/selected items don't change on hover */
@@ -273,8 +273,8 @@ aside#nd-sidebar {
 :root:not(.dark) #nd-sidebar a[class*="bg-purple"]:hover,
 :root:not(.dark) #nd-sidebar a[data-active="true"]:hover,
 :root:not(.dark) #nd-sidebar button[data-active="true"]:hover {
-  background-color: rgba(0, 0, 0, 0.1) !important;
-  color: rgba(0, 0, 0, 1) !important;
+  background-color: rgba(0, 0, 0, 0.07) !important;
+  color: rgba(0, 0, 0, 0.9) !important;
 }
 
 /* Hide search, platform, and collapse button from sidebar completely */

apps/docs/components/docs-layout/page-navigation-arrows.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+interface PageNavigationArrowsProps {
+  previous?: {
+    url: string
+  }
+  next?: {
+    url: string
+  }
+}
+
+export function PageNavigationArrows({ previous, next }: PageNavigationArrowsProps) {
+  if (!previous && !next) return null
+
+  return (
+    <div className='flex items-center gap-2'>
+      {previous && (
+        <Link
+          href={previous.url}
+          className='inline-flex items-center justify-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+          aria-label='Previous page'
+          title='Previous page'
+        >
+          <ChevronLeft className='h-4 w-4' />
+        </Link>
+      )}
+      {next && (
+        <Link
+          href={next.url}
+          className='inline-flex items-center justify-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+          aria-label='Next page'
+          title='Next page'
+        >
+          <ChevronRight className='h-4 w-4' />
+        </Link>
+      )}
+    </div>
+  )
+}

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type ReactNode, useState } from 'react'
+import { type ReactNode, useEffect, useState } from 'react'
 import type { PageTree } from 'fumadocs-core/server'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
@@ -46,6 +46,10 @@ export function SidebarFolder({
   const hasActiveChild = checkHasActiveChild(item, pathname)
   const [open, setOpen] = useState(hasActiveChild)
 
+  useEffect(() => {
+    setOpen(hasActiveChild)
+  }, [hasActiveChild])
+
   return (
     <li className='mb-[0.0625rem] list-none'>
       {item.index ? (

apps/docs/components/docs-layout/toc-footer.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowRight, ChevronRight } from 'lucide-react'
+import Link from 'next/link'
+
+export function TOCFooter() {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <div className='sticky bottom-0 mt-6'>
+      <div className='flex flex-col gap-2 rounded-lg border border-border bg-secondary p-6 text-sm'>
+        <div className='text-balance font-semibold text-base leading-tight'>
+          Start building today
+        </div>
+        <div className='text-muted-foreground'>Trusted by over 60,000 builders.</div>
+        <div className='text-muted-foreground'>
+          Build Agentic workflows visually on a drag-and-drop canvas or with natural language.
+        </div>
+        <Link
+          href='https://sim.ai/signup'
+          target='_blank'
+          rel='noopener noreferrer'
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          className='group mt-2 inline-flex h-8 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] px-3 pr-[10px] pl-[12px] font-medium text-sm text-white shadow-[inset_0_2px_4px_0_#9B77FF] outline-none transition-all hover:shadow-lg focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
+          aria-label='Get started with Sim - Sign up for free'
+        >
+          <span>Get started</span>
+          <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
+            {isHovered ? (
+              <ArrowRight className='h-4 w-4' aria-hidden='true' />
+            ) : (
+              <ChevronRight className='h-4 w-4' aria-hidden='true' />
+            )}
+          </span>
+        </Link>
+      </div>
+    </div>
+  )
+}

apps/docs/components/ui/copy-page-button.tsx

@@ -23,17 +23,17 @@ export function CopyPageButton({ content }: CopyPageButtonProps) {
   return (
     <button
       onClick={handleCopy}
-      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-1.5 text-muted-foreground/60 text-sm transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
+      className='flex items-center gap-1.5 rounded-lg border border-border/40 bg-background px-2.5 py-2 text-muted-foreground/60 text-sm leading-none transition-all hover:border-border hover:bg-accent/50 hover:text-muted-foreground'
       aria-label={copied ? 'Copied to clipboard' : 'Copy page content'}
     >
       {copied ? (
         <>
-          <Check className='h-4 w-4' />
+          <Check className='h-3.5 w-3.5' />
           <span>Copied</span>
         </>
       ) : (
         <>
-          <Copy className='h-4 w-4' />
+          <Copy className='h-3.5 w-3.5' />
           <span>Copy page</span>
         </>
       )}

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

@@ -1,6 +1,6 @@
 ---
 title: Overview
-description: Core ways to start Sim workflows
+description: Triggers are the core ways to start Sim workflows
 ---
 
 import { Card, Cards } from 'fumadocs-ui/components/card'