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 the ideal choice when you need:
+
+- **Programmatic Generation**: Create documents dynamically using data and code
+- **Consistent Branding**: Maintain uniform styling across all documents through components
+- **Modern Development**: Leverage React, TypeScript, and the npm ecosystem
+- **CI/CD**: Push new document versions with CI/CD pipelines
+- **Version Control**: Track changes and collaborate using Git
+- **Developer-First**: Use familiar tools and workflows in a code-first environment
+
+While traditional tools like Word or LaTeX have their place, htmldocs brings document creation into the modern web development ecosystem, offering powerful features for teams that need more than just basic word processing. 

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>