A documentation section has been added to the site.

app/application/resources/site/js/_choose-documentation-version.js

@@ -0,0 +1,8 @@
+let blockDocumentationVersion = document.querySelector('#documentation-version');
+blockDocumentationVersion.querySelector('.documentation-version__button').addEventListener('click', (e) => {
+    if (blockDocumentationVersion.classList.contains('active')) {
+        blockDocumentationVersion.classList.remove('active');
+    } else {
+        blockDocumentationVersion.classList.add('active');
+    }
+});

app/application/resources/site/js/app.js

@@ -1,2 +1,3 @@
 import './_menu.js';
 import './_choose-language.js';
+import './_choose-documentation-version.js';

app/application/resources/site/scss/app.scss

@@ -43,7 +43,8 @@ body {
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
         "logo menu"
-        "language language";
+        "language language"
+        "documentation-version documentation-version";
     padding: 8px;
     box-shadow: 0 3px 9px rgba(0,0,0,0.48);
     background: #eee;
@@ -195,6 +196,77 @@ body.mobile-menu-open {
         border-radius: 5px 5px 0 0;
     }
 }
+
+#documentation-version {
+    grid-area: documentation-version;
+    margin-top: 10px;
+
+    .status {
+        font-size: 13px;
+        color: #444;
+        display: block;
+    }
+    .status.status__100 {
+        color: #0a6f4d;
+    }
+    .status.status__50 {
+        color: #0a53be;
+    }
+    .status.status__0 {
+        color: #6c0e22;
+    }
+}
+.documentation-version__block {
+    position: relative;
+}
+.documentation-version__button {
+    border: 0;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
+    background: #ccc;
+    width: 100%;
+    cursor: pointer;
+    font-size: 18px;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    color: #000;
+}
+.documentation-version__button__str {
+    position: absolute;
+    top: calc(50% - 8px);
+    right: 10px;
+}
+.documentation-version__list {
+    background: #ddd;
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    list-style: none;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
+    padding: 10px 0;
+    margin: 0;
+    border-radius: 0 0 5px 5px;
+    z-index: 100;
+
+    a {
+        text-decoration: none;
+        color: #000;
+        font-size: 16px;
+        display: block;
+        padding: 10px 20px;
+    }
+}
+#documentation-version.active {
+    .documentation-version__list {
+        display: block;
+    }
+    .documentation-version__button {
+        border-radius: 5px 5px 0 0;
+    }
+}
+
 .main-container {
     display: flex;
     flex-direction: column;
@@ -225,6 +297,15 @@ body.mobile-menu-open {
         font-weight: bold;
     }
 }
+.alert-version {
+    padding: 20px;
+    margin-top: 20px;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
+    font-size: 16px;
+}
+.alert-version.version-status-not-supported {
+    color: #6c0e22;
+}
 
 @media (min-width: 1000px) {
     body {
@@ -232,8 +313,8 @@ body.mobile-menu-open {
         margin: 0 auto;
     }
     .header {
-        grid-template-areas: "logo language";
-        grid-template-columns: 1fr 200px;
+        grid-template-areas: "logo documentation-version language";
+        grid-template-columns: 1fr 200px 200px;
     }
     .header_logo {
         width: 150px;
@@ -250,6 +331,7 @@ body.mobile-menu-open {
     .main-container {
         flex-direction: row;
     }
+
     #language {
         margin-right: 10px;
     }
@@ -259,6 +341,17 @@ body.mobile-menu-open {
     .language__button {
         padding: 7px 10px 7px 0;
     }
+
+    #documentation-version {
+        margin-right: 10px;
+    }
+    .documentation-version__block {
+        margin-top: 0px;
+    }
+    .documentation-version__button {
+        padding: 7px 10px 7px 0;
+    }
+
     #menu {
         flex: none;
         background: #eee;

app/application/resources/views/components/site/choose-version.blade.php

@@ -0,0 +1,18 @@
+<div id="documentation-version">
+    <div class="documentation-version__block">
+        <button class="documentation-version__button" type="button" aria-label="{{ $websiteTranslations->translate('site.Choose version') }}">
+            <svg width="16" height="16" data-slot="icon" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path clip-rule="evenodd" fill-rule="evenodd" d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm1 5.75A.75.75 0 0 1 5.75 7h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 5 7.75Zm0 3a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"></path>
+            </svg>
+            {{ $version->title }} <span class="status status__{{ $version->status->value }}">({{ $version->status->getTitle($websiteTranslations) }})</span>
+            <svg width="16" height="16" class="documentation-version__button__str" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
+            </svg>
+        </button>
+        <ul class="documentation-version__list">
+            @foreach($versions as $v)
+                <li><a href="{{ \App\Enums\Site\ProjectSection::DocumentationVersion->url($project, $websiteTranslations->getLanguage(), ['version' => $v->slug]) }}">{{ $v->title }} <span class="status status__{{ $v->status->value }}">({{ $v->status->getTitle($websiteTranslations) }})</span></a></li>
+            @endforeach
+        </ul>
+    </div>
+</div>

app/application/resources/views/components/site/documentation-version.blade.php

@@ -0,0 +1,10 @@
+@if($version->status === \App\Enums\DocumentationVersionStatus::NotSupported)
+    <div class="alert-version version-status-not-supported">
+        {{ $websiteTranslations->translate('site.alert-status-not-supported') }}
+    </div>
+@endif
+@if($version->status === \App\Enums\DocumentationVersionStatus::FutureVersion)
+    <div class="alert-version version-status-future">
+        {{ $websiteTranslations->translate('site.alert-status-future') }}
+    </div>
+@endif

app/application/resources/views/layout/site.blade.php

@@ -30,6 +30,9 @@
                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                 </svg>
             </button>
+            @if($attributes->has('documentationVersion'))
+                <x-site.choose-version :version="$attributes->get('documentationVersion')" :websiteTranslations="$websiteTranslations" :project="$project" :user="auth()->user()" />
+            @endif
             <x-site.choose-language :websiteTranslations="$websiteTranslations" :project="$project" />
         </header>
         <div class="main-container">
@@ -37,11 +40,15 @@
                 <div class="menu__title">{{ __('site.Menu') }}</div>
                 <ul>
                     <li><a href="{{ \App\Enums\Site\ProjectSection::Home->url($project, $websiteTranslations->getLanguage()) }}" @class(['active' => request()->route()->named(['home', 'language.home', 'project.home', 'project.language.home'])])>{{ $websiteTranslations->translate('site.About project') }}</a></li>
+                    <li><a href="{{ \App\Enums\Site\ProjectSection::Documentation->url($project, $websiteTranslations->getLanguage()) }}" @class(['active' => request()->route()->named(['documentation', 'documentation.home'])])>{{ $websiteTranslations->translate('site.Documentation') }}</a></li>
                     <li><a href="{{ \App\Enums\Site\ProjectSection::Feedback->url($project, $websiteTranslations->getLanguage()) }}" @class(['active' => request()->route()->named(['feedback', 'language.feedback', 'project.feedback', 'project.language.feedback'])])>{{ $websiteTranslations->translate('site.Feedback') }}</a></li>
                 </ul>
             </nav>
             <div class="section-container">
                 <div class="content">
+                    @if($attributes->has('documentationVersion'))
+                        <x-site.documentation-version :websiteTranslations="$websiteTranslations" :version="$attributes->get('documentationVersion')" />
+                    @endif
                     <h1>@yield('h1', '')</h1>
 
                     @includeWhen($errors->any(), 'layout.site._errors', ['errors' => $errors->all()])

app/application/resources/views/site/projects/documentation/category.blade.php

@@ -0,0 +1,13 @@
+@section('meta_title', $category->content?->title . ' - ' . $project->name . ' ' . $version->title)
+@section('h1', $category->content?->title)
+
+<x-site.layout :project="$project" :websiteTranslations="$websiteTranslations" :documentationVersion="$version">
+    @foreach($categories as $category)
+        @continue(! $category->content?->title)
+        <p><a href="{{ \App\Enums\Site\ProjectSection::DocumentationCategory->url($project, $websiteTranslations->getLanguage(), ['version' => $version->slug, 'slug' => $category->slug]) }}">{{ $category->content->title }}</a></p>
+    @endforeach
+    @foreach($documentations as $documentation)
+        @continue(! $documentation->content?->title)
+        <p><a href="{{ \App\Enums\Site\ProjectSection::DocumentationView->url($project, $websiteTranslations->getLanguage(), ['version' => $version->slug, 'slug' => $documentation->slug]) }}">{{ $documentation->content->title }}</a></p>
+    @endforeach
+</x-site.layout>

app/application/resources/views/site/projects/documentation/index.blade.php

@@ -0,0 +1,13 @@
+@section('meta_title', $websiteTranslations->translate('site.Documentation') . ' - ' . $project->name . ' ' . $version->title)
+@section('h1', $websiteTranslations->translate('site.Documentation'))
+
+<x-site.layout :project="$project" :websiteTranslations="$websiteTranslations" :documentationVersion="$version">
+    @foreach($categories as $category)
+        @continue(! $category->content?->title)
+        <p><a href="{{ \App\Enums\Site\ProjectSection::DocumentationCategory->url($project, $websiteTranslations->getLanguage(), ['version' => $version->slug, 'slug' => $category->slug]) }}">{{ $category->content->title }}</a></p>
+    @endforeach
+    @foreach($documentations as $documentation)
+        @continue(! $documentation->content?->title)
+        <p><a href="{{ \App\Enums\Site\ProjectSection::DocumentationView->url($project, $websiteTranslations->getLanguage(), ['version' => $version->slug, 'slug' => $documentation->slug]) }}">{{ $documentation->content->title }}</a></p>
+    @endforeach
+</x-site.layout>

app/application/resources/views/site/projects/documentation/no-default-version.blade.php

@@ -0,0 +1,6 @@
+@section('meta_title', $websiteTranslations->translate('site.Documentation not created'))
+@section('h1', $websiteTranslations->translate('site.Documentation not created'))
+
+<x-site.layout :project="$project" :websiteTranslations="$websiteTranslations">
+
+</x-site.layout>

app/application/resources/views/site/projects/documentation/view.blade.php

@@ -0,0 +1,9 @@
+@section('meta_title', $documentation->content?->title . ' - ' . $project->name . ' ' . $version->title)
+@section('h1', $documentation->content?->title)
+
+<x-site.layout :project="$project" :websiteTranslations="$websiteTranslations" :documentationVersion="$version">
+    <div class="line-numbers">{!! $documentation->content->content !!}</div>
+    @push('scripts')
+        @include('_prism')
+    @endpush
+</x-site.layout>