Routing Overview
There's two ways to get Prodigy running in your app – dynamic routing and manually adding the <livewire:prodigy-page /> tag to your page. This site uses both – the home page is a dynamic route, and the documentation pages use the livewire tag.
If you'd like to see an example, this site's code is available on Github.
Dynamic routing
The easiest way to use Prodigy is with dynamic routes. Adding the wildcard at the very end of your web.php routes file will pass all routes to Prodigy to see if there's a matching page. If it can't find a matching page, it'll still 404.
// All other routes here...
Route::get('{wildcard}', ProdigyPage::class)->where('wildcard', '.*');Manual routing
You can also manually place the <livewire:prodigy-page /> on the page in a more specific way. This is super useful for pages that need a sidebar but still benefit from visual page building. These documentation pages use manual routing to place the documentation content next to the sidebars.
// Other routes
Route::get('/docs/{wildcard}', DocsSection::class);<!-- More template removed for brevity -->
<div class="hidden lg:block bg-gradient-to-l from-gray-100 to-white lg:w-1/5 md:fixed z-20 inset-0 top-[5rem] right-auto pt-8 px-8 overflow-y-auto">
<x-docs.sidebar></x-docs.sidebar>
</div>
<div class="overflow-y-scroll lg:w-4/5 xl:w-3/5 lg:px-12 lg:pt-12 xl:px-20 lg:ml-auto xl:mx-auto">
<main class="max-w-2xl mx-auto relative z-20 prose lg:text-lg max-w-none" listen-for-intersection-of-titles>
<livewire:prodigy-page/>
<livewire:prodigy-block block_title="Global Footer" />
</main>
</div>
<div class="hidden hide-when-editing xl:block bg-gradient-to-r from-gray-100 to-white lg:w-1/5 md:fixed z-20 inset-0 top-[5rem] left-auto pt-8 px-8 overflow-y-auto">
<x-docs.on-this-page/>
</div>