{% set title = 'Guide' %}
{% set active_nav = '/guide' %}

{% extends '@layout/main.twig' %}

{% block content %}
<div class="container">

  <div class="row gap-xs">
    <div class="col-xs-12 col-md-8 order-xs-2 order-md-1">

      <div class="section section_offset-bottom">
        <h1>Getting Started</h1>
      </div>

      <section class="section section_offset border-top">
        <h2 class="section__title">Overview</h2>

        <div class="section__body">
          <p>{{ APP_DESCRIPTION }}.</p>

          <p>Vite's requirements and documentation you'll find on
            <a href="https://vitejs.dev/" target="_blank">its official website</a>.
          </p>

          <p>This starter is delivering with ready-to-use utils, styled components, helpers and much more. Its overview is available in
            <a href="/components">components</a>
            section.
          </p>
        </div>
      </section>

      <section class="section section_offset border-top">
        <h2 class="section__title">How to use</h2>

        <div class="section__body">
          <h4 class="font-regular">Instalation</h4>
          <div class="box">
            <pre>
<span class="color-muted"># Clone the repository</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">git clone</span> {{ APP_REPOSITORY }}.git</span>

<span class="color-muted"># Go to the folder</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">cd</span> {{ APP_NAME }}</span>

<span class="color-muted"># Install packages</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> i</span>
<span class="color-muted"># or</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> install</span>

<span class="color-muted"># Remove link to the original repository</span>
<span class="color-muted"># - if you use Windows system</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">Remove-Item</span> .git <span class="color-info">-Recurse -Force</span></span>
<span class="color-muted"># - or if you use Unix system</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">rm</span> <span class="color-info">-rf</span> .git</span>
</pre>
          </div>

          <h4 class="font-regular">Develop</h4>
          <div class="box">
            <pre>
<span class="color-muted"># Start development mode with live-server</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run dev</span>
<span class="color-muted"># or with options</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run dev <span class="color-info">--port=3000</span></span>
</pre>
          </div>

          <h4 class="font-regular">Build</h4>
          <div class="box">
            <pre>
<span class="color-muted"># Build static files for production</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run build</span>
<span class="color-muted"># or</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run prod</span>
<span class="color-muted"># or with options</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run build <span class="color-info">--base=/subdomain --outDir=/dest</span></span>

<span class="color-muted"># Start server for build preview</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run preview</span>
<span class="color-muted"># or with options</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run preview <span class="color-info">--port=3001</span></span>
</pre>
          </div>

          <h4 class="font-regular">Lint</h4>
          <div class="box">
            <pre>
<span class="color-muted"># ESLint</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:js</span>
<span class="color-muted"># or</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:js<span class="color-info">:fix</span></span>

<span class="color-muted"># StyleLint</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:css</span>
<span class="color-muted"># or</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run lint:css<span class="color-info">:fix</span></span>
</pre>
          </div>

          <h4 class="font-regular">Backend emulation</h4>
          <div class="box">
            <pre>
<span class="color-muted"># Fastify listen backend.js</span>
<span data-copy data-toast="Copied to clipboard" class="cursor-pointer"><span class="color-primary">npm</span> run backend</span>
</pre>
          </div>

        </div>
      </section>

    </div>

    <div class="col-xs-12 col-md-3 offset-md-1 align-self-start position-sticky order-xs-1 order-md-2 bg-body">
      <div class="section__navigation"></div>
    </div>
  </div>

</div>
{% endblock %}
