Add a blade component for the front page blocks.

A blade component for the front page blocks minimizes the boilerplate
for adding new blocks. It also makes it easier for a service
to override the front view and add their own blocks.

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 - **BREAKING**: Requires PHP 8.
+- Refactor front page views to use blade components.
 
 ## [0.9.1] - 2021-04-09
 

resources/views/components/front-block.blade.php

@@ -0,0 +1,28 @@
+<div {{ $attributes->merge(['class' => 'bg-white rounded p-4 mb-4']) }}>
+  <div class="flex flex-row mb-2">
+    <div class="flex-1 font-bold tracking-wide uppercase">{{ $title }}</div>
+    @if ($url)
+    <div class="rounded bg-gray-100 border px-2">
+      <a class="text-blue-600" href="{{ $url }}">{{ $url }}</a>
+
+      <span
+        class="bg-secondary ml-1 px-1 text-xs text-white rounded cursor-default"
+        title="Only {{ $httpMethod }} method allowed"
+      >{{ $httpMethod }}</span>
+
+      <span
+        class="bg-purple-500 ml-1 px-1 text-xs text-white rounded cursor-default"
+        title="Returns {{ $responseType }}"
+      >{{ $responseType }}</span>
+
+      @if ($requiresToken)
+        <span
+          class="bg-purple-500 ml-1 px-1 text-xs text-white rounded cursor-default"
+          title="Requires token authentication"
+        >token</span>
+      @endif
+    </div>
+    @endif
+  </div>
+  {{ $slot }}
+</div>

resources/views/front-details.blade.php

@@ -1,5 +1,4 @@
-<div class="bg-white rounded p-4 mb-4">
-  <div class="font-bold mb-2 tracking-wide uppercase">Details</div>
+<x-butler-service::front-block title="Details">
   <table class="w-full">
     <tr>
       <td class="w-1/3">PHP</td>
@@ -18,4 +17,4 @@
       <td class="font-bold">{{ $service['timezone'] }}</td>
     </tr>
   </table>
-</div>
+</x-butler-service::front-block>

resources/views/front-graphql.blade.php

@@ -1,19 +1,10 @@
-<div class="bg-white rounded p-4 mb-4">
-  <div class="flex flex-row mb-2">
-    <div class="flex-1 font-bold tracking-wide uppercase">GraphQL</div>
-    <div class="rounded bg-gray-100 border px-2">
-      <a class="text-blue-600" href="{{ route('graphql') }}">{{ route('graphql', [], false) }}</a>
-      <span
-        class="bg-secondary ml-1 px-1 text-xs text-white rounded cursor-default"
-        title="Only POST method allowed"
-      >POST</span>
-      <span
-        class="bg-purple-500 ml-1 px-1 text-xs text-white rounded cursor-default"
-        title="Requires token authentication"
-      >token</span>
-    </div>
-  </div>
-
+<x-butler-service::front-block
+  title="GraphQL"
+  http-method="POST"
+  response-type="JSON"
+  :requires-token="true"
+  :url="route('graphql', [], false)"
+>
   <div class="font-bold my-3 tracking-wide uppercase text-sm">Authentication</div>
   <div class="xl:w-3/4">
     The only way to authenticate against this service is to
@@ -25,7 +16,7 @@ class="bg-secondary rounded p-1 font-mono text-sm text-white whitespace-no-wrap"
 
   <div class="font-bold my-3 tracking-wide uppercase text-sm">Schema</div>
   <pre><code class="graphql rounded">{{ \File::get(config('butler.graphql.schema')) }}</code></pre>
-</div>
+</x-butler-service::front-block>
 
 @push('head')
 <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/github.min.css" rel="stylesheet">

resources/views/front-health-checks.blade.php

@@ -1,19 +1,4 @@
-<div class="bg-white rounded p-4 mb-4">
-  <div class="flex flex-row mb-2">
-    <div class="flex-1 font-bold tracking-wide uppercase">Health Checks</div>
-    <div class="rounded bg-gray-100 border px-2">
-      <a class="text-blue-600" href="{{ route('health') }}">{{ route('health', [], false) }}</a>
-      <span
-        class="bg-secondary ml-1 px-1 text-xs text-white rounded cursor-default"
-        title="Only GET method allowed"
-      >GET</span>
-      <span
-        class="bg-purple-500 ml-1 px-1 text-xs text-white rounded cursor-default"
-        title="Returns JSON"
-      >JSON</span>
-    </div>
-  </div>
-
+<x-butler-service::front-block title="Health checks" http-method="GET" response-type="JSON" :url="route('health', [], false)">
   @forelse($checks->groupBy('group')->sortKeys() as $group => $checks)
     <div class="font-bold my-3 text-sm tracking-wide uppercase">{{ Str::title($group) }}</div>
     @foreach($checks as $check)
@@ -27,4 +12,4 @@ class="bg-purple-500 ml-1 px-1 text-xs text-white rounded cursor-default"
       No health checks found.
     </div>
   @endforelse
-</div>
+</x-butler-service::front-block>

src/ServiceProvider.php

@@ -8,6 +8,7 @@
 use Illuminate\Bus\Dispatcher as BaseBusDispatcher;
 use Illuminate\Queue\Events\JobProcessed;
 use Illuminate\Queue\Events\JobProcessing;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Gate;
 use Illuminate\Support\Facades\Queue;
 use Illuminate\Support\ServiceProvider as BaseServiceProvider;
@@ -56,6 +57,8 @@ public function boot()
         $this->listenForJobProcessEvents();
 
         $this->defineGateAbilities();
+
+        Blade::componentNamespace('Butler\\Service\\View\\Components', 'butler-service');
     }
 
     protected function mergeApplicationConfig()

src/View/Components/FrontBlock.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace Butler\Service\View\Components;
+
+use Illuminate\View\Component;
+
+class FrontBlock extends Component
+{
+    public function __construct(
+        public string $title,
+        public ?string $httpMethod = null,
+        public ?string $responseType = null,
+        public ?string $url = null,
+        public bool $requiresToken = false,
+    ) {
+    }
+
+    public function render()
+    {
+        return view('service::components.front-block');
+    }
+}