@brainfish-ai/devdoc 0.1.41 → 0.1.43

package/renderer/components/docs-viewer/content/not-found-page.js

@@ -0,0 +1,300 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { FileX, House, ArrowLeft, MagnifyingGlass, Spinner } from '@phosphor-icons/react';
+import { Button } from '@/components/ui/button';
+import { useDocsNavigation } from '@/lib/docs-navigation-context';
+import { MDXRemote } from 'next-mdx-remote';
+import { useCodeCopy } from '@/hooks/use-code-copy';
+// Import MDX components for custom 404 pages
+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, Hero, Pre, Tagline, Headline, Description, CommandBox, Section, Center, FeatureGrid, FeatureItem, ButtonLink, Spacer, Divider } from '../../docs/mdx/index';
+// MDX components mapping for custom 404 pages
+const mdxComponents = {
+    Note,
+    Warning,
+    Info,
+    Tip,
+    Check,
+    Error: 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,
+    Hero,
+    Pre,
+    Tagline,
+    Headline,
+    Description,
+    CommandBox,
+    Section,
+    Center,
+    FeatureGrid,
+    FeatureItem,
+    ButtonLink,
+    Spacer,
+    Divider
+};
+export function NotFoundPage({ slug, onGoBack, onSearch }) {
+    const docsNav = useDocsNavigation();
+    const [customPage, setCustomPage] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const contentRef = useRef(null);
+    // Add copy buttons to code blocks after content loads
+    useCodeCopy(contentRef, [
+        customPage
+    ]);
+    // Try to load custom 404.mdx page
+    useEffect(()=>{
+        async function loadCustom404() {
+            try {
+                const response = await fetch('/api/docs?slug=404&is404=true');
+                if (response.ok) {
+                    const data = await response.json();
+                    setCustomPage(data);
+                }
+            } catch  {
+            // No custom 404 page, use default
+            } finally{
+                setLoading(false);
+            }
+        }
+        loadCustom404();
+    }, []);
+    const handleGoHome = useCallback(()=>{
+        // Navigate to the first page of the current tab or just switch to first tab
+        if (docsNav?.switchToTab) {
+            window.location.hash = '';
+            window.location.reload();
+        } else {
+            window.location.hash = '';
+        }
+    }, [
+        docsNav
+    ]);
+    const handleGoBack = useCallback(()=>{
+        if (onGoBack) {
+            onGoBack();
+        } else {
+            window.history.back();
+        }
+    }, [
+        onGoBack
+    ]);
+    // Show loading state briefly while checking for custom 404
+    if (loading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "docs-page docs-page-not-found w-full min-h-[200px]",
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center py-12",
+                children: /*#__PURE__*/ _jsx(Spinner, {
+                    className: "h-6 w-6 animate-spin text-muted-foreground"
+                })
+            })
+        });
+    }
+    // Render custom 404 page if available
+    if (customPage) {
+        const { mode = 'default', hideHeader, background } = customPage.frontmatter;
+        const isCustomMode = mode === 'custom';
+        const showHeader = !hideHeader && !isCustomMode;
+        // Custom mode: Full-width layout
+        if (isCustomMode) {
+            return /*#__PURE__*/ _jsx("div", {
+                ref: contentRef,
+                className: "docs-page docs-page-not-found docs-content w-full min-h-full",
+                style: {
+                    background: background || 'var(--background)'
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "docs-custom-content [&>*]:w-full",
+                    children: /*#__PURE__*/ _jsx(MDXRemote, {
+                        ...customPage.mdxSource,
+                        components: mdxComponents
+                    })
+                })
+            });
+        }
+        // Default mode with optional header
+        const containerClass = mode === 'wide' ? 'max-w-6xl' : 'max-w-4xl';
+        return /*#__PURE__*/ _jsxs("div", {
+            ref: contentRef,
+            className: `docs-page docs-page-not-found docs-content ${containerClass} mx-auto px-4 py-6 sm:px-8 sm:py-8`,
+            children: [
+                showHeader && customPage.frontmatter.title && /*#__PURE__*/ _jsxs("div", {
+                    className: "docs-page-header mb-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("h1", {
+                            className: "docs-content-title text-2xl sm:text-3xl font-bold mb-2 text-foreground",
+                            children: customPage.frontmatter.title
+                        }),
+                        customPage.frontmatter.description && /*#__PURE__*/ _jsx("p", {
+                            className: "docs-content-description text-lg text-muted-foreground",
+                            children: customPage.frontmatter.description
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "docs-prose prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground",
+                    children: /*#__PURE__*/ _jsx(MDXRemote, {
+                        ...customPage.mdxSource,
+                        components: mdxComponents
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "mt-8 pt-6 border-t border-border",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col sm:flex-row items-center justify-center gap-3",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Button, {
+                                variant: "outline",
+                                size: "sm",
+                                onClick: handleGoBack,
+                                className: "gap-2 min-w-[120px]",
+                                children: [
+                                    /*#__PURE__*/ _jsx(ArrowLeft, {
+                                        className: "w-4 h-4"
+                                    }),
+                                    "Go back"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Button, {
+                                variant: "default",
+                                size: "sm",
+                                onClick: handleGoHome,
+                                className: "gap-2 min-w-[120px]",
+                                children: [
+                                    /*#__PURE__*/ _jsx(House, {
+                                        className: "w-4 h-4"
+                                    }),
+                                    "Go home"
+                                ]
+                            }),
+                            onSearch && /*#__PURE__*/ _jsxs(Button, {
+                                variant: "outline",
+                                size: "sm",
+                                onClick: onSearch,
+                                className: "gap-2 min-w-[120px]",
+                                children: [
+                                    /*#__PURE__*/ _jsx(MagnifyingGlass, {
+                                        className: "w-4 h-4"
+                                    }),
+                                    "Search"
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+    // Default 404 page
+    return /*#__PURE__*/ _jsx("div", {
+        className: "docs-page docs-page-not-found w-full min-h-[calc(100vh-200px)] flex items-center justify-center",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "text-center px-4 py-12 max-w-md mx-auto",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "mb-6",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "inline-flex items-center justify-center w-20 h-20 rounded-full bg-muted/50 text-muted-foreground",
+                        children: /*#__PURE__*/ _jsx(FileX, {
+                            className: "w-10 h-10",
+                            weight: "light"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx("h1", {
+                    className: "text-2xl font-semibold text-foreground mb-2",
+                    children: "Page not found"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-muted-foreground mb-2",
+                    children: "The page you're looking for doesn't exist or has been moved."
+                }),
+                slug && /*#__PURE__*/ _jsxs("p", {
+                    className: "text-sm text-muted-foreground/70 mb-6 font-mono bg-muted/30 px-3 py-1.5 rounded-md inline-block",
+                    children: [
+                        "/",
+                        slug
+                    ]
+                }),
+                !slug && /*#__PURE__*/ _jsx("div", {
+                    className: "mb-6"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col sm:flex-row items-center justify-center gap-3",
+                    children: [
+                        /*#__PURE__*/ _jsxs(Button, {
+                            variant: "outline",
+                            size: "sm",
+                            onClick: handleGoBack,
+                            className: "gap-2 min-w-[120px]",
+                            children: [
+                                /*#__PURE__*/ _jsx(ArrowLeft, {
+                                    className: "w-4 h-4"
+                                }),
+                                "Go back"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Button, {
+                            variant: "default",
+                            size: "sm",
+                            onClick: handleGoHome,
+                            className: "gap-2 min-w-[120px]",
+                            children: [
+                                /*#__PURE__*/ _jsx(House, {
+                                    className: "w-4 h-4"
+                                }),
+                                "Go home"
+                            ]
+                        }),
+                        onSearch && /*#__PURE__*/ _jsxs(Button, {
+                            variant: "outline",
+                            size: "sm",
+                            onClick: onSearch,
+                            className: "gap-2 min-w-[120px]",
+                            children: [
+                                /*#__PURE__*/ _jsx(MagnifyingGlass, {
+                                    className: "w-4 h-4"
+                                }),
+                                "Search"
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: "text-xs text-muted-foreground/60 mt-8",
+                    children: "If you believe this is an error, please check the URL or contact the documentation maintainer."
+                })
+            ]
+        })
+    });
+}