feat: gallery dynamic meta image (#188)

.env.example

@@ -157,3 +157,7 @@ DISCORD_INVITE_API_URL=https://discord.com/api/v9/invites/MJyWKkCJ5k?with_counts
 TELESCOPE_ENABLED=false
 
 2FA_ENABLED=true
+
+BROWSERSHOT_NODE_BINARY="/usr/local/bin/node"
+BROWSERSHOT_NPM_BINARY="/usr/local/bin/npm"
+BROWSERSHOT_TIMEOUT=60

SETUP.md

@@ -54,6 +54,19 @@ When you run `composer db:dev` command, you'll notice there are several users se
 
 You can always create a new admin user by running `php artisan make:admin` CLI command.
 
+## Dynamic Meta Images
+
+Dashbrd utilizes [`spatie/browsershot`](https://spatie.be/docs/browsershot/v2) to generate dynamic meta images for the galleries section. For this package to function properly, Node 7.6.0 or higher, along with the Puppeteer Node library, are required.
+
+You need to adjust the following .env variables according to your server configuration:
+
+```plaintext
+BROWSERSHOT_NODE_BINARY="/usr/local/bin/node"
+BROWSERSHOT_NPM_BINARY="/usr/local/bin/npm"
+```
+
+For details on driver requirements and installation, [visit here](https://spatie.be/docs/browsershot/v2/requirements).
+
 ## Reports
 
 When a model gets reported (Gallery, Collection, NFT), this creates an entry in the Admin panel to review. Depending on your needs, you may want to be notified as well to quickly respond to new reports. For this reason, it's possible to add a webhook to get reports pushed to Slack as well. You can adjust the `.env` as follows to achieve this:

app/Console/Commands/PruneMetaImages.php

@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Console\Commands;
+
+use Illuminate\Console\Command;
+use Illuminate\Support\Facades\DB;
+
+class PruneMetaImages extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'prune-meta-images';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Removes unused meta images';
+
+    /**
+     * Execute the console command.
+     */
+    public function handle(): int
+    {
+        $validImages = array_map(fn ($item) => $item->image_name, DB::select(get_query('gallery.get_meta_images')));
+        // Convert to associative array so we can use `isset`
+        $validImages = array_combine($validImages, $validImages);
+
+        $directory = storage_path(sprintf('meta/galleries/'));
+
+        if (is_dir($directory)) {
+            // Open directory
+            if ($handle = opendir($directory)) {
+                // Loop through each file in the directory
+                while (false !== ($file = readdir($handle))) {
+                    // Check if file is a PNG and not in validImages
+                    if (pathinfo($file, PATHINFO_EXTENSION) === 'png' && ! isset($validImages[$file])) {
+                        // Delete the file
+                        unlink($directory.$file);
+                    }
+                }
+
+                // Close directory handle
+                closedir($handle);
+            }
+        }
+
+        return Command::SUCCESS;
+    }
+}

app/Console/Kernel.php

@@ -18,6 +18,7 @@
 use App\Console\Commands\MarketData\FetchPriceHistory;
 use App\Console\Commands\MarketData\UpdateTokenDetails;
 use App\Console\Commands\MarketData\VerifySupportedCurrencies;
+use App\Console\Commands\PruneMetaImages;
 use App\Console\Commands\SyncSpamContracts;
 use App\Console\Commands\UpdateCollectionsFiatValue;
 use App\Console\Commands\UpdateDiscordMembers;
@@ -122,6 +123,10 @@ private function scheduleJobsForGalleries(Schedule $schedule): void
             ->withoutOverlapping()
             ->hourlyAt(2);
 
+        $schedule
+            ->command(PruneMetaImages::class)
+            ->daily();
+
         $schedule
             ->command(UpdateGalleriesValue::class)
             ->withoutOverlapping()

app/Http/Controllers/GalleryController.php

@@ -85,7 +85,7 @@ public function view(Request $request, Gallery $gallery): Response
         ])->withViewData([
             'title' => trans('metatags.galleries.view.title', ['name' => $gallery->name]),
             'description' => trans('metatags.galleries.view.description', ['name' => $gallery->name]),
-            'image' => trans('metatags.galleries.view.image'),
+            'image' => route('galleries.meta-image', ['gallery' => $gallery->slug]),
         ]);
     }
 

app/Http/Controllers/MetaImageController.php

@@ -0,0 +1,100 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Models\Gallery;
+use Illuminate\Support\Facades\Cache;
+use Spatie\Browsershot\Browsershot;
+use Spatie\Image\Image;
+use Spatie\Image\Manipulations;
+use Symfony\Component\HttpFoundation\BinaryFileResponse;
+
+class MetaImageController extends Controller
+{
+    public function __invoke(Gallery $gallery): BinaryFileResponse
+    {
+        $imagePath = $this->getImagePath($gallery);
+
+        $this->generateMetaImage($gallery, $imagePath);
+
+        return response()->file($imagePath);
+    }
+
+    private function generateMetaImage(Gallery $gallery, string $imagePath): void
+    {
+        Cache::lock($gallery->slug.'_meta_image', config('dashbrd.browsershot.timeout') + 15)->get(function () use ($gallery, $imagePath) {
+            if ($this->shouldGenerateMetaImage($imagePath)) {
+                $screenshotPath = $this->takeScreenshot($gallery);
+
+                $this->storeMetaImage($imagePath, $screenshotPath);
+            }
+        });
+    }
+
+    private function shouldGenerateMetaImage(string $imagePath): bool
+    {
+        return ! file_exists($imagePath);
+    }
+
+    private function getImagePath(Gallery $gallery): string
+    {
+        return storage_path(sprintf('meta/galleries/%s.png', $this->getImageName($gallery)));
+    }
+
+    /**
+     * IMPORTANT: Ensure this method is in sync with the query in `queries/gallery.get_meta_images.sql`
+     */
+    private function getImageName(Gallery $gallery): string
+    {
+        $parts[] = $gallery->nfts()->orderByPivot('order_index', 'asc')->limit(4)->pluck('id')->join('.');
+
+        $parts[] = $gallery->nfts()->count();
+
+        $parts[] = $gallery->name;
+
+        return $gallery->slug.'_'.md5(implode('_', $parts));
+    }
+
+    private function takeScreenshot(Gallery $gallery): string
+    {
+        $tempPath = storage_path('tmp/'.$gallery->slug.'_screenshot.png');
+
+        app(Browsershot::class)->url(route('galleries.view', ['gallery' => $gallery->slug]))
+            ->windowSize(1480, 768)
+            ->timeout(config('dashbrd.browsershot.timeout'))
+            ->waitForFunction("document.querySelectorAll('[data-testid=GalleryNfts__nft]').length > 0 && Array.from(document.querySelectorAll('[data-testid=GalleryNfts__nft]')).slice(0, 4).every(el => ! el.querySelector('[data-testid=Skeleton]'))")
+            ->setNodeBinary(config('dashbrd.browsershot.node_binary'))
+            ->setNpmBinary(config('dashbrd.browsershot.npm_binary'))
+            ->save($tempPath);
+
+        $this->resizeScreenshot($tempPath);
+
+        return $tempPath;
+    }
+
+    private function resizeScreenshot(string $screenshotPath): void
+    {
+        $image = Image::load($screenshotPath);
+
+        $image->width(1006)->crop(Manipulations::CROP_TOP, 1006, 373);
+
+        $image->save($screenshotPath);
+    }
+
+    private function storeMetaImage(string $imagePath, string $screenshotPath): string
+    {
+        $template = Image::load(resource_path('images/gallery/gallery_template.png'));
+
+        $template
+            ->watermark($screenshotPath)
+            ->watermarkPosition(Manipulations::POSITION_BOTTOM);
+
+        $template->save($imagePath);
+
+        unlink($screenshotPath);
+
+        return $imagePath;
+    }
+}

composer.json

@@ -27,6 +27,7 @@
         "monolog/monolog": "^3.4",
         "sentry/sentry-laravel": "^3.8",
         "simplito/elliptic-php": "^1.0",
+        "spatie/browsershot": "^3.59",
         "spatie/laravel-data": "^3.9",
         "spatie/laravel-medialibrary": "^10.13",
         "spatie/laravel-permission": "^5.11",

config/dashbrd.php

@@ -5,6 +5,11 @@
 use App\Enums\Period;
 
 return [
+    'browsershot' => [
+        'timeout' => (int) env('BROWSERSHOT_TIMEOUT', 60),
+        'node_binary' => env('BROWSERSHOT_NODE_BINARY', '/usr/local/bin/node'),
+        'npm_binary' => env('BROWSERSHOT_NPM_BINARY', '/usr/local/bin/npm'),
+    ],
     'contact_email' => env('CONTACT_EMAIL', 'support@ardenthq.com'),
 
     'features' => [

package.json

@@ -133,6 +133,7 @@
         "file-saver": "^2.0.5",
         "i18next": "^22.5.1",
         "lru-cache": "^10.0.1",
+        "puppeteer": "^21.4.0",
         "react-chartjs-2": "^5.2.0",
         "react-i18next": "^12.3.1",
         "react-in-viewport": "1.0.0-alpha.30",