> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nullai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Example

> An example project to showcase Vistas workflow.

Project setup.

```
project-root/
├── vendor/                  # Composer dependencies
│   └── autoload.php         # Composer autoloader
├── views/                   # Views folder
│   ├── layouts/             # Layouts folder
│   │   └── main-layout.php  # Main layout file
│   └── home.php             # View file using the layout
│   └── sidebar.php          # Site sidebar
├── public                   # Public web folder
│   └── index.php            # Project main entry point
```

## Layout

First create a layout file as `views/layouts/main-layout.php`:

```php theme={null}
<?php
/**
 * views/layouts/main-layout.php
 *
 * @var $this \Nullai\Vista\Engines\ViewRenderEngine
 */
?>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Site</title>
        <?php $this->yield('scripts'); ?>
    </head>

    <body>
        <?php $this->yield('main');  ?>

        <?php $this->yield('footer'); ?>
    </body>
</html>
```

## Home Page

Next, create a file that uses the layout `views/home.php`:

```php theme={null}
<?php
/**
 * views/home.php
 *
 * @var $this \Nullai\Vista\Engines\ViewRenderEngine
 * @var $content string
 */
$this->layout('layouts.main-layout');

// Yielded by the layout's $this->yield('main')
echo $content;
?>

<?php $this->section('scripts'); ?>
<script>
    console.log(<?= json_encode(['site' => '<My Site>'], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) ?>);
</script>
<?php $this->end(); ?>

<?php $this->section('footer'); ?>
<footer>My footer</footer>
<?php $this->end(); ?>
```

## Entry Point

Now, create a View and render it from your project main entry point, such as a typical `public/index.php`:

```php theme={null}
require_once __DIR__ . '/../vendor/autoload.php';
const NULLAI_VISTA_VIEWS_FOLDER = __DIR__ . '/views';

echo new \Nullai\Vista\View('home');
```

## Includes

You can use includes within any view relative to the root views' folder. In this example, the layout file:

```php theme={null}
<?php
/**
 * views/layouts/main-layout.php
 *
 * @var $this \Nullai\Vista\Engines\ViewRenderEngine
 */
?>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Site</title>
        <?php $this->yield('scripts'); ?>
    </head>

    <body>
        <?php $this->yield('main');  ?>

        <?php $this->include('sidebar', ['menu' => ['Home', 'About', 'Contact']]); ?>

        <?php $this->yield('footer'); ?>
    </body>
</html>
```

The `include('sidebar', ['menu' => ['Home', 'About', 'Contact']])` method passes a menu variable to the `sidebar.php` view.
Inside `sidebar.php`, the `$menu` array will be accessible.

```php theme={null}
<?php
/**
 * Sidebar view file
 * @var array $menu The array of menu items passed to this view
 * @var $this \Nullai\Vista\Engines\ViewRenderEngine
 */
?>
<aside class="sidebar">
    <nav class="menu">
        <ul>
            <?php foreach ($menu ?? [] as $item): ?>
                <li>
                    <a href="#"><?= htmlspecialchars($item, ENT_QUOTES, 'UTF-8') ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
    </nav>
</aside>
```
