# CI4 Dev Docs Docs pages live in `app/Views/docs/`. Shared layout partials live in `app/Views/docs/partials/`. ## File list | File | Purpose | |------------------------|----------------------------------------------------------------| | `docs_header.php` | ``, CSS tokens, top bar, opens `
` | | `docs_sidebar.php` | Left nav sidebar — edit the `$nav` array to add/remove pages | | `docs_main_open.php` | Opens `
`, renders breadcrumb, h1, meta row | | `docs_main_close.php` | Closes `
`, prev/next nav, right TOC, closes layout div | | `docs_footer.php` | Global footer bar, hljs init, closes `` | | `installation.php` | **Sample content-only page** — copy this as the template for every new page | --- ## How to use With `DocsController`, each docs page should contain **content only**. Do not render `docs_header`, `docs_sidebar`, `docs_main_open`, `docs_main_close`, or `docs_footer` inside individual page views, because the controller already wraps the page with the full layout. Each docs page should look like this: ```php

...

Section One

...

``` --- ## Adding a new page to the sidebar Open `app/Controllers/Docs/DocsController.php` and update: 1. The `$nav` array to add a sidebar link. 2. The `$pages` array to map the slug to its view and metadata. Example: ```php ['id' => 'my-new-page', 'label' => 'My New Page', 'url' => 'docs/my-new-page'], 'my-new-page' => [ 'view' => 'docs/my-new-page', 'title' => 'My New Page', 'breadcrumb' => 'Getting Started', 'last_updated' => 'May 2026', 'author' => 'Core Team', 'read_time' => '3 min read', 'toc' => [ ['label' => 'Section One', 'href' => '#section-one'], ], 'prev' => null, 'next' => null, ], ``` Then create `app/Views/docs/my-new-page.php` by copying `installation.php` and updating only the page content. --- ## Available content components All CSS is in `docs_header.php`. These classes are ready to use in any page: | Class / Element | What it renders | |---------------------|----------------------------------------| | `

` `

` | Section headings (id required for TOC scroll) | | `.callout.info` | Blue info box | | `.callout.warning` | Amber warning box | | `.callout.danger` | Red danger box | | `.callout.success` | Green success box | | `
    ` | Numbered step list with connector lines | | `` | Styled data / param / API tables | | `.badge.get/post/put/delete` | HTTP method badges | | `.badge.req` / `.badge.opt` | Required / Optional param badges | | `.param-name` | Monospace blue param name in tables | | `.code-header` + `
    ` | Dark code block with filename header |

---

## Route setup (CI4)

Add a catch-all route in `app/Config/Routes.php`:

```php
$routes->get('docs',          'Docs\DocsController::index');
$routes->get('docs/(:segment)', 'Docs\DocsController::page/$1');
```

Then in `DocsController`, let the controller render the content view and wrap it:

```php
public function page(string $slug): string
{
    $config = $this->getPageConfig($slug);
    $content = $this->renderContentView($config['view'], $config);

    return $this->renderDocPage($config, $content);
}
```