Update

app/Http/Controllers/FrontMemeController.php

@@ -7,8 +7,11 @@
 use Artesaos\SEOTools\Facades\OpenGraph;
 use Artesaos\SEOTools\Facades\TwitterCard;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response as HttpResponse;
 use Inertia\Inertia;
 use Inertia\Response;
+use Intervention\Image\ImageManager;
+use Intervention\Image\Drivers\Imagick\Driver;
 
 class FrontMemeController extends Controller
 {
@@ -164,18 +167,232 @@ public function show(string $slug): Response
         OpenGraph::setTitle($title);
         OpenGraph::setDescription($description);
         OpenGraph::setUrl(request()->url());
-        //OpenGraph::addProperty('type', 'video.other');
-        //OpenGraph::addImage($meme->webp_url);
+        OpenGraph::addProperty('type', 'video.other');
+        OpenGraph::addImage(route('memes.og', $meme->ids));
 
         // Twitter Card
         TwitterCard::setTitle($title);
         TwitterCard::setDescription($description);
-        //TwitterCard::setType('summary_large_image');
-        //TwitterCard::setImage($meme->webp_url);
+        TwitterCard::setType('summary_large_image');
+        TwitterCard::setImage(route('memes.og', $meme->ids));
 
         return Inertia::render('memes/show', [
             'meme' => $meme,
             'relatedMemes' => $relatedMemes,
         ]);
     }
+
+    public function generateOG(string $ids): HttpResponse
+    {
+        // Decode the hashids to get the meme media ID
+        $memeId = hashids_decode($ids);
+
+        if (!$memeId) {
+            abort(404, 'Meme not found');
+        }
+
+        // Get the meme media
+        $meme = MemeMedia::where('id', $memeId)
+            ->where('is_enabled', true)
+            ->first();
+
+        if (!$meme) {
+            abort(404, 'Meme not found');
+        }
+
+        // Load the template image
+        $templatePath = public_path('memefast-og-template.jpg');
+
+        if (!file_exists($templatePath)) {
+            abort(404, 'Template image not found');
+        }
+
+        // Create ImageManager with Imagick driver
+        $manager = new ImageManager(new Driver());
+
+        // Load the template image
+        $image = $manager->read($templatePath);
+
+        // Ensure RGB colorspace for proper color rendering
+        $imagick = $image->core()->native();
+        $imagick->setColorspace(\Imagick::COLORSPACE_SRGB);
+
+        // Load the meme image from URL
+        if ($meme->webp_url) {
+            try {
+                // Use cURL to get the image content with proper headers
+                $ch = curl_init();
+                curl_setopt($ch, CURLOPT_URL, $meme->webp_url);
+                curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+                curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+                curl_setopt($ch, CURLOPT_TIMEOUT, 10);
+                curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (compatible; MemeFast OG Generator)');
+
+                $imageContent = curl_exec($ch);
+                $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+                curl_close($ch);
+
+                if ($imageContent !== false && $httpCode === 200) {
+                    $memeImage = $manager->read($imageContent);
+
+                    // Image positioning variables
+                    $imageX = 0; // Horizontal offset
+                    $imageY = 100; // Vertical offset
+
+                    // Resize meme image to 1.5x the template height while maintaining aspect ratio
+                    $memeImage = $memeImage->scale(height: 1350);
+
+                    // Place the meme image vertically centered, horizontally right-justified
+                    $image->place($memeImage, 'center-right', $imageX, $imageY);
+                } else {
+                    $image->text('HTTP Error: ' . $httpCode, 200, 200, function ($font) {
+                        $font->size(20);
+                        $font->color('#ff0000');
+                        $font->align('center');
+                    });
+                }
+            } catch (\Exception $e) {
+                // If meme image fails to load, add debug text
+                $image->text('Image failed to load: ' . $e->getMessage(), 200, 200, function ($font) {
+                    $font->size(20);
+                    $font->color('#ff0000');
+                    $font->align('center');
+                });
+            }
+        }
+
+        // Add the meme name as text with proper kerning and line wrapping
+        if ($meme->name) {
+            $fontPath = resource_path('fonts/Geist/Geist-Bold.ttf');
+
+            // Fallback to built-in font if TTF not found
+            if (file_exists($fontPath)) {
+                // Use native Imagick for text kerning with line wrapping
+                $imagick = $image->core()->native(); // Get the native Imagick object
+
+                // First draw the green outline
+                $drawOutline = new \ImagickDraw();
+                $drawOutline->setFillColor('#00FF00');
+                $drawOutline->setFont($fontPath);
+                $drawOutline->setFontSize(70);
+                $drawOutline->setTextAlignment(\Imagick::ALIGN_LEFT);
+                $drawOutline->setStrokeColor('#00FF00');
+                $drawOutline->setStrokeWidth(20); // Thicker stroke for outline effect
+
+                // Then draw the black text on top
+                $draw = new \ImagickDraw();
+                $draw->setFillColor('#000000');
+                $draw->setFont($fontPath);
+                $draw->setFontSize(70);
+                //$draw->setTextKerning(-4); // Negative for tighter kerning
+                $draw->setTextAlignment(\Imagick::ALIGN_LEFT);
+
+                // Text wrapping - 70% of canvas width (1600 * 0.7 = 1120px)
+                $maxWidth = 1120;
+                $text = "Make meme videos instantly with " . $meme->name . " meme with";
+
+                // Split text into words
+                $words = explode(' ', $text);
+                $lines = [];
+                $currentLine = '';
+
+                foreach ($words as $word) {
+                    $testLine = $currentLine . ($currentLine ? ' ' : '') . $word;
+
+                    // Get text metrics for the test line
+                    $metrics = $imagick->queryFontMetrics($draw, $testLine);
+
+                    if ($metrics['textWidth'] > $maxWidth && $currentLine !== '') {
+                        // Line is too long, save current line and start new one
+                        $lines[] = $currentLine;
+                        $currentLine = $word;
+                    } else {
+                        $currentLine = $testLine;
+                    }
+                }
+
+                // Add the last line
+                if ($currentLine) {
+                    $lines[] = $currentLine;
+                }
+
+                $lines[] .= "MEMEFAST";
+
+                // Text positioning variables
+                $textX = 100; // Horizontal position
+                $textY = 320; // Base vertical position
+
+                // Calculate line height and starting Y position
+                $lineHeight = 75; // Tighter line spacing
+                $totalHeight = count($lines) * $lineHeight;
+                $startY = $textY - ($totalHeight / 2); // Center vertically
+
+                // Draw each line (left-aligned) - first the outline, then the text
+                foreach ($lines as $index => $line) {
+                    $y = $startY + ($index * $lineHeight);
+
+                    // Check if this is the MEMEFA.ST line
+                    if ($line === "MEMEFAST") {
+
+                        $extraSizing = 40;
+
+                        // Use Bungee font for MEMEFA.ST
+                        $bungeeFontPath = resource_path('fonts/Bungee/Bungee-Regular.ttf');
+
+                        if (file_exists($bungeeFontPath)) {
+                            // Create separate draw objects for Bungee font
+                            $bungeeOutline = new \ImagickDraw();
+                            $bungeeOutline->setFillColor('#00FF00');
+                            $bungeeOutline->setFont($bungeeFontPath);
+                            $bungeeOutline->setFontSize(70);
+                            $bungeeOutline->setTextAlignment(\Imagick::ALIGN_LEFT);
+                            $bungeeOutline->setStrokeColor('#00FF00');
+                            $bungeeOutline->setStrokeWidth(20);
+
+                            $bungeeText = new \ImagickDraw();
+                            $bungeeText->setFillColor('#000000');
+                            $bungeeText->setFont($bungeeFontPath);
+                            $bungeeText->setFontSize(70 + $extraSizing);
+                            $bungeeText->setTextAlignment(\Imagick::ALIGN_LEFT);
+
+                            // Draw with Bungee font
+                            $bungeeOutline->annotation($textX, $y + $extraSizing, $line);
+                            $bungeeText->annotation($textX, $y + $extraSizing, $line);
+
+                            $imagick->drawImage($bungeeOutline);
+                            $imagick->drawImage($bungeeText);
+                        } else {
+                            // Fallback to regular font
+                            $drawOutline->annotation($textX, $y + $extraSizing, $line);
+                            $draw->annotation($textX, $y + $extraSizing, $line);
+                        }
+                    } else {
+                        // Use regular font for other lines
+                        $drawOutline->annotation($textX, $y, $line);
+                        $draw->annotation($textX, $y, $line);
+                    }
+                }
+
+                // Apply the drawing to the image (only for non-Bungee lines)
+                $imagick->drawImage($drawOutline); // Draw outline first
+                $imagick->drawImage($draw); // Draw text on top
+            } else {
+                $image->text($meme->name, 400, 450, function ($font) {
+                    $font->size(80);
+                    $font->color('#000000');
+                    $font->align('center');
+                    $font->valign('middle');
+                });
+            }
+        }
+
+
+        // Generate the image and return as response
+        $encodedImage = $image->toJpeg(100);
+
+        return response($encodedImage, 200, [
+            'Content-Type' => 'image/jpeg',
+            'Cache-Control' => 'public, max-age=3600',
+        ]);
+    }
 }

composer.json

@@ -12,6 +12,7 @@
         "php": "^8.2",
         "artesaos/seotools": "^1.3",
         "inertiajs/inertia-laravel": "^2.0",
+        "intervention/image": "^3.11",
         "jenssegers/imagehash": "^0.10.0",
         "kalnoy/nestedset": "^6.0",
         "laravel/cashier": "^15.7",

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": "dbe9b4012c67d84fc322f58ddb9af791",
+    "content-hash": "90bdf51ac5b2a4e868e9bb012981fc26",
     "packages": [
         {
             "name": "artesaos/seotools",

resources/fonts/Geist/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

resources/fonts/Geist/README.txt

@@ -0,0 +1,71 @@
+Geist Variable Font
+===================
+
+This download contains Geist as both a variable font and static fonts.
+
+Geist is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Geist/Geist-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Geist:
+  Geist/static/Geist-Thin.ttf
+  Geist/static/Geist-ExtraLight.ttf
+  Geist/static/Geist-Light.ttf
+  Geist/static/Geist-Regular.ttf
+  Geist/static/Geist-Medium.ttf
+  Geist/static/Geist-SemiBold.ttf
+  Geist/static/Geist-Bold.ttf
+  Geist/static/Geist-ExtraBold.ttf
+  Geist/static/Geist-Black.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

routes/web.php

@@ -91,6 +91,10 @@
     ->middleware('cacheResponse')
     ->name('memes.show');
 
+Route::get('/meme/og/{ids}.jpg', [FrontMemeController::class, 'generateOG'])
+    ->middleware('cacheResponse')
+    ->name('memes.og');
+
 // Admin Tools with Basic Auth
 Route::prefix('duplicates')->middleware([BasicAuthMiddleware::class])->group(function () {
     Route::get('/', [AdminDuplicateController::class, 'index'])->name('admin.duplicates');