refactor: update sidebar component to use ViewComponent and improve layout structure

Webzine.WebApplication/Components/Sidebar/Default.cs

@@ -0,0 +1,21 @@
+using Microsoft.AspNetCore.Mvc;
+using Webzine.Repository.Contracts;
+
+namespace Webzine.Components
+{
+    public class SidebarViewComponent : ViewComponent
+    {
+        private readonly IStyleRepository styleRepository;
+
+        public SidebarViewComponent(IStyleRepository styleRepository)
+        {
+            this.styleRepository = styleRepository;
+        }
+
+        public IViewComponentResult Invoke()
+        {
+            var styles = this.styleRepository.FindAll();
+            return this.View(styles);
+        }
+    }
+}

Webzine.WebApplication/Program.cs

@@ -45,16 +45,32 @@ try
         //builder.Services.AddScoped<ICommentaireRepository, LocalCommentaireRepository>();
     }
 
+
+    // https://learn.microsoft.com/fr-fr/aspnet/core/performance/response-compression?view=aspnetcore-10.0#configuration
+    // Ajoute le service de compression des réponses HTTP pour réduire la taille des données envoyées au client et améliorer les performances de l'application.
+    builder.Services.AddResponseCompression();
+
     var app = builder.Build();
 
+    app.UseResponseCompression();
+
     // Active la possibilite de servir des fichiers statiques presents dans
     // le dossier wwwroot.
-    app.UseStaticFiles();
+    app.UseStaticFiles(new StaticFileOptions
+    {
+        OnPrepareResponse = ctx =>
+        {
+            // https://learn.microsoft.com/fr-fr/aspnet/core/fundamentals/static-files?view=aspnetcore-10.0#set-http-response-headers
+            ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000");
+        },
+    });
 
     using (var scope = app.Services.CreateScope())
     {
         var db = scope.ServiceProvider.GetRequiredService<WebzineDbContext>();
         db.Database.EnsureCreated();
+        var seeder = new SeedMockData(db);
+        seeder.SeedDB();
     }
 
     // Active le middleware permettant le routage des requetes entrantes.

Webzine.WebApplication/Views/Accueil/Index.cshtml

@@ -14,7 +14,8 @@
             <div class="col-12 col-md-3 text-center mb-3 mb-md-0">
                 <img class="img-fluid img-thumbnail"
                      src="@titre.UrlJaquette"
-                     alt="@titre.Libelle" />
+                     alt="@titre.Libelle"
+                     loading="lazy" />
             </div>
 
             <!-- Contenu -->
@@ -82,7 +83,7 @@
         {
             <div class="col-12 col-md-6 col-lg-4">
                 <div class="card h-100">
-                    <img class="card-img-top" src="@titre.UrlJaquette" alt="@titre.Album" />
+                    <img class="card-img-top" src="@titre.UrlJaquette" alt="@titre.Album"  loading="lazy" />
 
                     <div class="card-body">
                         <a asp-controller="Titre" asp-action="Details" asp-route-id="@titre.IdTitre" class="card-link">

Webzine.WebApplication/Views/Artiste/Index.cshtml

@@ -32,7 +32,8 @@
             <div class="col-md-3 mb-3">
                 <img src="@premierTitre.UrlJaquette"
                      class="img-fluid shadow-sm rounded border"
-                     alt="Pochette de @groupe.Key" />
+                     alt="Pochette de @groupe.Key"
+                     loading="lazy" />
             </div>
 
             <div class="col-md-9">

Webzine.WebApplication/Views/Recherche/Index.cshtml

@@ -53,7 +53,7 @@
                                asp-action="Details"
                                asp-route-id="@titre.IdTitre"
                                class="me-3 text-black">
-                                <img src="@titre.UrlJaquette" alt="@titre.Libelle" width="70" height="70" class="object-fit-cover" />
+                                <img src="@titre.UrlJaquette" alt="@titre.Libelle" width="70" height="70" class="object-fit-cover" loading="lazy"/>
                             </a>
 
                             <div class="justify-content-center d-flex flex-column">

Webzine.WebApplication/Views/Shared/_Layout.cshtml

@@ -9,8 +9,6 @@
     <link rel="stylesheet" href="~/css/bootstrap.min.css">
     <link rel="stylesheet" href="~/css/all.min.css">
     <link rel="stylesheet" href="~/css/app.css">
-
-    <script src="~/js/bootstrap.bundle.js" defer></script>
 </head>
 <body>
     <partial name="_Header"/>
@@ -21,10 +19,12 @@
             </main>
             @if(ViewContext.RouteData.Values["area"]?.ToString() != "Administration")
             {
-                <partial name="_Sidebar" />
+                @await Component.InvokeAsync("Sidebar")
             }
         </div>
     </div>
     <partial name="_Footer" />
 </body>
 </html>
+
+<script src="~/js/bootstrap.bundle.min.js" defer></script>

Webzine.WebApplication/Views/Shared/_Sidebar.cshtml

@@ -1,8 +1,5 @@
-@*
-    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
-*@
-@{
-}
+@model IEnumerable<Webzine.Entity.Style>
+
 <aside class="col-lg-3 d-none d-lg-block">
     <div>
         <h2>À propos</h2>
@@ -11,41 +8,14 @@
     <div>
         <h2>Styles</h2>
         <ul>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Acid house">Acid house</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Ambient">Ambient</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Deep house">Deep house</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Disco">Disco</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Downtempo">Downtempo</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Drum n bass">Drum n bass</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Dub Techno">Dub Techno</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Electro">Electro</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Electronic">Electronic</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Experimental">Experimental</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Funk">Funk</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Garage">Garage</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Hardcore">Hardcore</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Hardstyle">Hardstyle</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Hip hop">Hip hop</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="House">House</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Indie">Indie</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Industrial">Industrial</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Jazz">Jazz</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Latin">Latin</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Metal">Metal</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Minimal">Minimal</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Pop">Pop</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Progressive">Progressive</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Punk">Punk</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="R&B">R&B</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Rap">Rap</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Reggae">Reggae</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Rock">Rock</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Soul">Soul</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Techno">Techno</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Trance">Trance</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="Trip hop">Trip hop</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="UK garage">UK garage</a></li>
-            <li><a asp-controller="Titre" asp-action="Style" asp-route-id="World">World</a></li>
+            @foreach (var style in Model)
+            {
+                <li>
+                    <a asp-controller="Titre" asp-action="Style" asp-route-id="@style.Libelle">
+                        @style.Libelle
+                    </a>
+                </li>
+            }
         </ul>
     </div>
 </aside>

Webzine.WebApplication/Views/Titre/Details.cshtml

@@ -86,7 +86,9 @@
         <div class="col-md-4 text-center">
             <img src="@Model.Details.UrlJaquette"
                  class="img-fluid rounded shadow"
-                 alt="Jaquette" />
+                 alt="Jaquette"
+                 loading="lazy"
+                 fetchpriority="high" />
         </div>
     </div>
 

Webzine.WebApplication/Views/Titre/Style.cshtml

@@ -29,7 +29,7 @@
                         <a asp-action="Details"
                            asp-route-id="@titre.IdTitre"
                            class="me-3 text-black">
-                            <img src="@titre.UrlJaquette" alt="@titre.Libelle" width="70px" height="70px" class="object-fit-cover"/>
+                            <img src="@titre.UrlJaquette" alt="@titre.Libelle" width="70px" height="70px" class="object-fit-cover" loading="lazy"/>
                         </a>
 
                         <!-- Infos -->

Webzine.WebApplication/Webzine.WebApplication.csproj

@@ -18,8 +18,6 @@
 
     <ItemGroup>
       <Folder Include="Data\" />
-      <Folder Include="wwwroot\data\" />
-      <Folder Include="wwwroot\lib\" />
     </ItemGroup>
 
     <ItemGroup>