@brainfish-ai/devdoc 0.1.21

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

@@ -0,0 +1,151 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+import { ReactNode } from 'react'
+
+type HighlightVariant = 'marker' | 'underline' | 'box' | 'gradient'
+type HighlightColor = 'yellow' | 'blue' | 'green' | 'pink' | 'orange' | 'purple' | 'red'
+
+interface HighlightProps {
+  children: ReactNode
+  /** Highlight style variant */
+  variant?: HighlightVariant
+  /** Highlight color */
+  color?: HighlightColor
+  /** Custom className */
+  className?: string
+  /** Whether to animate the highlight */
+  animated?: boolean
+}
+
+const colorStyles: Record<HighlightColor, Record<HighlightVariant, string>> = {
+  yellow: {
+    marker: 'bg-yellow-200/70 dark:bg-yellow-500/30',
+    underline: 'decoration-yellow-400 dark:decoration-yellow-500',
+    box: 'ring-yellow-400 dark:ring-yellow-500',
+    gradient: 'from-yellow-200/80 to-yellow-300/80 dark:from-yellow-500/30 dark:to-yellow-600/30',
+  },
+  blue: {
+    marker: 'bg-blue-200/70 dark:bg-blue-500/30',
+    underline: 'decoration-blue-400 dark:decoration-blue-500',
+    box: 'ring-blue-400 dark:ring-blue-500',
+    gradient: 'from-blue-200/80 to-blue-300/80 dark:from-blue-500/30 dark:to-blue-600/30',
+  },
+  green: {
+    marker: 'bg-green-200/70 dark:bg-green-500/30',
+    underline: 'decoration-green-400 dark:decoration-green-500',
+    box: 'ring-green-400 dark:ring-green-500',
+    gradient: 'from-green-200/80 to-green-300/80 dark:from-green-500/30 dark:to-green-600/30',
+  },
+  pink: {
+    marker: 'bg-pink-200/70 dark:bg-pink-500/30',
+    underline: 'decoration-pink-400 dark:decoration-pink-500',
+    box: 'ring-pink-400 dark:ring-pink-500',
+    gradient: 'from-pink-200/80 to-pink-300/80 dark:from-pink-500/30 dark:to-pink-600/30',
+  },
+  orange: {
+    marker: 'bg-orange-200/70 dark:bg-orange-500/30',
+    underline: 'decoration-orange-400 dark:decoration-orange-500',
+    box: 'ring-orange-400 dark:ring-orange-500',
+    gradient: 'from-orange-200/80 to-orange-300/80 dark:from-orange-500/30 dark:to-orange-600/30',
+  },
+  purple: {
+    marker: 'bg-purple-200/70 dark:bg-purple-500/30',
+    underline: 'decoration-purple-400 dark:decoration-purple-500',
+    box: 'ring-purple-400 dark:ring-purple-500',
+    gradient: 'from-purple-200/80 to-purple-300/80 dark:from-purple-500/30 dark:to-purple-600/30',
+  },
+  red: {
+    marker: 'bg-red-200/70 dark:bg-red-500/30',
+    underline: 'decoration-red-400 dark:decoration-red-500',
+    box: 'ring-red-400 dark:ring-red-500',
+    gradient: 'from-red-200/80 to-red-300/80 dark:from-red-500/30 dark:to-red-600/30',
+  },
+}
+
+/**
+ * Highlight - Text highlighter component
+ * 
+ * Variants:
+ * - marker: Background highlight like a marker pen
+ * - underline: Wavy or straight underline
+ * - box: Outlined box around text
+ * - gradient: Gradient background highlight
+ */
+export function Highlight({
+  children,
+  variant = 'marker',
+  color = 'yellow',
+  className,
+  animated = false,
+}: HighlightProps) {
+  const colorStyle = colorStyles[color]?.[variant] || colorStyles.yellow[variant]
+
+  const baseStyles = {
+    marker: cn(
+      'docs-highlight docs-highlight-marker',
+      'px-1 py-0.5 rounded-sm',
+      colorStyle,
+      animated && 'animate-pulse',
+      className
+    ),
+    underline: cn(
+      'docs-highlight docs-highlight-underline',
+      'underline decoration-wavy decoration-2 underline-offset-4',
+      colorStyle,
+      className
+    ),
+    box: cn(
+      'docs-highlight docs-highlight-box',
+      'px-1 py-0.5 ring-2 rounded',
+      colorStyle,
+      className
+    ),
+    gradient: cn(
+      'docs-highlight docs-highlight-gradient',
+      'px-1 py-0.5 rounded-sm bg-gradient-to-r',
+      colorStyle,
+      animated && 'animate-pulse',
+      className
+    ),
+  }
+
+  return (
+    <span className={baseStyles[variant]}>
+      {children}
+    </span>
+  )
+}
+
+/**
+ * Marker - Shorthand for marker-style highlight
+ */
+export function Marker({
+  children,
+  color = 'yellow',
+  className,
+}: Omit<HighlightProps, 'variant'>) {
+  return (
+    <Highlight variant="marker" color={color} className={className}>
+      {children}
+    </Highlight>
+  )
+}
+
+/**
+ * Underline - Shorthand for underline-style highlight
+ */
+export function Underline({
+  children,
+  color = 'orange',
+  className,
+}: Omit<HighlightProps, 'variant'>) {
+  return (
+    <Highlight variant="underline" color={color} className={className}>
+      {children}
+    </Highlight>
+  )
+}
+
+// Export all components
+export default Highlight

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

@@ -0,0 +1,134 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Iframe Component for MDX Documentation
+ * 
+ * Embed external content like videos, demos, or interactive widgets.
+ */
+
+interface IframeProps {
+  src: string
+  title?: string
+  width?: string | number
+  height?: string | number
+  aspectRatio?: '16/9' | '4/3' | '1/1' | '9/16' | string
+  allowFullScreen?: boolean
+  allow?: string
+  className?: string
+  frameBorder?: string | number
+}
+
+export function Iframe({
+  src,
+  title = 'Embedded content',
+  width,
+  height,
+  aspectRatio,
+  allowFullScreen = true,
+  allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+  className,
+  frameBorder = 0,
+}: IframeProps) {
+  // Determine sizing approach
+  const hasFixedSize = width || height
+  const useAspectRatio = aspectRatio && !hasFixedSize
+
+  // Convert numeric values to pixels
+  const getSize = (value: string | number | undefined) => {
+    if (value === undefined) return undefined
+    if (typeof value === 'number') return `${value}px`
+    return value
+  }
+
+  const containerStyle: React.CSSProperties = useAspectRatio
+    ? { aspectRatio }
+    : {}
+
+  const iframeStyle: React.CSSProperties = {
+    width: getSize(width) || (useAspectRatio ? '100%' : undefined),
+    height: getSize(height) || (useAspectRatio ? '100%' : undefined),
+  }
+
+  return (
+    <div
+      className={cn(
+        'docs-iframe my-4 overflow-hidden rounded-lg border border-border',
+        useAspectRatio && 'w-full',
+        className
+      )}
+      style={containerStyle}
+    >
+      <iframe
+        src={src}
+        title={title}
+        style={iframeStyle}
+        frameBorder={frameBorder}
+        allowFullScreen={allowFullScreen}
+        allow={allow}
+        className={cn(
+          'docs-iframe-content',
+          useAspectRatio && 'w-full h-full'
+        )}
+      />
+    </div>
+  )
+}
+
+// Video embed component - convenience wrapper for common video platforms
+interface VideoProps {
+  src: string
+  title?: string
+  aspectRatio?: '16/9' | '4/3'
+  className?: string
+}
+
+export function Video({ src, title = 'Video', aspectRatio = '16/9', className }: VideoProps) {
+  // Convert YouTube watch URLs to embed URLs
+  let embedSrc = src
+  if (src.includes('youtube.com/watch')) {
+    const videoId = new URL(src).searchParams.get('v')
+    if (videoId) {
+      embedSrc = `https://www.youtube.com/embed/${videoId}`
+    }
+  } else if (src.includes('youtu.be/')) {
+    const videoId = src.split('youtu.be/')[1]?.split('?')[0]
+    if (videoId) {
+      embedSrc = `https://www.youtube.com/embed/${videoId}`
+    }
+  } else if (src.includes('vimeo.com/') && !src.includes('player.vimeo.com')) {
+    const videoId = src.split('vimeo.com/')[1]?.split('?')[0]
+    if (videoId) {
+      embedSrc = `https://player.vimeo.com/video/${videoId}`
+    }
+  }
+
+  return (
+    <Iframe
+      src={embedSrc}
+      title={title}
+      aspectRatio={aspectRatio}
+      className={cn('docs-video', className)}
+    />
+  )
+}
+
+// Loom embed component
+interface LoomProps {
+  id: string
+  title?: string
+  className?: string
+}
+
+export function Loom({ id, title = 'Loom video', className }: LoomProps) {
+  return (
+    <Iframe
+      src={`https://www.loom.com/embed/${id}`}
+      title={title}
+      aspectRatio="16/9"
+      className={cn('docs-loom', className)}
+    />
+  )
+}

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

@@ -0,0 +1,235 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+/**
+ * Image Component for MDX Documentation
+ * 
+ * Supports resizing via wsrv.nl image proxy for optimization.
+ */
+
+interface ImageProps {
+  src: string
+  alt: string
+  width?: number
+  height?: number
+  maxWidth?: number
+  maxHeight?: number
+  caption?: string
+  className?: string
+  rounded?: boolean
+  shadow?: boolean
+  border?: boolean
+  align?: 'left' | 'center' | 'right'
+  optimize?: boolean // Enable wsrv.nl optimization (default: true for external images)
+  quality?: number // Image quality 1-100 (default: 80)
+}
+
+/**
+ * Get resized image URL using wsrv.nl proxy
+ */
+function getResizedImageUrl(
+  imageUrl: string,
+  options: {
+    width?: number
+    height?: number
+    maxWidth?: number
+    maxHeight?: number
+    quality?: number
+  } = {}
+): string {
+  const { width, height, maxWidth, maxHeight, quality = 80 } = options
+
+  // Skip if already a wsrv.nl URL
+  if (imageUrl.startsWith('https://wsrv.nl')) {
+    return imageUrl
+  }
+
+  // For data URLs, we can't use wsrv.nl
+  if (imageUrl.startsWith('data:')) {
+    return imageUrl
+  }
+
+  // For relative URLs (local images), don't proxy
+  if (imageUrl.startsWith('/') || imageUrl.startsWith('./') || imageUrl.startsWith('../')) {
+    return imageUrl
+  }
+
+  // Build wsrv.nl URL
+  const proxyUrl = new URL('https://wsrv.nl/')
+  proxyUrl.searchParams.set('url', imageUrl)
+
+  // Set dimensions
+  if (width) {
+    proxyUrl.searchParams.set('w', width.toString())
+  } else if (maxWidth) {
+    proxyUrl.searchParams.set('w', maxWidth.toString())
+  }
+
+  if (height) {
+    proxyUrl.searchParams.set('h', height.toString())
+  } else if (maxHeight) {
+    proxyUrl.searchParams.set('h', maxHeight.toString())
+  }
+
+  // If only max dimensions are set, use fit=inside to maintain aspect ratio
+  if ((maxWidth || maxHeight) && !width && !height) {
+    proxyUrl.searchParams.set('fit', 'inside')
+    proxyUrl.searchParams.set('n', '-1') // Don't upscale
+  }
+
+  // Quality and format
+  proxyUrl.searchParams.set('q', quality.toString())
+
+  return proxyUrl.toString()
+}
+
+export function Image({
+  src,
+  alt,
+  width,
+  height,
+  maxWidth,
+  maxHeight,
+  caption,
+  className,
+  rounded = true,
+  shadow = false,
+  border = false,
+  align = 'center',
+  optimize = true,
+  quality = 80,
+}: ImageProps) {
+  // Determine if we should optimize
+  const isExternalImage = src.startsWith('http://') || src.startsWith('https://')
+  const shouldOptimize = optimize && isExternalImage
+
+  // Get the final image URL
+  const imageSrc = shouldOptimize
+    ? getResizedImageUrl(src, { width, height, maxWidth, maxHeight, quality })
+    : src
+
+  const alignmentClasses = {
+    left: 'mr-auto',
+    center: 'mx-auto',
+    right: 'ml-auto',
+  }
+
+  const imageElement = (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={imageSrc}
+      alt={alt}
+      width={width}
+      height={height}
+      style={{
+        maxWidth: maxWidth ? `${maxWidth}px` : '100%',
+        maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+        height: 'auto',
+      }}
+      className={cn(
+        'docs-image',
+        rounded && 'rounded-lg',
+        shadow && 'shadow-lg',
+        border && 'border border-border',
+        alignmentClasses[align],
+        className
+      )}
+      loading="lazy"
+    />
+  )
+
+  if (caption) {
+    return (
+      <figure className={cn('docs-image-figure my-6', alignmentClasses[align])}>
+        {imageElement}
+        <figcaption className="docs-image-caption mt-2 text-center text-sm text-muted-foreground">
+          {caption}
+        </figcaption>
+      </figure>
+    )
+  }
+
+  return <div className={cn('docs-image-wrapper my-4', alignmentClasses[align])}>{imageElement}</div>
+}
+
+/**
+ * Screenshot component - convenience wrapper with default styling
+ */
+export function Screenshot({
+  src,
+  alt,
+  caption,
+  maxWidth = 800,
+  className,
+  ...props
+}: Omit<ImageProps, 'shadow' | 'border' | 'rounded'>) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      caption={caption}
+      maxWidth={maxWidth}
+      rounded
+      shadow
+      border
+      className={cn('docs-screenshot', className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Logo component - for displaying logos without optimization artifacts
+ */
+export function Logo({
+  src,
+  alt,
+  width = 200,
+  height,
+  className,
+  ...props
+}: Omit<ImageProps, 'optimize' | 'quality' | 'shadow' | 'rounded' | 'border'>) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      optimize={false}
+      rounded={false}
+      shadow={false}
+      border={false}
+      className={cn('docs-logo', className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Icon component - small images/icons
+ */
+export function Icon({
+  src,
+  alt,
+  size = 24,
+  className,
+}: {
+  src: string
+  alt: string
+  size?: number
+  className?: string
+}) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={alt}
+      width={size}
+      height={size}
+      className={cn('docs-icon inline-block', className)}
+      loading="lazy"
+    />
+  )
+}

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

@@ -0,0 +1,204 @@
+/**
+ * MDX Components Registry
+ * 
+ * Exports all custom MDX components for use in documentation pages.
+ * These components are Mintlify-compatible.
+ */
+
+// Callouts
+export {
+  Note,
+  Warning,
+  Info,
+  Tip,
+  Check,
+  Error,
+  Callout,
+} from './callouts'
+
+// Cards
+export {
+  Card,
+  CardGroup,
+} from './cards'
+
+// Accordion
+export {
+  Accordion,
+  AccordionGroup,
+} from './accordion'
+
+// Steps
+export {
+  Steps,
+  Step,
+} from './steps'
+
+// Tabs
+export {
+  Tabs,
+  Tab,
+} from './tabs'
+
+// Code Group
+export { CodeGroup } from './code-group'
+
+// Layout
+export {
+  Frame,
+  Columns,
+  Snippet,
+  Latex,
+} from './frame'
+
+// API Documentation
+export {
+  ParamField,
+  ResponseField,
+  Expandable,
+} from './param-field'
+
+// Embeds
+export {
+  Iframe,
+  Video,
+  Loom,
+} from './iframe'
+
+// Images
+export {
+  Image,
+  Screenshot,
+  Logo,
+  Icon,
+} from './image'
+
+// Highlight
+export {
+  Highlight,
+  Marker,
+  Underline,
+} from './highlight'
+
+// Badge
+export { Badge } from './badge'
+
+// Mermaid
+export { Mermaid } from './mermaid'
+
+// File Embeds
+export { PDF, Audio, Download } from './file-embeds'
+
+// Changelog
+export {
+  ChangelogEntry,
+  ChangelogTitle,
+  ChangelogDescription,
+  ChangelogImage,
+  BreakingChange,
+  MoreUpdates,
+  UpdateItem,
+} from './changelog'
+
+// Re-export types
+export type { Frontmatter } from '@/lib/docs/mdx/frontmatter'
+
+/**
+ * Default MDX components mapping
+ * 
+ * Use this object with next-mdx-remote to enable all custom components
+ */
+import { Note, Warning, Info, Tip, Check, Error as ErrorCallout, Callout } from './callouts'
+import { Card, CardGroup } from './cards'
+import { Accordion, AccordionGroup } from './accordion'
+import { Steps, Step } from './steps'
+import { Tabs, Tab } from './tabs'
+import { CodeGroup } from './code-group'
+import { Frame, Columns, Snippet, Latex } from './frame'
+import { ParamField, ResponseField, Expandable } from './param-field'
+import { Iframe, Video, Loom } from './iframe'
+import { Image, Screenshot, Logo, Icon } from './image'
+import { Highlight, Marker, Underline } from './highlight'
+import { Badge } from './badge'
+import { Mermaid } from './mermaid'
+import { PDF, Audio, Download } from './file-embeds'
+import { ChangelogEntry, ChangelogTitle, ChangelogDescription, ChangelogImage, BreakingChange, MoreUpdates, UpdateItem } from './changelog'
+
+export 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,
+  
+  // Changelog
+  ChangelogEntry,
+  ChangelogTitle,
+  ChangelogDescription,
+  ChangelogImage,
+  BreakingChange,
+  MoreUpdates,
+  UpdateItem,
+}
+
+export default mdxComponents