@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs-viewer/content/changelog-page.tsx

@@ -0,0 +1,331 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Spinner } from '@phosphor-icons/react'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { cn } from '@/lib/utils'
+
+// Import base MDX components (using relative path for Vercel compatibility)
+import {
+  Note,
+  Warning as WarningCallout,
+  Info,
+  Tip,
+  Check,
+  Error as ErrorCallout,
+  Callout,
+} from '../../docs/mdx/index'
+
+interface ChangelogRelease {
+  version: string
+  date: string
+  title: string
+  slug: string
+}
+
+interface ChangelogPageProps {
+  releases: ChangelogRelease[]
+  selectedVersion?: string | null
+  onSelectVersion?: (version: string) => void
+  tabName?: string  // Tab name from config (e.g., "Changelog", "Releases")
+}
+
+interface ReleaseContent {
+  frontmatter: {
+    title: string
+    version: string
+    date: string
+  }
+  mdxSource: MDXRemoteSerializeResult
+}
+
+// Custom styled components for changelog content
+const changelogMdxComponents = {
+  h2: ({ children, ...props }: { children: React.ReactNode }) => (
+    <h2 className="text-lg font-semibold text-foreground mt-6 mb-3" {...props}>{children}</h2>
+  ),
+  h3: ({ children, ...props }: { children: React.ReactNode }) => (
+    <h3 className="text-base font-medium text-foreground mt-4 mb-2" {...props}>{children}</h3>
+  ),
+  p: ({ children, ...props }: { children: React.ReactNode }) => (
+    <p className="text-muted-foreground mb-4" {...props}>{children}</p>
+  ),
+  ul: ({ children, ...props }: { children: React.ReactNode }) => (
+    <ul className="space-y-2 text-muted-foreground mb-4" {...props}>{children}</ul>
+  ),
+  li: ({ children, ...props }: { children: React.ReactNode }) => (
+    <li className="flex items-start gap-2" {...props}>
+      <span className="mt-2 h-1.5 w-1.5 rounded-full bg-foreground shrink-0" />
+      <span>{children}</span>
+    </li>
+  ),
+  strong: ({ children, ...props }: { children: React.ReactNode }) => (
+    <strong className="font-semibold text-foreground" {...props}>{children}</strong>
+  ),
+  // Keep callout components
+  Note,
+  Warning: WarningCallout,
+  Info,
+  Tip,
+  Check,
+  Error: ErrorCallout,
+  Callout,
+}
+
+// Format date to be more readable
+function formatDate(dateString: string): string {
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  } catch {
+    return dateString
+  }
+}
+
+// Extract version from slug (e.g., "changelog/v1.2.0" -> "v1.2.0")
+function getVersionFromSlug(slug: string): string {
+  return slug.replace(/^changelog\//, '')
+}
+
+// Single release entry component
+function ReleaseEntry({ 
+  release, 
+  content, 
+  isLatest,
+  isLast,
+}: { 
+  release: ChangelogRelease
+  content: ReleaseContent | null
+  isLatest: boolean
+  isLast: boolean
+}) {
+  // Use version extracted from slug for the ID (without changelog/ prefix)
+  const versionId = getVersionFromSlug(release.slug)
+  
+  return (
+    <article 
+      id={`release-${versionId}`}
+      className="docs-changelog-entry relative scroll-mt-24 pl-8"
+    >
+      {/* Timeline line - extends full height except for last item */}
+      {!isLast && (
+        <div className="absolute left-[3px] top-3 bottom-0 w-[2px] bg-border" />
+      )}
+      
+      {/* Timeline dot */}
+      <div className={cn(
+        "absolute left-0 top-[6px] w-[8px] h-[8px] rounded-full border-2 z-10",
+        isLatest 
+          ? "bg-primary border-primary" 
+          : "bg-background border-muted-foreground/40"
+      )} />
+
+      <div className="pb-10">
+        {/* Version badge and date header */}
+        <div className="flex flex-wrap items-center gap-3 mb-4">
+          <span className={cn(
+            "docs-changelog-version inline-flex items-center px-3 py-1 text-sm font-semibold rounded-full",
+            isLatest 
+              ? "bg-primary/10 text-primary border border-primary/20" 
+              : "bg-muted text-foreground border border-border"
+          )}>
+            {release.version}
+            {isLatest && (
+              <span className="ml-2 text-xs font-normal opacity-75">Latest</span>
+            )}
+          </span>
+          <time className="docs-changelog-date text-sm text-muted-foreground">
+            {formatDate(release.date)}
+          </time>
+        </div>
+
+        {/* Release title */}
+        <h2 className="docs-changelog-title text-xl font-semibold text-foreground mb-4">
+          {release.title}
+        </h2>
+
+        {/* Release content */}
+        {content ? (
+          <div className="docs-changelog-content prose prose-sm dark:prose-invert max-w-none">
+            <MDXRemote {...content.mdxSource} components={changelogMdxComponents} />
+          </div>
+        ) : (
+          <div className="flex items-center gap-2 text-muted-foreground py-4">
+            <Spinner className="h-4 w-4 animate-spin" />
+            <span className="text-sm">Loading...</span>
+          </div>
+        )}
+      </div>
+    </article>
+  )
+}
+
+export function ChangelogPage({ releases, tabName = 'Changelog' }: ChangelogPageProps) {
+  const [releaseContents, setReleaseContents] = useState<Map<string, ReleaseContent>>(new Map())
+  const [loadingAll, setLoadingAll] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [activeVersion, setActiveVersion] = useState<string | null>(releases[0]?.version || null)
+
+  // Load all releases on mount
+  useEffect(() => {
+    async function fetchAllReleases() {
+      if (releases.length === 0) {
+        setLoadingAll(false)
+        return
+      }
+
+      setLoadingAll(true)
+      setError(null)
+
+      const contents = new Map<string, ReleaseContent>()
+
+      // Fetch all releases in parallel
+      const fetchPromises = releases.map(async (release) => {
+        try {
+          const response = await fetch(`/api/docs?slug=${encodeURIComponent(release.slug)}`)
+          if (response.ok) {
+            const data = await response.json()
+            contents.set(release.version, data)
+          }
+        } catch (err) {
+          console.error(`Error loading release ${release.version}:`, err)
+        }
+      })
+
+      await Promise.all(fetchPromises)
+      setReleaseContents(contents)
+      setLoadingAll(false)
+    }
+
+    fetchAllReleases()
+  }, [releases])
+
+  // Track active version based on scroll position
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const version = entry.target.getAttribute('data-version')
+            if (version) {
+              setActiveVersion(version)
+            }
+          }
+        }
+      },
+      { rootMargin: '-100px 0px -70% 0px', threshold: 0 }
+    )
+
+    // Observe all release entries
+    releases.forEach((release) => {
+      const versionId = getVersionFromSlug(release.slug)
+      const element = document.getElementById(`release-${versionId}`)
+      if (element) {
+        element.setAttribute('data-version', release.version)
+        observer.observe(element)
+      }
+    })
+
+    return () => observer.disconnect()
+  }, [releases, releaseContents])
+
+  const scrollToRelease = (slug: string) => {
+    const versionId = getVersionFromSlug(slug)
+    const element = document.getElementById(`release-${versionId}`)
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  }
+
+  if (releases.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center py-12">
+        <p className="text-muted-foreground">No changelog releases found.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="docs-changelog flex flex-1 h-full overflow-hidden">
+      {/* Main content area */}
+      <div className="docs-changelog-main flex-1 overflow-y-auto">
+        <div className="max-w-3xl mx-auto px-6 py-8 lg:px-8">
+          {/* Header */}
+          <header className="docs-changelog-header mb-10">
+            <h1 className="docs-content-title text-3xl font-bold text-foreground mb-2">
+              {tabName}
+            </h1>
+            <p className="text-muted-foreground">
+              All notable changes and updates to this project.
+            </p>
+          </header>
+
+          {/* Loading state */}
+          {loadingAll && releaseContents.size === 0 && (
+            <div className="docs-loading flex items-center justify-center py-12">
+              <Spinner className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          {/* Error state */}
+          {error && (
+            <div className="docs-error text-center py-12">
+              <p className="text-destructive">{error}</p>
+            </div>
+          )}
+
+          {/* Releases list with connected timeline */}
+          <div className="docs-changelog-releases relative">
+            {releases.map((release, index) => (
+              <ReleaseEntry
+                key={release.version}
+                release={release}
+                content={releaseContents.get(release.version) || null}
+                isLatest={index === 0}
+                isLast={index === releases.length - 1}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Right sidebar - Version navigation */}
+      {releases.length > 1 && (
+        <aside className="docs-changelog-sidebar hidden lg:flex lg:flex-col w-48 h-full border-l border-border bg-muted/20 overflow-y-auto shrink-0">
+          <div className="p-4 sticky top-0">
+            <h3 className="docs-changelog-sidebar-title text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+              Releases
+            </h3>
+            <nav className="docs-changelog-nav space-y-1">
+              {releases.map((release, index) => (
+                <button
+                  key={release.version}
+                  onClick={() => scrollToRelease(release.slug)}
+                  className={cn(
+                    'docs-changelog-nav-item block w-full text-left px-3 py-2 text-sm rounded-md transition-all duration-200',
+                    activeVersion === release.version
+                      ? 'docs-changelog-nav-item-active bg-primary/10 text-primary font-medium'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                  )}
+                >
+                  <span className="flex items-center gap-2">
+                    {release.version}
+                    {index === 0 && (
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-primary/10 text-primary">
+                        Latest
+                      </span>
+                    )}
+                  </span>
+                </button>
+              ))}
+            </nav>
+          </div>
+        </aside>
+      )}
+    </div>
+  )
+}

package/renderer/components/docs-viewer/content/doc-page.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import { useEffect, useState, useCallback, useRef } from 'react'
+import { Spinner } from '@phosphor-icons/react'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { useDocsNavigation } from '@/lib/docs-navigation-context'
+import { useCodeCopy } from '@/hooks/use-code-copy'
+
+// Custom Link component for MDX - uses docs navigation context
+function MdxLink({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const docsNav = useDocsNavigation()
+  
+  const handleClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
+    // Handle anchor links (same page)
+    if (href?.startsWith('#')) {
+      return // Let default behavior handle anchor scrolling
+    }
+    
+    // Handle internal doc links
+    if (href?.startsWith('/') && docsNav?.isApiDocsView) {
+      e.preventDefault()
+      
+      // Extract the slug from the path
+      let slug = href
+      
+      // Remove leading slash
+      if (slug.startsWith('/')) {
+        slug = slug.slice(1)
+      }
+      
+      // Handle special paths
+      if (slug.startsWith('api-reference')) {
+        docsNav.switchToTab('api-reference')
+        return
+      }
+      
+      if (slug.startsWith('changelog')) {
+        docsNav.switchToTab('changelog')
+        return
+      }
+      
+      // Remove docs/ prefix if present
+      if (slug.startsWith('docs/')) {
+        slug = slug.slice(5)
+      }
+      
+      // Navigate to the page
+      docsNav.navigateToPage(slug)
+    }
+  }, [href, docsNav])
+  
+  // Determine link styling - better visibility and accessibility
+  // Using visited: to override browser's purple visited link color
+  const linkClassName = "text-primary visited:text-primary font-medium underline decoration-primary/30 underline-offset-2 hover:decoration-primary transition-colors"
+  
+  // External links
+  if (href && !href.startsWith('/') && !href.startsWith('#')) {
+    return (
+      <a 
+        href={href} 
+        target="_blank" 
+        rel="noopener noreferrer"
+        className={linkClassName}
+        {...props}
+      >
+        {children}
+      </a>
+    )
+  }
+  
+  return (
+    <a 
+      href={href} 
+      onClick={handleClick}
+      className={linkClassName}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}
+
+// Import MDX components
+import {
+  Note,
+  Warning,
+  Info,
+  Tip,
+  Check,
+  Error as ErrorCallout,
+  Callout,
+  Card,
+  CardGroup,
+  Accordion,
+  AccordionGroup,
+  Steps,
+  Step,
+  Tabs,
+  Tab,
+  CodeGroup,
+  Frame,
+  Columns,
+  Snippet,
+  Latex,
+  ParamField,
+  ResponseField,
+  Expandable,
+  Iframe,
+  Video,
+  Loom,
+  Image,
+  Screenshot,
+  Logo,
+  Icon,
+  Highlight,
+  Marker,
+  Underline,
+  Badge,
+  Mermaid,
+  PDF,
+  Audio,
+  Download,
+} from '../../docs/mdx/index'
+
+// MDX components mapping
+const mdxComponents = {
+  // Callouts
+  Note,
+  Warning,
+  Info,
+  Tip,
+  Check,
+  Error: ErrorCallout,
+  Callout,
+  
+  // Cards
+  Card,
+  CardGroup,
+  
+  // Accordion
+  Accordion,
+  AccordionGroup,
+  
+  // Steps
+  Steps,
+  Step,
+  
+  // Tabs
+  Tabs,
+  Tab,
+  
+  // Code
+  CodeGroup,
+  
+  // Layout
+  Frame,
+  Columns,
+  Snippet,
+  Latex,
+  
+  // API docs
+  ParamField,
+  ResponseField,
+  Expandable,
+  
+  // Embeds
+  Iframe,
+  Video,
+  Loom,
+  
+  // Images
+  Image,
+  Screenshot,
+  Logo,
+  Icon,
+  
+  // Highlight
+  Highlight,
+  Marker,
+  Underline,
+  
+  // Badge
+  Badge,
+  
+  // Mermaid
+  Mermaid,
+  
+  // File Embeds
+  PDF,
+  Audio,
+  Download,
+  
+  // Links
+  a: MdxLink,
+}
+
+interface DocPageProps {
+  slug: string
+}
+
+interface DocPageData {
+  slug: string
+  frontmatter: {
+    title: string
+    description?: string
+    icon?: string
+  }
+  mdxSource: MDXRemoteSerializeResult
+}
+
+export function DocPage({ slug }: DocPageProps) {
+  const [pageData, setPageData] = useState<DocPageData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  
+  // Add copy buttons to code blocks after content loads
+  useCodeCopy(contentRef, [pageData])
+  
+  useEffect(() => {
+    async function fetchPage() {
+      try {
+        setLoading(true)
+        setError(null)
+        
+        const response = await fetch(`/api/docs?slug=${encodeURIComponent(slug)}`)
+        
+        if (!response.ok) {
+          throw new Error('Failed to load page')
+        }
+        
+        const data = await response.json()
+        setPageData(data)
+      } catch (err) {
+        console.error('Error loading doc page:', err)
+        setError(err instanceof Error ? err.message : 'Failed to load page')
+      } finally {
+        setLoading(false)
+      }
+    }
+    
+    fetchPage()
+  }, [slug])
+  
+  if (loading) {
+    return (
+      <div className="docs-page docs-page-loading max-w-4xl mx-auto px-4 py-6 sm:px-8 sm:py-8">
+        <div className="docs-loading flex items-center justify-center py-12">
+          <Spinner className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    )
+  }
+  
+  if (error || !pageData) {
+    return (
+      <div className="docs-page docs-page-error max-w-4xl mx-auto px-4 py-6 sm:px-8 sm:py-8">
+        <div className="docs-error text-center py-12">
+          <p className="text-destructive">{error || 'Page not found'}</p>
+        </div>
+      </div>
+    )
+  }
+  
+  return (
+    <div ref={contentRef} className="docs-page docs-content max-w-4xl mx-auto px-4 py-6 sm:px-8 sm:py-8">
+      {/* Page header */}
+      <div className="docs-page-header mb-6">
+        <h1 className="docs-content-title text-2xl sm:text-3xl font-bold mb-2 text-foreground">
+          {pageData.frontmatter.title}
+        </h1>
+        {pageData.frontmatter.description && (
+          <p className="docs-content-description text-lg text-muted-foreground">
+            {pageData.frontmatter.description}
+          </p>
+        )}
+      </div>
+      
+      {/* Page content - MDX rendered with custom components */}
+      <div className="docs-prose prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground prose-code:text-foreground prose-pre:bg-muted prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:overflow-x-auto prose-table:w-full prose-th:text-left prose-th:p-3 prose-th:bg-muted prose-td:p-3 prose-td:border-b prose-td:border-border">
+        <MDXRemote {...pageData.mdxSource} components={mdxComponents} />
+      </div>
+    </div>
+  )
+}

package/renderer/components/docs-viewer/content/documentation-viewer.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { MarkdownRenderer } from '../shared/markdown-renderer'
+
+interface DocumentationViewerProps {
+  content: string
+}
+
+export function DocumentationViewer({ content }: DocumentationViewerProps) {
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      <div className="prose prose-sm max-w-none">
+        <MarkdownRenderer content={content} />
+      </div>
+    </div>
+  )
+}

package/renderer/components/docs-viewer/content/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import type { BrainfishRESTRequest } from '@/lib/api-docs/types'
+import { RequestDetails } from './request-details'
+
+interface ApiDocsContentProps {
+  request: BrainfishRESTRequest | null
+}
+
+export function ApiDocsContent({ request }: ApiDocsContentProps) {
+  if (!request) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-background">
+        <div className="text-center">
+          <p className="text-muted-foreground text-lg mb-2">Select an endpoint</p>
+          <p className="text-sm text-muted-foreground">
+            Choose an endpoint from the sidebar to view its documentation
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto bg-background">
+      <RequestDetails request={request} />
+    </div>
+  )
+}

package/renderer/components/docs-viewer/content/introduction.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { MarkdownRenderer } from '../shared/markdown-renderer'
+import type { BrainfishCollection } from '@/lib/api-docs/types'
+
+interface IntroductionProps {
+  collection: BrainfishCollection
+}
+
+export function Introduction({ collection }: IntroductionProps) {
+  return (
+    <div className="docs-introduction docs-content max-w-4xl mx-auto px-4 py-6 sm:px-8 sm:py-8">
+      <h1 className="docs-content-title text-2xl sm:text-3xl font-bold mb-4 sm:mb-6 text-foreground">{collection.name}</h1>
+      {collection.description && (
+        <div className="docs-prose prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground prose-code:text-foreground prose-pre:bg-muted prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-pre:overflow-x-auto prose-table:w-full prose-th:text-left prose-th:p-3 prose-th:bg-muted prose-td:p-3 prose-td:border-b prose-td:border-border">
+          <MarkdownRenderer content={collection.description} />
+        </div>
+      )}
+    </div>
+  )
+}