nhance/app/Views/docs/installation.php

<?php
/**
 * Installation - content only
 * app/Views/docs/installation.php
 *
 * The controller already renders the header, sidebar, main wrapper, TOC,
 * prev/next navigation, and footer.
 *
 * Only keep page-specific content in this file.
 */
?>

<p>
  This guide walks you through setting up the project on a local development machine.
  For production deployment, see the <a href="<?= base_url('docs/deployment') ?>">Deployment</a> page.
</p>

<div class="callout info">
  <span>ℹ️</span>
  <div>
    <strong>Before you begin</strong>
    Make sure PHP 8.1+, Composer 2.x, and MySQL 5.7+ are installed on your machine.
  </div>
</div>

<!-- REQUIREMENTS -->
<h2 id="requirements">Requirements</h2>

<table>
  <thead>
    <tr><th>Dependency</th><th>Version</th><th>Notes</th></tr>
  </thead>
  <tbody>
    <tr><td><code>PHP</code></td><td>8.1+</td><td>Required by CI 4.4+</td></tr>
    <tr><td><code>MySQL</code></td><td>5.7 / 8.0</td><td>Primary database</td></tr>
    <tr><td><code>Composer</code></td><td>2.x</td><td>Dependency management</td></tr>
    <tr><td><code>Node.js</code></td><td>18+ (optional)</td><td>Only needed for asset pipeline</td></tr>
  </tbody>
</table>

<!-- STEPS -->
<h2 id="steps">Steps</h2>

<ol class="steps">
  <li>
    <strong id="clone">Clone the repository</strong>
    <div class="code-header">
      <span class="code-filename">terminal</span>
      <span class="code-lang">bash</span>
    </div>
    <pre><code class="language-bash">git clone https://github.com/your-org/myapp.git
cd myapp</code></pre>
  </li>

  <li>
    <strong>Install PHP dependencies</strong>
    <pre><code class="language-bash">composer install</code></pre>
  </li>

  <li>
    <strong>Copy the environment file</strong>
    <pre><code class="language-bash">cp env .env</code></pre>
    <p>Edit <code>.env</code> with your local database credentials and base URL.</p>
  </li>

  <li>
    <strong id="migrate">Run migrations and seeders</strong>
    <pre><code class="language-bash">php spark migrate
php spark db:seed MainSeeder</code></pre>
  </li>

  <li>
    <strong>Start the dev server</strong>
    <pre><code class="language-bash">php spark serve</code></pre>
    <p>App will be available at <code>http://localhost:8080</code>.</p>
  </li>
</ol>

<div class="callout warning">
  <span>⚠️</span>
  <div>
    <strong>Use 127.0.0.1, not localhost</strong>
    MySQL on some setups resolves <code>localhost</code> to a socket path instead of TCP.
    Use <code>127.0.0.1</code> in <code>.env</code> to avoid connection errors.
  </div>
</div>

<!-- CONFIGURATION -->
<h2 id="configuration">Configuration</h2>

<p>Key variables to configure in <code>.env</code>:</p>

<table>
  <thead>
    <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="param-name">CI_ENVIRONMENT</span>
        <span class="badge req">required</span>
      </td>
      <td><code>production</code></td>
      <td>Set to <code>development</code> locally to enable error display.</td>
    </tr>
    <tr>
      <td>
        <span class="param-name">database.default.hostname</span>
        <span class="badge req">required</span>
      </td>
      <td>—</td>
      <td>MySQL hostname. Use <code>127.0.0.1</code>.</td>
    </tr>
    <tr>
      <td>
        <span class="param-name">app.baseURL</span>
        <span class="badge req">required</span>
      </td>
      <td>—</td>
      <td>Full URL with trailing slash. e.g. <code>http://localhost:8080/</code></td>
    </tr>
    <tr>
      <td>
        <span class="param-name">JWT_SECRET</span>
        <span class="badge opt">optional</span>
      </td>
      <td>—</td>
      <td>Only needed if JWT API auth is enabled.</td>
    </tr>
  </tbody>
</table>

<div class="callout danger">
  <span>🚫</span>
  <div>
    <strong>Never commit <code>.env</code></strong>
    The file is in <code>.gitignore</code>. Use your CI/CD secrets manager for production values.
  </div>
</div>

<!-- SAMPLE FLOWCHART -->
<h2 id="sample-flowchart">Sample flowchart</h2>

<p>
  Use Mermaid blocks when a setup, request path, or job pipeline is easier to explain
  visually. Any docs page can now render a diagram by adding a
  <code>&lt;div class="mermaid"&gt;</code> block like the example below.
</p>

<div class="callout success">
  <span>i</span>
  <div>
    <strong>Reusable in other docs pages</strong>
    Copy this section structure into any docs view and replace the diagram text with
    your own flow.
  </div>
</div>

<div class="mermaid-wrapper">
  <div class="mermaid">
flowchart TD
    A[Clone repository] --> B[Install Composer dependencies]
    B --> C[Copy env to .env]
    C --> D[Update database and app settings]
    D --> E[Run migrations and seeders]
    E --> F[Start local server]
    F --> G[Open docs or app in browser]
  </div>
</div>

<pre><code class="language-html">&lt;div class="mermaid"&gt;
flowchart TD
    A[Start] --&gt; B[Process]
    B --&gt; C[Done]
&lt;/div&gt;</code></pre>