@brainfish-ai/devdoc 0.1.21

package/renderer/components/docs/mdx-renderer.tsx

@@ -0,0 +1,100 @@
+import { compileMDXContent, type TableOfContentsItem } from '@/lib/docs/mdx'
+import { mdxComponents } from './mdx'
+
+/**
+ * MDX Renderer Component
+ * 
+ * Server component that compiles and renders MDX content with all custom components.
+ */
+
+interface MDXRendererProps {
+  /** Raw MDX source content */
+  source: string
+  /** Optional additional components to include */
+  components?: Record<string, React.ComponentType<unknown>>
+  /** Optional scope variables available in MDX */
+  scope?: Record<string, unknown>
+  /** Callback to receive table of contents */
+  onTocGenerated?: (toc: TableOfContentsItem[]) => void
+}
+
+export async function MDXRenderer({
+  source,
+  components: additionalComponents = {},
+  scope = {},
+}: MDXRendererProps) {
+  const { content, frontmatter, headings } = await compileMDXContent(source, {
+    components: {
+      ...mdxComponents,
+      ...additionalComponents,
+    } as Record<string, React.ComponentType<unknown>>,
+    scope,
+  })
+  
+  return (
+    <article className="prose prose-slate dark:prose-invert max-w-none">
+      {/* Title from frontmatter */}
+      {frontmatter.title && (
+        <header className="mb-8 not-prose">
+          <h1 className="text-3xl font-bold text-foreground mb-2">
+            {frontmatter.title}
+          </h1>
+          {frontmatter.description && (
+            <p className="text-lg text-muted-foreground">
+              {frontmatter.description}
+            </p>
+          )}
+        </header>
+      )}
+      
+      {/* MDX Content */}
+      <div className="mdx-content">
+        {content}
+      </div>
+      
+      {/* Hidden data for client-side access */}
+      <script
+        type="application/json"
+        id="mdx-frontmatter"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(frontmatter) }}
+      />
+      <script
+        type="application/json"
+        id="mdx-headings"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(headings) }}
+      />
+    </article>
+  )
+}
+
+/**
+ * Table of Contents Component
+ * 
+ * Client component that renders a table of contents from headings
+ */
+export function TableOfContents({ headings }: { headings: TableOfContentsItem[] }) {
+  if (headings.length === 0) return null
+  
+  return (
+    <nav className="toc">
+      <h4 className="text-sm font-semibold text-foreground mb-3">On this page</h4>
+      <ul className="space-y-2 text-sm">
+        {headings.map((heading) => (
+          <li
+            key={heading.id}
+            style={{ paddingLeft: `${(heading.level - 1) * 12}px` }}
+          >
+            <a
+              href={`#${heading.id}`}
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {heading.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export type { TableOfContentsItem }

package/renderer/components/docs/navigation/breadcrumbs.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { CaretRight, House } from '@phosphor-icons/react'
+import type { BreadcrumbItem } from '@/lib/docs/navigation'
+
+/**
+ * Breadcrumbs Component
+ * 
+ * Shows the current page location in the navigation hierarchy
+ */
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[]
+  showHome?: boolean
+  className?: string
+}
+
+export function Breadcrumbs({ items, showHome = true, className }: BreadcrumbsProps) {
+  if (items.length === 0) return null
+  
+  return (
+    <nav className={cn('flex items-center text-sm', className)} aria-label="Breadcrumb">
+      <ol className="flex items-center space-x-1">
+        {showHome && (
+          <>
+            <li>
+              <Link 
+                href="/docs"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <House className="h-4 w-4" />
+                <span className="sr-only">Home</span>
+              </Link>
+            </li>
+            {items.length > 0 && (
+              <li>
+                <CaretRight className="h-4 w-4 text-muted-foreground/50" />
+              </li>
+            )}
+          </>
+        )}
+        
+        {items.map((item, index) => (
+          <React.Fragment key={item.href}>
+            <li>
+              {index === items.length - 1 ? (
+                <span className="text-foreground font-medium">
+                  {item.title}
+                </span>
+              ) : item.href === '#' ? (
+                <span className="text-muted-foreground">
+                  {item.title}
+                </span>
+              ) : (
+                <Link
+                  href={item.href}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {item.title}
+                </Link>
+              )}
+            </li>
+            {index < items.length - 1 && (
+              <li>
+                <CaretRight className="h-4 w-4 text-muted-foreground/50" />
+              </li>
+            )}
+          </React.Fragment>
+        ))}
+      </ol>
+    </nav>
+  )
+}

package/renderer/components/docs/navigation/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Navigation Components Exports
+ */
+
+export { DocsSidebar, DocsSidebarSection, DocsSidebarItem, DocsSidebarGroup } from './sidebar'
+export { TableOfContents, extractHeadingsFromDOM } from './toc'
+export { Breadcrumbs } from './breadcrumbs'
+export { PageNav } from './page-nav'

package/renderer/components/docs/navigation/page-nav.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { ArrowLeft, ArrowRight } from '@phosphor-icons/react'
+import type { NavItem } from '@/lib/docs/navigation'
+
+/**
+ * Page Navigation (Prev/Next)
+ * 
+ * Shows links to previous and next pages
+ */
+
+interface PageNavProps {
+  prev?: NavItem
+  next?: NavItem
+  className?: string
+}
+
+export function PageNav({ prev, next, className }: PageNavProps) {
+  if (!prev && !next) return null
+  
+  return (
+    <nav 
+      className={cn('flex items-center justify-between gap-4 pt-8 mt-8 border-t border-border', className)}
+      aria-label="Page navigation"
+    >
+      {prev ? (
+        <Link
+          href={prev.href}
+          className="group flex-1 flex flex-col items-start gap-1 p-4 rounded-lg border border-border hover:border-primary/50 hover:bg-muted/30 transition-colors"
+        >
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            <ArrowLeft className="h-3 w-3" />
+            Previous
+          </span>
+          <span className="font-medium text-foreground group-hover:text-primary transition-colors">
+            {prev.title}
+          </span>
+        </Link>
+      ) : (
+        <div className="flex-1" />
+      )}
+      
+      {next ? (
+        <Link
+          href={next.href}
+          className="group flex-1 flex flex-col items-end gap-1 p-4 rounded-lg border border-border hover:border-primary/50 hover:bg-muted/30 transition-colors text-right"
+        >
+          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+            Next
+            <ArrowRight className="h-3 w-3" />
+          </span>
+          <span className="font-medium text-foreground group-hover:text-primary transition-colors">
+            {next.title}
+          </span>
+        </Link>
+      ) : (
+        <div className="flex-1" />
+      )}
+    </nav>
+  )
+}