feat: htmx boost on links (#6)

monicahq · Dec 15, 2023 · de3c816 · de3c816
1 parent b9eb5f4
commit de3c816
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 73 deletions.
diff --git a/app/Http/Controllers/FemaleNameController.php b/app/Http/Controllers/FemaleNameController.php
@@ -3,10 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Helpers\StringHelper;
-use App\Http\ViewModels\Names\AllNamesViewModel;
 use App\Http\ViewModels\Names\FemaleNamesViewModel;
-use App\Http\ViewModels\Names\MaleNamesViewModel;
-use App\Http\ViewModels\Names\NameViewModel;
 use App\Models\Name;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\Paginator;
@@ -29,7 +26,7 @@ public function index(Request $request): View
             return $requestedPage;
         });
 
-        $namesPagination = Cache::remember('all-names-female-page-'.$requestedPage, 604800, function () {
+        $namesPagination = Cache::remember('all-names-female-page-' . $requestedPage, 604800, function () {
             return Name::where('name', '!=', '_PRENOMS_RARES')
                 ->where('gender', 'female')
                 ->orderBy('name', 'asc')
@@ -67,7 +64,7 @@ public function letter(Request $request): View
             return $requestedPage;
         });
 
-        $namesPagination = Cache::remember('female-letter-'.$requestedLetter.'-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
+        $namesPagination = Cache::remember('female-letter-' . $requestedLetter . '-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
             return Name::where('name', '!=', '_PRENOMS_RARES')
                 ->where('gender', 'female')
                 ->where('name', 'like', $requestedLetter . '%')

diff --git a/app/Http/Controllers/MaleNameController.php b/app/Http/Controllers/MaleNameController.php
@@ -3,9 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Helpers\StringHelper;
-use App\Http\ViewModels\Names\AllNamesViewModel;
 use App\Http\ViewModels\Names\MaleNamesViewModel;
-use App\Http\ViewModels\Names\NameViewModel;
 use App\Models\Name;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\Paginator;
@@ -28,7 +26,7 @@ public function index(Request $request): View
             return $requestedPage;
         });
 
-        $namesPagination = Cache::remember('all-names-male-page-'.$requestedPage, 604800, function () {
+        $namesPagination = Cache::remember('all-names-male-page-' . $requestedPage, 604800, function () {
             return Name::where('name', '!=', '_PRENOMS_RARES')
                 ->where('gender', 'male')
                 ->orderBy('name', 'asc')
@@ -66,7 +64,7 @@ public function letter(Request $request): View
             return $requestedPage;
         });
 
-        $namesPagination = Cache::remember('male-letter-'.$requestedLetter.'-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
+        $namesPagination = Cache::remember('male-letter-' . $requestedLetter . '-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
             return Name::where('name', '!=', '_PRENOMS_RARES')
                 ->where('gender', 'male')
                 ->where('name', 'like', $requestedLetter . '%')

diff --git a/app/Http/Controllers/NameController.php b/app/Http/Controllers/NameController.php
@@ -27,7 +27,7 @@ public function index(Request $request): View
             return $requestedPage;
         });
 
-        $namesPagination = Cache::remember('all-names-page-'.$requestedPage, 604800, function () {
+        $namesPagination = Cache::remember('all-names-page-' . $requestedPage, 604800, function () {
             return Name::where('name', '!=', '_PRENOMS_RARES')
                 ->orderBy('name', 'asc')
                 ->paginate(40);
@@ -51,6 +51,25 @@ public function index(Request $request): View
         ]);
     }
 
+    public function show(Request $request): View
+    {
+        $requestedName = $request->attributes->get('name');
+
+        $name = Cache::remember('name-' . $requestedName->name, 604800, function () use ($requestedName) {
+            return NameViewModel::details($requestedName);
+        });
+
+        $relatedNames = Cache::remember('related-names-' . $requestedName->name, 60, function () use ($requestedName) {
+            return NameViewModel::relatedNames($requestedName);
+        });
+
+        return view('names.show', [
+            'name' => $name,
+            'relatedNames' => $relatedNames,
+            'jsonLdSchema' => NameViewModel::jsonLdSchema($requestedName),
+        ]);
+    }
+
     public function letter(Request $request): View
     {
         $requestedLetter = $request->attributes->get('letter');
@@ -64,7 +83,7 @@ public function letter(Request $request): View
             return $requestedPage;
         });
 
-        $namesPagination = Cache::remember('letter-'.$requestedLetter.'-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
+        $namesPagination = Cache::remember('letter-' . $requestedLetter . '-page-' . $requestedPage, 604800, function () use ($requestedLetter) {
             return Name::where('name', '!=', '_PRENOMS_RARES')
                 ->where('name', 'like', $requestedLetter . '%')
                 ->orderBy('name', 'asc')
@@ -89,23 +108,4 @@ public function letter(Request $request): View
             'activeLetter' => Str::ucfirst($requestedLetter),
         ]);
     }
-
-    public function show(Request $request): View
-    {
-        $requestedName = $request->attributes->get('name');
-
-        $name = Cache::remember('name-' . $requestedName->name, 604800, function () use ($requestedName) {
-            return NameViewModel::details($requestedName);
-        });
-
-        $relatedNames = Cache::remember('related-names-' . $requestedName->name, 60, function () use ($requestedName) {
-            return NameViewModel::relatedNames($requestedName);
-        });
-
-        return view('names.show', [
-            'name' => $name,
-            'relatedNames' => $relatedNames,
-            'jsonLdSchema' => NameViewModel::jsonLdSchema($requestedName),
-        ]);
-    }
 }
diff --git a/app/Http/Middleware/CheckLetter.php b/app/Http/Middleware/CheckLetter.php
@@ -2,11 +2,8 @@
 
 namespace App\Http\Middleware;
 
-use App\Models\Name;
 use Closure;
-use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Illuminate\Http\Request;
-use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Str;
 use Symfony\Component\HttpFoundation\Response;
 
@@ -26,7 +23,7 @@ public function handle(Request $request, Closure $next): Response
             return redirect()->route('home.index');
         }
 
-        if (!preg_match('/^[A-Za-z]+$/', $requestedLetter)) {
+        if (! preg_match('/^[A-Za-z]+$/', $requestedLetter)) {
             return redirect()->route('home.index');
         }
 

diff --git a/app/Http/ViewModels/Names/AllNamesViewModel.php b/app/Http/ViewModels/Names/AllNamesViewModel.php
@@ -2,12 +2,10 @@
 
 namespace App\Http\ViewModels\Names;
 
-use App\Helpers\StringHelper;
 use App\Models\Name;
-use Carbon\Carbon;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Str;
 use Illuminate\Support\Number;
+use Illuminate\Support\Str;
 
 class AllNamesViewModel
 {

diff --git a/app/Http/ViewModels/Names/FemaleNamesViewModel.php b/app/Http/ViewModels/Names/FemaleNamesViewModel.php
@@ -2,12 +2,10 @@
 
 namespace App\Http\ViewModels\Names;
 
-use App\Helpers\StringHelper;
 use App\Models\Name;
-use Carbon\Carbon;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Str;
 use Illuminate\Support\Number;
+use Illuminate\Support\Str;
 
 class FemaleNamesViewModel
 {
@@ -33,7 +31,7 @@ public static function index(): Collection
                 'letter' => $letter,
                 'count' => Number::format($total, locale: 'fr'),
                 'url' => route('name.fille.letter', [
-                    'letter' => Str::lcfirst($letter)
+                    'letter' => Str::lcfirst($letter),
                 ]),
             ]);
         }

diff --git a/app/Http/ViewModels/Names/MaleNamesViewModel.php b/app/Http/ViewModels/Names/MaleNamesViewModel.php
@@ -2,12 +2,10 @@
 
 namespace App\Http\ViewModels\Names;
 
-use App\Helpers\StringHelper;
 use App\Models\Name;
-use Carbon\Carbon;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Str;
 use Illuminate\Support\Number;
+use Illuminate\Support\Str;
 
 class MaleNamesViewModel
 {
@@ -33,7 +31,7 @@ public static function index(): Collection
                 'letter' => $letter,
                 'count' => Number::format($total, locale: 'fr'),
                 'url' => route('name.garcon.letter', [
-                    'letter' => Str::lcfirst($letter)
+                    'letter' => Str::lcfirst($letter),
                 ]),
             ]);
         }

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,11 +1,9 @@
 import './bootstrap';
 
 import Alpine from 'alpinejs';
-//import 'htmx.org/dist/ext/preload.js';
 import htmx from 'htmx.org';
 
 window.Alpine = Alpine;
-//window.htmx = htmx.org;
 window.htmx = htmx;
 
 Alpine.start();
diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
@@ -15,7 +15,7 @@
           <h2 class="text-xl mb-6">Parcourez le site de fiches de prénoms le plus complet. Créez des listes et faites voter vos proches. Un site qui vous respecte, sans pub, sans tracking et open source.</h2>
 
           <p>
-            <a href="{{ route('name.index') }}" class="bg-amber-300 px-4 py-2 rounded-lg font-bold shadow">Parcourir tous les prénoms</a>
+            <a hx-boost="true" href="{{ route('name.index') }}" class="bg-amber-300 px-4 py-2 rounded-lg font-bold shadow">Parcourir tous les prénoms</a>
           </p>
         </div>
 
@@ -38,7 +38,7 @@
               <div class="prose mb-5">{{ $nameSpotlight['origins'] }}</div>
 
               <p class="text-center">
-                <a href="{{ $nameSpotlight['url'] }}" class="bg-amber-300 px-4 py-2 rounded-lg font-bold shadow">Lire plus +</a>
+                <a hx-boost="true" href="{{ $nameSpotlight['url'] }}" class="bg-amber-300 px-4 py-2 rounded-lg font-bold shadow">Lire plus +</a>
               </p>
             </div>
           </div>
@@ -71,7 +71,7 @@
             @foreach ($twentyMostPopularNames['male_names'] as $name)
               <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
                 <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+                <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
               </li>
             @endforeach
           </ul>
@@ -84,7 +84,7 @@
             @foreach ($twentyMostPopularNames['female_names'] as $name)
             <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
               <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-              <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
             </li>
             @endforeach
           </ul>
@@ -97,7 +97,7 @@
             @foreach ($twentyMostPopularNames['male_names'] as $name)
             <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
               <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-              <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
             </li>
             @endforeach
           </ul>
@@ -110,7 +110,7 @@
             @foreach ($twentyMostPopularNames['random_names'] as $name)
             <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
               <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-              <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+              <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
             </li>
             @endforeach
           </ul>

diff --git a/resources/views/layouts/unlogged-navigation.blade.php b/resources/views/layouts/unlogged-navigation.blade.php
@@ -15,10 +15,10 @@
         <!-- Navigation Links -->
         <div class="hidden space-x-4 sm:ms-10 sm:flex items-center">
           <div>
-            <x-unlogged-nav-link :href="route('home.index')" :active="request()->routeIs('home.index')">
+            <x-unlogged-nav-link hx-boost="true" :href="route('home.index')" :active="request()->routeIs('home.index')">
               {{ __('Accueil') }}
             </x-unlogged-nav-link>
-            <x-unlogged-nav-link :href="route('name.index')" :active="request()->routeIs('name*')">
+            <x-unlogged-nav-link hx-boost="true" :href="route('name.index')" :active="request()->routeIs('name*')">
               {{ __('Tous les prénoms') }}
             </x-unlogged-nav-link>
           </div>

diff --git a/resources/views/names/index.blade.php b/resources/views/names/index.blade.php
@@ -8,7 +8,7 @@
       <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
         <ul class="text-xs">
           <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
-            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+            <a hx-boost="true" href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
           </li>
           <li class="inline">Tous les prénoms</li>
         </ul>
@@ -43,7 +43,7 @@
             @foreach ($names as $name)
               <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
                 <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+                <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
               </div>
             @endforeach
           </div>

diff --git a/resources/views/names/letter.blade.php b/resources/views/names/letter.blade.php
@@ -8,10 +8,10 @@
       <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
         <ul class="text-xs">
           <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
-            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+            <a hx-boost="true" href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
           </li>
           <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
-            <a href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
+            <a hx-boost="true" href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
           </li>
           <li class="inline">Tous les prénoms commençant par la lettre {{ $activeLetter }}</li>
         </ul>
@@ -34,7 +34,7 @@
           <!-- list of letters -->
           <div class="grid grid-cols-12 gap-y-2 gap-2 mb-12">
             @foreach ($letters as $letter)
-            <a href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100 {{ $activeLetter === $letter['letter'] ? 'bg-violet-100' : '' }}">
+            <a hx-boost="true" href="{{ $letter['url'] }}" class="flex flex-col rounded-lg px-2 py-1 border hover:bg-violet-100 {{ $activeLetter === $letter['letter'] ? 'bg-violet-100' : '' }}">
               <div>{{ $letter['letter'] }}</div>
               <div class="text-xs text-gray-600">{{ $letter['count'] }}</div>
             </a>
@@ -48,7 +48,7 @@
             @foreach ($names as $name)
               <div class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
                 <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+                <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
               </div>
             @endforeach
           </div>

diff --git a/resources/views/names/partials/sidebar.blade.php b/resources/views/names/partials/sidebar.blade.php
@@ -1,14 +1,14 @@
 <ul class="space-y-1">
   <li class="p-2 border {{ request()->routeIs('name.index') ? 'bg-yellow-100 border-yellow-200' : 'border-transparent' }} hover:bg-yellow-100 hover:border-yellow-200 rounded-md">
-    <a href="{{ route('name.index') }}">Tous les prénoms</a>
+    <a hx-boost="true" href="{{ route('name.index') }}">Tous les prénoms</a>
   </li>
   <li class="p-2 border {{ request()->routeIs('name.garcon.index') ? 'bg-yellow-100 border-yellow-200' : 'border-transparent' }} hover:bg-yellow-100 hover:border-yellow-200 rounded-md">
-    <a href="{{ route('name.garcon.index') }}">Prénoms masculins</a>
+    <a hx-boost="true" href="{{ route('name.garcon.index') }}">Prénoms masculins</a>
   </li>
   <li class="p-2 border {{ request()->routeIs('name.fille.index') ? 'bg-yellow-100 border-yellow-200' : 'border-transparent' }} hover:bg-yellow-100 hover:border-yellow-200 rounded-md">
-    <a href="{{ route('name.fille.index') }}">Prénoms féminins</a>
+    <a hx-boost="true" href="{{ route('name.fille.index') }}">Prénoms féminins</a>
   </li>
   <li class="p-2 border {{ request()->routeIs('name.') ? 'bg-yellow-100 border-yellow-200' : 'border-transparent' }} hover:bg-yellow-100 hover:border-yellow-200 rounded-md">
-    <a href="{{ route('name.garcon.index') }}">Prénoms mixtes</a>
+    <a hx-boost="true" href="{{ route('name.garcon.index') }}">Prénoms mixtes</a>
   </li>
 </ul>
diff --git a/resources/views/names/show.blade.php b/resources/views/names/show.blade.php
@@ -37,10 +37,10 @@
       <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 py-2">
         <ul class="text-xs">
           <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
-            <a href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
+            <a hx-boost="true" href="{{ route('home.index') }}" class="text-violet-900 underline">Accueil</a>
           </li>
           <li class="inline after:content-['>'] after:text-gray-500 after:text-xs">
-            <a href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
+            <a hx-boost="true" href="{{ route('name.index') }}" class="text-violet-900 underline">Tous les prénoms</a>
           </li>
           <li class="inline">Tous les détails du prénom {{ $name['name'] }}</li>
         </ul>
@@ -180,7 +180,7 @@
               @foreach ($relatedNames as $name)
                 <li class="flex items-center border border-transparent hover:bg-gray-50 hover:border-gray-200 px-2 py-1 rounded-sm">
                   <div class="rounded-full w-6 mr-4 ring-4 ring-violet-100">{!! $name['avatar'] !!}</div>
-                  <a href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
+                  <a hx-boost="true" href="{{ $name['url'] }}" class="text-lg">{{ $name['name'] }}</a>
                 </li>
               @endforeach
             </ul>