Switch to livewire views

app/Livewire/Bookmark.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Livewire;
+
+use App\Models\Bookmark as ModelsBookmark;
+use Livewire\Component;
+
+class Bookmark extends Component
+{
+    public ModelsBookmark $bookmark;
+
+    public function save(ModelsBookmark $bookmark)
+    {
+        $this->bookmark = $bookmark;
+    }
+}

app/Providers/RouteServiceProvider.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
+
+class RouteServiceProvider extends ServiceProvider
+{
+    protected $namespace = 'App\\Http\\Controllers';
+}

app/Providers/ViewServiceProvider.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\Facades\Blade;
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\ServiceProvider;
+
+class ViewServiceProvider extends ServiceProvider
+{
+    /**
+     * Register services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap services.
+     */
+    public function boot(): void
+    {
+        // https://laravel-tricks.com/tricks/a-new-at-action-directive
+        Blade::if(
+            'action', function ($action) {
+                if (Route::getCurrentRoute()->getActionMethod() == $action) {
+                    return $action;
+                };
+            }
+        );
+    }
+}

app/View/Components/Bookmark.php

@@ -1,28 +0,0 @@
-<?php
-
-namespace App\View\Components;
-
-use App\Models\Bookmark as ModelsBookmark;
-use Closure;
-use Illuminate\Contracts\View\View;
-use Illuminate\View\Component;
-
-class Bookmark extends Component
-{
-    /**
-     * Create a new component instance.
-     */
-    public function __construct(
-        public ModelsBookmark $bookmark
-    ) {
-        //
-    }
-
-    /**
-     * Get the view / contents that represent the component.
-     */
-    public function render(): View|Closure|string
-    {
-        return view('components.bookmark');
-    }
-}

bootstrap/providers.php

@@ -2,4 +2,6 @@
 
 return [
     App\Providers\AppServiceProvider::class,
+    App\Providers\RouteServiceProvider::class,
+    App\Providers\ViewServiceProvider::class,
 ];

composer.json

@@ -10,7 +10,8 @@
     "require": {
         "php": "^8.2",
         "laravel/framework": "^11.0",
-        "laravel/tinker": "^2.9"
+        "laravel/tinker": "^2.9",
+        "livewire/livewire": "^3.5"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "2077c394f6aa7d63f49d97c8c4f2764c",
+    "content-hash": "0e9662e53ae62503767a15f5dc9e9a72",
     "packages": [
         {
             "name": "brick/math",
@@ -1815,6 +1815,82 @@
             ],
             "time": "2024-01-28T23:22:08+00:00"
         },
+        {
+            "name": "livewire/livewire",
+            "version": "v3.5.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/livewire/livewire.git",
+                "reference": "72e900825c560f0e4e620185b26c5441a8914435"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/livewire/livewire/zipball/72e900825c560f0e4e620185b26c5441a8914435",
+                "reference": "72e900825c560f0e4e620185b26c5441a8914435",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "^10.0|^11.0",
+                "illuminate/routing": "^10.0|^11.0",
+                "illuminate/support": "^10.0|^11.0",
+                "illuminate/validation": "^10.0|^11.0",
+                "league/mime-type-detection": "^1.9",
+                "php": "^8.1",
+                "symfony/console": "^6.0|^7.0",
+                "symfony/http-kernel": "^6.2|^7.0"
+            },
+            "require-dev": {
+                "calebporzio/sushi": "^2.1",
+                "laravel/framework": "^10.15.0|^11.0",
+                "laravel/prompts": "^0.1.6",
+                "mockery/mockery": "^1.3.1",
+                "orchestra/testbench": "^8.21.0|^9.0",
+                "orchestra/testbench-dusk": "^8.24|^9.1",
+                "phpunit/phpunit": "^10.4",
+                "psy/psysh": "^0.11.22|^0.12"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Livewire\\LivewireServiceProvider"
+                    ],
+                    "aliases": {
+                        "Livewire": "Livewire\\Livewire"
+                    }
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "Livewire\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Caleb Porzio",
+                    "email": "calebporzio@gmail.com"
+                }
+            ],
+            "description": "A front-end framework for Laravel.",
+            "support": {
+                "issues": "https://github.com/livewire/livewire/issues",
+                "source": "https://github.com/livewire/livewire/tree/v3.5.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/livewire",
+                    "type": "github"
+                }
+            ],
+            "time": "2024-05-21T13:39:04+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.6.0",

resources/sass/app.scss

@@ -17,6 +17,19 @@ body {
 @import 'components/bookmark';
 @import 'components/pagination';
 
+a {
+    &,
+    &:active,
+    &:visited {
+        color: #fff;
+    }
+
+    &:hover {
+        color: #88f;
+    }
+}
+
+
 h1 {
     color: #FFF3B0;
     text-align: center;

resources/sass/components/_bookmark.scss

@@ -4,14 +4,29 @@
     gap: 0px 0px;
     grid-template-areas:
     "title title"
-    "href href"
     "description description"
+    "href href"
     "date tags";
 
     margin-bottom: 1em;
     padding: 0;
     border: 2px solid #540B0E;
     background-color: #FFF3B0;
+    border-radius: 7px;
+
+    overflow: hidden;
+
+    a {
+        &,
+        &:active,
+        &:visited {
+            color: #9E2A2B;
+        }
+
+        &:hover {
+            color: #000;
+        }
+    }
 
     &-title {
         margin: 0;

resources/views/bookmarks/index.blade.php

@@ -5,7 +5,7 @@
 {{ $bookmarks->links() }}
 
 @foreach ($bookmarks as $bookmark)
-    <x-bookmark :bookmark="$bookmark" />
+    <livewire:bookmark :bookmark="$bookmark" />
 @endforeach
 
 {{ $bookmarks->links() }}

resources/views/bookmarks/show.blade.php

@@ -1,5 +1,8 @@
 @extends('layouts.app')
 
 @section('content')
-    <x-bookmark :bookmark="$bookmark" />
+    <p>
+        <a href="{{ action('BookmarkController@index') }}">&larr; Back</a>
+    </p>
+    <livewire:bookmark :bookmark="$bookmark" />
 @endsection

resources/views/livewire/bookmark.blade.php

@@ -1,5 +1,10 @@
 <div class="bookmark">
-    <p class="bookmark-title">{{ $bookmark->title }}</p>
+    <p class="bookmark-title">
+        {{ $bookmark->title }}
+        @action('index')
+            <a href="/bookmarks/{{ $bookmark->id }}">#</a>
+        @endaction
+    </p>
     <p class="bookmark-href"><a href="{{ $bookmark->href }}">{{ $bookmark->href }}</a></p>
     @if (!empty($bookmark->description))
         <div class="bookmark-description">

routes/web.php

@@ -3,5 +3,9 @@
 use App\Http\Controllers\BookmarkController;
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', [BookmarkController::class, 'index']);
+Route::get(
-Route::resource('bookmarks', BookmarkController::class)->except(['index']);
+    '/', function () {
+        return redirect()->action([BookmarkController::class, 'index']);
+    }
+);
+Route::resource('bookmarks', BookmarkController::class);