feat: Added the new docs homepage with sidenav

.env.example

@@ -5,4 +5,7 @@ NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX
 NEXT_PUBLIC_ENV=development/production
 
 # Koala Analytics
-NEXT_PUBLIC_KOALA_PUBLIC_API_KEY=pk_xxxxxxxxxxxxxxxxxxxxxxxx
+NEXT_PUBLIC_KOALA_PUBLIC_API_KEY=pk_xxxxxxxxxxxxxxxxxxxxxxxx
+
+# Tavily AI Search API Key (get from https://tavily.com)
+TAVILY_API_KEY=tvly-XXXXXXXXXX

.source/dynamic.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+import { dynamic } from 'fumadocs-mdx/runtime/dynamic';
+import * as Config from '../source.config';
+
+const create = await dynamic<typeof Config, import("fumadocs-mdx/runtime/types").InternalTypeConfig & {
+  DocData: {
+  }
+}>(Config, {"configPath":"source.config.ts","environment":"next","outDir":".source"}, {"doc":{"passthroughs":["extractedReferences"]}});

.source/source.config.mjs

@@ -6,11 +6,19 @@ import {
   metaSchema
 } from "fumadocs-mdx/config";
 import { remarkAdmonition } from "fumadocs-core/mdx-plugins";
+import { z } from "zod";
+var extendedFrontmatterSchema = frontmatterSchema.extend({
+  full: z.boolean().default(false)
+});
 var docs = defineDocs({
   // The root directory for all documentation
   dir: "content/docs",
   docs: {
-    schema: frontmatterSchema
+    schema: extendedFrontmatterSchema,
+    postprocess: {
+      // Only include processed markdown in production (for LLM endpoints)
+      includeProcessedMarkdown: process.env.NODE_ENV === "production"
+    }
   },
   meta: {
     schema: metaSchema

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

@@ -5,42 +5,42 @@ import {
   DocsDescription,
   DocsTitle,
 } from 'fumadocs-ui/page';
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { getMDXComponents } from '@/mdx-components';
-import { EditOnGitHub } from './page.client';
-
-const owner = 'parseablehq';
-const repo = 'developer-hub';
-
-import { HomepageContent } from './homepage.client';
+import { CopyPageDropdown } from '@/components/CopyPageDropdown';
+import { Feedback } from '@/components/feedback/client';
+import { onPageFeedbackAction } from '@/components/feedback/actions';
 
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
 }) {
   const params = await props.params;
 
-  // If we're at the root /docs path, show the homepage content
-  if (!params.slug || params.slug.length === 0) {
-    return <HomepageContent />;
-  }
+  // If we're at the root path, show the index page (Get Started)
+  // No redirect needed - the index page will be shown
 
   // Otherwise, show the regular docs page
   const page = source.getPage(params.slug);
   if (!page) notFound();
-  const path = `content/docs/${page.file.path}`;
 
   const MDXContent = page.data.body;
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage 
+      toc={page.data.toc} 
+      full={page.data.full}
+      tableOfContent={{
+        style: 'clerk',
+      }}
+      tableOfContentPopover={{
+        style: 'clerk',
+      }}
+    >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <div className="flex flex-row gap-2 items-center mb-4">
-        {/* <LLMCopyButton slug={params.slug} /> */}
-        <EditOnGitHub
-          url={`https://github.com/${owner}/${repo}/tree/main/${path}`}
-        />
+        <CopyPageDropdown slug={params.slug ?? []} filePath={`${params.slug?.join('/') || 'index'}.mdx`} />
       </div>
       <hr/>
       <DocsBody>
@@ -51,6 +51,7 @@ export default async function Page(props: {
           })}
         />
       </DocsBody>
+      <Feedback onSendAction={onPageFeedbackAction} />
     </DocsPage>
   );
 }
@@ -65,6 +66,15 @@ export async function generateMetadata(props: {
   params: Promise<{ slug?: string[] }>;
 }) {
   const params = await props.params;
+
+  // Handle root /docs path - will redirect, but provide metadata just in case
+  if (!params.slug || params.slug.length === 0) {
+    return {
+      title: 'Parseable Documentation',
+      description: 'Welcome to the Parseable documentation',
+    };
+  }
+
   const page = source.getPage(params.slug);
   if (!page) notFound();
 

app/(docs)/layout.tsx

@@ -2,17 +2,46 @@ import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import type { ReactNode } from 'react';
 import { baseOptions } from '@/app/layout.config';
 import { source } from '@/lib/source';
+import SearchButton from '@/components/SearchButton';
+import { AskAITrigger } from '@/components/AskAI';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <DocsLayout 
-      tree={source.pageTree} 
+      tree={source.getPageTree()} 
       {...baseOptions}
-      // sidebar={{
-      //   enabled: false 
-      // }}
+      searchToggle={{
+        components: {
+          sm: <SearchButton />,
+          lg: <SearchButton />,
+        },
+      }}
+      sidebar={{
+        tabs: {
+          transform(option, node) {
+            if (!node.icon) return option;
+            const color = `var(--${node.name?.toString().toLowerCase().replace(/[- ]/g, '-')}-color, var(--color-fd-foreground))`;
+
+            return {
+              ...option,
+              icon: (
+                <div
+                  className="[&_svg]:size-full rounded-lg size-full max-md:bg-[var(--tab-color)]/10 max-md:border max-md:p-1.5"
+                  style={{
+                    '--tab-color': color,
+                    color: color,
+                  } as React.CSSProperties}
+                >
+                  {node.icon}
+                </div>
+              ),
+            };
+          },
+        },
+      }}
     >
       {children}
+      <AskAITrigger />
     </DocsLayout>
   );
 }

app/api/ai-search/route.ts

@@ -0,0 +1,71 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { query } = await request.json();
+
+    if (!query || typeof query !== 'string') {
+      return NextResponse.json(
+        { error: 'Query is required' },
+        { status: 400 }
+      );
+    }
+
+    const apiKey = process.env.TAVILY_API_KEY;
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: 'Tavily API key not configured' },
+        { status: 500 }
+      );
+    }
+
+    // Search specifically within Parseable documentation
+    const response = await fetch('https://api.tavily.com/search', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        api_key: apiKey,
+        query: `${query} site:parseable.com OR site:parseable.io`,
+        search_depth: 'advanced',
+        include_answer: true,
+        include_raw_content: false,
+        max_results: 5,
+        include_domains: ['parseable.com', 'parseable.io', 'docs.parseable.com'],
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Tavily API error:', errorText);
+      return NextResponse.json(
+        { error: 'Failed to fetch AI search results' },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+
+    return NextResponse.json({
+      answer: data.answer || null,
+      results: data.results?.map((result: {
+        title: string;
+        url: string;
+        content: string;
+        score?: number;
+      }) => ({
+        title: result.title,
+        url: result.url,
+        content: result.content,
+        score: result.score,
+      })) || [],
+    });
+  } catch (error) {
+    console.error('AI search error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}