error handling on generation, comparison docs

Author: junzyx

apps/docs/comparison.mdx

@@ -0,0 +1,33 @@
+---
+title: "Comparing htmldocs"
+description: "See how htmldocs compares to other document creation solutions"
+icon: "code-compare"
+---
+
+
+| Feature | Traditional Documents<br/>(Word, Google Docs) | LaTeX Documents<br/>(Overleaf, TeXStudio) | Freeform Documents<br/>(Figma, Sketch) | Web Documents<br/>(htmldocs) |
+|---------|:-------------------------------------------:|:----------------------------------------:|:-------------------------------------:|:---------------------------:|
+| Learning Curve | ✅ Simple | ❌ Complex | ✅ Simple | ✅ Simple |
+| Template Variables | ❌ Limited | ❌ Limited | ❌ Limited | ✅ Supported |
+| Styling | ✅ Basic | ❌ Complex | ✅ Advanced | ✅ Advanced |
+| Version Control | ❌ Limited | ✅ Supported | ❌ Limited | ✅ Supported |
+| Document Consistency | ❌ Limited | ✅ Supported | ✅ Supported | ✅ Supported |
+| External Libraries | ❌ Limited | ✅ Supported | ❌ Limited | ✅ Supported |
+| Automation / API | ❌ Limited | ❌ Limited | ❌ Limited | ✅ Supported |
+| Developer Plugins | ❌ Limited | ❌ Limited | ❌ Limited | ✅ Supported |
+| Live Preview | ✅ Supported | ❌ Limited | ✅ Supported | ✅ Supported |
+| CI/CD Integration | ❌ Limited | ⚠️ Partial | ❌ Limited | ✅ Supported |
+| Type Safety | ❌ Limited | ❌ Limited | ❌ Limited | ✅ Supported |
+
+## When to Choose htmldocs
+
+htmldocs is ideal when you need:
+
+- **Programmatic Generation**: You need to generate documents from your app's data
+- **Consistent Branding**: You're tired of manually updating Word templates
+- **Modern Development**: You want to use React components for documents
+- **Automation**: Your CI/CD pipeline needs to generate documents
+- **Version Control**: You want Git-based change tracking for documents
+- **Developer-First**: You prefer writing code over using WYSIWYG editors
+
+Word and LaTeX are solid choices for static documents. But if you need to programmatically create documents as part of your application, htmldocs lets you do it with the tools you already know and love.

apps/docs/mint.json

@@ -50,6 +50,7 @@
       "group": "Overview",
       "pages": [
         "introduction",
+        "comparison",
         "getting-started",
         "cli"
       ]

packages/htmldocs/src/app/components/topbar.tsx

@@ -4,6 +4,7 @@ import { Sidebar } from "@phosphor-icons/react";
 import { Button } from "./ui/button";
 import { useDocuments } from "~/contexts/documents";
 import ContextEditorModal from "./context-editor-modal";
+import { toast } from "sonner";
 
 interface TopbarProps {
   documentPath: string;
@@ -30,22 +31,23 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
 
   const renderAndDownloadPDF = async () => {
     if (!markup) {
-      console.error("No markup available to generate PDF");
+      toast.error("No markup available to generate PDF");
       return;
     }
 
     setIsDownloading(true);
 
-    const pdfBuffer = await renderDocumentToPDF({ 
-      url: window.location.href,
-      html: markup,
-      pageConfig: pageConfigs[documentPath]
-    });
-    
-    if (pdfBuffer instanceof Error) {
-      console.error("Error downloading document:", pdfBuffer.message);
-      setIsDownloading(false);
-    } else {
+    try {
+      const pdfBuffer = await renderDocumentToPDF({ 
+        url: window.location.href,
+        html: markup,
+        pageConfig: pageConfigs[documentPath]
+      });
+      
+      if (pdfBuffer instanceof Error) {
+        throw pdfBuffer;
+      }
+
       // Ensure the buffer is in the correct type
       const buffer = new Uint8Array(pdfBuffer);
       const blob = new Blob([buffer], { type: "application/pdf" });
@@ -57,6 +59,11 @@ export const Topbar: React.FC<Readonly<TopbarProps>> = ({
       a.click();
       document.body.removeChild(a);
       window.URL.revokeObjectURL(downloadUrl);
+      toast.success("PDF downloaded successfully");
+    } catch (error) {
+      console.error("Error downloading document:", error);
+      toast.error("Failed to generate PDF. Check the CLI logs for more details.");
+    } finally {
       setIsDownloading(false);
     }
   };

packages/htmldocs/src/app/preview/[...slug]/preview.tsx

@@ -263,7 +263,7 @@ const Preview = ({
                 <ZoomControls />
               </div>
             ) : null}
-            <Toaster />
+            <Toaster richColors />
           </div>
       </Shell>
     </DocumentContextProvider>