@brainfish-ai/devdoc 0.1.30 → 0.1.32

package/renderer/app/api/local-assets/[...path]/route.ts

@@ -0,0 +1,122 @@
+import { NextRequest, NextResponse } from 'next/server'
+import path from 'path'
+import fs from 'fs'
+
+/**
+ * Local asset server for devdoc dev mode
+ * 
+ * Serves assets from the user's project folder (STARTER_PATH/assets/)
+ * This allows /assets/images/logo.png to work in local development
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  try {
+    const { path: pathSegments } = await params
+    
+    if (!pathSegments || pathSegments.length === 0) {
+      return NextResponse.json(
+        { error: 'Invalid asset path' },
+        { status: 400 }
+      )
+    }
+    
+    // Get the project path from environment
+    const projectPath = process.env.STARTER_PATH
+    
+    if (!projectPath) {
+      return NextResponse.json(
+        { error: 'Not in local development mode' },
+        { status: 404 }
+      )
+    }
+    
+    // Build file path - assets are in projectPath/assets/
+    const assetPath = pathSegments.join('/')
+    const filePath = path.join(projectPath, 'assets', assetPath)
+    
+    // Security: ensure we're not escaping the assets directory
+    const resolvedPath = path.resolve(filePath)
+    const assetsDir = path.resolve(path.join(projectPath, 'assets'))
+    
+    if (!resolvedPath.startsWith(assetsDir)) {
+      return NextResponse.json(
+        { error: 'Invalid path' },
+        { status: 403 }
+      )
+    }
+    
+    // Check if file exists
+    if (!fs.existsSync(resolvedPath)) {
+      // Also try without 'assets' prefix (for /assets/images/x.png -> images/x.png)
+      const altPath = path.join(projectPath, assetPath)
+      const resolvedAltPath = path.resolve(altPath)
+      
+      if (resolvedAltPath.startsWith(path.resolve(projectPath)) && fs.existsSync(resolvedAltPath)) {
+        const fileBuffer = fs.readFileSync(resolvedAltPath)
+        const contentType = getContentType(assetPath)
+        
+        return new NextResponse(fileBuffer, {
+          status: 200,
+          headers: {
+            'Content-Type': contentType,
+            'Cache-Control': 'no-cache',
+          },
+        })
+      }
+      
+      return NextResponse.json(
+        { error: 'Asset not found', path: assetPath },
+        { status: 404 }
+      )
+    }
+    
+    const fileBuffer = fs.readFileSync(resolvedPath)
+    const contentType = getContentType(assetPath)
+    
+    return new NextResponse(fileBuffer, {
+      status: 200,
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'no-cache', // No caching in dev
+      },
+    })
+    
+  } catch (error) {
+    console.error('[Local Assets] Error:', error)
+    return NextResponse.json(
+      { error: 'Failed to serve asset' },
+      { status: 500 }
+    )
+  }
+}
+
+/**
+ * Get content type from file extension
+ */
+function getContentType(fileName: string): string {
+  const ext = fileName.split('.').pop()?.toLowerCase()
+  const types: Record<string, string> = {
+    'jpg': 'image/jpeg',
+    'jpeg': 'image/jpeg',
+    'png': 'image/png',
+    'gif': 'image/gif',
+    'webp': 'image/webp',
+    'svg': 'image/svg+xml',
+    'ico': 'image/x-icon',
+    'pdf': 'application/pdf',
+    'mp4': 'video/mp4',
+    'webm': 'video/webm',
+    'mp3': 'audio/mpeg',
+    'wav': 'audio/wav',
+    'woff': 'font/woff',
+    'woff2': 'font/woff2',
+    'ttf': 'font/ttf',
+    'otf': 'font/otf',
+    'json': 'application/json',
+    'css': 'text/css',
+    'js': 'application/javascript',
+  }
+  return types[ext || ''] || 'application/octet-stream'
+}

package/renderer/app/globals.css

@@ -150,6 +150,15 @@
     @apply bg-background text-foreground;
   }
   
+  /* Prevent iOS zoom on input focus - ensure minimum 16px font size */
+  @media screen and (max-width: 768px) {
+    input,
+    select,
+    textarea {
+      font-size: 16px !important;
+    }
+  }
+  
   /* Custom scrollbar - light and thin */
   * {
     scrollbar-width: thin;

package/renderer/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
 import "./globals.css";
@@ -23,6 +23,13 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{

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

@@ -17,10 +17,11 @@ import { useDocsNavigation } from '@/lib/docs-navigation-context'
 interface CardProps {
   title: string
   children?: React.ReactNode
-  icon?: string
+  icon?: string | React.ReactNode  // Icon name (string) or custom React node
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl'  // Size of icon container: sm=32px, md=40px (default), lg=48px, xl=64px
   href?: string
   horizontal?: boolean
-  img?: string
+  img?: string  // Full-width header image
   cta?: string
   arrow?: boolean
   className?: string
@@ -41,10 +42,19 @@ function getIcon(iconName: string): React.ComponentType<{ className?: string; we
   return Icon || null
 }
 
+// Icon size configurations
+const ICON_SIZES = {
+  sm: { container: 'h-8 w-8', icon: 'h-4 w-4', img: 'h-5 w-5' },
+  md: { container: 'h-10 w-10', icon: 'h-5 w-5', img: 'h-6 w-6' },
+  lg: { container: 'h-12 w-12', icon: 'h-6 w-6', img: 'h-8 w-8' },
+  xl: { container: 'h-16 w-16', icon: 'h-8 w-8', img: 'h-12 w-12' },
+}
+
 export function Card({
   title,
   children,
   icon,
+  iconSize = 'md',
   href,
   horizontal = false,
   img,
@@ -52,7 +62,11 @@ export function Card({
   arrow,
   className,
 }: CardProps) {
-  const Icon = icon ? getIcon(icon) : null
+  // Check if icon is a string (icon name) or React node
+  const isIconString = typeof icon === 'string'
+  const Icon = isIconString ? getIcon(icon) : null
+  const hasCustomIcon = !isIconString && icon != null
+  const sizeConfig = ICON_SIZES[iconSize]
   const isExternal = href?.startsWith('http') || href?.startsWith('//')
   const docsNav = useDocsNavigation()
   
@@ -116,21 +130,35 @@ export function Card({
         </div>
       )}
       
-      {/* Icon */}
+      {/* Icon (Phosphor icon from string) */}
       {Icon && (
         <div
           className={cn(
-            'docs-card-icon flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
+            'docs-card-icon flex shrink-0 items-center justify-center rounded-lg',
+            sizeConfig.container,
             'bg-primary/10 text-primary',
             horizontal && 'mt-0.5'
           )}
         >
-          <Icon className="h-5 w-5" weight="duotone" />
+          <Icon className={sizeConfig.icon} weight="duotone" />
+        </div>
+      )}
+      
+      {/* Custom Icon (React node - image, svg, etc.) */}
+      {hasCustomIcon && (
+        <div
+          className={cn(
+            'docs-card-icon flex shrink-0 items-center justify-center rounded-lg overflow-hidden',
+            sizeConfig.container,
+            horizontal && 'mt-0.5'
+          )}
+        >
+          {icon}
         </div>
       )}
       
       {/* Content */}
-      <div className={cn('docs-card-content min-w-0', horizontal && 'flex-1', !horizontal && Icon && 'mt-3')}>
+      <div className={cn('docs-card-content min-w-0', horizontal && 'flex-1', !horizontal && (Icon || hasCustomIcon) && 'mt-3')}>
         <div className="flex items-center gap-2">
           <h3 className="docs-card-title font-semibold text-foreground group-hover:text-primary transition-colors">
             {title}

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

@@ -150,10 +150,10 @@ export function DocsSidebar({
   
   return (
     <>
-      {/* Mobile overlay backdrop */}
+      {/* Mobile overlay backdrop - z-[55] to cover header (z-50) but below sidebar (z-60) */}
       {isMobile && isOpen && (
         <div 
-          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          className="fixed inset-0 bg-black/50 z-[55] lg:hidden"
           onClick={onClose}
         />
       )}
@@ -162,9 +162,9 @@ export function DocsSidebar({
         className={cn(
           "flex flex-col border-r bg-sidebar border-sidebar-border overflow-hidden",
           // Desktop: always visible, fixed width
-          "lg:relative lg:w-72 lg:h-full",
-          // Mobile: drawer behavior
-          "fixed inset-y-0 left-0 z-50 w-[280px] h-full",
+          "lg:relative lg:w-72 lg:h-full lg:z-auto",
+          // Mobile: drawer behavior - z-[60] to appear above header (z-50)
+          "fixed inset-y-0 left-0 z-[60] w-[280px] h-full",
           "transform transition-transform duration-300 ease-in-out",
           "lg:transform-none lg:translate-x-0",
           isMobile && !isOpen && "-translate-x-full",

package/renderer/components/docs-header.tsx

@@ -25,6 +25,7 @@ interface DocsLogo {
   height?: number
   light?: string
   dark?: string
+  href?: string  // Where logo links to (defaults to "/")
 }
 
 // Header config from docs.json
@@ -133,7 +134,10 @@ export function DocsHeader({
             </Button>
           )}
           
-          <Link href="/" className="docs-header-logo flex items-center gap-2 sm:gap-3">
+          <Link 
+            href={docsLogo?.href || "/"} 
+            className="docs-header-logo flex items-center gap-2 sm:gap-3 min-h-[44px] min-w-[44px] touch-manipulation"
+          >
             {hasLightDarkLogos ? (
               <>
                 {/* Light mode logo */}
@@ -142,7 +146,7 @@ export function DocsHeader({
                   alt={logo.alt}
                   width={logo.width}
                   height={logo.height}
-                  className="w-auto dark:hidden"
+                  className="w-auto dark:hidden pointer-events-none"
                   style={{ height: logo.height }}
                   priority
                 />
@@ -152,7 +156,7 @@ export function DocsHeader({
                   alt={logo.alt}
                   width={logo.width}
                   height={logo.height}
-                  className="w-auto hidden dark:block"
+                  className="w-auto hidden dark:block pointer-events-none"
                   style={{ height: logo.height }}
                   priority
                 />
@@ -163,7 +167,7 @@ export function DocsHeader({
                 alt={logo.alt}
                 width={logo.width}
                 height={logo.height}
-                className="w-auto dark:invert"
+                className="w-auto dark:invert pointer-events-none"
                 style={{ height: logo.height }}
                 priority
               />
@@ -171,7 +175,7 @@ export function DocsHeader({
             {docsName && (
               <>
                 <div className="hidden sm:block h-5 w-px bg-border" />
-                <span className="docs-header-title hidden sm:inline text-sm font-medium text-muted-foreground">
+                <span className="docs-header-title hidden sm:inline text-sm font-medium text-muted-foreground pointer-events-none">
                   {docsName}
                 </span>
               </>

package/renderer/components/docs-viewer/sidebar/right-sidebar.tsx

@@ -107,10 +107,10 @@ export function RightSidebar({
 
   return (
     <>
-      {/* Mobile overlay backdrop */}
+      {/* Mobile overlay backdrop - z-[55] to cover header (z-50) but below panel (z-60) */}
       {isMobile && isRightSidebarOpen && (
         <div 
-          className="docs-agent-overlay fixed inset-0 bg-black/50 z-40 lg:hidden"
+          className="docs-agent-overlay fixed inset-0 bg-black/50 z-[55] lg:hidden"
           onClick={closeRightSidebar}
         />
       )}
@@ -119,9 +119,9 @@ export function RightSidebar({
         className={cn(
           "docs-agent-panel border-l border-border bg-background flex flex-col overflow-hidden",
           // Desktop: always visible, fixed width
-          "lg:relative lg:w-96 lg:h-full",
-          // Mobile: drawer behavior from right
-          "fixed inset-y-0 right-0 z-50 w-[320px] sm:w-[360px] h-full",
+          "lg:relative lg:w-96 lg:h-full lg:z-auto",
+          // Mobile: drawer behavior from right - z-[60] to appear above header (z-50)
+          "fixed inset-y-0 right-0 z-[60] w-[320px] sm:w-[360px] h-full",
           "transform transition-transform duration-300 ease-in-out",
           "lg:transform-none lg:translate-x-0",
           isMobile && !isRightSidebarOpen && "translate-x-full",

package/renderer/lib/docs/config/domain-schema.ts

@@ -0,0 +1,260 @@
+import { z } from 'zod'
+
+/**
+ * Domain Configuration Schema (domain.json)
+ * 
+ * Configuration for custom domains on DevDoc projects.
+ * Each project can have ONE custom domain for free.
+ */
+
+// ============================================================================
+// Domain Validation Helpers
+// ============================================================================
+
+/**
+ * Valid domain pattern - allows subdomains like docs.example.com
+ * Does NOT allow:
+ * - IP addresses
+ * - Ports
+ * - Paths
+ * - Protocol prefixes
+ */
+const domainRegex = /^(?!-)[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*\.[a-zA-Z]{2,}$/
+
+/**
+ * Reserved domains that cannot be used as custom domains
+ */
+const RESERVED_DOMAINS = [
+  'devdoc.sh',
+  'devdoc.io',
+  'devdoc.com',
+  'localhost',
+]
+
+// ============================================================================
+// SEO Schema
+// ============================================================================
+
+const domainSeoSchema = z.object({
+  /**
+   * Canonical URL for SEO - tells search engines this is the primary URL
+   * Should match your custom domain with https://
+   */
+  canonical: z.string().url().optional(),
+})
+
+// ============================================================================
+// Settings Schema
+// ============================================================================
+
+const domainSettingsSchema = z.object({
+  /**
+   * Force HTTPS redirects (recommended, default: true)
+   */
+  forceHttps: z.boolean().default(true),
+  
+  /**
+   * WWW redirect preference
+   * - "www": Redirect non-www to www (example.com → www.example.com)
+   * - "non-www": Redirect www to non-www (www.example.com → example.com)
+   * - "none": No redirect, accept both
+   */
+  wwwRedirect: z.enum(['www', 'non-www', 'none']).default('none'),
+})
+
+// ============================================================================
+// Main Domain Configuration Schema
+// ============================================================================
+
+export const domainConfigSchema = z.object({
+  /**
+   * JSON Schema reference (optional)
+   */
+  $schema: z.string().optional(),
+  
+  /**
+   * The custom domain for this project
+   * Example: "docs.example.com" or "developer.mycompany.io"
+   * 
+   * Rules:
+   * - Must be a valid domain name
+   * - Cannot be a DevDoc domain (*.devdoc.sh)
+   * - One custom domain per project (free)
+   */
+  customDomain: z.string()
+    .min(4, 'Domain must be at least 4 characters')
+    .max(253, 'Domain must be 253 characters or less')
+    .regex(domainRegex, 'Invalid domain format. Example: docs.example.com')
+    .refine(
+      (domain) => !RESERVED_DOMAINS.some(reserved => 
+        domain === reserved || domain.endsWith(`.${reserved}`)
+      ),
+      'Cannot use a reserved DevDoc domain'
+    ),
+  
+  /**
+   * SEO configuration for the custom domain
+   */
+  seo: domainSeoSchema.optional(),
+  
+  /**
+   * Domain behavior settings
+   */
+  settings: domainSettingsSchema.optional(),
+})
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type DomainConfig = z.infer<typeof domainConfigSchema>
+export type DomainSeoConfig = z.infer<typeof domainSeoSchema>
+export type DomainSettings = z.infer<typeof domainSettingsSchema>
+
+// ============================================================================
+// Domain Status Types (for API/storage)
+// ============================================================================
+
+/**
+ * Status of a custom domain in the system
+ */
+export type DomainStatus = 
+  | 'pending'           // Domain added, awaiting DNS configuration
+  | 'dns_verified'      // DNS records verified, awaiting SSL
+  | 'ssl_provisioning'  // SSL certificate being provisioned
+  | 'active'            // Domain is live and working
+  | 'error'             // Configuration error
+
+/**
+ * Custom domain entry stored in the registry
+ */
+export interface CustomDomainEntry {
+  /** The custom domain (e.g., "docs.example.com") */
+  customDomain: string
+  
+  /** The project slug this domain points to */
+  projectSlug: string
+  
+  /** Current status of the domain */
+  status: DomainStatus
+  
+  /** Vercel domain ID (from Vercel API) */
+  vercelDomainId?: string
+  
+  /** TXT record value for domain ownership verification */
+  verificationToken?: string
+  
+  /** When the domain was added */
+  createdAt: string
+  
+  /** When DNS was verified */
+  verifiedAt?: string
+  
+  /** Last time status was checked */
+  lastCheckedAt?: string
+  
+  /** Error message if status is "error" */
+  errorMessage?: string
+  
+  /** Domain settings from domain.json */
+  settings?: DomainSettings
+}
+
+// ============================================================================
+// Validation Functions
+// ============================================================================
+
+/**
+ * Parse and validate domain configuration
+ */
+export function parseDomainConfig(data: unknown): DomainConfig {
+  const result = domainConfigSchema.safeParse(data)
+  
+  if (!result.success) {
+    const issues = result.error.issues || []
+    const errors = issues.map((e) => 
+      `${e.path.map(String).join('.')}: ${e.message}`
+    ).join('\n')
+    throw new Error(`Invalid domain.json configuration:\n${errors}`)
+  }
+  
+  return result.data
+}
+
+/**
+ * Safe parse that returns null on failure
+ */
+export function safeParseDomainConfig(data: unknown): DomainConfig | null {
+  const result = domainConfigSchema.safeParse(data)
+  return result.success ? result.data : null
+}
+
+/**
+ * Validate a domain string format
+ */
+export function isValidDomain(domain: string): { valid: boolean; error?: string } {
+  if (!domain) {
+    return { valid: false, error: 'Domain is required' }
+  }
+  
+  if (domain.length < 4) {
+    return { valid: false, error: 'Domain must be at least 4 characters' }
+  }
+  
+  if (domain.length > 253) {
+    return { valid: false, error: 'Domain must be 253 characters or less' }
+  }
+  
+  if (!domainRegex.test(domain)) {
+    return { valid: false, error: 'Invalid domain format. Example: docs.example.com' }
+  }
+  
+  // Check reserved domains
+  if (RESERVED_DOMAINS.some(reserved => 
+    domain === reserved || domain.endsWith(`.${reserved}`)
+  )) {
+    return { valid: false, error: 'Cannot use a reserved DevDoc domain' }
+  }
+  
+  return { valid: true }
+}
+
+/**
+ * Normalize a domain (lowercase, trim, remove protocol/path)
+ */
+export function normalizeDomain(domain: string): string {
+  let normalized = domain.toLowerCase().trim()
+  
+  // Remove protocol if present
+  normalized = normalized.replace(/^https?:\/\//, '')
+  
+  // Remove path if present
+  normalized = normalized.split('/')[0]
+  
+  // Remove port if present
+  normalized = normalized.split(':')[0]
+  
+  return normalized
+}
+
+/**
+ * Get DNS instructions for a custom domain
+ */
+export function getDnsInstructions(customDomain: string): {
+  cname: { name: string; value: string }
+  txt: { name: string; value: string }
+} {
+  const parts = customDomain.split('.')
+  const subdomain = parts.length > 2 ? parts[0] : '@'
+  
+  return {
+    cname: {
+      name: subdomain === '@' ? customDomain : subdomain,
+      value: 'cname.devdoc-dns.com',
+    },
+    txt: {
+      name: `_devdoc-verify.${customDomain}`,
+      value: '', // Will be filled with actual verification token
+    },
+  }
+}

package/renderer/lib/docs/config/index.ts

@@ -17,6 +17,20 @@ export {
   type ApiConfig,
 } from './schema'
 
+export {
+  domainConfigSchema,
+  parseDomainConfig,
+  safeParseDomainConfig,
+  isValidDomain,
+  normalizeDomain,
+  getDnsInstructions,
+  type DomainConfig,
+  type DomainSeoConfig,
+  type DomainSettings,
+  type DomainStatus,
+  type CustomDomainEntry,
+} from './domain-schema'
+
 export {
   loadDocsConfig,
   safeLoadDocsConfig,