Merge pull request #3 from tonysm/tm/tweaks

Tweaks

app/Http/Controllers/OrganizationController.php

@@ -9,32 +9,32 @@
 
 class OrganizationController extends Controller
 {
-    public function index()
+    public function index(Technology $technology)
     {
         return view('organizations.index', [
-            'organizations' => $this->organizations(),
+            'filterTechnology' => $technology->slug,
+            'organizations' => $this->organizations($technology),
             'technologies' => $this->technologies(),
-            'filterTechnology' => null,
         ]);
     }
 
-    public function indexByTechnology(string $filterTechnology)
+    public function show(Organization $organization)
     {
-        return view('organizations.index', [
-            'organizations' => $this->organizations($filterTechnology),
-            'technologies' => $this->technologies(),
-            'filterTechnology' => $filterTechnology,
+        return view('organizations.show', [
+            'organization' => $organization,
         ]);
     }
 
-    private function organizations(?string $filterTechnology = null)
+    private function organizations(Technology $technology)
     {
-        return Cache::remember('orgs-list-filter[' . $filterTechnology . ']', 3600, function () use ($filterTechnology) {
-            return Organization::when(! is_null($filterTechnology), function (Builder $query) use ($filterTechnology) {
-                $query->whereHas('technologies', function (Builder $query) use ($filterTechnology) {
-                    $query->where('slug', $filterTechnology);
-                });
-            })->with('sites') // @todo: Do a subquery for just the first site aaron francis style?
+        return Cache::remember('orgs-list-filter[' . $technology->slug . ']', 3600, function () use ($technology) {
+            return Organization::query()
+                ->when($technology->exists, function (Builder $query) use ($technology) {
+                    $query->whereHas('technologies', function (Builder $query) use ($technology) {
+                        $query->where('id', $technology->id);
+                    });
+                })
+                ->with('sites') // @todo: Do a subquery for just the first site aaron francis style?
                 ->orderBy('featured_at', 'desc')
                 ->orderBy('created_at', 'desc')
                 ->get();

app/Http/Controllers/SuggestOrganizationController.php → app/Http/Controllers/SuggestionsController.php

@@ -3,12 +3,20 @@
 namespace App\Http\Controllers;
 
 use App\Models\SuggestedOrganization;
+use App\Models\Technology;
 use App\Notifications\OrganizationSuggested;
 use Illuminate\Support\Facades\Notification;
 
-class SuggestOrganizationController extends Controller
+class SuggestionsController extends Controller
 {
-    public function __invoke()
+    public function create()
+    {
+        return view('suggestions.create', [
+            'technologies' => Technology::orderBy('name')->get(),
+        ]);
+    }
+
+    public function store()
     {
         $input = request()->validate([
             'name' => 'required',

docker-compose.yml

@@ -0,0 +1,55 @@
+services:
+    laravel.test:
+        build:
+            context: ./vendor/laravel/sail/runtimes/8.3
+            dockerfile: Dockerfile
+            args:
+                WWWGROUP: '${WWWGROUP}'
+        image: sail-8.3/app
+        extra_hosts:
+            - 'host.docker.internal:host-gateway'
+        ports:
+            - '${APP_PORT:-80}:80'
+            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
+        environment:
+            WWWUSER: '${WWWUSER}'
+            LARAVEL_SAIL: 1
+            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
+            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
+            IGNITION_LOCAL_SITES_PATH: '${PWD}'
+        volumes:
+            - '.:/var/www/html'
+        networks:
+            - sail
+        depends_on:
+            - mysql
+    mysql:
+        image: 'mysql/mysql-server:8.0'
+        ports:
+            - '${FORWARD_DB_PORT:-3306}:3306'
+        environment:
+            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
+            MYSQL_ROOT_HOST: '%'
+            MYSQL_DATABASE: '${DB_DATABASE}'
+            MYSQL_USER: '${DB_USERNAME}'
+            MYSQL_PASSWORD: '${DB_PASSWORD}'
+            MYSQL_ALLOW_EMPTY_PASSWORD: 1
+        volumes:
+            - 'sail-mysql:/var/lib/mysql'
+            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
+        networks:
+            - sail
+        healthcheck:
+            test:
+                - CMD
+                - mysqladmin
+                - ping
+                - '-p${DB_PASSWORD}'
+            retries: 3
+            timeout: 5s
+networks:
+    sail:
+        driver: bridge
+volumes:
+    sail-mysql:
+        driver: local

resources/css/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+@view-transition {
+    navigation: auto;
+}
+
 html {
     scroll-behavior: smooth;
 }

resources/views/components/org-in-list.blade.php

@@ -1,19 +1,5 @@
-<div
-    x-data="{
-        link: '{{ route('organizations.show', ['organization' => $org->slug]) }}',
-    }"
-    x-on:click="window.location = link"
-    onClick="window.location = this.getAttribute('link')"
-    wire:key="org-{{ $org->id }}"
-    class="group relative cursor-pointer rounded-lg bg-black/4 p-4 backdrop-blur-lg transition duration-300 hover:bg-black/13 md:p-6 md:pt-5"
->
-    <h2 class="mb-5 text-xl font-bold">
-        <img src="{{ $org->favicon }}" alt="{{ $org->name }}" class="mr-2 inline-block w-9 rounded-lg" />
-        {{ $org->name }}
-    </h2>
-    <div class="relative aspect-[600/444] overflow-hidden rounded border border-black/4">
-        <div class="absolute bottom-0 z-50 h-full w-full"></div>
-
+<div class="flex flex-col-reverse group relative cursor-pointer rounded-lg bg-black/4 p-4 backdrop-blur-lg transition duration-300 hover:bg-black/13 md:p-6 md:pt-5">
+    <div class="aspect-[600/444] overflow-hidden rounded border border-black/4">
         @if ($org->sites->count() > 0)
             <img
                 loading="lazy"
@@ -22,6 +8,7 @@ class="group relative cursor-pointer rounded-lg bg-black/4 p-4 backdrop-blur-lg
                 height="400"
                 class="aspect-[600/444] max-w-full rounded-sm drop-shadow-[0_5px_5px_rgba(0,0,0,0.5)] transition duration-300 group-hover:scale-115"
                 src="{{ $org->sites->first()->image }}"
+                style="view-transition-name: main-site-{{ $org->sites->first()->slug }}"
             />
         @else
             <div
@@ -35,8 +22,15 @@ class="bg-white bg-contain transition duration-300 group-hover:scale-115"
                     height="400"
                     class="aspect-[600/444] max-w-full rounded-sm transition duration-300 group-hover:scale-115"
                     src="{{ $org->image }}"
+                    style="view-transition-name: no-site-{{ $org->slug }}"
                 />
             </div>
         @endif
     </div>
+
+    {{-- This is at the bottom because the image wouldn't be clickable otherwise (this is flipped via flexbox)... --}}
+    <h2 class="mb-5 text-xl font-bold" style="view-transition-name: organization-{{ $org->slug }};">
+        <img loading="lazy" src="{{ $org->favicon }}" alt="{{ $org->name }}" class="mr-2 inline-block w-9 rounded-lg" />
+        <a href="{{ route('organizations.show', $org) }}">{{ $org->name }}<span class="absolute inset-0 z-10"></span></a>
+    </h2>
 </div>

resources/views/components/orgs-list.blade.php

@@ -10,7 +10,7 @@ class="{{ $filterTechnology == null ? 'border-tighten-yellow text-black hover:bo
             </a>
             @foreach ($technologies as $tech)
                 <a
-                    href="{{ route('technologies.show', $tech->slug) }}"
+                    href="{{ route('home', ['technology' => $tech->slug]) }}"
                     class="{{ $filterTechnology == $tech->slug ? 'border-tighten-yellow hover:border-tighten-yellow text-black ' : 'text-bgrey-400 hover:text-gray-600 hover:border-gray-400 ' }} border-b-2 border-black/10 px-3 py-1 transition duration-300 active:border-tighten-yellow active:text-tighten-yellow"
                 >
                     {{ $tech->name }}

resources/views/layouts/public.blade.php

@@ -25,10 +25,10 @@ class="bg-cover bg-fixed bg-no-repeat font-sans text-black antialiased"
     >
         <div class="relative flex min-h-screen flex-col items-center">
             <div class="relative w-full max-w-2xl px-6 lg:max-w-8xl">
-                <header class="pb-10 pt-4">
+                <header class="pb-10 pt-4" style="view-transition-name: main-heading;">
                     @if (in_array(request()->route()->getName(),['organizations.show']))
-                        <a href="/">
-                            <img src="/images/arrow-back.svg" alt="<-" class="inline-block" />
+                        <a href="/" class="absolute top-10 left-10">
+                            <img src="/images/arrow-back.svg" loading="lazy" alt="<-" class="inline-block" />
                             Back
                         </a>
                     @endif
@@ -37,7 +37,7 @@ class="bg-cover bg-fixed bg-no-repeat font-sans text-black antialiased"
                         href="/"
                         class="mx-auto mb-5 mt-16 flex w-72 justify-center text-5xl font-bold hover:text-black/70 md:w-auto lg:col-start-2"
                     >
-                        <h1><img src="/images/bwl-logo.svg" alt="Built With Laravel" class="w-144" /></h1>
+                        <h1><img src="/images/bwl-logo.svg" loading="lazy" alt="Built With Laravel" class="w-144" /></h1>
                     </a>
 
                     <a
@@ -47,6 +47,7 @@ class="group mx-auto mb-8 block w-48 text-xs font-bold uppercase tracking-wide t
                         <span class="mr-2 mt-1">Curated by</span>
                         <img
                             src="/images/tighten-logo.svg"
+                            loading="lazy"
                             alt="Tighten"
                             width="100"
                             height="22"

resources/views/organizations/show.blade.php

@@ -2,8 +2,9 @@
     <div class="grid-cols-3 gap-10 lg:grid xl:grid-cols-4">
         <div>
             <div class="rounded-xl bg-black/4 p-4 backdrop-blur-lg">
-                <h2 class="mb-3 text-xl font-bold">
+                <h2 class="mb-3 text-xl font-bold" style="view-transition-name: organization-{{ $organization->slug }};">
                     <img
+                        loading="lazy"
                         src="{{ $organization->favicon }}"
                         alt="{{ $organization->name }}"
                         class="mr-2 inline-block w-9 rounded-lg"
@@ -20,7 +21,7 @@ class="mr-2 inline-block w-9 rounded-lg"
                     <div class="mt-3 flex gap-2 font-mono">
                         @foreach ($organization->technologies as $tech)
                             <a
-                                href="{{ route('technologies.show', $tech) }}"
+                                href="{{ route('home', ['technology' => $tech]) }}"
                                 class="inline-flex items-center rounded bg-white px-2 text-sm font-bold uppercase text-bgrey-400 transition duration-300 hover:bg-gray-200 hover:text-gray-700"
                             >
                                 {{ $tech->name }}
@@ -56,10 +57,10 @@ class="mb-3 block rounded-xl bg-black/4 p-4 py-2 text-lg backdrop-blur-lg transi
 
         <div class="col-span-2 mt-8 md:mt-0 xl:col-span-3">
             @if ($organization->sites->count() === 0)
-                <img src="{{ $organization->image }}" class="rounded-md border" />
+                <img style="view-transition-name: no-site-{{ $organization->slug }}" loading="lazy" src="{{ $organization->image }}" class="rounded-md border" />
             @else
                 @foreach ($organization->sites as $site)
-                    <div id="site-{{ $site->slug }}" class="mb-10">
+                    <div id="site-{{ $site->slug }}" class="mb-10" style="view-transition-name: main-site-{{ $site->slug }}">
                         <div class="font-bold">{{ $site->name }}</div>
                         <div class="relative">
                             <a
@@ -69,12 +70,13 @@ class="w-38 absolute right-4 top-4 rounded-xl border bg-white px-4 shadow hover:
                             >
                                 Visit website
                                 <img
+                                    loading="lazy"
                                     src="/images/open-in-new.svg"
                                     alt="Open in new"
                                     class="ml-2 inline-block align-text-bottom"
                                 />
                             </a>
-                            <img src="{{ $site->image }}" class="rounded-md border" />
+                            <img loading="lazy" src="{{ $site->image }}" class="rounded-md border" />
                         </div>
                     </div>
                 @endforeach

routes/web.php

@@ -1,23 +1,15 @@
 <?php
 
 use App\Http\Controllers\OrganizationController;
-use App\Http\Controllers\SuggestOrganizationController;
-use App\Models\Organization;
-use App\Models\Technology;
+use App\Http\Controllers\SuggestionsController;
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', [OrganizationController::class, 'index'])->name('home');
-Route::get('orgs/{organization}', function (Organization $organization) {
-    return view('organizations.show', ['organization' => $organization]);
-})->name('organizations.show');
-Route::get('suggest', function () {
-    return view('suggestions.create', ['technologies' => Technology::orderBy('name')->get()]);
-})->name('suggestions.create');
-Route::post('suggest', SuggestOrganizationController::class)->name('suggestions.store');
+Route::resource('organizations', OrganizationController::class)->only('show');
+Route::resource('suggestions', SuggestionsController::class)->only(['create', 'store']);
 
 require __DIR__ . '/auth.php';
 
-Route::get('{technology}', [OrganizationController::class, 'indexbyTechnology'])->name('technologies.show');
+Route::get('/{technology:slug?}', [OrganizationController::class, 'index'])->name('home');
 
 /*
 

tests/Feature/OrgsListTest.php

@@ -8,7 +8,7 @@
 
     $response = $this->get(route('home'));
 
-    $response->assertStatus(200);
+    $response->assertOk();
     $response->assertSee($org->name);
 });
 
@@ -18,11 +18,11 @@
 
     $otherOrg = Organization::factory()->create();
 
-    $response = $this->get(route('technologies.show', [
+    $response = $this->get(route('home', [
         'technology' => $tech,
     ]));
 
-    $response->assertStatus(200);
+    $response->assertOk();
     $response->assertSee($org->name);
     $response->assertDontSee($otherOrg->name);
 });