@brainfish-ai/devdoc 0.1.42 → 0.1.44

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

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+const colorStyles = {
+    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 }) {
+    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 /*#__PURE__*/ _jsx("span", {
+        className: baseStyles[variant],
+        children: children
+    });
+}
+/**
+ * Marker - Shorthand for marker-style highlight
+ */ export function Marker({ children, color = 'yellow', className }) {
+    return /*#__PURE__*/ _jsx(Highlight, {
+        variant: "marker",
+        color: color,
+        className: className,
+        children: children
+    });
+}
+/**
+ * Underline - Shorthand for underline-style highlight
+ */ export function Underline({ children, color = 'orange', className }) {
+    return /*#__PURE__*/ _jsx(Highlight, {
+        variant: "underline",
+        color: color,
+        className: className,
+        children: children
+    });
+}
+// Export all components
+export default Highlight;

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

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '@/lib/utils';
+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 }) {
+    // Determine sizing approach
+    const hasFixedSize = width || height;
+    const useAspectRatio = aspectRatio && !hasFixedSize;
+    // Convert numeric values to pixels
+    const getSize = (value)=>{
+        if (value === undefined) return undefined;
+        if (typeof value === 'number') return `${value}px`;
+        return value;
+    };
+    const containerStyle = useAspectRatio ? {
+        aspectRatio
+    } : {};
+    const iframeStyle = {
+        width: getSize(width) || (useAspectRatio ? '100%' : undefined),
+        height: getSize(height) || (useAspectRatio ? '100%' : undefined)
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('docs-iframe my-4 overflow-hidden rounded-lg border border-border', useAspectRatio && 'w-full', className),
+        style: containerStyle,
+        children: /*#__PURE__*/ _jsx("iframe", {
+            src: src,
+            title: title,
+            style: iframeStyle,
+            frameBorder: frameBorder,
+            allowFullScreen: allowFullScreen,
+            allow: allow,
+            className: cn('docs-iframe-content', useAspectRatio && 'w-full h-full')
+        })
+    });
+}
+export function Video({ src, title = 'Video', aspectRatio = '16/9', className }) {
+    // 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 /*#__PURE__*/ _jsx(Iframe, {
+        src: embedSrc,
+        title: title,
+        aspectRatio: aspectRatio,
+        className: cn('docs-video', className)
+    });
+}
+export function Loom({ id, title = 'Loom video', className }) {
+    return /*#__PURE__*/ _jsx(Iframe, {
+        src: `https://www.loom.com/embed/${id}`,
+        title: title,
+        aspectRatio: "16/9",
+        className: cn('docs-loom', className)
+    });
+}

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

@@ -0,0 +1,135 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '@/lib/utils';
+/**
+ * Get resized image URL using wsrv.nl proxy
+ */ function getResizedImageUrl(imageUrl, options = {}) {
+    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 }) {
+    // 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
+    /*#__PURE__*/ _jsx("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 /*#__PURE__*/ _jsxs("figure", {
+            className: cn('docs-image-figure my-6', alignmentClasses[align]),
+            children: [
+                imageElement,
+                /*#__PURE__*/ _jsx("figcaption", {
+                    className: "docs-image-caption mt-2 text-center text-sm text-muted-foreground",
+                    children: caption
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('docs-image-wrapper my-4', alignmentClasses[align]),
+        children: imageElement
+    });
+}
+/**
+ * Screenshot component - convenience wrapper with default styling
+ */ export function Screenshot({ src, alt, caption, maxWidth = 800, className, ...props }) {
+    return /*#__PURE__*/ _jsx(Image, {
+        src: src,
+        alt: alt,
+        caption: caption,
+        maxWidth: maxWidth,
+        rounded: true,
+        shadow: true,
+        border: true,
+        className: cn('docs-screenshot', className),
+        ...props
+    });
+}
+/**
+ * Logo component - for displaying logos without optimization artifacts
+ */ export function Logo({ src, alt, width = 200, height, className, ...props }) {
+    return /*#__PURE__*/ _jsx(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 }) {
+    return(// eslint-disable-next-line @next/next/no-img-element
+    /*#__PURE__*/ _jsx("img", {
+        src: src,
+        alt: alt,
+        width: size,
+        height: size,
+        className: cn('docs-icon inline-block', className),
+        loading: "lazy"
+    }));
+}

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

@@ -0,0 +1,134 @@
+/**
+ * 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';
+// Landing Page Components
+export { Hero, Pre, Tagline, Headline, Description, CommandBox, Section, Center, FeatureGrid, FeatureItem, ButtonLink, Spacer, Divider } from './landing';
+/**
+ * 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';
+import { Hero, Pre, Tagline, Headline, Description, CommandBox, Section, Center, FeatureGrid, FeatureItem, ButtonLink, Spacer, Divider } from './landing';
+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,
+    // Landing Page
+    Hero,
+    Pre,
+    Tagline,
+    Headline,
+    Description,
+    CommandBox,
+    Section,
+    Center,
+    FeatureGrid,
+    FeatureItem,
+    ButtonLink,
+    Spacer,
+    Divider
+};
+export default mdxComponents;