Documentation System

Laratic ships with a full documentation system powered by Blade, a reusable docs layout, a searchable sidebar, and a versioned changelog. This page explains how everything fits together so you can extend the docs with your own topics.

Docs Layout & Breadcrumbs

All documentation pages use the shared <x-layouts.docs /> layout. This layout renders the docs sidebar, the top navbar (including breadcrumbs and search), and the main content area styled with prose typography.

To create a new documentation page, place a Blade file in resources/views/pages/docs/en and wrap its content with the docs layout: 


<x-layouts.docs :breadcrumbs="[['label' => 'Basics', 'url' => '#'], ['label' => 'My Topic', 'url' => '#']]">
    <h1>My Topic</h1>
    <p>Page content goes here...</p>
</x-layouts.docs>

The $breadcrumbs prop is passed into the docs layout and forwarded to the top navbar via <x-blocks.docs.top-navbar />. You can customize the breadcrumb trail per page by adjusting the array passed to :breadcrumbs.

Docs Search

The documentation includes a lightweight client-side search powered by the resources/views/components/blocks/docs/search.blade.php component. This component renders the search input and builds a small index of all links inside the docs sidebar.

Key details about the search behavior:

  • Index source — The script scans the sidebar navigation (nav[aria-label="sidebar navigation"]) and collects all links under /docs/.
  • Search index — Each link text becomes a searchable title in window.searchIndex, which the Alpine.js search component uses.
  • Usage — The search component is included in the docs top navbar, so it is available on every documentation page automatically.

If you add new topics to the sidebar, they are automatically included in the search index without any additional configuration.

Changelog

The changelog page lives at resources/views/pages/docs/en/changelog.blade.php and documents notable changes to Laratic. Each release is rendered using the reusable <x-blocks.docs.changelog-section /> component.

Each changelog section accepts the following props and slots:

  • title — Typically the release date (for example, now()->format('F j, Y')).
  • version — The semantic version (for example, 1.2.0).
  • github — Optional URL to the release or pull request on GitHub.
  • <x-slot:new> — New features and additions.
  • <x-slot:changed> — Changes and improvements.
  • <x-slot:fixed> — Bug fixes and patches.

Example usage from the changelog page:

<x-blocks.docs.changelog-section
    :title="now()->subDays(7)->format('F j, Y')"
    version="1.2.0"
    github="#">
    <x-slot:new>
        <ul class="space-y-1.5 text-sm">
            <li>Enhanced admin dashboard with new revenue analytics widget</li>
            <li>Real-time notification system with toast alerts</li>
        </ul>
    </x-slot:new>
    <x-slot:changed>...</x-slot:changed>
    <x-slot:fixed>...</x-slot:fixed>
</x-blocks.docs.changelog-section>

To add a new release, simply append another <x-blocks.docs.changelog-section /> block to the changelog page with the appropriate date, version, and content.

Changelog Translations

The documentation system supports localized versions of each docs page via App\Http\Controllers\DocumentationController. When a user switches the application locale, the controller will first try to load a locale-specific view and then fall back to English if needed.

For the changelog page, the fallback order is:

  1. resources/views/pages/docs/<locale>/changelog.blade.php
  2. resources/views/pages/docs/en/changelog.blade.php
  3. resources/views/pages/docs/changelog.blade.php (not used by default but supported)

To add a translated changelog in another language (for example, Spanish):

  1. Create the directory resources/views/pages/docs/es if it does not exist.
  2. Copy the English changelog: resources/views/pages/docs/en/changelog.blade.php → resources/views/pages/docs/es/changelog.blade.php.
  3. Translate the headings, descriptions, and list items inside the new file while keeping the component structure the same.
  4. Ensure your app locale is set to es (via the language selector or configuration) to see the translated version.

This approach keeps the Blade structure identical across languages while allowing you to fully translate the content for each release.

Summary

You can use the docs layout for any topic by creating a Blade file under resources/views/pages/docs/en, passing breadcrumbs into <x-layouts.docs />, and linking to it from the docs sidebar. The search component and changelog system work automatically once your page is included in the sidebar navigation.