Statamic 4 compatability, bugfixes

DOCUMENTATION.md

@@ -7,6 +7,8 @@ Then, publish the assets by running
 
 ```php artisan vendor:publish --provider="Arnohoogma\StatamicImageOptimizer\ServiceProvider" --force```
 
+*Please note* that before Statamic 4 was unleashed this addon was available as `4rn0/statamic-v3-image-optimizer`. Much like Statamic is now just 'Statamic', the 'v3' part was dropped from this addon's name repository, etc. It will just be known as 'Statamic ImageOptimizer' going forward.
+
 ## Configuration
 ImageOptimizer comes with a configuration file, which you can find at `config/statamic/imageoptimizer.php` after publishing the assets.  
 

resources/js/components/ImageOptimizerFieldtype.vue

@@ -8,22 +8,22 @@
 
         </div>
 
-        <div class="text-sm text-grey" v-else>
+        <div v-else>
 
-	    	<div v-if="asset.values.imageoptimizer">
+	    	<div class="help-block" v-if="asset.values.imageoptimizer">
 
 	    		{{ __('imageoptimizer::cp.original') }}: {{ getBytes(asset.values.imageoptimizer.original_size) }}<br>
 	    		{{ __('imageoptimizer::cp.reduced') }}: {{ getBytes(savings) }} ({{ percentage }}%)<br>
 
-	    		<a href="#" class="inline-block mt-1 text-red hover:underline" @click.prevent="doOptimize">{{ __('imageoptimizer::cp.optimize-again') }}</a>
+	    		<a href="#" class="inline-block mt-2 text-red-500" @click.prevent="doOptimize">{{ __('imageoptimizer::cp.optimize-again') }}</a>
 
 	    	</div>
 
-	    	<div v-else>
+	    	<div class="help-block" v-else>
 
 	    		{{ __('imageoptimizer::cp.not-optimized') }}<br>
 
-	    		<a href="#" class="inline-block mt-1 text-red hover:underline" @click.prevent="doOptimize">{{ __('imageoptimizer::cp.optimize') }}</a>
+	    		<a href="#" class="inline-block mt-2 text-red-500" @click.prevent="doOptimize">{{ __('imageoptimizer::cp.optimize') }}</a>
 
 	    	</div>
 
@@ -44,7 +44,7 @@ export default {
     created() {
 
         const portal = this.$stacks.portals[this.$stacks.portals.length - 1];
-        this.asset = portal.vm.$parent.asset;
+        this.asset = portal.data.vm.$parent.asset;
 
     },
 
@@ -67,7 +67,7 @@ export default {
 
             this.$axios.post(url, {}, this.toEleven).then(response => {
 
-                this.asset = response.data.asset;
+                this.asset = response.data.asset.data;
                 this.loading = false;
 
             })

resources/views/utility.blade.php

@@ -1,5 +1,4 @@
 @extends('statamic::layout')
-@inject('str', 'Statamic\Support\Str')
 @section('title', __('imageoptimizer::cp.title'))
 
 @section('content')
@@ -13,14 +12,14 @@
 
 <image_optimizer-utility :stats='@json($stats)'>
 
-	<div class="h-12 w-12 mr-2">
-		@cp_svg('assets')
+	<div class="h-12 w-12 mr-4">
+		@cp_svg('icons/light/assets')
 	</div>
 
 </image_optimizer-utility>
 
-<h2 class="mt-5 mb-1 font-bold text-lg">{{ __('imageoptimizer::cp.configuration') }}</h2>
-<p class="text-sm text-grey mb-2">{!! __('imageoptimizer::cp.configuration_path', ['path' => config_path('statamic/imageoptimizer.php')]) !!}</p>
+<h2 class="mt-8 mb-1 font-bold text-lg">{{ __('imageoptimizer::cp.configuration') }}</h2>
+<p class="text-sm text-grey mb-4">{!! __('imageoptimizer::cp.configuration_path', ['path' => config_path('statamic/imageoptimizer.php')]) !!}</p>
 
 <div class="card p-0">
 
@@ -45,8 +44,8 @@
 
 </div>
 
-<h3 class="mt-5 mb-1 font-bold text-lg">{{ __('imageoptimizer::cp.optimizers') }}</h3>
-<p class="text-sm text-grey mb-2">{!! __('imageoptimizer::cp.documentation', ['url' => 'https://statamic.com/addons/4rn0/imageoptimizer-v3/docs']) !!}</p>
+<h3 class="mt-8 mb-1 font-bold text-lg">{{ __('imageoptimizer::cp.optimizers') }}</h3>
+<p class="text-sm text-grey mb-4">{!! __('imageoptimizer::cp.documentation', ['url' => 'https://statamic.com/addons/4rn0/imageoptimizer-v3/docs']) !!}</p>
 
 <div class="card p-0">
 
@@ -75,7 +74,7 @@
 					@if (!$optimizer['found'])
 					<span class="little-dot bg-red mr-1"></span>
 					<code class="text-grey" title="{!! __('imageoptimizer::cp.optimizer_no', ['path' => $optimizer['found']]) !!}">{{ $optimizer['executable'] }}</code>
-					@elseif ($str->contains($optimizer['found'], '4rn0'))
+					@elseif (str_contains($optimizer['found'], '4rn0'))
 					<span class="little-dot bg-orange mr-1"></span>
 					<code class="text-grey" title="{!! __('imageoptimizer::cp.optimizer_maybe', ['path' => $optimizer['found']]) !!}">{{ $optimizer['executable'] }}</code>
 					@else

src/ServiceProvider.php

@@ -49,11 +49,9 @@ class ServiceProvider extends AddonServiceProvider
 
     ];
 
-    public function boot()
+    public function bootAddon()
     {
 
-        parent::boot();
-
 		$this->mergeConfigFrom(__DIR__ . '/../config/config.php', 'statamic.imageoptimizer');
         $this->loadTranslationsFrom(__DIR__ . '/../resources/lang', 'imageoptimizer');
         $this->loadViewsFrom(__DIR__ . '/../resources/views/', 'imageoptimizer');
@@ -73,16 +71,17 @@ public function boot()
 	private function createUtility()
 	{
 
-		$utility = Utility::make('ImageOptimizer')->title('ImageOptimizer')->navTitle('Optimizer')->description( __('imageoptimizer::cp.description') )->icon('assets');
+        Utility::extend(function() {
 
-        $utility->routes(function($router) {
-
-            $router->get('/', [ImageOptimizerController::class, 'index'])->middleware('statamic.cp.authenticated')->name('index');
-            $router->post('/{encoded_asset}', [ImageOptimizerController::class, 'optimize'])->middleware('statamic.cp.authenticated')->name('optimize');
+            $utility = Utility::register('ImageOptimizer')->title('ImageOptimizer')->navTitle('Optimizer')->description( __('imageoptimizer::cp.description') )->icon('assets');
 
-        });
+            $utility->routes(function($router) {
+
+                $router->get('/', [ImageOptimizerController::class, 'index'])->middleware('statamic.cp.authenticated')->name('index');
+                $router->post('/{encoded_asset}', [ImageOptimizerController::class, 'optimize'])->middleware('statamic.cp.authenticated')->name('optimize');
 
-        $utility->register();
+            });
+        });
 
 	}