Documentation improvements

Author: codedmonkey

src/Controller/Dashboard/DashboardRootController.php

@@ -7,6 +7,7 @@
 use CodedMonkey\Dirigent\Doctrine\Entity\Credentials;
 use CodedMonkey\Dirigent\Doctrine\Entity\Registry;
 use CodedMonkey\Dirigent\Doctrine\Entity\User;
+use CodedMonkey\Dirigent\Doctrine\Repository\PackageRepository;
 use EasyCorp\Bundle\EasyAdminBundle\Config\Assets;
 use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
 use EasyCorp\Bundle\EasyAdminBundle\Config\MenuItem;
@@ -24,6 +25,7 @@
 class DashboardRootController extends AbstractDashboardController
 {
     public function __construct(
+        private readonly PackageRepository $packageRepository,
         #[Autowire(param: 'dirigent.title')]
         private readonly string $title,
         #[Autowire(param: 'dirigent.security.registration_enabled')]
@@ -102,7 +104,11 @@ public function configureUserMenu(UserInterface $user): UserMenu
     #[IsGrantedAccess]
     public function index(): Response
     {
-        return $this->render('dashboard/index.html.twig');
+        $packageCount = $this->packageRepository->count();
+
+        return $this->render('dashboard/index.html.twig', [
+            'packageCount' => $packageCount,
+        ]);
     }
 
     #[Route('/dashboard/docs/usage/{page}', name: 'dashboard_usage_docs')]

templates/dashboard/credentials/js_assets.html.twig

@@ -4,8 +4,10 @@
     const passwordFieldRow = document.querySelector('[data-credentials-field="password"]');
     const tokenFieldRow = document.querySelector('[data-credentials-field="token"]');
 
-    let currentType = document.querySelector('[name="Credentials[type]"]:checked').value ?? null;
-    updateCredentialsFields(currentType);
+    const initalType = document.querySelector('[name="Credentials[type]"]:checked')?.value ?? null;
+    if (initalType) {
+      updateCredentialsFields(initalType);
+    }
 
     document.querySelectorAll('[name="Credentials[type]"]').forEach(input => {
       input.addEventListener('change', () => {

templates/dashboard/docs/usage/composer-authentication.md.twig

@@ -2,6 +2,13 @@
 title: Authenticate with Composer
 ---
 
+Authenticating for this registry in your Composer installation is easy and can be achieved for all projects on your
+system by running the following command in your terminal:
+
 ```shell
  composer config --global --auth http-basic.{{ app.request.getHost() }} {{ app.user.username }} <access-token>
 ```
+
+To learn more about how Composer handles authentication, please read the [Composer documentation][composer-doc-auth].
+
+[composer-doc-auth]: https://getcomposer.org/doc/articles/authentication-for-private-packages.md

templates/dashboard/docs/usage/composer-project.md.twig

@@ -89,4 +89,4 @@ composer config disable-tls true
 }
 ```
 
-**Disabling TLS is dangerous and brings risks.**
+**Disabling TLS brings risks and can be dangerous.**

templates/dashboard/index.html.twig

@@ -7,7 +7,22 @@
 {% endblock %}
 
 {% block page_content %}
-  <p>Welcome to <a href="https://github.com/codedmonkey/dirigent">Dirigent</a>, a free and open package registry for <a href="https://getcomposer.org">Composer</a>.</p>
+  <p>Welcome to <a href="https://dirigent.dev">Dirigent</a>, a free and open package registry for <a href="https://getcomposer.org">Composer</a>.</p>
+
+  <div class="mb-3">
+    <div class="row">
+      <div class="col-md-4">
+        <div class="card mb-2">
+          <div class="card-body">
+            <div>{{ 'Packages'|trans }}</div>
+            <div class="display-6">{{ packageCount|number_format(thousandSep: ' ') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <hr>
 
   <h2 class="h5">Use this registry in a Composer project</h2>
 
@@ -44,5 +59,9 @@
 
   <h2 class="h5">Setup authentication</h2>
 
-  <p>Store the authentication credentials in the global Composer `auth.json` with the command below.</p>
+  <p>Store the authentication credentials in the global Composer <code>auth.json</code> with the command below.</p>
+
+  <div class="bg-body-secondary px-3 py-2 mb-3 rounded">
+    <pre class="m-0"><code>composer config --global http-basic.{{ app.request.getHost() }} {{ app.user.username }} &lt;access-token&gt;</code></pre>
+  </div>
 {% endblock %}