-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDOCUMENTATION.html
More file actions
509 lines (477 loc) · 30.5 KB
/
Copy pathDOCUMENTATION.html
File metadata and controls
509 lines (477 loc) · 30.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
<!DOCTYPE html>
<html lang="en" class="h-full scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BotCMS Interactive Guide & Documentation</title>
<!-- Google Fonts for premium typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Plus Jakarta Sans', 'Outfit', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
900: '#312e81',
},
slate: {
950: '#030712',
}
}
}
}
}
</script>
<style>
.glass {
background: rgba(17, 24, 39, 0.45);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar-link-active {
background: rgba(99, 102, 241, 0.1);
color: #818cf8;
border-left: 2px solid #6366f1;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #030712;
}
::-webkit-scrollbar-thumb {
background: #1f2937;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #374151;
}
</style>
</head>
<body class="h-full bg-slate-950 text-slate-200 font-sans antialiased overflow-hidden flex flex-col">
<!-- Top Header -->
<header class="h-16 border-b border-slate-800 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50 flex items-center justify-between px-6 flex-shrink-0">
<div class="flex items-center space-x-3">
<span class="text-2xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 font-sans">
BotCMS
</span>
<span class="px-2 py-0.5 rounded text-[10px] bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 font-semibold font-mono">Open Source v1.0.0</span>
</div>
<div class="flex items-center space-x-4">
<span class="text-xs text-slate-500 font-mono">Laravel 13+ & PHP 8.4+ Monolith</span>
<a href="http://127.0.0.1:8000" target="_blank" class="text-xs font-semibold px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 shadow-md shadow-indigo-600/25 transition-all">
Visit Active Site
</a>
</div>
</header>
<!-- App Container -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar Navigation -->
<aside class="w-64 border-r border-slate-850 bg-slate-950/90 flex-shrink-0 hidden md:flex flex-col overflow-y-auto">
<div class="p-6">
<span class="text-xs font-semibold uppercase tracking-wider text-slate-500 block mb-4">Documentation Index</span>
<nav class="space-y-1">
<a href="#introduction" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Introduction
</a>
<a href="#quick-install" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
1-Click Setup
</a>
<a href="#development-basics" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Development Guide
</a>
<a href="#theme-management" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Theme Management
</a>
<a href="#edit-theme" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
How to Edit Themes
</a>
<a href="#plugin-management" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Plugin System
</a>
<a href="#content-creation" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Posts & Pages Creation
</a>
<a href="#page-templates-guide" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Code-First Page Templates
</a>
<a href="#wp-migration" class="block px-3 py-2 text-sm rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-900 transition-all">
Comparison & Migration
</a>
</nav>
</div>
<div class="mt-auto p-4 border-t border-slate-900 text-center text-xs text-slate-500">
Default Login Credentials:<br>
<code class="text-indigo-400 block mt-1">admin@botcms.local</code>
<code class="text-indigo-400 block">admin123</code>
</div>
</aside>
<!-- Main Documentation Body -->
<main class="flex-1 overflow-y-auto p-8 md:p-12 space-y-16 max-w-5xl">
<!-- Introduction Section -->
<section id="introduction" class="space-y-4">
<div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs">
<span>⚡ AI Native & Modular Monolith</span>
</div>
<h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-white font-sans">
Welcome to BotCMS Platform
</h1>
<p class="text-slate-400 text-base md:text-lg leading-relaxed">
BotCMS is an open-source, next-generation CMS Platform designed to replace WordPress. It uses Laravel's structured MVC model, an active secure **Hooks Manager**, a dynamic Visual Theme engine (instantly swapping between Tailwind and Bootstrap layouts), and a directory-based Plugin controller. No Composer knowledge or command line required to install plugins or visual components.
</p>
</section>
<hr class="border-slate-800">
<!-- 1-Click Setup -->
<section id="quick-install" class="space-y-4">
<h2 class="text-2xl font-bold text-white">1-Click Setup & Installation</h2>
<p class="text-slate-400 text-sm">
Getting BotCMS up and running is simplified via a unified installation wizard. Follow these steps:
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="glass p-5 rounded-2xl space-y-2">
<span class="text-xs text-indigo-400 font-semibold font-mono block">STEP 01</span>
<h3 class="font-bold text-slate-200">Prerequisites</h3>
<p class="text-xs text-slate-400">Ensure you have **PHP 8.4+** (Homebrew/apt) and **Composer** installed globally on your hosting server.</p>
</div>
<div class="glass p-5 rounded-2xl space-y-2">
<span class="text-xs text-indigo-400 font-semibold font-mono block">STEP 02</span>
<h3 class="font-bold text-slate-200">Run Installer</h3>
<p class="text-xs text-slate-400">Execute `./install.sh` in the project root directory. This starts the interactive installer console.</p>
</div>
<div class="glass p-5 rounded-2xl space-y-2">
<span class="text-xs text-indigo-400 font-semibold font-mono block">STEP 03</span>
<h3 class="font-bold text-slate-200">Choose Database</h3>
<p class="text-xs text-slate-400">Select **SQLite** (creates file automatically), **MySQL**, or **PostgreSQL** in the prompts. The script seeds default values.</p>
</div>
</div>
</section>
<hr class="border-slate-800">
<!-- Development Basics -->
<section id="development-basics" class="space-y-4">
<h2 class="text-2xl font-bold text-white">Developing in BotCMS</h2>
<p class="text-slate-400 text-sm">
Rather than building plugins that write raw SQL or interact with dynamic tables directly, BotCMS organizes business code into separate namespaces:
</p>
<div class="bg-slate-900 border border-slate-800 rounded-xl p-5 space-y-3">
<div class="flex items-start space-x-3">
<div class="bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 font-mono text-xs px-2 py-0.5 rounded">Modules/</div>
<p class="text-xs text-slate-400">Contains core platform code like **Auth** (login logic) and **Dashboard** (admin screens). Read by `ModuleServiceProvider` at boot.</p>
</div>
<div class="flex items-start space-x-3">
<div class="bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 font-mono text-xs px-2 py-0.5 rounded">Plugins/</div>
<p class="text-xs text-slate-400">ZIP-uploadable extensions containing custom controllers, hooks, and routes (like `/seo-audit`). Activated via Admin dashboard.</p>
</div>
<div class="flex items-start space-x-3">
<div class="bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 font-mono text-xs px-2 py-0.5 rounded">Themes/</div>
<p class="text-xs text-slate-400">Frontend views and styles. Can specify their required CSS engine in their metadata file.</p>
</div>
</div>
</section>
<hr class="border-slate-800">
<!-- Theme Management -->
<section id="theme-management" class="space-y-4">
<h2 class="text-2xl font-bold text-white">Theme Structure & Framework Swapping</h2>
<p class="text-slate-400 text-sm">
BotCMS supports multiple frameworks. A theme consists of a folder inside `Themes/` with a `theme.json` configuration file:
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-3">
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">1. Tailwind CSS Theme Configuration</span>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-emerald-400 font-mono">
{
"name": "Default",
"version": "1.0.0",
"framework": "tailwind",
"description": "Tailwind CSS dark mode theme"
}</pre>
</div>
<div class="space-y-3">
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">2. Bootstrap 5 Theme Configuration</span>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-teal-400 font-mono">
{
"name": "BootstrapDemo",
"version": "1.0.0",
"framework": "bootstrap",
"description": "Bootstrap 5 light/dark theme"
}</pre>
</div>
</div>
<div class="p-4 rounded-xl bg-indigo-500/5 border border-indigo-500/15 text-xs text-indigo-300">
<strong>Theme Uploading:</strong> To upload a theme, place the theme folder containing `theme.json` and its `resources/views/index.blade.php` structure directly inside the root `Themes/` folder. It will instantly appear as an option in your Admin settings!
</div>
</section>
<hr class="border-slate-800">
<!-- How to Edit Theme -->
<section id="edit-theme" class="space-y-4">
<h2 class="text-2xl font-bold text-white">How to Edit Basic Items in Theme Views</h2>
<p class="text-slate-400 text-sm">
Views are standard Blade templates. Open the active theme index view located at:
<code class="bg-slate-900 px-2 py-0.5 rounded text-indigo-400 text-xs font-mono">Themes/{ActiveTheme}/resources/views/index.blade.php</code>.
</p>
<div class="space-y-4">
<p class="text-xs text-slate-400">Inside the HTML, you can utilize the secure hooks engine directly:</p>
<div class="space-y-2">
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">A. Inject dynamic meta tags or custom titles:</span>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-indigo-300 font-mono"><title>{{ apply_filters('botcms_homepage_title', 'My Default Title') }}</title></pre>
</div>
<div class="space-y-2">
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">B. Inject custom content or dynamic headers:</span>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-indigo-300 font-mono"><h1>{!! apply_filters('botcms_homepage_welcome_text', 'Welcome!') !!}</h1></pre>
</div>
<div class="space-y-2">
<span class="text-xs font-semibold text-slate-400 uppercase tracking-wider block">C. Trigger custom scripts or scripts blocks (Actions):</span>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-indigo-300 font-mono">@php do_action('botcms_homepage_content_footer'); @endphp</pre>
</div>
</div>
</section>
<hr class="border-slate-800"> <!-- Plugin System -->
<section id="plugin-management" class="space-y-4">
<h2 class="text-2xl font-bold text-white">Uploading & Creating Plugins</h2>
<p class="text-slate-400 text-sm">
Plugins are self-contained logical components placed in the root `Plugins/` folder.
</p>
<div class="space-y-4">
<p class="text-xs text-slate-400">
1. To build a complex MVC extension (such as an E-commerce store), create a dedicated subfolder (e.g. <code>Plugins/BotCommerce/</code>) containing Models, Controllers, custom Migrations, Routes, and Service Providers.
</p>
<p class="text-xs text-slate-400">
2. Place a <code>plugin.json</code> descriptor file:
</p>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-indigo-300 font-mono">
{
"name": "BotCommerce",
"version": "1.0.0",
"description": "Foundational Product Manager and Shop Catalog plugin for E-Commerce features.",
"enabled": true
}</pre>
<p class="text-xs text-slate-400">
3. Create your Service Provider class to register Custom Post Types, dynamic shop routes, submenus tree structure, and hook into core actions/filters:
</p>
<pre class="bg-slate-900 border border-slate-800 p-4 rounded-xl text-xs text-slate-400 font-mono">
<span class="text-indigo-400">namespace</span> Plugins\BotCommerce;
<span class="text-indigo-400">use</span> Illuminate\Support\ServiceProvider;
<span class="text-indigo-400">use</span> App\Core\Facades\PostType;
<span class="text-indigo-400">use</span> App\Core\Facades\AdminMenu;
<span class="text-indigo-400">use</span> App\Core\Hooks\Facades\Hook;
<span class="text-indigo-400">class</span> BotCommerceServiceProvider <span class="text-indigo-400">extends</span> ServiceProvider
{
<span class="text-indigo-400">public function</span> boot(): void
{
<span class="text-emerald-400">// Register Custom Post Type</span>
PostType::register('product', [
'label' => 'Products',
'singular_label' => 'Product',
'icon' => 'briefcase',
'supports' => ['title', 'editor']
]);
<span class="text-emerald-400">// Register dynamic Admin Menus and Submenus</span>
AdminMenu::register('botcommerce', [
'label' => 'BotCommerce',
'icon' => 'shopping-cart',
'order' => 30
]);
AdminMenu::registerSubmenu('botcommerce', 'products', [
'label' => 'Products',
'route' => 'admin.cpt',
'route_params' => ['type' => 'product'],
'order' => 1
]);
AdminMenu::registerSubmenu('botcommerce', 'gateways', [
'label' => 'Gateways',
'route' => 'admin.botcommerce.gateways',
'order' => 3
]);
<span class="text-emerald-400">// Inject custom inputs into CPT edit form using hooks</span>
Hook::addAction('botcms_cpt_edit_fields_product', function ($post) {
$controller = app(Controllers\AdminProductController::class);
echo $controller->renderFields($post);
});
<span class="text-emerald-400">// Listen to save/update triggers (accepting 2 arguments)</span>
Hook::addAction('botcms_cpt_saved_product', function ($post, $request) {
$controller = app(Controllers\AdminProductController::class);
$controller->saveProduct($post, $request);
}, 10, 2);
}
}</pre>
</div>
</section>
<hr class="border-slate-800">
<!-- Content Creation -->
<section id="content-creation" class="space-y-4">
<h2 class="text-2xl font-bold text-white">Post & Page Creation Structure</h2>
<p class="text-slate-400 text-sm">
Unlike WordPress's heavy EAV database schema, BotCMS organizes pages and posts into a single, clean `posts` table containing:
</p>
<div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
<table class="w-full text-left text-xs border-collapse">
<thead>
<tr class="bg-slate-950 border-b border-slate-800 text-slate-400">
<th class="p-3">Field</th>
<th class="p-3">Type</th>
<th class="p-3">Index / Attributes</th>
<th class="p-3">Description</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-850">
<tr>
<td class="p-3 font-mono text-indigo-300">site_id</td>
<td class="p-3 font-mono">Foreign ID</td>
<td class="p-3 text-slate-500">INDEXED</td>
<td class="p-3 text-slate-400">Associates the post with a specific virtual site (Multisite scope).</td>
</tr>
<tr>
<td class="p-3 font-mono text-indigo-300">type</td>
<td class="p-3 font-mono">String</td>
<td class="p-3 text-slate-500">INDEXED (post, page, block)</td>
<td class="p-3 text-slate-400">Differentiates standard blog posts from static landing pages.</td>
</tr>
<tr>
<td class="p-3 font-mono text-indigo-300">slug</td>
<td class="p-3 font-mono">String</td>
<td class="p-3 text-slate-500">INDEXED (Unique per site+type)</td>
<td class="p-3 text-slate-400">Clean URL parameter identifier (e.g. `about-us`).</td>
</tr>
<tr>
<td class="p-3 font-mono text-indigo-300">status</td>
<td class="p-3 font-mono">String</td>
<td class="p-3 text-slate-500">INDEXED (draft, published)</td>
<td class="p-3 text-slate-400">Draft, pending review, published, or archived state.</td>
</tr>
</tbody>
</table>
</div>
</section>
<hr class="border-slate-800">
<!-- Code-First Page Templates -->
<section id="page-templates-guide" class="space-y-4">
<h2 class="text-2xl font-bold text-white">Page Management & Code-First Templates</h2>
<p class="text-slate-400 text-sm">
BotCMS supports a hybrid structure for content creation and page template editing, giving developers and AIs the ultimate flexibility to manage pages through code:
</p>
<div class="space-y-4">
<div class="glass p-5 rounded-2xl space-y-2">
<h3 class="font-bold text-slate-200">1. Creating Database-Driven Pages (WordPress Style)</h3>
<p class="text-xs text-slate-400">
Non-technical administrators can manage pages via the admin dashboard:
</p>
<ol class="list-decimal pl-5 text-xs text-slate-400 space-y-1">
<li>Log in and navigate to <strong>Pages</strong> in the sidebar.</li>
<li>Click <strong>Create New Page</strong> and enter the Title, Slug (e.g. <code>services</code>), and Content.</li>
<li>Select <strong>Published</strong> and save. The page will instantly resolve at <code>http://127.0.0.1:8000/services</code>.</li>
</ol>
</div>
<div class="glass p-5 rounded-2xl space-y-2">
<h3 class="font-bold text-slate-200">2. Overriding Database Content with Code (Shopify Theme Style)</h3>
<p class="text-xs text-slate-400">
If a coding AI or developer wants to build a highly customized layout with animations, custom CSS, or Blade components:
</p>
<ol class="list-decimal pl-5 text-xs text-slate-400 space-y-1">
<li>Identify the page slug (e.g. <code>services</code>).</li>
<li>Inside your active theme directory (<code>Themes/{activeTheme}/resources/views/</code>), create a template file named:
<ul class="list-disc pl-5 mt-1 font-mono text-indigo-300">
<li><code>page-services.blade.php</code></li>
</ul>
</li>
<li>Put your custom HTML, Tailwind/Bootstrap classes, and Blade logic inside this file.</li>
<li><strong>Resolution Priority:</strong> When a user accesses <code>/services</code>, BotCMS checks if the theme template file exists. If it does, <strong>it renders the theme template file directly, ignoring the database content!</strong> This allows developers to code templates directly in the repo while keeping database content as fallback.</li>
</ol>
</div>
<div class="glass p-5 rounded-2xl space-y-2">
<h3 class="font-bold text-slate-200">3. Custom Post Types & JSON Metadata (No Bloat CPTs)</h3>
<p class="text-xs text-slate-400">
Unlike WordPress's slow EAV metadata queries, BotCMS supports registering Custom Post Types (CPTs) with native database JSON column caching:
</p>
<ol class="list-decimal pl-5 text-xs text-slate-400 space-y-1">
<li>Register the CPT in <code>AppServiceProvider.php</code> (or inside any Plugin Provider):
<pre class="bg-slate-900 border border-slate-800 p-3 rounded-xl text-xs text-indigo-300 font-mono mt-1">
PostType::register('portfolio', [
'label' => 'Portfolio',
'singular_label' => 'Project',
'icon' => 'briefcase',
'supports' => ['title', 'editor', 'thumbnail'],
'fields' => [
'client_name' => ['type' => 'text', 'label' => 'Client Name'],
'project_date' => ['type' => 'date', 'label' => 'Completion Date'],
]
]);</pre>
</li>
<li><strong>Instant UI Auto-Generation:</strong> A new sidebar menu item is created in the Admin Dashboard automatically. Forms, input fields, and lists are generated dynamically based on the schema and saved inside the native database <code>metadata</code> JSON block.</li>
<li><strong>Template Overrides Signature:</strong> Create <code>single-portfolio.blade.php</code> and access custom JSON properties in the Blade template using <code>$post->meta['client_name']</code>.</li>
</ol>
</div>
<div class="glass p-5 rounded-2xl space-y-2">
<h3 class="font-bold text-slate-200">4. Dynamic Virtual Pages (Plugin-First Style)</h3>
<p class="text-xs text-slate-400">
Plugins can register virtual routes that act like physical pages in the system (e.g. <code>/cart</code> or <code>/checkout</code> in <code>BotCommerce</code>) without requiring any database page records or manual file uploads by the user.
</p>
<ol class="list-decimal pl-5 text-xs text-slate-400 space-y-1">
<li><strong>Virtual Page Interception Hook (<code>botcms_resolve_page_object</code>)</strong>: Plugins register virtual pages by returning a dummy <code>Post</code> instance inside their boot provider:
<pre class="bg-slate-900 border border-slate-800 p-3 rounded-xl text-xs text-indigo-300 font-mono mt-1">
Hook::addFilter('botcms_resolve_page_object', function ($page, $slug, $site) {
if ($slug === 'cart' || $slug === 'checkout') {
return new \App\Models\Post([
'site_id' => $site->id,
'title' => ucfirst($slug),
'slug' => $slug,
'type' => 'page',
'status' => 'published',
'content' => "<!--botcommerce_{$slug}-->"
]);
}
return $page;
}, 10, 3);</pre>
</li>
<li><strong>Template View Override Hook (<code>botcms_resolve_page_view</code>)</strong>: Return the plugin's internal Blade view name when the slug is hit:
<pre class="bg-slate-900 border border-slate-800 p-3 rounded-xl text-xs text-indigo-300 font-mono mt-1">
Hook::addFilter('botcms_resolve_page_view', function ($view, $slug, $page, $site) {
if ($slug === 'cart' || $slug === 'checkout') {
return "botcommerce::shop.{$slug}";
}
return $view;
}, 10, 4);</pre>
</li>
<li><strong>Theme Customization Priority:</strong> If a theme developer wants to style the cart or checkout page differently, they can create <code>page-cart.blade.php</code> in their active theme. Because BotCMS checks the theme directory first, the custom theme view automatically overrides the plugin's default fallback template, matching WordPress and Shopify developer priorities!</li>
</ol>
</div>
</div>
</section>
<hr class="border-slate-800">
<!-- Comparison & Migration -->
<section id="wp-migration" class="space-y-4">
<h2 class="text-2xl font-bold text-white">WordPress vs. BotCMS Migration Guide</h2>
<div class="glass p-6 rounded-2xl space-y-4">
<p class="text-xs text-slate-300 leading-relaxed">
To migrate from WordPress to BotCMS, you do not need complex migration plugins. Since BotCMS uses clean Eloquent relational mapping, you can write a simple seeder that reads your WordPress backup XML/JSON and maps posts directly into the `posts` table.
</p>
<div class="flex items-center space-x-2 text-xs font-semibold text-emerald-400">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<span>Perfect for SaaS, Static Sites, Corporate Websites, and Headless APIs.</span>
</div>
</div>
</section>
</main>
</div>
<!-- Sticky footer -->
<footer class="h-10 border-t border-slate-900 bg-slate-950 flex items-center justify-center text-[10px] text-slate-500 flex-shrink-0 z-50">
© 2026 BotCMS Platform. Released under the MIT Open Source License.
</footer>
</body>
</html>