Enhance User Guide and Template Services: Added max content width configuration to UserGuide page for improved layout. Updated TemplateService to always replace placeholders, ensuring custom components are handled correctly even with empty default data. Enhanced error handling for custom component rendering, providing user-friendly error messages in the preview. Introduced a new guide for website setup, detailing installation steps and features.

app/Filament/Admin/Pages/UserGuide.php

@@ -5,6 +5,7 @@ namespace App\Filament\Admin\Pages;
 use App\Services\GuideService;
 use BackedEnum;
 use Filament\Pages\Page;
+use Filament\Support\Enums\Width;
 use Filament\Support\Icons\Heroicon;
 
 class UserGuide extends Page
@@ -37,6 +38,11 @@ class UserGuide extends Page
         return __('user-guide.title');
     }
 
+    public function getMaxContentWidth(): Width | string | null
+    {
+        return Width::Full;
+    }
+
     public function getGuides(): array
     {
         $guideService = app(GuideService::class);

app/Http/Controllers/TemplatePreviewController.php

@@ -48,9 +48,9 @@ class TemplatePreviewController extends Controller
         }
 
         // Replace placeholders with default data
-        if (!empty($defaultData)) {
-            $content = TemplateService::replacePlaceholders($content, $defaultData);
-        }
+        // Always call replacePlaceholders to handle custom components and special placeholders
+        // even if defaultData is empty
+        $content = TemplateService::replacePlaceholders($content, $defaultData ?? []);
 
         $html = TemplatePreviewService::getPreviewHtml($content, $type);
 

app/Services/TemplateService.php

@@ -295,18 +295,37 @@ class TemplateService
             foreach ($customMatches[0] as $index => $fullMatch) {
                 $componentName = $customMatches[1][$index] ?? null;
                 if ($componentName) {
+                    // Normalize component name to lowercase for consistent file system access
+                    $componentName = strtolower($componentName);
                     $viewPath = "components.custom.{$componentName}";
                     if (view()->exists($viewPath)) {
                         try {
                             $renderedComponent = view($viewPath)->render();
+                            // Ensure rendered component is properly formatted
+                            $renderedComponent = trim($renderedComponent);
                             $html = str_replace($fullMatch, $renderedComponent, $html);
                         } catch (\Exception $e) {
-                            // If rendering fails, remove the placeholder or show error
-                            $html = str_replace($fullMatch, "<!-- Custom component '{$componentName}' could not be rendered: {$e->getMessage()} -->", $html);
+                            // Log the error for debugging
+                            \Log::error("Custom component render error: {$viewPath}", [
+                                'error' => $e->getMessage(),
+                                'trace' => $e->getTraceAsString()
+                            ]);
+                            
+                            // Show error message in preview (visible in development)
+                            $errorMessage = htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8');
+                            $errorHtml = "<div style='padding: 10px; background: #fee; border: 1px solid #fcc; color: #c00; margin: 5px 0; border-radius: 4px;'>" .
+                                       "<strong>Custom Component Error:</strong> {$viewPath}<br>" .
+                                       "<small>{$errorMessage}</small>" .
+                                       "</div>";
+                            $html = str_replace($fullMatch, $errorHtml, $html);
                         }
                     } else {
-                        // Component doesn't exist, remove placeholder or show notice
-                        $html = str_replace($fullMatch, "<!-- Custom component '{$componentName}' not found -->", $html);
+                        // Component doesn't exist - show notice in preview
+                        $noticeHtml = "<div style='padding: 10px; background: #fff3cd; border: 1px solid #ffc107; color: #856404; margin: 5px 0; border-radius: 4px;'>" .
+                                    "<strong>Custom Component Not Found:</strong> {$viewPath}<br>" .
+                                    "<small>Create the file at: resources/views/components/custom/{$componentName}.blade.php</small>" .
+                                    "</div>";
+                        $html = str_replace($fullMatch, $noticeHtml, $html);
                     }
                 }
             }

resources/views/filament/admin/pages/user-guide.blade.php

@@ -45,7 +45,7 @@
                                 :color="$selectedGuide === $guide['slug'] ? 'primary' : 'gray'"
                                 :variant="$selectedGuide === $guide['slug'] ? 'filled' : 'outline'"
                             >
-                                <div class="flex items-center justify-between w-full min-w-0">
+                                <div class="flex  justify-between w-full min-w-0">
                                     <div class="flex items-center gap-2 flex-1 min-w-0">
                                         <x-filament::icon
                                             icon="heroicon-o-document-text"
@@ -62,19 +62,7 @@
                                         />
                                     @endif
                                 </div>
-                                @if(isset($guide['modified_date']))
-                                    <div class="w-full mt-1.5 text-xs opacity-75">
-                                        <div class="flex items-center gap-1">
-                                            <x-filament::icon
-                                                icon="heroicon-o-clock"
-                                                class="w-3 h-3"
-                                            />
-                                            <span class="truncate">
-                                                {{ \Carbon\Carbon::parse($guide['modified_date'])->locale(app()->getLocale())->diffForHumans() }}
-                                            </span>
-                                        </div>
-                                    </div>
-                                @endif
+                              
                             </x-filament::button>
                         </div>
                     @endforeach