feat: add Browser viewport fallback to v1

app/Models/Plugin.php

@@ -345,6 +345,7 @@ class Plugin extends Model
             if ($standalone) {
                 return view('trmnl-layouts.single', [
                     'colorDepth' => $device?->deviceModel?->color_depth,
+                    'deviceVariant' => $device?->deviceModel?->name ?? 'og',
                     'slot' => $renderedContent,
                 ])->render();
             }
@@ -356,6 +357,7 @@ class Plugin extends Model
             if ($standalone) {
                 return view('trmnl-layouts.single', [
                     'colorDepth' => $device?->deviceModel?->color_depth,
+                    'deviceVariant' => $device?->deviceModel?->name ?? 'og',
                     'slot' => view($this->render_markup_view, [
                         'size' => $size,
                         'data' => $this->data_payload,

app/Services/ImageGenerationService.php

@@ -44,13 +44,12 @@ class ImageGenerationService
             $browserStage->html($markup);
 
             if (config('app.puppeteer_window_size_strategy') === 'v1') {
+                // default behaviour for Framework v1
+                $browserStage->useDefaultDimensions();
+            } else {
                 $browserStage
                     ->width($imageSettings['width'])
                     ->height($imageSettings['height']);
-            } else {
-                $browserStage
-                    ->width(800)
-                    ->height(480);
             }
 
             if (config('app.puppeteer_wait_for_network_idle')) {

resources/views/trmnl-layouts/single.blade.php

@@ -1,7 +1,20 @@
 @props([
+    'noBleed' => false,
+    'darkMode' => false,
+    'deviceVariant' => 'og',
+    'deviceOrientation' => null,
     'colorDepth' => '1bit',
+    'scaleLevel' => null,
 ])
 
-<x-trmnl::screen colorDepth="{{$colorDepth}}">
+@if(config('app.puppeteer_window_size_strategy') === 'v1')
-    {!! $slot !!}
+    <x-trmnl::screen colorDepth="{{$colorDepth}}">
-</x-trmnl::screen>
+        {!! $slot !!}
+    </x-trmnl::screen>
+@else
+    <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}"
+                     device-variant="{{$deviceVariant}}" device-orientation="{{$deviceOrientation}}"
+                     scale-level="{{$scaleLevel}}">
+        {!! $slot !!}
+    </x-trmnl::screen>
+@endif